{"maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"keywords":["material components","material design","chips"],"dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"description":"The Material Components for the Web chips component","readme":"","repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"license":"MIT","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"versions":{"0.30.0":{"name":"@material/chips","version":"0.30.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.30.0","maintainers":[{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e99b8791cc8c03a29b4c5db5641976ffebe75563","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.30.0.tgz","integrity":"sha512-65gZ3Dphl1GchfX+5V0NWm8gkQoIKSNQFxcQ5QBrDT07c7BBGWejBOztpIi9TGOVHQkZXFy/IDVaIe6wNeip8A==","signatures":[{"sig":"MEYCIQD/VrfefD0dtAzu1LMbxbQiiznuQbjKR2ANDCrOv5cYZQIhAM3QFQLLBjQfTa7VvQU8WXqsHWPkT40+uLugART1CBLU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.29.0","@material/ripple":"^0.30.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/chips-0.30.0.tgz_1517868166995_0.8094000895507634","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/chips","version":"0.31.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.31.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86bf0044e155a2c5fc7d495875917c377b472d52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.31.0.tgz","fileCount":19,"integrity":"sha512-1pr5tm/OK1C9I0WERsc0FBIwuqzGc2m/UN09YPl7GRiK8Xiys4muaIvNLngqi2sC+jcsavCxMeUB5U6PGDAB1w==","signatures":[{"sig":"MEUCIQC3pZSGZb42Pd9l5GzXA56d/ZlAFOiUNcWBNOls5k+VRQIgGGIRfeGBhfAJQGB9l+OebOGfSRoxqQwliRAKmKwwqtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157813},"_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"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":{},"_nodeVersion":"9.0.0","dependencies":{"@material/base":"^0.29.0","@material/ripple":"^0.31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.31.0_1519150980253_0.2023724956296602","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/chips","version":"0.32.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.32.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"276c9ec8cb14b559ef9d201c5813ebaa765e77e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.32.0.tgz","fileCount":20,"integrity":"sha512-bw4LSzF+Ejyi4Z7iZHZE5J2k437b2iLVM9bGjkXYZ4bkFR+gqjjfB9787FEQGoowHwKOWmuVwYrsO+Vsomf6jg==","signatures":[{"sig":"MEUCIQCR1TJnpZWSpohYq1N86l7zXzK5JeU6wYE2BiOUb/UEZgIgKBrzMIFoIuX7epX0SAD4toVm67im/JQGG4qqxd0b3tE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181910},"_npmUser":{"name":"anonymous","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.29.0","@material/ripple":"^0.32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.32.0_1520287722350_0.1854498957133397","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/chips","version":"0.33.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.33.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d1162b1e1323c476321dcad6a0c4a6a61be2e1d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.33.0.tgz","fileCount":20,"integrity":"sha512-IYaG4oxv7S8unp4rg1h384c3SGhqjfTiQpsfzeR4Z3JBgqmV7isbiU1XXwfgVcOzitgbKfOoBcxk7c71jpO5/w==","signatures":[{"sig":"MEUCIQC/mQcLtiFRMQHbtaDSifZzSZM9eoomD4aO7aAITTZFmQIgBi/nGyfMYGwyNlYU5n4JRiQTh3pGMuvmoyUUtODcyZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194439},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"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":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.29.0","@material/ripple":"^0.33.0","@material/checkbox":"^0.33.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.33.0_1521477599408_0.3155843128419169","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/chips","version":"0.34.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.34.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffb818cdf24e7e20ce388e292408fe7acb1a0c64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.34.0.tgz","fileCount":20,"integrity":"sha512-LZBCHpEUBmVmU5Ma79E8up9WYRQ0QKgADZk0xz8CaKEpIYO8f2j73il/RcCMkpo/Urfv5TBRBe2IYMZ9w5ZJHg==","signatures":[{"sig":"MEUCICMqc79ICSTs2+exoUloN6BOe1NvQFIRmfpBT76CU149AiEAmeGfqjucCVsIOZ0JhY1oawRgqDCvt6ue7igZovCA3fM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194527},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.11.0","dependencies":{"@material/base":"^0.34.0","@material/ripple":"^0.34.0","@material/checkbox":"^0.34.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.34.0_1522705912189_0.3075844214117778","host":"s3://npm-registry-packages"}},"0.34.1":{"name":"@material/chips","version":"0.34.1","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.34.1","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af5c00c41d7dab3c9ed8068f8affc59fa07f06ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.34.1.tgz","fileCount":20,"integrity":"sha512-QYno6PT0zWbuKOmQ4/UBZea1c5xO/lq0HWzXdMUMXrMYg1vYEhHzrWAOL11aQM0NRZzi6P41/GpTuo0CArY9OQ==","signatures":[{"sig":"MEUCIQDoI8bRJyH7V4kAK9GNO63GeLfmyP+PcZd7sqpSpHuDlQIgPtGWm8NPywHzd4FCCvcZ2Csw/cGmUvg1y+lTRDsxvnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":195288},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.11.0","dependencies":{"@material/base":"^0.34.0","@material/ripple":"^0.34.1","@material/checkbox":"^0.34.1","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.34.1_1522798785355_0.7884177028687174","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/chips","version":"0.35.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff097c7066ae8c3784c5683d10269b69a5e628dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@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"},"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","_npmUser":{"name":"anonymous","email":"bonniez@google.com"},"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":{},"_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"}},"0.35.1":{"name":"@material/chips","version":"0.35.1","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.35.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db8a356929b8723b28e3dd8804517173d5aac201","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.35.1.tgz","fileCount":20,"integrity":"sha512-nGsOsmhLVZIBhwpG1xqsZSKudYXyVSYN9PfzAnEnVs2WV/mk1LGyizljP7L+IM7O+X9s8s0My/rrtNGmd1poNg==","signatures":[{"sig":"MEYCIQC8kbCgh2OHVoUrNSSlui+EWLMxagD/6TLnZLQdl+gu9QIhALQJ07+VRJ4KiiJiGlI/Vv0tsWiRK9mZxn6S6oTsirNM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa63ZcCRA9TVsSAnZWagAAeNQP/01mhURyg3WSDqNrlnQt\nYe3nbke64uAHxbJSDA09pEVh4FypKzqwKYIqYN/ekNjLvFYKQgGvOSe318vR\n3hwktgAO8prgc9yBroBqbGHaS+FHM5xqKu+wpk85WQBLOxMPo+0TWLA+a4at\nNFdxbqy7OYQL4iOtcjSe3MjTtQwdt1R4xUUlqhCIekJ65WwkdQRe4t7im+RW\nnkac5XwbyYNAWQclztd4kl6+/jgw8ygNN+m/+bYrAJPX6SdDubU3gY90oIbr\ntC0+TH5xlR1dOeL86ozPvsbkwzoyQz8m4ewdoGif0RvBAoGxTZQkqBeyRFED\nx+H1KwAkQE7m1hYblMDslwpCgvN5hqtu/IDgMkfOsCWggaMxdf85zsqKkEyO\nHdJwOYJOCVP1llRs5Ne7fWM8f1lFKEUCABOP98SeKIJ4G1WPVEJIHUAnST6f\nRIQA3fUh44hykhZfGPnZeqLV4h0Mix74FblcsDQjU9Tf9jbKE29m+kbuYXPq\nT11jfjx7S6p66nP/Cr21f4PSrBF2DeybiuRo9PMOlrqzL/G48vGxUNlK995J\noYzb8v3WHI09mcb9n+6ZkOVs7lTdp4NvH32UXMRBS9vMuNEUov8fRcdEV2wV\nK8iY1c6q5Zp48v3+wxq93yPJFwH2dKLx8qG0t+yYlADQVbdmnQCJuORlm/pJ\nSjYG\r\n=6Ecx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"8.1.4","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,"_npmOperationalInternal":{"tmp":"tmp/chips_0.35.1_1525380698875_0.7102560175792949","host":"s3://npm-registry-packages"}},"0.36.0-0":{"name":"@material/chips","version":"0.36.0-0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.36.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eb48fcd4e93ac1709c3b8cf57aa525a77fe9716","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.36.0-0.tgz","fileCount":20,"integrity":"sha512-bGsEy4k2lcN6ZkMOFOBUuy8k34SdsIjGWMYKatYsCAYNnmWzMH1Ks8atXa07vlL313IxF+TTC6o8oncsqgCWsw==","signatures":[{"sig":"MEUCIB3PYWkWrlqErB1yAOt5GzPqYe08Nl0aNtuwL/ILGZl9AiEAlt7baR9rP3H5XkLZK4eTGb5CVEjOUZKi3LCpeD6xdB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDXC0CRA9TVsSAnZWagAAnvIP/3AI6/kvS35XhN2ZVKNR\nADmBVnbqu23GCidmUltflqDqT0RK83Yz+hSTOoIPC4a4V6IqX4oOqpz77lpB\nxayF7RpGR7jHFTwK+/ORVXIMoaY0gotGYpKSMAeHuOuz+mJP7+mukIK9X5GU\ntH19+rhSf6S/CWt91VoBzqTHgf+AfDfpfAG9ZjGAZ01QE7gsPUeIWSQIrTX6\n1Gdhl+A6z++gdyVy9FFUjv6hhiuJcdO1HJCBmyhlfSGLv2HRllypcHfTMF+i\ncalLaGSw5AF+sFZBYfkwoEOIIYEulz1Km1msUnvDBEYIrEGFkwd+VFXYKcZq\n+J4MLCHfnmghJtaf7qHUdaZ4Ioa65XQ+mFxh9T78nbnmOa0tsOGhNpKWu+/X\nrTGcwpiIpILQDbYFVsstl0JwHLJESaBLbkfj1vcM8SwqmdJo9aQ40XsAzKpB\nB4aCaLSDAbGVXZdeQu9lySyKUcU2b/bysBOd1Gsdnb6h7pnxWqjvZQ/lA0PD\n1tUIpc7AMePvKQo20kksvok4EZJVX5qRHFEsYUHD7QFd2QB6tZqjrJK2Iqx8\nuD3z5ThhdulKEk9UiAAvrF7cqf67PY7ix23hdIHY3vIyiQGQLquQeeqFkoJs\nUm/aDcHLt5NfJ66f6k9GV+gsix5uVJs6qvrVxfPtojt2xpvCcHZ93i+8POK5\nb+PW\r\n=KWuf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.36.0-0","@material/checkbox":"^0.36.0-0","@material/animation":"^0.34.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.36.0-0_1527607475122_0.7795286025629033","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/chips","version":"0.36.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.36.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"222e193188ca5bb0f141d931d5a385a0cb5733a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.36.0.tgz","fileCount":20,"integrity":"sha512-sHOuGc9Gn9M9a3SX6H2Y0OnuOQK592m6LdEMCK758XziCXHwOOaXqTcj/JvdTXxfhntj6fjSfzbrPhdisuFNKA==","signatures":[{"sig":"MEQCIDSffaUsWdlG4Qno0HlK2Nh2xUiSSUc62Pe5AMMhJN+2AiBtyWU8Bd+GpcxA2HAJjA1+CUsPBek33P+r4ErFILK3gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFV0TCRA9TVsSAnZWagAA1mcP+wbWwrFudPrBq5s7Wovd\no0qUmOLNm1t6t7indQ7aK6PUD6+64KSNUpBhk6Z1oI2OSHFDwsGEwFNC4OVp\nGOjrI3oNlVzbn//g/tqUd43NynruQzqJCgQx9m9qXjzHT8qpkDf52rKAISS7\nrc/k47WKmxXQTQuG42f2U6/IdFD+1qFX5SI8HKcNiToMHcSjPp8605HkBPiK\nGxIL9UyBBnAlfEeBu/caNSgdm5da3HZdECcRqMbwAaZK+YkaMuI0381FgLGf\nbpZp3IAMbay0izg4dSx/bwZSM+/y6iQqk7OCOjynSGCrDEsrUpKYrgAO47Eg\ngU+hM8l7pR7cw0HoMMF4EZllLe3qiQ1kCt1+ue8gHh+BLJxc07DcNgEc8xbh\nWlIqGqjOM82+1TNae+xvtHcNstEzdRqf/a5W8UUh0ClIyoeG4WM4ewAlEbfI\nzH3Osf9caEuhOgyhkXpeREml/Nvm/myHckI+uyQO68FTLqANU6B5RdVCuzgF\nThwq2E0yjoJOLWDpCessaeeULPuVprKRPgHlGYtPXXeGVC/OwF0OIiWh4cLe\nIKkJJBQEPMLNP41IFm7Op+o4nMYAGiusqYLLrnlysKBrL3GztNiNvU17bT5I\nbfl1Twmh2mQkPO5rcyYaIb0bfo4g5Fgl35huBf3pR1R+PaRIkkPwGcwbcGkD\neiQJ\r\n=rI41\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.36.0","@material/checkbox":"^0.36.0","@material/animation":"^0.34.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.36.0_1528126736989_0.5959712273786208","host":"s3://npm-registry-packages"}},"0.36.1":{"name":"@material/chips","version":"0.36.1","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.36.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"149e512e032bb062ab26e0905df33a172c15da5d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.36.1.tgz","fileCount":20,"integrity":"sha512-WDTTc12Gc6G5QA52ADggvaDBWSzjX/gayY1nan8NUsP7JqcoZ8HE44fQU2u9dHFuYFZGNyISyhMeT1iBZCJMKw==","signatures":[{"sig":"MEQCIC+yp9Ry4l7AKoSFJI627VHCMO8Sr7JTi5GkWorvkBtsAiBhYlG5y0HrUfkcxNTxUacjlaHc+h5x0CbTpQf4veLP0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ9JjCRA9TVsSAnZWagAAS9QP/jhlYuI5PWBgAs3FZvso\n2nMyPK/z50jLl7NmhTSOMsfwHqm2ZKpdNEotz/pVb7MpYoeYg2xsBScYyUjY\nj+mtFyEq6T83eoJPfH4ms5RW/R2x5cM+yRxBatIuldowI5WufQgfZ/VWAIMY\ngH+u6+1wwc3gg0yvyPVUiagnm4aYIeLM62Ch6BCg47srhCFn6gEHfPajt+u6\nsO4Z1dKpWeFSfmbw45l4dVvsKF0QDrsh2EA6dbnfnHihGfN4mMhII9BDhZQl\nkbbyrZMnaCI1O8Og0Yqn1lwtLo4VxlGgLi+S09f8LzOhSUdpBGVJkQ6RKub7\nGbuBMz4owy6QZT0/v3EDMfEduldy4lcyYt9SnSCGK1MLcNAOX8w8sJHu4GNk\naQPEvZlOqE/M17ZEY4GROkgf5N5Y83DJsogFW3rb74JenU9cHRrsZNmldrFq\nwQPG1TsARBcBq69C41jI+ECQ4ho9FhDpp4XZMX2nmAvVwOMT2IIpOiPgls8V\nAONaS9JrRng1dXGHWxWOP4jgOMgIu6y1pothaM3KeOqT3aRqE+fOYjsAXl9B\nZTtdqopH4BzsFZT5AunaJR5t7tNBG5feGjPcifnMvZfmzGkmYMY7zdFj3CZi\nKDtVYjOO4zgDUBGHjnFS+sT5fjBBJhv77mD1d9aZRrwdz9wHH9hDagcgsYf1\nV6es\r\n=z1sd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.36.0","@material/checkbox":"^0.36.1","@material/animation":"^0.34.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.36.1_1529336418020_0.05201575398172409","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@material/chips","version":"0.37.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.37.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d0bc71478548df9357c14ef467ddd013ac051e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.37.0.tgz","fileCount":20,"integrity":"sha512-16VL8f6VMLplHVStrI10JTJOVqVVXK9QI12BX+3LNLu44h/LUmxG4ovXIb0L3QTiBF8Nv5D6FK/PO/msRAs9YQ==","signatures":[{"sig":"MEYCIQDLMeyYVMbIJEp9FduZhkp4xHsivwSVkFKRn+u0vQR4bQIhAPBKiAR9E6PnneyMucdcu/iAXqnIWnP0GHOv8eGWMsbV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOqPbCRA9TVsSAnZWagAA+5wQAKQSU+EglqHhSmzeX4e0\nupqw/wHuyK105MK6fcMqIOVmvwruEBxOiKl3KfeF5NPAHzWjnkKgPwdRElie\nmRwEowi3ZnBjFn0TUSEILIBqoweUhG8pZPadYoArMqE3/RGJwUAYEEg5WLKN\nnpbeLgiNl9THXPUzuQmcNy7qh+dO0xH5noqCuZfqV0V5BUXFA4JVhzaUnbjQ\npflmvxmxolF+CYOy+89SucAXOUHbRWdhi2GIHMd2eU7Z2pvc8co/WtChe0AV\nA4/m38zSpZeYSDQqbzFZS1NDYUnebGJ9pDLqKqSjo3gonZmcbvTzNKv82y44\nUoOVHr79psGWTbWAyk7N4i2yCwt7oSG/wTB32Kc4VsKYFpt9ycbviSuKoOC+\nTZPHEYc5h3Dns9vlxjSrUOE8CbmKP7upxZkHQkPflNaQiGYmIX5MciNJDLvi\ndmTwUkhsmasWPcr50+K1F2itJMmYPSfaJEO9yd101062nTgqB1qruLRR1Y5O\ncnOl6KbtvXoJoiplpSgWhIqpXhcpzVO8pgCjdTUK6HCtkll6SwvbRTe/xuvc\nQ0LODSPl7XygqI84Y9/rkpfIun+6uZbxcoyqUYsTzoyCMLyiTkZhBB3UK6/o\n6y7cHQ6Tftp9MHhOiFepS+yalpAoaQVBlsyHKGbUsMtoASNL/2VFV3WZfH50\nsXgr\r\n=WHnb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.37.0","@material/checkbox":"^0.37.0","@material/animation":"^0.34.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.37.0_1530569691296_0.13767337695973492","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/chips","version":"0.37.1","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.37.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca0277102204a03d8f7796df507016916cfe554b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.37.1.tgz","fileCount":20,"integrity":"sha512-MgOKo4zAhRFlQtQq5SuaWFmTLR2b44Ig/1rUSSKcrivto/waBAIaeVWJocaYshcMeW6ZSNkHOGqPLm/fP56qmQ==","signatures":[{"sig":"MEYCIQDqUPnz5VZvN3jW5ORL26pkhe+BgOEAnVqA3qfBBJccsgIhAOmITqHyfTkWRwdw02vi9UeUTpfsOVC9Wi3UxLf+gkY6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQxYCRA9TVsSAnZWagAAFSwQAIbpTpeJSsDvb4UQRZQH\n3OfJRGPew0YUNsfkD/2ehFhNKBWGMV6oVJq7f9xOLRRzDb+lfkWVU636k5nO\nUtdyghlQOEXa7Ue1fny/vM3KKycoINtVzbh2O10dqdz7iaekyI0KuuzlM6OD\nx8Hc3lKCWVOa3G6c+bWCNrxgF4kVFnDAMeHqaS9SlKabi+HFZ8q+E61aO4MY\n+GyDjV+5rUkp4rfnTMEEVqN7fxekH+fOpMVEAzEQyBs8euRswatlLKaqJkG1\nlnwV/FoRazWb9l5KnYB7rNmAK2YIkVZRKGRJ6HvGYuQ/UrGZgEXUzMKuNL+m\nr58c81s4QN0QfCSj7VIYMR0KpHjpvQmb5aqP4xeAOnN5+X8or9hLOe0kzqww\nVn1GoRkH/xqURjouLMj85ASriFrTvwabuXbw5WCW0VL1p4EuN8PseLk+LJXw\nJ3ao+KvHkH3EdRiRk/YJifIEUIoWShtYP313e10imZrej2YF8tdPAV7WwukU\nM5Tn7CfZ5a2T/NKQe3FdzWAbfOnkFq6Aahz2x6HKAG7IyFVrBBJJp9taHqwX\nQAfTEAMSQjcgIk3Z3eyjeqvkUOPUQpLoLkomphKKvTvXmyvkops1wfrJzN6o\n5wfgK8Zw4CBnwMX3vSqmgsmCxf4KRVkQAjfMRqKoGY/vWJRIA4dLGVy2Axnf\nCwCM\r\n=QU+U\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.37.1","@material/checkbox":"^0.37.1","@material/animation":"^0.34.0","@material/typography":"^0.37.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.37.1_1531776088760_0.04301585676838804","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/chips","version":"0.38.0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"464ad0e09aaa1ecaa0d4d39a7d759d0a2931fc11","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.38.0.tgz","fileCount":20,"integrity":"sha512-KNOlevFDwoAbXGJbnfwiE7OpWfOIeG+jG3dqZt7Qe2l5BcXn7V+0keAlEJnoSJS1JrOwOnY9fB3uJ95LKvcDlA==","signatures":[{"sig":"MEUCIQCbW4+fZ6kWQsdrt+dzTUpUhE7rX+HYKGx6y3iaMm3QngIgKQqkBgzvQxf9XCXpQIaSwlpXYcLK0SSEYIxavyFePG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0XwCRA9TVsSAnZWagAApdwP/ictMTSkWLXakCOXnRK/\neUfKR8uhniNOaTg4CWZ+tUX5gHDrjQwRNjWZHOt7RUE1b3JMX9MmCfo37ga6\nkfDZeuKDtWwWDKw3dV91SNGXb8VidfRo8LXLTtpIHGjYRQaXvMOwUI4+cuYG\n1xaghNMaXXiN1S1smmkVPSAugQv/89/646dHDj3XGxoQruBE0AyBj0KnjzMc\ndjzoV+XlUOEAAIl807QSiPA9t2Wyzs1DINGV7qF9FxjpJqMsR3Tb7sjy5lWl\nCAUx2taD+6jc4pYoF7TtABvm1pqJFc8ebcDucBukQlu3o7qwquGS6mQOAwX0\nwRC+g8BwMKB05u1WRw6PnCzi1XBZ8fIEsKJ/e5EXffsfg1oCk0Sy72QNbsYW\n8N/mtOG19Ra7iEsPe/RR4C0XaLHNdA9ceub/dvwr5tIsTOM3VmD50w6m5Rm1\n2hDAebUOC/SBuPtQaFrC/0aRf6KA3kYc0TzjEdQTcuJo6p1YptVPKNRinbCN\nvbYxjTSunRJ9RpiBJbUqXyn80jmHMi9ykhi8WU55LY+IPl5zwskuZL8RyIuL\nDBtBaVA9CBbcUA5K6/JhI6ZEFmltS1Rsm17aOJRBVQwaBaiQxQAiw8dMSzOM\nZyXbSLJ0hXg2iKgCJSmq7zlZNfL3GGwJ3bQuGpvk/sx3sX2DA+hGo4wODOcb\njNf6\r\n=WqOR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.38.0","@material/checkbox":"^0.38.0","@material/animation":"^0.34.0","@material/typography":"^0.38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.38.0_1532970480801_0.9300559296219113","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/chips","version":"0.38.1","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.38.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65176422309150cc80324c3fa1ab05a115521e2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.38.1.tgz","fileCount":20,"integrity":"sha512-l6fAl5DNdT1b3Gu0nJsYtdg++M/srtu9KyVTShH2nvXvvWlnRi2yxXp3mZJ1H7HTMk4vtlcDPRtaxaUDKXxLwg==","signatures":[{"sig":"MEUCIQDOy2wLPnkt61GXd2JBNmwwP6hZsmkP/5PwrRbjEi7DHgIgVARcat3H+I6xnQ0hgkA82O3/4APjjoxOhqp5Euk8Xx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbceyNCRA9TVsSAnZWagAA2OMP/iVIITWzsXfBel8spT/e\nc8VLI7yinNLweSg3c3GW7Womr2WEPNWBlBYc3gjPvutwfXySGC8wc+GMvWhW\n/g5jJX5DyIPZsyIV36eIJRAMVRtNUFgtRg3mZ4OFFGkxCbC1ulEvYi10ibSs\n62HIzapEy8dXWzdqLafHJpY3M2rkoOHSVUjXY3dtwEHUHPb/0oZg1cEaR5Zb\nT7wUOq/YUZYby+MHeP2gSYkkscszdnGOl6CIOkmR65wOUpX9W429N86fk0WD\ntvGamfcQxg1UMf/CY5UrX1si0Ma+Ba8KtEh4Z0hRSDdEiBmsXa5eluZO66ak\nT+6nAj8qGEvELwMazOF3suAe9RgBwXKpD1plQlw64YGqpJiRcviOcJehrFYK\nOKkOgFY3OUZ7b8YRAUXBI4Offzt/msGhijNA337E06wSXN7ctQOT3f63wtk1\nqYimdUWrMjLRCzCCA5arkxVq5xzBaFNBUWYjdEC8n9L+iDLBmJbrN887qJkx\nbZkTAHTFF0oY4xyJjgcAENqfaMComAOvHvHHHOwphSTJ8dHZvNimfpLNLgpE\nJsBG1G4wLc6+PHbwJo2I+fY0PZ9Z2t9rgJXbaf8JMcNxkSozVtaR8DKrO9gN\n52uqj6HWeDT4l4EpdAl3CHx4TUTfMC1kclwUGwmM74RUeHlAHgA6JX/Eaag6\nzsko\r\n=8jRP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.38.1","@material/checkbox":"^0.38.1","@material/animation":"^0.34.0","@material/typography":"^0.38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.38.1_1534192780629_0.09375525316226074","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/chips","version":"0.39.0-0","keywords":["material components","material design","chips"],"license":"Apache 2.0","_id":"@material/chips@0.39.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4fe5661d94f8fc67413cf3530b3b00ef775bfa9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.39.0-0.tgz","fileCount":20,"integrity":"sha512-zuYmzysvXl0A+gfvfhelo0OftE6/eTngNXD5aXBSADiQnJsqu6Uam6EuRZZSuqVfHmX236NALWlGmDJIHR5qkA==","signatures":[{"sig":"MEYCIQCCQxKr+IEBh7JTSUvZ+DWqwkCG7ttJWVchRqEnLXbY/gIhAKlce0Cur2zmoLfMjurRO86XOqM1TCgxK/QW7sM9got3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUtCRA9TVsSAnZWagAAghgQAI4unnn4Gmeg5Et9uMvd\nXIKeRFw2g16Th3rnoXkCHcA3NCayhOx+dhCYEa2pBi6UGiPORftPOep72S4q\nOj79OMX1pEl/REpsbOz4nmjOszi/spoyoaBMY8WkwmgCbMVWgiARNa2+/mnK\ncbJKrsRBGocMWSIxdJpaxo6W2IJJJIMiVYq8MBwkVxnoWwk2o3VQPY1jODBi\nX5CeamvWD1WkHjU8Dclau6a/3igkZ90Gps00JzNM6GNPwgF31512kNouuilt\ngFr94pheJQ4yI++f+vvcUxGZ+zqaSeFFIkhkibcq8dGWmayzYiCMhmEoEQiz\n9tE7Igh3HAoxcepZbryUm3V0s+uXiTNBunKz1JB8fFQPVWRt+2xu9sYxaYOj\nVPeSDCIZHuxwCoL9EJVR/f3hJ8kA06koYR10Fy4WLt8WwIgYc6GaU8LMpWnN\n09zwzI5LXXEhdcUXIq7t2/TS0AAx4bvaZFeqrYHrSnSUgz+Ue+8wHKIBxhxx\nALU2vJ6+KYWge92CoJV/zVRaNKAzn7AR/vHJyAACtvZ4cc3Ashru2rlcrQFb\nkX1TW3UlB4l60LOM28bvEY3K+3Jq17rr6xcReB++FECIFTPLq01trA+xxvyF\nDJBKVgzEpNOc93EOmYAWGw8OinjvtM82/IQ1+mtrTb2GNIyS4xHdWwXRhI5Q\n2Hw5\r\n=a/Fd\r\n-----END PGP SIGNATURE-----\r\n"},"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```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  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/chips/mdc-chips\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCChipSet} from '@material/chips';\n\nconst chipSet = new MDCChipSet(document.querySelector('.mdc-chip-set'));\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\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\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\">\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### 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\">\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\">\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</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\">\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</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\">\n  ...\n</div>\n```\n\n You'd also want to add an event listener that calls `addChip` on the `MDCChipSet` to convert text to a chip. More information can be found in the \"`MDCChip` Properties and Methods\" section below.\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 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## 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--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\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-height($height)` | Customizes the height 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` 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\nProperty | Value Type | Description\n--- | --- | ---\n`id` | string | 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` | 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.\n\n> \\*\\*_NOTE_: If `shouldRemoveOnTrailingIconClick` is set to false, you must manually call `beginExit()` on the chip to remove it.\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`getSelectedChipIds() => boolean` | Returns an array of the IDs of all selected chips\n\nProperty | Value Type | Description\n--- | --- | ---\n`chips` | Array<`MDCChip`> | An array of the `MDCChip` objects that represent chips in the set\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\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` | 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's ID via `event.detail.chipId`, as well as bubble to the parent `mdc-chip-set` element.\n\n> \\*\\*_NOTE_: The custom event emitted by `notifyRemoval` must pass along the target chip's ID via `event.detail.chipId` and its root element via `event.detail.root`, 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`removeChip(chipId: string) => void` | Removes the chip with the given id from the chip set\n`setSelected(chipId: string, selected: boolean) => void` | Sets the selected state of the chip with the given id\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`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`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\n#### `MDCChipSetFoundation`\n\nMethod Signature | Description\n--- | ---\n`getSelectedChipIds() => boolean` | Returns an array of the IDs of all selected chips\n`select(chipId: string) => void` | Selects the chip with the given id\n`deselect(chipId: string) => void` | Deselects the chip with the given id\n`toggleSelect(chipId: string) => void` | Toggles selection of the chip with the given id\n`handleChipInteraction(evt: Event) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipRemoval(evt: Event) => void` | Handles a custom `MDCChip:removal` event on the root element\n","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"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 chips component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.38.1","@material/checkbox":"^0.38.1","@material/animation":"^0.34.0","@material/typography":"^0.39.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_0.39.0-0_1534432557080_0.07601974639498321","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/chips","version":"0.39.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d9c0cb8d2b45edf953b3a4e9b26044adf92f47e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.39.0.tgz","fileCount":20,"integrity":"sha512-kJ0sY32q/x7f4P4GlhWyjDF7aPs4Qd28+ZafN3aP7g8+c77/SyC2GiJeTOEO0byiu4d0wqKFWHgZ8wyS4RZ5Yw==","signatures":[{"sig":"MEUCIQDhkCJyKPyETSkBYagOWDVPQHnNwPGp2ZpzSZD8WVY8sQIgRB4wepSQO5AYz6wuKKJBGwSpzQyg72to2+DPW9dM7D8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":244621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDfBCRA9TVsSAnZWagAAOQ8P/ijTJKz8I98B43Teyd9D\na0DogeHVtURgluWfqNW0ybqseOlxrpJzZ5ejYu8mk/EIpS7/4l+BSPnLMG+6\n48rKeitmF8+LioDLO3/8nwCLq6od+Z9Wrr/qjivfgxhA+1AyFadAozbRFxTu\npNdjQcMj3RFXgEIMAILAS/6pX6Ghzu9vafAs7SOsr4qSHa34I3BlVrK9eUpT\nsfPF2mTW3UBtsHTo45dBPHR84OF577rKuBnjsjNlFta6QYoBV2sA0Im0r/sF\neHPvEJjQ3Kql0ptNHpz0TB6HEz/HFzMAcKJEOAQ55I1WSEk+948T+XvooIJN\nOYGgz49QnWXDKxKBYIS4hZkoilY2XcJBIy61DLJ7vjaJY+QKNChfkPeJ9ehm\niMHr3a49XWl3U64ilVxBviSUzkyJs040uD+bz4UuYBLD5D1XKh1Q/Jo8kulY\n67ZOmRH966Sl+eLfwz/LHX7XcRT+iyYXSipww3fT5YUyYo9wFnaXtbsFtXoa\nNkRzpdi0VrJoLG6XJMkwKsl/dgf4srs1YtTZbRQ2Ds43fWi5k0XOoo8qPgrW\nnfDIHlXTHjTL8Yx+xNdXRxXxe2bWEg3WVzt17pl8f0tY01vFB8bf9iKFg6gZ\nFsDEqI1ZQ/s/NkPskkaKoocyFIzuyC34v4t2c3HGG8i7YpbK9n6FQZf/TM4X\n4VD1\r\n=+M8T\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/ripple":"^0.39.0","@material/checkbox":"^0.39.0","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.39.0_1535391681176_0.9979102181656914","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/chips","version":"0.39.1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.39.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5720ba5da536c984031e304f4e205fa0adf882ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.39.1.tgz","fileCount":20,"integrity":"sha512-y9/GFqQdR32AyGwoAlrI6fMA8VFTMPChv91UeDF+t19vLjM0yIpsvov9h+X4WTbgwCS+LtBwOmUzxDZQsSoBmg==","signatures":[{"sig":"MEUCIQCwjAMjHiYQy3LQUs6Pn3/HGZTWkfUnJ3evYkeYvRHJ1gIgHeUkps9TbMWV+G35YtRW+zv3AWCrOok15KTPzhBn6x8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":244621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibUHCRA9TVsSAnZWagAAgMMQAJDZzBO/pasOA4WoQlY5\nrrm0z0p0CU1XuGRRyrWnz35nJErUQeXtJ1oCZQziBhiK1ULYMX5OpqSnTW3q\nRMY6b5u/Q9ozAfJFbc9s/IMuSZbKUNRkA20Tq/LDv96jpgg0SVx/RX1B/xjd\nF2dFNftkBHlGKNoLd0TA83+VUlnpmGlZI6a5CKuPsI6+v7iQdeSffl1Ikyyv\nh3QsBOP1v3gCakjkdqjH1bA2fvSkETCsEU6J1D1gDRV6EfzYOYmhMUDmoSFV\nVf5KtJMN3ZhpYwjaXhZ5JJ2EHDNP8ja+LTMkovHjOYrCP+tESt2nsqKw51s6\n5ZbbiflENwNz07yuleOzfVx5N465uAE+XXal0U/YVyEquUhggZMMrf3I81vC\nMluVjOwHbTJH27d/yZUpHEAcHZJPfb2rCXbqtG3xhTD9RbykaEwO33QlYEp+\noF8V/1xCDj/9Od/gi/3gmXFYNnzGoEHKSbbnJo0/RM3bHDjciulDaJ0RlP5r\nI6ulSaxZ2R88wtL5H603dXk+hTmdb+ts1zFkueMRt63t2e55XzDrnvBXjuLw\nNfrWOo5U5Uvw4RnA/olzghRwXBiIgO+jyuBbuiqQ2Fs1PsdcxvohLC7urlqL\nVN4yqj2Sh/JMWRbwAMOpigBr4isByayBOkhWtagYnwjtuv+t7F76o0+Y5kIK\neXhO\r\n=ykym\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/ripple":"^0.39.1","@material/checkbox":"^0.39.1","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.39.1_1535751430082_0.11423331497846001","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/chips","version":"0.39.2","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.39.2","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c7817e245f51997a366bc38889567112807c69","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.39.2.tgz","fileCount":20,"integrity":"sha512-Ux7cTfgoL0U7VURZ3YHP3p6Eh/u03Z1+nQfQKmF1uduwhvt9WxAPUfCOocQurzNLrOYERYdVhlkdKLy85rUIMA==","signatures":[{"sig":"MEQCIFL0LpNtEt7lLYfA/UliEUf6Xoi4MCLEbqmNTr9k0tzXAiA/CjAb/TlmZ4sLsSjo/DEwv111XtYEWMjSYcnFaKeUHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":244990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OTCRA9TVsSAnZWagAAD3sQAIejikp6I33gqqiQdZkX\nlX2iJMyDcmvonk/rcx7MUQkJcGMNwL1bmVXri3Iw/uSFLn8m3alBBO+MNtwj\nfhcqxKfYQd5wV7SHp9d/pCKzSZzxHASee+2kxETksrK78J8CJjIZgXdf+dVD\nO7UgWk8x45eVcDSz0JUy4zK9T7T+rMwrO+475d/9q33aNf//jVWbVOwFkwPF\ntg4G72MvFSq4A6UpqESfD4HDqbrZeiY5JWg+K3uMs9WmWHsPqiXXIyM3j7RR\nE/2/lqFYxgML1ItiRNLstWowo8HxosUa7suy1AVeQH1ZBEOJ1WhiH/DgVMMY\nR64w+PMOe/YOfRgCR1OEyo2fYAksv3jEyoQaVn5TBcuTh5JdIxRSsUuwspkb\nNRvu8Zle2mmp9Ksb/m7o/7zAB2+qAMkXec0LYp6drjMAJR7ukDu+G7RbOtB0\nERyRxUGcGG7mCnOiITPMEQ3jWy5VL/n5i4qbVbsroXsXZmKORbYhQgVp9p1j\nH8DhIRIlfwo3idcCR0cPMvoitBXUmGWHWmIaG7Z9TzyWawuDWoGplJJqwonY\nhPAaea9GrNFOUs0dGJpKEGYLbnjdgIrCjB80FMBMgZv1pgOWRC4HW/CSk+1P\n1+dwcHat1DYn0uNFzSf3hP3IUYE5tXbeFw+TGupMWLcqiO1YsjfFW8rJFIfJ\nW/+0\r\n=AdkH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/ripple":"^0.39.2","@material/checkbox":"^0.39.2","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.39.2_1536684946595_0.9141531230641546","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/chips","version":"0.39.3","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.39.3","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2316d7f446b8318a0370c98de105f6d3be85ee7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.39.3.tgz","fileCount":20,"integrity":"sha512-nOYTOhIafeZ3oL0nlbaYL9nBk0jtSEjpt35W/bndgur07ulkbjbQRC5O0p6nhVwD4FNOW5erwGzE3B6JRguyig==","signatures":[{"sig":"MEYCIQCrDJjgfPWZaWWrg9awtL/ohKL8lnSI9Rg4HjmJv2HDBgIhAKdcJTXK5pPrYoDt097561wC8fBcdh5dHK8hTcXmJDr4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":244990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/kuCRA9TVsSAnZWagAArmYP/jJWDyCF5ockMdr4CvFQ\nXeNzihKQsrwUqW++Yf97w2kdsEMbzFUVOzVosOcFmiuZSxPzUmj7GmiJ4X18\n7qS9+npd5b1+Qm8iL8sMefs7Sx6Hie70wfhr+LERxaMMiPVOVFxxGEOQxMN5\nIFHa+7/u4QOvo0oEQza6B95KKqmbgv/tG7PnPfDAgmUCpyyYus5B/7JZwv8f\n9uDGhckVP6jTXvSGxTeWtWScFtrdlLvCe17l70P4CqZrq9Q7YAGis4+pT71M\nW1c66PZyhnEpdRcg+16czDUptp0b2Pa0r4Ou1YuealOtrkyDt2BU5BJHzFwb\nQrfG62gmTVg07juQprmQWTkIMR/1YyDNytX8PGLEk3PoZlJRWh0q4dtrYvBf\nGAREWRKE64ionV4f5nhVgZkMaP/ayEjosv1ALNeyW4hSd7dwBc81z+WLjcBg\nI1AEsYLz3zgFIdaIYWP8HtauZIPqGlj1PgYLLgCkTqBQ5QNF+phdkjcIXE4W\nHIUF3YLVjaDK4mmv0atH4ZfWhskbEIdqL06e81Y0fdf+lbVPr8gguEqmMkcL\np2mSCQ+G7tnQLHKRmHTjR904gWGqjoXEa05++jQwBNpL1j2QvY2LC332xOCP\nU5y7jYDOF9Fbzx/PQMpXU1LuNpg9hL6WqdKaUAfqy6ruGsy7XQMK/PlYIlKn\nPWHO\r\n=kYuk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/ripple":"^0.39.3","@material/checkbox":"^0.39.3","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.39.3_1536686381354_0.9068735449886076","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/chips","version":"0.40.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e30ee61318ba8d9a4b12edbb15841d08e274f13","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.40.0.tgz","fileCount":20,"integrity":"sha512-G5/8XAcq47ZNhRT6ac61klg6tHNEyQkg1Ug3I9U6lpF/HRtq7OBOirzz2b99D9EqODBKHWGSkXwf5xUhO/xRRQ==","signatures":[{"sig":"MEQCIG5caX4Gh2qy/45OZQ1PERWfix1h9EFEQU6X5RUKLKgxAiB7OgEV0MOOEeg/yCwqbmp4O51hUCEhGpRm5W7JLjUPtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULhCRA9TVsSAnZWagAA2/sP/RM184vrj1n9HQmeG8bm\nAiDpZqI2CngPg/EZnGGa9ZZU5TIwafumTjZ0WjVNpR17YzV6B9GWNSlYCoaj\nFqNf6zO/mRZ+S+UUI+U9gD4ATBuKr9SSiFOk6xwPmMwW0Bn51ODV2jgAyCgE\nL71EaH/6TlU4Lr9AdQlopYmyL1pY88l0xjcJWAFenqSEr/dszs4MyN1IOvpA\nUFfIoFtuKPom0+l/Gs/3A0CpnNc4RGNdFrEXCEL7MYCg5mK3Nym2Blk9Jgim\nDa9VgOCltD5A1GPVNZDxqPW/xg58AgkS+ioVyT69YGrH/ZbMHu8okPFdq8Qp\nkS+t3P59pMq4qN1ZwUCnhOkmobSGax31SZu58U7jLHQnnZSRbvkC8bou8ClE\nKSL1sBM3R7TToOwMw8M9+uN+NFwmM4HPOKZ6LcUBIn7sZCBpteXCIamNmhlm\nekAXMB8TbuGfwTG3tfQ8zu7ftzVskROBHcAPuRNo9u0pwQBeici3LqJ+TShA\n4BWHSPLcLkBn1IIyVl9CX0n5osjX7M+CGbMjyEvgpTV0aY5qoksKdzJsPuN/\nRbpZACNYqTiCN1/3C/Mvfh5gKdUe+7u/qNepf37nSGHyTiWSDjQpWkRdY/Fe\nSoVXLdkaN7jniHcfx/glMlYw8wd/SHUc6EADict8bppZlYQ854pVrKPniFg5\nSOra\r\n=cEyF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/base":"^0.39.0","@material/shape":"^0.40.0","@material/theme":"^0.40.0","@material/ripple":"^0.40.0","@material/checkbox":"^0.40.0","@material/animation":"^0.39.0","@material/elevation":"^0.40.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.40.0_1537819360849_0.3471165890093413","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/chips","version":"0.40.1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.40.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"445e5933e4ce497691a6b85f818d0e95c898ffe4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.40.1.tgz","fileCount":20,"integrity":"sha512-o+IheDZ7czby4ab6kmoPsC7YHZ6eKr+yzwdhttRaoz+haIeODkQeDpVbzzPCva5QAG59Jbu/IuQnCN23BNQPGg==","signatures":[{"sig":"MEYCIQCdny7Nig3lrhERdt2pCuuHg7iGM8bUMIX91/FEOUppwgIhAPrVjZSAHrWJi9jjtzRDCgYJ1pttkfnTYEdmPL01A61+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":255741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8i/CRA9TVsSAnZWagAAhBcP+wc2BCDBIxvd1C4oEDdw\nk+1+c7vNISDqkGDRCE0OQAaXTkcqtwELcbWkg/xIp3M2KXhweHJ8nfljg1mw\n/h0Oj6Gbly6O8S8IWFRGQ+7fc9OzDTAub1cAE0AVNfKZKN2rdh16v6cF4al+\n/p3dOt4JDhawXP+VNoBbEZVirZUKzG2GsBKyvN0PjCn7Uv8hNZjdfFlK2kQN\nKCpzYgt/06o1ZmojBTFXJgG5mFB0iKUFj0eoRf465lYaiKPa77kzU8zo4MJr\nX0HBI6q5rVVBMePhnQ99mjTBCj/hLGtrZx9VJ41r01MHl/47ORiaeekQQR56\nUnlXE4Nstwc2WM2tZ3L29AyZtZeCU//tW10AxK412XmC1qaJ72Ovvc3UFxQV\nU8vfmbJ5awO2mLsx4Okh9U7tq6PpF8VCkdNBHO8iA7P8hpXhAJ3HS/tsrUn5\ni9VbkXKxFke/OKtE+2t/3s8Ot5NdUvu9UOxSpyH+1PTgPUmP02WrDmbOFChU\n6EElUi45I0qXnBZbEWrOAdVmh9VVAlEJZ5IRXTRtNza2VchVCWwpb10nyOI9\nfewl5vqOJ6cwf3qCQqayhL30Plm8BUZmgKH13E7Bb4jzLY1QgzWPw2/T664Q\nX+iHKHgda5zhqjUqKqpyzSi/amSiDD0Ds0K8DUsTiUU4YphjX7J2qkd8w5hG\n10g9\r\n=gxvB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.40.1","@material/shape":"^0.40.1","@material/theme":"^0.40.1","@material/ripple":"^0.40.1","@material/checkbox":"^0.40.1","@material/animation":"^0.40.1","@material/elevation":"^0.40.1","@material/typography":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.40.1_1539033278685_0.08934536771713031","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/chips","version":"0.41.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.41.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69b5540c1b706b9a378105fe76d9e2cb9b2b0ac9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.41.0.tgz","fileCount":20,"integrity":"sha512-Z2q01n4JdRR2f2fdYNCftmgu0M8wu8PZUeQTK3e3zVkQyRdmXcbqMbLHRawVWuXORC8/mIA6tuTtOEqle/Qj9w==","signatures":[{"sig":"MEYCIQDp17W/sM5nRP3NZYnNQbny93yJpJx1B4aDO61UYGQnPAIhAI5ymCxdjbLIprZ9gLIFuhU+tllTiGZ9L8OOvFX9B9zH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":255552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wVCRA9TVsSAnZWagAAydAP/jTX2lRoxewJP1sDYp0p\n2DLGYqs6O848jd/t6Kgg2JZZn3qHrJIbOGFY1Z5+NLuroZzMIPy4AL81UmUh\nPki0P7SVVAM3+GOqF4qBi3ubjw1VXLA4n6odWcEpNrNHMDCCHcfbEa7jSOiM\nMDQnjasUqKuzJWtgOYIDGxz0VoMxXwBqyI5wbatHiuUTmFWEsRXgWMrnK2Bn\ngNGc/Ygoz+v/d4h6Ft+9axSfuJuvk7WxBjMdR8B3WQdRtRBgWCBmp9d6NdtK\nXAWQd5AZbc0A0qEJ+dOZSeOvBR8PKF8+AmSvGB/1E4qo8lKl5Ni1oMwkV245\neyJPm65VdrUB+Skq3lN1N6dRort+VWoWqc1vtR54gzr+dE3nitfzPyWsusmT\nVrHSkXy1ylNb1HFL/jxr8swnYrCe402q4Tq8Qia+VdlTvOxVV8fi7XyGQEQ2\nGubrmrOSUyHrtBEFlGP8nEzMGPey1qG2SvBVZL9/NmiKoFKq1JamxWboW6l9\nRqdMKJCiFvDhk71o7oKHkM+lK2HUfVOsTPwwjAhYnyjRBY5EINOcnbZrExy7\nA/KodCEHU1BkgPtnsauuZ8E5594owyM3lk2an8BHF39jJppbunmwDkNknv9y\nzYV65XEZhxMbCIsxXvi3uBjfVfUAIcehX2FUhL7vc1WA8hl+T8JYFnzjpIjm\ntwZB\r\n=Y+Y2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"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 chips component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.41.0","@material/shape":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/checkbox":"^0.41.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/typography":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.41.0_1540844564185_0.8744316672632475","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/chips","version":"0.42.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.42.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379c5b285f7483ddfa74eaf20ebcd1766bed4ebb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.42.0.tgz","fileCount":20,"integrity":"sha512-e2BBlvnk/QUmgcyXW9ctGnoCWghI5m8lqx/AjakMKGBg12NNM9g1hAQY4Hghww9kQtlJ0zJm1ILaSRgxXtRnpQ==","signatures":[{"sig":"MEUCICYtxTJlfNGdefaAlPpl6yinBsPrp0SWalzi3L9yQA89AiEA32+i+lITAJhzCEAZ9Vj0VgOKl0A3zfcOEElKxrP0ouA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":255403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXaCRA9TVsSAnZWagAA8VIP+wTYFQVCFZCQHdRQMVxD\np0JsH3y2plMGaDa82801lhYDXSPp6dE+8mmdsHJBS1soWm5gqQ6q+jRoFTLI\ntRQa6kGhmQN6sqMd7U1JkrSoJGHShHjuFWFA/BXeHpK9U0vQ6uULngDcje0T\nYtJJzbaUtNpZGkyL+huiFRwtVuL+WvGzJ9yxFdBdCTruq6O6tYC/rnDFUi4J\nP9RSTcHNsdltC+KdJbxx/VmRFko4uBlCZXZdPkr66qXWhnC5iQUfLlZ7nW5t\nDehVFYaWOmcWrC9rOozgTZIB4RvuNfnkvBWAYWm1yXtKVXwsju8Fo2fNyq0a\nkWZMpP5F8yiFCY+3O/Uegz3Gurm+soNIxF2DkSIP9hlmMvLP4hLKTbAbwr+L\nTPBtZCDROeN3nClvMZosDLpfUqifbZxuEWeh2dGG7XpGt2fzaFC/W/Y3j0pe\nmmKHTJjfI+C4ym31liu0TgeVmJo1h6LWkVqBE21TMSx3es/onk0VhCRunmvp\nJ08M+HDwbVhEiCp/e/ZaP8AmVGFg/O9KoVos3NJBmbdTaG7BzqiCypQDiU9K\nrhT8L6hCrQETLueSRriWa9m2Ob1Rl7UuWX7Ppe0J2tkvouBX5wT82IyY9LIC\nFkl0lgYmdnEo7l7xrhiz8NZhQg/tVoVLSmSCwfREoJESnAPVtRjYS0AdlGQB\n3c9i\r\n=Av7U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/base":"^0.41.0","@material/shape":"^0.42.0","@material/theme":"^0.41.0","@material/ripple":"^0.42.0","@material/checkbox":"^0.42.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/typography":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.42.0_1543964121543_0.4622323856172905","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/chips","version":"0.43.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db8e7371dc0baac2081e8598a8bcfe5aecb40e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.43.0.tgz","fileCount":24,"integrity":"sha512-iweQCpAabEAx/M0NSmP8c0y+I7nAqB8IWJ9L+a7QGnpcG6Om7Huhr3LSi4+ZmfpM1fTAdC9XKbvRBoPM5NWjPg==","signatures":[{"sig":"MEYCIQCdyljpSMcutrUD6/ul7d6oqW9XMwIyom6CEbSr6V/ZiAIhALZchbHROcTZrcrGGrBN1hK60ZoRIh/CiLkJ2iFHRjV0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61gCRA9TVsSAnZWagAAUs8P/2ubDEkzZah5gWRQO8mZ\nUk0tR6bOKvNLt6fEGiaFesBJDAMOxjMVrh/a2aQ6q1RQLbKQDQITz0HUkz+X\n+nz26BDRCbIO8aDOs6YCHGnySp+W4UNO7Xh9rdgU8x/VpekAi6D3bF1ciD5O\nDXmkqr+ZAXPHhZhZbq/otTla3E1kkC2Rm4q++XknQroSpjh7aYS4VnfQyZ2L\nKyqxooS0OJltEWKc9lw4Kska4w2pyqxEW6Baa9bOgkHVNcLmQtyOKjGjpv8Y\ndBRDqXXtpa6Ys3eVcp6ZAuuJ9FoLJXddtagBVFY21WxoSS8oElkiu+v+pA7k\np9NNihnB6eWKYi5gKzPw99fZ4GJ9p7Zj+ZQQ5dbrxpQQYYzuNYroWXt/K/s9\nBtOvqWwdIm2Czbw69+XCRMSY2ngGLrm12iQ/cnzm2RGhzUbwsOqT5R5vuJ6n\nK5A0qW3VhO26nwjX8RC1JkXitC9QR3Xtuz3yAdWtJClgBfhdJLAode2Io+sL\nWw5qD2/T62nL2cZrjWEyPTCu/Bn/kmU6SJEpw9RFH3RsEobSvgsggkNCa/mQ\nbMcF+nnomfzdEo3F40Kz6FUgfwqOLeFtk8bEUIMvbYwTMmuNftG8L/6O8GwK\np080vz2i87wcG0Pq1EVTliIvMO1Drd9nLWE0PHqOWz0trKCgTDOWbvFtZdz3\nRd1M\r\n=XHzb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/base":"^0.41.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/ripple":"^0.43.0","@material/checkbox":"^0.43.0","@material/animation":"^0.41.0","@material/elevation":"^0.43.0","@material/typography":"^0.43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.43.0_1546890591889_0.7858528619202194","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/chips","version":"0.44.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf553a5bf5db7320978402ac92069c9688b84d5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.44.0.tgz","fileCount":24,"integrity":"sha512-+qrme6sGwYmX/ixHAo3Z1M7lorsxRyKexn1l+BSBX5PBc2f4w5Ml1eYYYcyVGfLX9LXmefRk0G6dUXXPyCE00g==","signatures":[{"sig":"MEYCIQClYDnOt/z2ZXQMjAsUFQqLiKwF8+gUeNTlj10c8PqZ2QIhANLpwXPGS7PhaSDeFb8B3LumOdrcW78llAKCbdT/2SDx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIN3CRA9TVsSAnZWagAAQWIP/0qH+Y7YQXqbYv4f8SZ/\nLa4HVplS97vbbyRLD/ypyO+BeeVm0SEdYG8DmbSFbnc/SDoljkwuThLjG2cx\n3AzGYQzxXxMVfZOqajL+kHANzuMynEMNCm8hk22Mg7o2/AbcI/CohB5U2qn5\n6EiBk4g+jht93dhB3Ew6ooW8AO5KVqVwD4Gxayc6Nuj4E9P94J1NOso+BdHv\ngywEwqjt+4lcx5+hv07Z8mKXyKg0C/2AO5l8mp7VP2pyku/TCSNdfMx0/A47\nZTMOfwbiJpv9QAl9v3hEuQLpyBg5GtKR5XwU079PgWM+O8hXopFH6qsX0v5K\nB9L2nvO6Rw4MKIVO1kd5sVdGdEvgqW6xYAGlSR0xsLe1L1UpRPs6vvxcqXPd\nEc7rPcf+LoCfxBQ3w3cSxXlLVF/gCT5HkUw2UdstppONJGHVMbber7pFdMCE\nohLy7G5hYeoXMA3Yci01KbX27ChAlIqp67mNLXS9/xfpaJOut87t8i1df9uq\nK3m7LwI2rnCPMDTCXnvPZ1T8KJnZDX3VKfTJJDoB/WNKLrM1tQ+RO1rIYIiB\n6FHvs4B0VF0mmMTY2Kvq7RdqbYTbLOMKNiC3H4cikGPJVEUbi8WtDJD1b1aY\nlvusQIN2A70P8K+Wo6P3YnvDF1BbJNnrexZkQgMqIYUnYlkIV1Sh1YrIzkXj\nu7V1\r\n=EuIs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/base":"^0.41.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.0","@material/checkbox":"^0.44.0","@material/animation":"^0.41.0","@material/elevation":"^0.44.0","@material/typography":"^0.44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.44.0_1549304694330_0.15543542558816625","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/chips","version":"0.44.1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@0.44.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"610186ee6790cf31bd61ad78e4c6d4c05150b31f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-0.44.1.tgz","fileCount":24,"integrity":"sha512-vg9OnAll68uWT4cJewa9yXU9T2gxoN4oYSALhxphlkhHZG0EXDZJ93mqa5BMVSn1nv3dCL1nvVnV3Br5BeTNdQ==","signatures":[{"sig":"MEQCIEwHs13lQ0SJAPxBP0a0wr/lY4OWIOAXuToEqqMGRT/wAiBu9NfbqPXamQ3A51EWac3BU6U997c3pD8yJ/1z6ICbng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":754896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbItACRA9TVsSAnZWagAA9joP/3nIQUem3LksRA/n2rem\nWV2mC374nQVnE8OwTouqsj+8nx8usypgdw4EDZSUE/J0fwFXNWOqemi+cgcd\n0J09vg7b7lliPQoSp3UeYSxeCNCkvKanwZ9n2FalLg0MG4uV/qEQcMcIky8q\nfjLtwaDFdT8txoKvoRNMq0RfluPfWynBMZlFkkJ+piQkthJzUKwqMO31qYHt\nPa6KWzVr/y3DuYH+y5qS4sOXZdajSoW07cn20HYi4qzIuALB286ncNhtzyYA\nMOTBqNAc0pxH39sxGdlVN6cX81LkurtVRinasoqnBpwFO3o9o1w90OMF+EQO\n7P1A0dVLefQ8DslY0DKqgieTSsXp4Jzk4UqhpV9SRDjFeJl/5BjOJbsPKTEU\n4X7tm2wk0ghSgrU4i6stVw5rbM1HdrBiF3HwQBYaENpFJTtjTHP4LIAJXbdH\nIULtYTMCllEdwn/hh5TGTXk5bBuOwi7x/lVuDBZ8tQQS/mq94H8SOFOhjSaf\nBh4qypCx2Z4gEKphKtpxIjB/CZ2scEugw4iTeS9CXrQsT06C5W76bl7W4ohS\nqoJK3U/UbGV9dIQKyjOraVDjUR6zpYikJtNoCd9R7t2sOtviaOPMU8/Hj2v9\nm8l3v/3w/2hU1q30nZV6DgS2pp3BEcCQmWY0Y5geltEUI73oRCX3FS45HfUi\nwXGF\r\n=NzZ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the Web chips component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/base":"^0.41.0","@material/shape":"^0.44.1","@material/theme":"^0.43.0","@material/ripple":"^0.44.1","@material/checkbox":"^0.44.1","@material/animation":"^0.41.0","@material/elevation":"^0.44.1","@material/typography":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_0.44.1_1550617407935_0.749198504511613","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/chips","version":"1.0.0-0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@1.0.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15afeac47f98f772199f45d56289c802dfb8f594","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-1.0.0-0.tgz","fileCount":52,"integrity":"sha512-iW+ck40s+s9qOHe7U+XYdCiDOvfbQEFIo2ZzF1/xEu1Aepd/kFoc/Ko0fEAbaAtZ6q8dGLOJEv73vwYwMUd8kA==","signatures":[{"sig":"MEUCICYpaJmLvJC5xZynY8Ivzf0By5l9vUbyn044yiozayKJAiEAy2uEMHqDonFPPS90VC4dQDrJANknYdMPndlCXX7d5UQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdySFCRA9TVsSAnZWagAAaAwQAIioPreNLPAIo0x06x0X\nuQeN9j9l2P8xz/Gz9mkus1NH2G85W9kGbi0eZ+4SRS1gFdtJ70A7qSMWgVFL\nSRRo4OPZvgnR8zXr93WOfuqCqZZ8cl2WCtSLTdA/27i+KQzgb58qOieBcbYW\nNlta5Ic5Go8OaX7YNO1fw2BTMXjpKf1pQ7EyMk40rI/4sF0074RfRnUzCT/G\nQ52FEBoaY/HnwzpN0OJ0yKHSqz3J1mwggv3zgkYV7kumc3JbWVazhAzaA2wg\nUH/vrRs+7Czgc9/olKs//zDkRICfTcyPfmU2O+fpPoFiJWa9ZvpsVF7BGCIe\nPl50VcMgu8gq0UXD9jK52iCX8RYiWrOfrAkw8etHwhsHxTD2p5vs0l1Xzidk\nfDAtPGds2kiIWoWfm5dMN5q34w/qNDo78KIzI0rEmQCDb42KyBudspRVXiks\nHwilxYtwgFpFFEi7vXYxHfzamaE62KOIOUcxgi+R/OMyUDrFCqI0XNUKimAG\nxuE9LmpyKSCzDMflsJC57Po2FFmObvKPo8GgQqM7Xuz1RtmkfhZwJhGk64s4\n7KsQK/4lQMZHkpePmuh2HNqOlyWuAt/GPj4BQRpHZQP0ISpLR2n716sINveP\n7pNS7MSfV7n5w4GacHfLNLyUxlxl9qW0JN7uZjpLGEPB7eKXODyia1UjNoq/\n5yxR\r\n=EZBt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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```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  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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\">\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\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\">\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### 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\">\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\">\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</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\">\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</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\">\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 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## 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--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### Sass 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-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($top, $right, $bottom, $left)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($top, $right, $bottom, $left)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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\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, root: Element}` | 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\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) => void` | Notifies the Chip Set that the chip has been selected or deselected\\*\\*\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\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`removeChip(chipId: string) => void` | Removes the chip with the given id from the chip set\n`setSelected(chipId: string, selected: boolean) => void` | Sets the selected state of the chip with the given id\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`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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean) => void` | Handles a custom `MDCChip:selection` event on the root element\n`handleChipRemoval(chipId: string) => void` | Handles a custom `MDCChip:removal` 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","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-0","@material/shape":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/checkbox":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/elevation":"^1.0.0-0","@material/typography":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_1.0.0-0_1551312004861_0.23213018059734214","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/chips","version":"1.0.0-1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@1.0.0-1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8601069872491425c4802ef826fda2a83a658c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-1.0.0-1.tgz","fileCount":52,"integrity":"sha512-O4QVDF/W58sqzyULeysU+8qNJLqnyeH0j7rh4zSck6e/xOVI7KNCruFRp4NRJHna4W5dgiHkKQMf1laQykkKNQ==","signatures":[{"sig":"MEUCIQDlKKjYPNRMyotnWZL6eINOV2XJfFydm9bvzmbB/uFaQAIgX/7h+spSOIqWJQXTLQji1DL0+k5W052lu/e3PNG8a4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXfCRA9TVsSAnZWagAAH2IP/j6p9S/TWLmlR4RcztaJ\nbmwRB2HPz31CpsjKvURRlnHcR1UBQPjA6/DPc4o22xFPd3bhs6iruEbuGFPW\nN6KoYpki+4p7Q3OitFeRBe21Kju+N8eqiCgnzCI6i8qHhDfRILp11rJ2r03g\nSTT1VVITsgHzKVALuSwT9mVoeOGTDyl3AlApH4Vqw8+38SwJ7mOviRihVyO+\nhBraNgB4auLE/SDO29GzLyb8kz9FDUc3MB0qBj/Vg0SMxnFqQuMKnYSHeg+D\nRJG3mdCbFetfkIPtq2xn1KSw6EKjXYgFzewoD7vjugeb+tQf2Q7Pwx6PN2LQ\n9jT28HANOYK1+0xJtjNYCQUj0TGxSP3GLRHxAa0J2JayOdbIamVCvHuM8MoL\nN9BRBt9zpasIdyIHdGgfxGIgQCaxnYnHycYkiu1eG8/b9RLQEkChSkj/c7/m\nmfTDoTPPnUNrgoj9wxSAAzO0QAd6cwKF+6OvzYwkbjj1BN0q3C/5OgHX3+e6\nIa/nXIi06BEFGU/5a4iO1/Km/xWfkUGJ3e4SxP2Fureb02STjIwbFp+3vp3T\nKbSbRTREELjtMai4KXE8VCxsxoIyvsUdQM59xZnitOu+pPVGNZtCoGYNRsZg\nVIyR506P8OpBLd7CE4QR2yk8LwC3HQV3GP1RAx8KxZllhOQDEAWIBJ29H8KO\nRFEJ\r\n=l7y6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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```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  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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\">\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\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\">\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### 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\">\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\">\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</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\">\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</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\">\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 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## 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--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### Sass 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-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($top, $right, $bottom, $left)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($top, $right, $bottom, $left)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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\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, root: Element}` | 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\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) => void` | Notifies the Chip Set that the chip has been selected or deselected\\*\\*\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\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`removeChip(chipId: string) => void` | Removes the chip with the given id from the chip set\n`setSelected(chipId: string, selected: boolean) => void` | Sets the selected state of the chip with the given id\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`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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean) => void` | Handles a custom `MDCChip:selection` event on the root element\n`handleChipRemoval(chipId: string) => void` | Handles a custom `MDCChip:removal` 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","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-1","@material/shape":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/checkbox":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/typography":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_1.0.0-1_1551742430855_0.20225112446290927","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/chips","version":"1.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@1.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f144c6a7e396b277ea08b9d0bfbfdea2070926","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-1.0.0.tgz","fileCount":52,"integrity":"sha512-XTZciM7tDPuHG1Cc9HHCGWFbavidQMowrdmiN7m2pWntYKBJPV5HkSWWOkeoVssshgRvAhdKpgoA1qDbG99nLQ==","signatures":[{"sig":"MEYCIQCPX5y2PiIuX4NOo5KQUuKRf9jR0/5lMqt8YGyZLmbyOQIhAMqrUZ9GtR/oQazOd/tnrqWEHImtJfsB8R22rhgtViyd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbaCRA9TVsSAnZWagAAjgoQAJof9NU2EFnV+HjmdyM8\nAuwGXBtYalKIq1oXaau76jfzYlsEJjFTNrpyOa/eVFv0GSBjWct3RQbOVKOU\nqYjE34RFah7GlrmvnS0f/8zu7CGcq+BnYU627Dh7ac0NchvkSfWgC7qGA88f\nQmEhtZVPdGAJNs1eid6HtRUdMCN8IrP67CzDqfvcapwOdkVOhuvp4IY0Y9/D\nJr4aw0HdYLNyWGdXgSuXbGiZoBcV7Z4dsfmXD355ML5pZE5RzthWBhoDL2E8\nJxYQ7uMLbvPo7MTs87lLkF+6XNwUJf7dr/8rPTxFboUjKz7CvZ6/T87BDihb\n3n78IfDguulSqMg1BLU+J/VagX/q0CdoOG2zSgg7OrEt8ON12TNwGO6SOd2c\nGfF5nFbHVd8f/4n/eobDs+0cXq5dsek5PD9X3aZhM+5VIpzHmCkEVoisB0QW\nAL+uidmeDZyQ8UGopXF+TZVOEaZHVlVCUoJZ2WHCybfRuHj7lie3i3mvH2wb\n1KfNOFBQEvyfflkVgmpVkTxfopEVxVoZNG1ClWP+yHf3cEoL0ecSLXgRvBIc\nl9HwoxevuDlN9J+zGhwSpgcDBJwv2+rfa2hU0/uRjiupkZSN2h0qAMGezn0R\nd2Z5mtpbD5pL6IZv6W7bsTZAY/LcXongktNMwjita6an7olFdQMg6sA2XQ0X\nBtun\r\n=f3Pu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0","@material/checkbox":"^1.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_1.0.0_1551906521159_0.8836454438873731","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/chips","version":"1.0.1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@1.0.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2174e6b2dd02461ced780f5da086ed80f653fc8a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-1.0.1.tgz","fileCount":52,"integrity":"sha512-UcCEkuFEE8c3zdzAnv7kdU7hG6QNOJpVgmrphWBgoPG92+yFFb8b5Wo+3MWT+SIF/wKNSNAo8a+BER9DsCOOjw==","signatures":[{"sig":"MEUCIH/r3VbBdL+0e8QVtnkuzykeSIfSrEW8jMRA8jDTqUsrAiEAofTjFEEJCSmPwBenDfu1ElBOpJ0Z6cEaZhLu8dS+LJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtw8CRA9TVsSAnZWagAA1AIQAKRplqXXyww21xtkotXk\nZaU4zMLgUVtpjCKf8t+dfE8DEbZFvWGyiaC+5issO0sbUHcV7U1VEu1Gqbiz\nAjMjL9aKRZXYTXCmG4hiJ0hubbs6BxrOD/QzNw+JkV8IjNljKK8Oc0R78Mm5\nOEkpNpmw+hc0f+F1LagHea3ThFdkWwQASa6eJERUxme2x46PcBQeGGy1DN6P\nbWgvt7/qcUUigUR36lklV4W0NExcPKMvF+2VektQN6D08o6OM7ja8oN9NaPE\nwopWeqjIdvqx25ENS+rHWsvMUyNRiYVyb3PIcsQ30E+VZEyydxCXOp2jQTyz\nNDugG4oNzkeql850DUBiVzlPj66XO+CcGXhBynU/lMPWHrx+RZqmc7MINKN0\noT/busrYrC2NLQA1OVAKDdn4NUYbTGx+slbMMOl5nMma1x3W9WLrjRACtCQ3\n93bwRbA5DR+vSeJTftyX5AYtTAcTtbtCgY4uBmbnFACCz8Kw7CSiFYtUe/TV\nnvQIQYmdBdbDovprutCd7+JWgzNagsEWDdVtJgpPNA7bgaSYfuDqNqnWMu4Y\nTBZOwl5LnGR9CDsfby/7gWvk/wYm+RIlduSCaBn6cCBOi6XYW6gbrwGL5YR7\n/uDC7rO24FgOcfI0ZSDDmD72IRvKdmcHX04mWeY3wc5isu7dhzM5v4lF3wAR\nr4W1\r\n=E8in\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1","@material/checkbox":"^1.0.1","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_1.0.1_1552342075413_0.7851394485706402","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/chips","version":"1.1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@1.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b698dfaece9c21bf4205eb65909b17388147e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-1.1.0.tgz","fileCount":52,"integrity":"sha512-+cIscrfKBFhXMaOHgNWx46U7zctXX6toMMG9lxY+uqH9ALo/NeScdZp/kc0C3z0shvRzXjZfvl5rM28rKjnizw==","signatures":[{"sig":"MEQCIAFuZ4o6MfWfUNqr0IfUQ7U+D2fMerlJHExw/RhHCjzpAiAUB5GvG2iIK+vV5dYC2mfjgp00dD0BF5eOXwHPHrwmMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":759556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzhCRA9TVsSAnZWagAAMvoQAJIezWxBZ+0ODgRL2sPs\nWopjduaBp/jP50gqY7e65+HsrAKaOl0JFF6AJTWwJty5KoYtwLLjKOsLsjNj\ngvlGVt478zR042P4SwMiB8TenSe6RrSbq/Ao2D5oIDd40HY61F7en63SSRKP\n0wpy+uVzIHkf/txno/KLF8/uNnEvelRrZEhaTywXuZ5RjVDrERkYCy/fHAb7\n0Ru6i0nFZI5tTfEfe9PKIE9FLJiiSJqXDjZo8T1YIoLMGZRJRY9Ev5BDMln4\neiIOdVk4Is4/q/HAvEKdTJ4Q8rA1Ib6bAxmSM3XeE5aj9JvriFYBvZbZnkmp\nJy8wr/gJloBuoh6NFclsq+VDU4RnBesxIbaMgyoJv3jRdoLoRt6Slb3GHN+8\noz2sGB6MKDcS5Yqx3VAurxbGnwobBZEbSXNuuH5xlSadoryDTxnMmPcDDl7L\nAlN1rn9x+Yfm9+rc5tYobFMs8Dix93UhmHMNAn3Rq6Lx41QKW+ywkcnK32Bx\nc0tvW3qVJc44f8VBqa20xKbQEf6kSoR2iaYFSPqViLHWx5UBXCuATWoyLmqF\nQfsMaNGx9DUhBcDuDRIeYkio8XbQ3BvwNzpM9/pPdBXOh0+VU3LS7/ziMtTU\nq5aWCyiTFbVah6gritiNDE2fnQIOhlEHvmpfjk+FMVHEc+qO3wuh+fecB4Ib\n9U1a\r\n=1R8u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/checkbox":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_1.1.0_1553628384865_0.592150693508191","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/chips","version":"1.1.1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@1.1.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed39be4c16843f1264c786c2d3049b93f3984a89","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-1.1.1.tgz","fileCount":52,"integrity":"sha512-ftpYba7+qEeRWCU9xSHJmkD6UXHo/UQEfqBcH96nt7QTa+ZIyyzcu64lc3OpFgLM8RnugyaAWlJ7i5w510YRiw==","signatures":[{"sig":"MEQCIDBEMi1FFTpKCPdqIQk7Z4hQ3pxkKcu1I/SvNyzqPtp0AiAVfXk9cAZ/FnIpO+WbMJ8pUQnAszYi2OGIc2yYVW8LbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":760009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uECRA9TVsSAnZWagAAZEYQAJcwJa2EFlgtJmeK3HEl\nUigN1jwJJRc1KUDfmvGR9CS4EO+0iT3Jhg1smv4sBLa/MSl8lJQYTqTtGRtz\nvY3z+gUlEmB8iHHCC8vWfYTcsnyakqzYi7umlUyvUcy3g3dLpUwJBryyJbc1\nWzGw7Wx7DiIKr43MiGNhKjxkYeaNO+0CFYisDpf21B3ZFinrgDNOFbmafdmR\nS4MVvA+g8QcgOFCmIRBGuTVL5/l8D1WuJ5tjJHGc82Ad1SStpA8bIwDv/fa6\nkbDa/dwoL2Xu3pdBtO9EO9owN87QOzzMUPchvnnZbLMomsDRdhthfZavb9tF\nye26f6XiU4qWBE55QodPXu45cK4fb0hWEACgSStsrA+tk/otwRkQV4v+Rhti\nvjwsgDGvWKiQU+pC3gCWXHQDOws3XTESuem/P2+oR2F1Q1tGUZuSkYXZI8MX\nCGLEODwnMZ4MGsC+lj0Ip9dRnN+rav8DmOU/7N5WOmoTqDiJ+30hKtL+PHgj\n++QjxFgqs8zEXuTo7Tb2bo5efKu1rj4UA/+D8iGoYE74YYrVqGjN6QGCFcKp\nFBhAMub0zw6phQk4dSxph6SInMrn6zolMbtMK3Ywo64P0bO0Zv8ivLXSvJwD\nqBdA7ikMQ79In1gSjVq0uls9+3oYfEhmp2NhZgOA8kFuitPcNjFk+nYmmzou\nsOLF\r\n=2by+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/checkbox":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_1.1.1_1554754435906_0.15531737308846938","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/chips","version":"2.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@2.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6881c3c0a97015c368c7cdf4bc49a312db6aba27","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-2.0.0.tgz","fileCount":52,"integrity":"sha512-XvwMcFyMhzt6VC7KDZlP5m1XeBBLls8+V9NLw9je9OMDBRyWonqtZKpbaf9TAWILn9cPMfJQuF9m+9fRbP/Wqg==","signatures":[{"sig":"MEQCIFIdnf5neQIPeOeCxFJbcB0MNeTQA7JY9Z+sfT5eLD7wAiBd9Xvx/YUcqFDtJe8B7dxonkhTIo1hvRxhQLgFQUs10w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":835228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzcMCRA9TVsSAnZWagAAj9oP/RAVQvi7b98rvx3NUIjp\nD0hVmTiwcfneBEzCiVa0F6K+B6cO0JWH84sdKNToRBGSMMQDO80ELaLlhV/2\nkK6pU2A9S4q57yPgTBMfCX5ePrLrAn6XVQPW7Rs/1dIrnMB0l8B54zLaoFAk\nly4s38ZE6tUzphltTaGsb2ykwh0xj3AHa+zhL9SKi1QDluiLr9MAB2AN6p7P\nBZ0Weih4mW0F7/hesokRL2/IRqznqbChwlTj3ZXR+mPrs+ajUpFAPGAB56/O\n/T5pLutI9FiEEsvWyWQ6iumpaTV5wJoxXQswQjkRX971OYGqRzf2ZJtS+0j6\nuhHoBW7LTVwQa7kfVt4qRZIsOQkHbuqF/p9OUKEMWCdBbyyctcVm3lzitoq3\nF8a/WeEJEVnPng7KEP1qDFqmdmgecNtwjTe2F2qywjfGh0XG0bCKzydO9Ljj\nplXziJM9H1qIkVZthemO8WZj18zUsQBqPAgZ/+x9gcsM7jwAD8+OXhTK74qi\nu1MpA4UttlacdgtdOA39Z74Hihx3Ep7uGB8629dGqaASNUOrLrqb+GTtCOct\nuzJn1LdfSiP4oY71SUcY+op9faEXreYEHqK7OHrb5rP1mIZsbbO36+1nsi2O\nPLrTMRXf3xmXQodtmP03FtpwLluXIV4Ur14P9uNGCSsuUwG642u5VJU2sd94\nYh2C\r\n=ftJG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/checkbox":"^2.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_2.0.0_1556559627283_0.03007988047903365","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@material/chips","version":"2.1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@2.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31d282b94f760feb4eced04613b411722fcf72a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-2.1.0.tgz","fileCount":52,"integrity":"sha512-nK9xW/G1KDV2lX1GeociA6mHKJBvihUoA/5xr6Lgowv28h0R3b1rRbAojnOKcamvAiuiAKxL8VbXQzWiarNR4A==","signatures":[{"sig":"MEUCIDe/3RbBnFNczhwr/G1QkUcRg/E4WRYfirodQQ2SaUmcAiEAt2BwzH43xZibc6ZeXrfu1XC8UZSC8yvlvOm9pBYTSWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":835228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0FPeCRA9TVsSAnZWagAAC/0QAIKog8jzlnJlhZS+UmmV\nsr4KJvFZryOn8VoMxJKofEWA5Zj3FoFG8OD4MQacMjifAq+HGm4bCrJ44zYt\n2yUaDwmCdery/0LfSkTiCYSdrlUbXYeMCsdzYGWZ23CEn9LnDfw3yn5T32l4\n4Rk3Piwr6IEvtPtdcMeIucdNttRXpGQa7coV2n+tyiE2lDBEwRknlbTwn/Sq\nIWhM3GB8JHybZXx1n2Po8F/6ETmVkVA4lpTnBzEkG60U31mW/RWk9OBFOuVj\niQZWK1OJwvYnwOBBseBNkvNebkFt91jkOJTkdp18DCU5YEPbrn+5Dgbd+CiO\njZIOT8cyIk6B//joxPnLbeazmIyK5yuZK4aZpiY1lmIbfA7Ryj7JW7tGd/aR\njzV3t+Gz2YJUSrCH/51vv6AGgKua2RRXtkibG9XjFsO/KMxiPBE8enKSujX6\nEgsGZjxRjtu2c7BD1DyH7MI2zt9CuWa0JNxQQpqAPChUejT0gXUTjqXl1uho\nSnZ8x0k6kt39khBDku88o3ib7Jmiiijwo7zKxN09UGiFEjeXVpFbhnjvgkCr\njC3eEah5nQkyNC0QcbsAFiz9dnfAiiVClstpqM7lODyoiSQSXV0jYpFFn8pO\nY2BBMSf59l5d3ADTFcsUPFJi1gvwIIQxJrqgta98jPh+MKacfWOsZ98mc9Y0\n7aGH\r\n=TrqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/checkbox":"^2.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_2.1.0_1557156829552_0.8539576613063937","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/chips","version":"2.1.1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@2.1.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"497e51e9e2656a27c162dda818681c8875332578","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-2.1.1.tgz","fileCount":52,"integrity":"sha512-hZ0EWO+o0SGXPtIzwJsnT6NL5pgFXWsMyxzAeenE89DZFcC0TudfYe4kE2df0pzZYoGkk0n/5NBly/WLEbJtfA==","signatures":[{"sig":"MEQCIFm7Rd7EVP+T3eSK7P7sHhULqmqX8cTR650bT9RmUkg+AiAamnQd/pDLa4PyQfp+kvV2DNGDBa7YANt2kc2P5HLgng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":835075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQVCRA9TVsSAnZWagAASFoP/ifSeFuBugHWVwdlhUva\neQF7U0epTuMfML8wy4Len5ST80DrNx0cd4k/tBePeKdligqJ4TDN/aPMPmzG\nq6jFdkEgOZ0Nr6APO41wwnav3p5IPhE+nHjLCp18RXzdKpYxSBxyh6takgl9\nlGDYcSrWJeewuRZRNBs5l8fV5PlEezXQdfBG/OhVfk+ane65oD6wl3Nclbet\nmjiiz/lYeCMQGiYaT2xBCd19BolePTLw8JcepeqSGXSqeeRVrLGPZIKx7c8A\nEilg5t4IMZCqilrjw4A4fWV92he12t2TIH8LcSJt9Yob+qZFRquMN5vXR+uB\neExKQ5lW+Z6cp9LrrzO4YAxgM/0g2fsFsJySR5RvIRF96RDcUB2D5cJ6UB5b\n2tpm2mT9AbS8Ev1NAFqbybzegecYmEmowsFDFPI/wyNFHCMPMrqoOq8oiW1y\n06qWQBjrI2YGTRHFSXD7HHNrtGfy7DsMjhkt+W4+ibjRo/OPbBZTNdvsEjMm\n7oi5hIH7bLuf3tPoywMzohpBGr2NW45PBpNvb4kZLnrF4RcfxhM5kwIqanVi\nlGb8czoDflIjZl2avjSDf4Z/0EtitoPBztLDGy6wafesFCegDEaGqggggI3c\nehNbVkuc1+dI8bGQM8ru/CzgUUQNXgFEAEUwdZqR60Q5z479hDDUPt9uxMkt\ncuUR\r\n=8L9d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/checkbox":"^2.1.1","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_2.1.1_1557509140130_0.5516790718841291","host":"s3://npm-registry-packages"}},"3.0.0-0":{"name":"@material/chips","version":"3.0.0-0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@3.0.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22780181db47e24c2d0f3e03f9e97cc4858d559f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-3.0.0-0.tgz","fileCount":7,"integrity":"sha512-peidUkMTMD6BBOw2Yju1n4czE5AtmD4bfw/5Ba6OyY5hOwAhw6TyPzXh5PNHCP1PW+rSkD0ZCl7Nfodifc4vvA==","signatures":[{"sig":"MEQCIB8tgtTJNZfm5RY/Ij9O7mjuBFVeIibYDmVYyOBD3TFcAiANWTRATo1xFe2k7jYbzhsP+BuO8o9lwEha0gXaNpQjog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2eZyCRA9TVsSAnZWagAAt3kP/35kG7f7htvCZ0kWsTrH\n2sE6EhQdSyuoGXjJ/WqJUXjQ9EdgVwC+Xl5JjQoMfhzHL9cFlW49aGULHI0h\nmsvLzhxrKV/D02tVhi92/0QTXkTYP3wgG0kuK73uCkQnTiNzp09kbDMIz+56\ntnOHs5rmMoFsfiJPWKTl8O3w80kRHVqrpAkzFx0R+xqC7nLJecEH5mXik1J4\npxNrT/hrvSfZox42u/Jh+lm2GI7TdNNb17zzEhzO85asSgjLFu4tf3M98WHX\nZ8GLO/Wm2J3Fmi8YKl2dEpjLfFg3Lng+27caTVeNe4nmh6CnogjLT1rYYR4H\nkBQ4567xCzSiufdowJ3ZdsAcegJX+d8X9RQrT+hGCG8CQXiIHN35CMa6wt/l\nMoU4Mh+k+MgRlsrqExdKaEPXXt2csL83LnPopso6zlFSx3Jf76ooFvXj3d6A\nSOxy8QgTBFX9Z2Djw9WnrqTVTOYolCbg2qjxopI4SE3j9Ng+Hk1IlW9MQnCz\nnjm1cea5G/I85MnlgI8hai/eQz5RMvc+FUq2ZVZdy8beUVE49RUH+SL4G1Jg\nSpvBguRpnRZvyms+emFZ/ESjTGvCPQ+x/gockb3ChDek7eXnWPBWkKlrXDyM\nZDgVLXzTb5QinONvo0qwgyvuqcoIlSmuYc8gh/1sY3rjax/4TO4KGzZpwL+4\nuOV8\r\n=oPH8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/checkbox":"^2.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_3.0.0-0_1557784178071_0.5269567184134776","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@material/chips","version":"2.2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@2.2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bcf2059d39937714c98474aa13e1eefc444ef12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-2.2.0.tgz","fileCount":52,"integrity":"sha512-SqaW8kjIBOaTGNJgqcnyQuGiOqYiXO/3aSzQR8cLZjo5fKAwuO5yaKYpP46N3hV8pasEv8RgRFo4CM7QAvTlqg==","signatures":[{"sig":"MEUCIQCcHu6vD8qqz59vSz1i41qg+jVIarBZ3noovgK1J/tvzgIgDA1Jp6XQ4f/vmYAfOE2aO/bBF2lt2PRv7vR0z5E5SK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":851055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2ezpCRA9TVsSAnZWagAA64kP+wVBNWG1EOdigmg6fLgg\nQ5oHHVBCUFWF+3CNNxW/cs6H7T+/l+lWxV6cEFd4GgJ7WsdtwBZedeonluGR\nDK3L4M1p7R8H8WOLxqXYJJhFOc/t1mcTymrj7pCNEUftYw7ykRTwXbhXKS1s\nC7tsAvb6Pft8NN0mnNeogFU+rZjHdum0LaMWCleugoW3JO15JEqPXQKmAMb9\nfI+bAKZfe2UB/t9pXsvPrtR7V6W+2OCBSrXALd/c9oLzFdtWYgfCm5HuVxb4\ncwt1yy9niUqCpx84QPaiJscuj15q/KOpj9Hbgpm2hNeyLyzkxXxdSlVWTXdA\niTICrsZwmalifVHv5AXiebsKMqYnNT3dGONKs+/l+CaZ3ltDYPMW03KvVayJ\nXkvzAvagLcSb83H+xVJC+sHxyV3m3dOCa6Dy6g4jOfGk+5O2M5YAVdCUwASl\nPcX2gW26U01SSc1GUu/ThjiTejtqw5/VZt8Yu1lO/oeoiitCRtlZK+CHUf0W\nMLB22e721Ldrg49uBke2Iy2tx+qbGw554nXA+8TwMr68O3nb8OZTiqO9yjLx\n+weUzoT+DgvWtfIIG/mJlKV5PdO7vUmdnkv5jFuPUSNCA0GcB56oKk+bIoY9\nOMPbKqxjV2vfNLQcMJsuY24z/EArT+ma0+VwodOmugXXOCimYPTJm7kaHRe5\n6mAo\r\n=9+Sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/checkbox":"^2.1.1","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_2.2.0_1557785832642_0.06439477639827706","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/chips","version":"2.3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@2.3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c778dfd61ab072a9771e69edb8b00917a6faf558","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-2.3.0.tgz","fileCount":52,"integrity":"sha512-jIyThwx3Ax8mFQSmNtfMsI66zJINPis1zZ5LBFTEDN2+iEf7KUgnke8UmQzQac4fPkdZQpsXuiUrMNe4PGf8iA==","signatures":[{"sig":"MEUCIQDEXQ00lEEEFkE/jVBlK4lDJDavWeLN3oRRRxnoGvpOFwIgZQyOQn/of4VBIwP/n9QJDmvKWxR3mg8CSxs0ebSSGSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":856871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7ab/CRA9TVsSAnZWagAAPLsP/3Nddgq+JUMAGrZ9SIRY\nYtgDV4A9sFw4NZGPH9R09FIg8stCeNm8ilhtuElxknN6/DxMNXal7EjdO3OM\n5xw+/fcfxUphMRBgaF9RGCn84mcTCHLgv04pLVQ5PWKpDcNH0SoO1vm4Vm0m\n/JuazcNz88L+CQS3l/Ky+X9cDZryoic7YngQxXsqDM72j4T9LcUdWxRHmNBx\ngdjT6c7Fdbj32/IX+aY1DOWmmo9uTCgm8Bdg/KR3nglrPbDiCHwkBMN7jEzo\nMc0sv+YYC+/RqnAKtQ4Gk9Xq0/fX/PkB349PgSBtxMv6S87I2ClJnc9bn2/I\nA+JFCyEck1swP5JtSgQtwSvwKOLSEOn/R8CxcgbyDyMg6eqWMVXmj9GtwUHP\nFG1K1PkfNiF3rfo/VTJhGjMFyan+Mz9ssCWNVS9Ie/rIqgFov9fypPF2amqk\nAJctFVqnP2wa6Sa6Z+740bwNhF8HE/55cxG2Cr3N/Oat9q9bLYnYae2T7fOb\nxg+hCsmyUfbWPCdawWZ2MLg6HMsQr539CcE9qiHRcp7x1CrU1jdXMPS/dMa7\n8/GTX+yJ914Vj5tY543BG7mTMp62KBjAUup95vnO1dMHS+aTUXFRzN49a7RF\nD/1VVe4GXON+UZeEUyCS4+Q4r3PBQu59dJkkwAz4FPzBhjkVbMjqmf2MdFOt\nQ4u3\r\n=Ljqa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/checkbox":"^2.3.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^2.3.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_2.3.0_1559078654140_0.37968863600083647","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/chips","version":"3.0.0-alpha.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@3.0.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ace91f5bb4d2b3b39ab749a93d4e980c96fe2ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-3.0.0-alpha.0.tgz","fileCount":53,"integrity":"sha512-bSKt1kJqX8Hgex9WLO5oUFACA0GClZBNf/GlSnhOCjVtbBlOtVElE2KlSU2RuEsr7Bv5AutvULfL/DuS0iotAA==","signatures":[{"sig":"MEUCIQCsCsGvZkrBehVV+zduKSgeZQ80qFNl2Rsid4HpZ3G/uwIgCW7g6tmT+2Yht6TekXlKre3OWxrW5F6zhYAP0Q6uSvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":857863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpwCRA9TVsSAnZWagAAEugP/imS7ZBs8NvWTmSQzRD9\nWJAvV+udO3u2n6VxDHqP5lyrYMpKuFmUfpSB7b/dZUCsHTS7LNMMzg6sTB2U\nIdzwBWfEeJMsC0AmcuojflZUF9x0V1Ieh+wWyEh5qzebUN/bS4n7qNgYvame\nhzUE1HR8/vCijXlvYVl0+A08MQXhq8Bqhdsnx+pUadp/rdnmh/nWr9sLoXKQ\nV5CM1TrpR2LQHs4g4czmBE9sw3RoA5yDYQ6TSMxtET8OU8af1x4ZToveJXFz\nfQ12TaIexdSVMV5q7jocaNJQ+XmnVVROw615Z/WOhSpcV6I3yeAbvumAPLGU\n5rhkvwDvq0ZIGXxUWYMcetJtOsDT3ahf5a1hDBhzubAxKd+NgxR1RuIl7h7H\n3hsZwuOmyUJ2VfmWvzZxOtx63NXixtPE57LGllASHGXAV3ELR9cP+EaKprw2\nXlaAgkT7e1NidoYp3/v3UKqLSypjjiihfTqrmY9DRc/4rKPdPB4egKd+SNoU\nY6uJRs3VlpWFhlWLOu5A6gNFeFPykM/WvE/CnoEQNUdSNKJaKGY0dE9xZS7c\ntVz2281Y7QfCZ3MKApn/YniolL3nkPVCT+jUHHKLuI/lLF758+f0AuLNeUZU\nfjub9ZxJyDngaBqE5SkEKAlyhmm4W6koBt9ZFe8lHr/nXqzv7hhOzjxv09pF\nSRKS\r\n=Qgc6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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```html\n<div class=\"mdc-chip-set\">\n  <button class=\"mdc-chip\">\n    <span class=\"mdc-chip__text\">Chip content</span>\n  </button>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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<button class=\"mdc-chip\">\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">event</i>\n  <span class=\"mdc-chip__text\">Add to calendar</span>\n</button>\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<button class=\"mdc-chip\">\n  <span class=\"mdc-chip__text\">Jane Smith</span>\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--trailing\" tabindex=\"0\" role=\"button\">cancel</i>\n</button>\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\">\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\">\n  <button class=\"mdc-chip\">\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 class=\"mdc-chip__text\">Filterable content</span>\n  </button>\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\">\n  <button class=\"mdc-chip\">\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 class=\"mdc-chip__text\">Filterable content</span>\n  </button>\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\">\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<button class=\"mdc-chip mdc-chip--selected\">\n  <span class=\"mdc-chip__text\">Add to calendar</span>\n</button>\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<button 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  <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 class=\"mdc-chip__text\">Filterable content</span>\n</button>\n```\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--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### Sass 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-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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\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, root: Element}` | 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\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) => void` | Notifies the Chip Set that the chip has been selected or deselected\\*\\*\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`setAttr(attr: string, value: string) => void` | Sets the value of the attribute on the root element.\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`removeChip(chipId: string) => void` | Removes the chip with the given id from the chip set\n`setSelected(chipId: string, selected: boolean) => void` | Sets the selected state of the chip with the given id\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`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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean) => void` | Handles a custom `MDCChip:selection` event on the root element\n`handleChipRemoval(chipId: string) => void` | Handles a custom `MDCChip:removal` 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","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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 for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/checkbox":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.0","@material/typography":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_3.0.0-alpha.0_1560312431271_0.5486992187616373","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/chips","version":"3.0.0-alpha.1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@3.0.0-alpha.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd7ec6d726aed2e10116370badcf292126f61abc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-3.0.0-alpha.1.tgz","fileCount":53,"integrity":"sha512-C1EO8MsgYbe+B4GnsCQ9+R6bj7eeAqYuAVupLwL80o9VJbRf+FABCMUhsOpLMiWV66K1Ra/mDYqqb3JByYj+bg==","signatures":[{"sig":"MEUCIQDHlvZPek/V9uPrc1e3xDC0ILVXId3fenrrI6nGRNILmAIgeJk4B4aYbs7zdA4ZY4cZjKVtweo5TI1gZrOCl5b30IY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":860830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxFCRA9TVsSAnZWagAAYDAP/0bdybq8ncHauG+Ah9Ms\n5033UbfXI+PHW1+D5ehZ1ALwTRnFxgBgCAQ2UITTqFfoqT+4sMfloioV6lEo\nXdG8rtGSSEEoPprlsWjwDurOtGYQ70976G6t8aNaLD9EY/fzkUL/Px0tg8cF\nPJ9PldfOkNul9PawC6Xp68N8w1d0ldtI/QuN/mxUpGXBVbkG08j5rr1EEJtP\nI1MHnqcwhPcHn8pntv+EIQ20NyVO/FK1X82EUatNPolDLmZAeJIE2+aPSDwF\nXpxWkcGtTC1g+5A+WJQSaf2qP4nTCgCBOwAefW52jrCZi9C4sXB8r4OIOe4b\ne0PESA4VlTmGMNwwNHQgVTHmd5MtDqkDAcU3aNCFYPbUlTTSlald7/mkN1vh\nvScFj2F8A7nn3hiJGtNMEGRWl4m54NyyMMp0OqDgxOqZ+qJb6dv2JO782mG/\ntTa8/KVUH16mMenKWXWLWcNkHwyfsk+FyUxVNXujY8hfoGTVAm/LADHp/mLL\n3Sr6svmwbLjddaUc3bkr8xHHYjR6nSbAjmKE8ZJ3aekryAIxL/17coAifMeZ\n5JYSNpevU6JQmojTf3IwREncztQsCCowV/hI4TF8P6AxyF/Zk6jJVgVWQzsA\n/1vijv7cffRJdRrc+ttcfT6Day7FUNsnHwCSpsLUGwxF5vCIay3pkSk9VbZd\nzPmf\r\n=LcSn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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```html\n<div class=\"mdc-chip-set\">\n  <button class=\"mdc-chip\">\n    <span class=\"mdc-chip__text\">Chip content</span>\n  </button>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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<button class=\"mdc-chip\">\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">event</i>\n  <span class=\"mdc-chip__text\">Add to calendar</span>\n</button>\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<button class=\"mdc-chip\">\n  <span class=\"mdc-chip__text\">Jane Smith</span>\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--trailing\" tabindex=\"0\" role=\"button\">cancel</i>\n</button>\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\">\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\">\n  <button class=\"mdc-chip\">\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 class=\"mdc-chip__text\">Filterable content</span>\n  </button>\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\">\n  <button class=\"mdc-chip\">\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 class=\"mdc-chip__text\">Filterable content</span>\n  </button>\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\">\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<button class=\"mdc-chip mdc-chip--selected\">\n  <span class=\"mdc-chip__text\">Add to calendar</span>\n</button>\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<button 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  <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 class=\"mdc-chip__text\">Filterable content</span>\n</button>\n```\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--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### Sass 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-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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\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, root: Element}` | 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\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) => void` | Notifies the Chip Set that the chip has been selected or deselected\\*\\*\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`setAttr(attr: string, value: string) => void` | Sets the value of the attribute on the root element.\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`removeChip(chipId: string) => void` | Removes the chip with the given id from the chip set\n`setSelected(chipId: string, selected: boolean) => void` | Sets the selected state of the chip with the given id\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`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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean) => void` | Handles a custom `MDCChip:selection` event on the root element\n`handleChipRemoval(chipId: string) => void` | Handles a custom `MDCChip:removal` 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","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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 for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.1","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/checkbox":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/typography":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_3.0.0-alpha.1_1560366149214_0.29186710768998725","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/chips","version":"3.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@3.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f15ea9ad71ea300267314fb15283029b37c0cfbb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-3.0.0.tgz","fileCount":54,"integrity":"sha512-Bns49p4/iDXd88QEASZT7IvOCHofv7frigxn9ONhDXvwDYAx3IQuzeXqG1p3BXv/DhaXfzmbYX4prqHRoB8NxQ==","signatures":[{"sig":"MEYCIQDXoh8YRkdU/Qbsvn/lDEDBDtp6L/bHN5MSJFeWYxtvRAIhAIQnhntDT6rDNQjUfHDuz0Crb8pgFxAigELb2sQEMrNb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":869121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/+CRA9TVsSAnZWagAA0RYP/i1dKW8/o4Bdrq+1jivY\nWr7m/59l09o/t/v48okDWz5m9E6wTKEU5209Q0J0/0b3l/fqJ+cpbVxu521a\nWwW9sldenvkKuMtdYGMpdXsKxOLXf2DCAykOdgYAOQjWgOXDQLhX6siQPWBI\nC8AIJCgi+X8SPlviiRXwBq2nllQLjs70L6YjG9fi54KO2WoPp4XIpDvnucJo\nlyQhFUuIxR+KOwKGvbRkyJ2dKKrMI7VijIfK/N3ZI0TipxNSUY2H7mcTXVVN\n59o5z5lsl0r+WnX5rtre2dRS6mmlOv/xMXQCKGwMJMOTlFLXfXsSfbYhlVfM\nc+EImkjKQ+8t4uCqPGTaYiOpDf0jZYnLMcwB9LAi42SPwHMWuMNi26vNLb6Z\nl2dROzLUJR2rniFMI8n6lvT/IWLg4W2hgd+eXSevv5NQvrUZyAOJOv0okDKN\nPlB0RWHwyoATNd1X9ISA3IiW0GoeAqxPHKrblRd3qnYcwZ3ocjG4New1jIQl\nGrBPa3prd7wUslrELYpZ1uIma+xclWwNgXxa2+DEshZZIpUjYRo/bfQsNYhh\nxKMOJygT025QzAblOixpEgI1LoHxZnDuhHITUMdTeqWgJKXUrmZ7kFBiW1XF\nDGwMHPZlO2TWgJ4m+0mLTi5BiZKpzqonglQC6iU/Wor3gh7cBSwY6ArP07N+\nd0BK\r\n=9G3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/checkbox":"^3.0.0","@material/animation":"^3.0.0","@material/elevation":"^3.0.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_3.0.0_1561501693242_0.7853661540482935","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/chips","version":"3.1.0-alpha.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@3.1.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a17b16beb2c059cd7cc02fae6ca13cf0c83d39be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-3.1.0-alpha.0.tgz","fileCount":53,"integrity":"sha512-WU6hSvUQSWtvHuw89xhfFZJRoRJobBgq2xxPhYnGs17W7DXDi75OAe4C7UAwBDrMWn6E6ZVCmTuUgiHe+wzHxw==","signatures":[{"sig":"MEUCICdwtNM5Q9Q5ZsAkXp6VjwTqET83bwuiONUCkczxw0DvAiEA1cbEwv0TQYP1v+0f7Rot11ukQxM9pRr8+xFs8a3+Zwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdE3CRA9TVsSAnZWagAAYmUQAJl+FdGCjDFUhBeh3DwA\nto2wA2Irhzz6hXSxE71nT4YJCYm1bPOfIJYHpx/XCB+jhQLZQbRxOQSoZNNC\nojjme7lTl6fBxhNUqkUq6Alsg4wT1T8AAphm3mQa70pNVNr6PX86SxtRT/3a\nb/4g0FxlQ+ZURqoLq137/NOj0bNQ4/IdtMuK6ewb+YreU4o19OMz7/c5VBmB\nJwlU4NqIC2/qDM4tygvSig1eJa5VzvYFUwjtSR5A5qiIYe4ZLrFi6jXxw7sg\n7meyfg8JIALgGQY3/kpNIafQlSj3Cg1TIn4ncnM4Yhc4D0sWc9q3cSDDaknS\nvOaIO7f58ufBjr+YsY6UJ54ujnIG4bpIm7gun1n7TT+FNQ7gwjvHbhsrerUV\nyh/zvB780cLyCkSr6ZBnxvMn0etuM7jGJrozqXiq2/QdOekIrFcpZA7owG67\nFQpfBWzMaeR1aLzBibwT0J1ceUqaeRah5Icrv3ncpJTWpMitAVFHNGT4Aihx\nrQ4Om3qTEaxjTv5NXPUt/P5+aQi4YUoXuRGg6aZlsMa5mcvKh9V5ONfHP++a\njO5tb+3k4g1N4fzcWcRzysG5xXtQoZZMVqvwDlvvF8C4HeAgEOG+IG/eyWRH\nRhwEXUfbUD/vET5UXQkbwccjEJvw6x57+tnhE48kp8JiCcD812FPC4jJZVz1\nFLv4\r\n=pIEJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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```html\n<div class=\"mdc-chip-set\">\n  <button class=\"mdc-chip\">\n    <span class=\"mdc-chip__text\">Chip content</span>\n  </button>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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<button class=\"mdc-chip\">\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">event</i>\n  <span class=\"mdc-chip__text\">Add to calendar</span>\n</button>\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<button class=\"mdc-chip\">\n  <span class=\"mdc-chip__text\">Jane Smith</span>\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--trailing\" tabindex=\"0\" role=\"button\">cancel</i>\n</button>\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\">\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\">\n  <button class=\"mdc-chip\">\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 class=\"mdc-chip__text\">Filterable content</span>\n  </button>\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\">\n  <button class=\"mdc-chip\">\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 class=\"mdc-chip__text\">Filterable content</span>\n  </button>\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\">\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<button class=\"mdc-chip mdc-chip--selected\">\n  <span class=\"mdc-chip__text\">Add to calendar</span>\n</button>\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<button 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  <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 class=\"mdc-chip__text\">Filterable content</span>\n</button>\n```\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--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### Sass 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-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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\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, root: Element}` | 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\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) => void` | Notifies the Chip Set that the chip has been selected or deselected\\*\\*\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`setAttr(attr: string, value: string) => void` | Sets the value of the attribute on the root element.\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`removeChip(chipId: string) => void` | Removes the chip with the given id from the chip set\n`setSelected(chipId: string, selected: boolean) => void` | Sets the selected state of the chip with the given id\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`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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean) => void` | Handles a custom `MDCChip:selection` event on the root element\n`handleChipRemoval(chipId: string) => void` | Handles a custom `MDCChip:removal` 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","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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 chips component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@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/checkbox":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/elevation":"^3.1.0-alpha.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_3.1.0-alpha.0_1563283766325_0.24142127168001193","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/chips","version":"3.1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@3.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbb291e8fbd0b0c26c81fd1e74574a01d82a6ecd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-3.1.0.tgz","fileCount":53,"integrity":"sha512-RCpH0wAj44JmbPxwOgbeESnHebyiD+XRmrPE1V1ObOfAte1bqs2UvPTCNt1LCb02nUTkFnWhQaKzVfotfy3ZYw==","signatures":[{"sig":"MEUCIQDP/BdZpYJ9D//Zi7iap7FIG9a04b5nb7khN93Wg2uOrAIgCtRwcXKckdClyumw/SM/LgAsG/48G1NTqW4r22u1QF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKQCRA9TVsSAnZWagAAinwP/RAXkK1m55JhNeGcsI18\nM18qo17boILDlSgq1WRXlA8MFW78IfzJe8OLn9IPIsAgNMYQytGMFZ6PCWlY\nDL8lJseDyQmqo8ljiDCuGNWcHOHtdendcBKx0z/QAtUdF1g3bjMQNzD5CI5+\nJsqdgidOxYJoR0ulCuem9ZeLe+gxqI2j5qebPQ6QmPsMycmBraJuKmL0YADv\nr7eA/iKc4s4qdxgTPerQ+r31vcoM4uhQ7iHFjxTJ/QXLBG6NtmkKetDBRXPv\n8zPYIuns5uRDoxV3k1hcSdZ3THAuvtUKBAd87EliIqJyvlLkTgsBtdkaYoS4\nvROtO3rE+JKSP7IO/X1q5PdiyROJAa7rUlYtn1y4V0oZpsF5mynTjD6WCmzO\nxTvzl3rqwrWRUvQMFozpjDrE4Aw0e5nE91iBR4ephjp7STrcbJdoWeR2kACh\nn7OhAhd3q0053S2K0myddJhhXtLk7rHMVqVi7kqJ5T7UtWE4fguQL+QOTxgD\nvpgm+LqI9VqBlPcVmX1joD2WXdTYKr2NRpFRuoUI0T1xiySLgU+crZOdkwdf\nPJPTok9TgurzTFn3duldh/6oVza1oe5dse4LjEgZvgfsUmUIfDuFsDrLopLZ\nhfWhI9mne12FkgMAyHxXwVfvOKnmqqsnxuz7IfIOgySF6dIGIR/EGcKP1iCg\n0zq6\r\n=VOnM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/checkbox":"^3.1.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_3.1.0_1563832975557_0.2310417071041071","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/chips","version":"4.0.0-alpha.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33c5c82a4477adf00d14e6c251b25387619a1fa6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-alpha.0.tgz","fileCount":53,"integrity":"sha512-27i6SukMhHsiHndRZUlq/H4Ut/MXc9cCeQQ0ZKB44wf+y92BRxCxlgia2J+YHpPeo6VP8lhPmTPkALtfMrSIGA==","signatures":[{"sig":"MEUCIQCtZ7tYWDzizwl+Yi9wgzswR5bDFUXreW/pR2qE5+4GYAIgFcawg1aB6CVmcXvErMoEXPC3/6yV+Crkxz/wxUbDOsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4hCRA9TVsSAnZWagAA0x8QAKSWIBQtjarPvbQ0uYUc\njsf0ft2uASNOVnnW7XJfPlZdB0perQPaBASOEG26pTOHqSnCE8TC7KlcLL+c\nZXmk07YkmYxTgQaZ5nN2WrgKCZjpKruSgaDNNnFLUBjqZYWy5tDji+znMjRq\n+YvrZ7qEBCmPhUoJ3aA0XQjq6lb0wNBKlW4rQ4qi/lNUNwV2I8fwPIbxj+/3\nULPYNZHTwzZJQXRwayshXp88uGHA+uaVD7JSc3nbLN1PmEOtQ9H3nsdNxrJx\nJiB21nvIm4EDVKXZDwrspI3Bs9OBC49xWifZtm9tCZweYzOB0ElDSGza/bVG\nXBTsi7D8sClERuR8aOOIH+Ai4zDUN4UDamykDBqEQPegYotuMZCQnex7FmDK\nkUjYd4UsYwfZ8XHZDpdmhxpYWg2/z4NcyPYTjjag1svLBKt6dhzHebUf7Yj0\nQ2MOGia8dz0KKqd4/36qG0iyEyCudSYQsVQX7pVnSQloyDt9OfaI154lfxZ8\nRUQ+ba5x9q3xtgUkm4r6yarfh+qG04uuEjbuPlPO4z4s+1rKYbcywFjsvoPk\n/XvLel7g4RP3pK67Pgc3jlub1/K3mY76l6Z3jMO5ayy1jhcpuHKXMPVXl5mV\nzD0u5QacgSH/gyZGWCIMYCxYVbsBJRZ04dXPbRBvf6ISYEM+IT1oCx4LBqxt\nj6yD\r\n=QeFV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</span>\n    </span>\n  </div>\n</div>\n```\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-alpha.0","@material/shape":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/checkbox":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/elevation":"^4.0.0-alpha.0","@material/typography":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-alpha.0_1565212192466_0.21680658915866324","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/chips","version":"4.0.0-canary.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"618606effee32d3f2d1bf3f25a11e056b9f1bce3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.0.tgz","fileCount":53,"integrity":"sha512-aDbOf75qGpqwPk0mCax6ZgiEu9WmYAxwT9dJ5nRM7X/eCBlfumr65RIjc0pCX1u5+p/+V90uFE7/KZhtWFwLmQ==","signatures":[{"sig":"MEQCIGNQUfwW0N2uB0QVovHqQOanawOLrD7V/wFh8dcVJMPGAiBP3uihHva+7/8KpTk6RyBxPnKyURhTjBOs42FB81QIdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEzCRA9TVsSAnZWagAAlZMP/0o8y8K0289zErlb8HIl\nSixwRKefjc6rwoxNl8cuYEhUvU4hJQEgq4lNkv35FvEoYPLZ5xc+Y25c6e9C\nLD4yCRcHpFIJpZU8BNR2tZeiWddJpYq6QqB+R9AGhG/C56HLt8rAXSQe6IrN\na9ZG1Q1hqRiMg9fa4+4WSfKu3cryp0I0sGidQXGRlVIAV3m9Fam+Oz4NDoDA\nJOZubtcGxggEz15z+O0VlAKShTqAuCx5fBRHylB8k6lVvbfBEdk96t09opLp\nHZwV0PpfMdk5WHijpJPLbgavUGCPKkf02I2x+mQR88fyLSOjzKdoluc5AQdC\nsY9YQrwaCWsVvSUMtBwmcJElqmmJGjVPEirRF2+wMiiU0iztGO+3bPUVa9jw\nkWrNCLfZ6IOzKhp/xFLK3xcbK2aIgtO4aUzIKDyCZWBh0Gzi75S1LB8NpX7R\ncRTCQOdlaKeKB5BzqORy5kwBX7UZkKsxM8Txae146XzmhBpUeWMphfmdfk6z\nHgqICSo0HyCnf2meRWUP/PUQAXhNs5tXiJftGFsFrkOng+MwWfGUYMF6Q2K/\nepGL72iT/v74ipovhpwF4UH4xYvPmbzQrGV3yJ3kNOdRYpVeuGRNLulV26mv\nrW5GKZgbkiJFs6wPvfMjbnNMnKrPknLu75FZM/Jig8mA0YDJVbiqlzRJ6nZK\n/kao\r\n=ZyQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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<span>\n  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` 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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.0","@material/shape":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/checkbox":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/elevation":"^4.0.0-canary.0","@material/typography":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.0_1567658290840_0.6928509761344834","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/chips","version":"4.0.0-canary.1","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13abc6d9e71748d3ab4695aead5d96240239bda5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.1.tgz","fileCount":53,"integrity":"sha512-y6g6bH+AboBISttrtZWSMEDvJsfMiFnbsTbpjEssoZomk63ihm14m/4NUtFZlU4JHhyx/8cb3JvCm2nLll4YwQ==","signatures":[{"sig":"MEQCIEQy0JKbD5vuhOvRzwySYz8zDXnEgb59Rk0rM3qDnQNuAiAIVO1RD1K+N0SE4Q9eVF9MmRgH6UPDxNlQe6O3j36sgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQvCRA9TVsSAnZWagAAR8gP/jB0Z4D2jeNRx2IegGmk\nHWL5CNOll+v8cq6NOxPJY35yQno/F6CiygR0AeLfHWZHNzAvJvoDIVZeFDeT\nilUkfG/iPTnfipAWreXuXvq8OnOC62VUH9C6cGfRRMtIl00r0WDArnQD6FAE\nNZigdOPxxWoiS6XVNYT69VpnUN+IKwksH2e+0DuBhUiFqtc3MiZzm3gPzDo/\nMdy7lVLhpcKJecUfCrEwSrrNb/1Az65bN/d7RrAcAy8xCW2vm3wO17oFN2EW\n9bsVIXZWadM8Yj9KDlulpC5TTP80W7unn+5lQqGybHMAn538UMyZ8FpG36Ru\nF48A16OLWW84okMv4SKpxs/lTVpFkmVxuY+CgAIUvByu4JpqjHjsD1QXnCk1\neZwL9i8Pyz/vfH6clf5lHNJrixMa56hBit0r8vUEUxkqZL3woi+NvCNaCrQR\nuP/CGQztLyIZs3gqjor4ZO2pTp34n/HFJvKC1ccAKvhnEi2eyZD+UbBonzyR\n7E93u69Z7gZKlMr0oZKGiPdRLHDlOHq4OtRXJ/G1haiN1jva7/Lq0H0J/3H0\nKsN6T/NUF4e80Z7Bn1FV/6Z3t4gDJthoiGevt70/DRSC6AnI/M5SI9F6EpUy\nxLYeAaGILT7ssJ2oeD98eTBgZwmcrZV9+1y/hDrl4X5V0ZxGYH6LuR5pjUTt\nzIh1\r\n=CxiJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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<span>\n  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` 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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.1","@material/shape":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/checkbox":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/elevation":"^4.0.0-canary.1","@material/typography":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.1_1568060462338_0.49396155236855654","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/chips","version":"3.2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@3.2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29973a0b92b99f6d30fdcc086ec13f1a06d27663","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-3.2.0.tgz","fileCount":53,"integrity":"sha512-XPm2RkqPFRog7hCMBTP4lM8AH9fqysXDMqf0ZomeJbFj4mkyalKsp45zrCR384gYjymwu99EHpcIs8L+gjVsrQ==","signatures":[{"sig":"MEQCIBY+2ZJDoYfs2bFXFPqkh6KK6pbj2UblodK3hLUYvVGLAiAunzoXlit6mw99rgTowo7lSDJuhIYKR17l8N3EA07lPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5yCRA9TVsSAnZWagAAXr4QAIFuqvfvhPCpWVpkikOI\n2H5BYat4sNCKXzxFJVeSBB5kFim6tm9Sqigg3hSyilpsLXK0Dx2agg93Qc/g\nHcDF6uQMGol1e8aY8+8gCdaa05vNA/GicDF8CmZ9MsCC2lichFaFVG69DwKU\nwBp0mp9d0SmtlS6TWHi8fs357egXARkGSmJkAWJehfUhda05W6cEJivGawtn\nBnoFltKO7kIwoUIizKsnMdG8Hc7A5KxmDNCWIy6AipJEN0ZyRsRufL5ItH0k\nqEKz4vv+FNSOvcRpQNGs/29ez1Noq+m6Q6FJCNtQoYXEt0lh3QyaYKvaw8c0\nmucLaPerzyBM9ZXjK/HiAVF5ipobV5INTkoK1jX+MXFSpalViCbVz78TjWvx\npFP4V8Fujtq1LiPJNTMO83lKNSRne+Z2zQS1dXietX/4JmCdPm1Da91K1M4G\n0SCaFOWMTWtMapioYxXBzMlXzBdX4lL5nwWufYogeIpcctsT1uIE4Rm06DUQ\nw9OBgBvwPbkw8jxhzKvtnVrgWMdGSYXRifYaOvSJKDBDvhqoPRUkf/pMEBdJ\nhHZC+Yq5eagNhJLZBwFzT07HhYeno5r1w7lSEHPgCOTKzA9KGmjhtAkllILK\nOFmEsY1u6rHPdzhEqhhwZ6xi+t3WF9ncz+1ZzEvair71Gwe3/Cj6Co1bX3p0\nYK8R\r\n=UcDr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/checkbox":"^3.2.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_3.2.0_1568325233270_0.17922792972020818","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/chips","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.79d881baf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be6214b1945c5d0c14e0ecd637913b109c6cccd6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.79d881baf.0.tgz","fileCount":53,"integrity":"sha512-4GRWEXowhNcr+f8jx3fxtepP1EUQ4Jus/mHPZwFQiknh6UEbbTLlvWv/wypwhnVoHQKm773GRYY+RE/FZIRS7A==","signatures":[{"sig":"MEYCIQDDup0szyLycJSfWkBqj2v+6mwImLOxcZtJKie6B7p9qAIhAMh+55/b3Lh9DbuirYYz/lYXRHJGVn8ywT+adU/U+clX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0/CRA9TVsSAnZWagAAT68P/A8re9d6nfJH5vutaXYG\n9iumkedIKnWgbdF5lDYZZMLrZxgYOkemVn0PvWwG2Xc5FMUm0tN9uN1HfQVo\njJ1+gv9mIQoKbtl1uCvW/SD07L1Bk3S+TOTy09jCA6ZBdVuYn7atPTDfkPA6\n8rkmwds26Ie4V1FlZVJYSES/qU6t+gIsmm79Skch5oUmT+SH3Ngcr1FcOz9R\nBju++WImY6H3R3Bup1BIo2eRg33SvqR1nxHmKnuz6rFCzVAys6MgGVfl/rsG\n8mEDzsAnoukgpQBIvXNDKh2fp87MCl+5TVIdY95M2lELKcGM7OyHfUiPNOBS\nj9gMLlq00p0N6JzM1E2Pu4q7T4fNYYszWWtBhGHgMYyRGaMC2NEpmsCqyz0W\nGuv9so6444pGrQfUQybeuYcp3VWQoow8akWuAVlFxYUzLi2f7u1Plheadrrq\n5v5kDhWHzmQq/KSQ6/FJV22UX8zhAXLS8ScaNcU3BjrjfYDH8eKQjCXPdomZ\nWs3dTq/9kiT2Rut4ri51RTzH3Ky67w3I/u7s8i5MSwbo2LyOl15hM0s43AUn\nJpP49N/DZV7cr9fl6hJSZCNlUJGcb1SOoITrBKySxnj+xJVII1M67ihPK0el\nIJX/Wmc4TwpL6oHXAco81cGBlgHXf2cejXC4msnhZxV0zP2U9DpjN5RkFq3J\n6RuG\r\n=NzB5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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<span>\n  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` 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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.79d881baf.0","@material/shape":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/checkbox":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/elevation":"^4.0.0-canary.79d881baf.0","@material/typography":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.79d881baf.0_1568341310336_0.1136891418858812","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/chips","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df6dcddb94957c6b1fa06f3af051c91bd611f831","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.e851d4f40.0.tgz","fileCount":53,"integrity":"sha512-TsNqEKgjyTm+DkqfEqmaK2ucvwpo8gGGNtnEtjCvWAVqazsABvrtrdQ8lmJenXWiZIQ+n1hlqZrewE18mW0kxw==","signatures":[{"sig":"MEYCIQDrlX4AjvqNb2f8VXyMJunEGNcPIMujQBdFCui/kzTQqQIhAMvp1qkPXoljMPWIhBe1ClbROdzpcqFFuVMj7vZrRHtm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":705499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYLCRA9TVsSAnZWagAAQrUP/RwRRntBdEkgwwjUp4qy\niz1cKqtiW+XCRm5lPNKpmm5208LredVvu9q+mWbgiyzAvSX0q5cA2ot6smNL\n5DW+TJPVIB2xiVASJslm2KcMMlhy6v75EW5oJiN6lAGpQRevarJNrCFU2Px/\nF9Zel59tL27WDuZ/UJhqSW7Qk4qf7kTkEWDRj6OaK0+53YaP5Y1lO1BSjIYY\nrH4fkq0novCUsR8HoQf2IplB+3XK4ZdF4dUSytxb+Itx1SnF9fyKmEVMrwLl\nzMaXSW0al+HsDpvyVc0vPWq7OgMM2U6VYu7UN6gFkV8ukLCS+F5WZPR0WqWf\nQZ/H7rE4caEAHhUIS2QFmu4QQRwe28qV7rqOStNwaIdAHRC35y21tEUzBrSW\nNpIJy54djZyYJLCnXy2bHOb3tsjQX0QElSM8+BJ3HFRNK4VJ/cFU86lCb8TG\n9XtX6zT59iH5i8pp4B/Zkrhp6WSkRKgFjmZ14wJhz4N9KWng3xc8I0DxFuRk\nM52hgFCer+5CbLSke8MNqI8My9hoSJB4mpe/63iqCXIjx/Qvu6H8ta79yTAY\nbCLt778FNR7uDGMSI+xxIMIXF1in+UHxhiISWAPFPHRIF5LnpI1fk3sR6+L9\nt5qCOi7r6OHUgFXui2k2iaR4NnGem2FmG/+34ILEDbC25lfZiYgM3Q4yMhq1\n3RTq\r\n=X2RP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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<span>\n  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` 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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.e851d4f40.0","@material/shape":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/checkbox":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/elevation":"^4.0.0-canary.e851d4f40.0","@material/typography":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.e851d4f40.0_1568347658617_0.2534771192264471","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/chips","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.905884690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efb52b71818ad409cbfbf756efaf59b7acd15998","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.905884690.0.tgz","fileCount":53,"integrity":"sha512-Yjl1StkzRYH0RDFnQE/IaS9oIjjKyJMy3DYp8yufHQhAVnqQnsLYLuBOV4am0IBgk2EOqF5iagoBanOfGcIYVQ==","signatures":[{"sig":"MEUCIQDgaGhJS5pJGlybYLzgZbxlLHy4WIIz5DpAuetl1vNPIQIgPA9y1oSys/YPC7USa6aWB3b+IpQmq9aWw11qyiIoytQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":708174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9LCRA9TVsSAnZWagAA0TEQAIFz3fwnBDiydSHMTf4t\nSJEMGutc3K2j3OyTyPUKyWMDclDxJU3TY3moPgvrenA90W/DaxwghEcnrc96\n7wOe696jcCUb4Yu1/L8uHRDdBMDgbWXCKzOgq+k6osagP7xvHRy5LtwAP4d0\na3IlpbWR7Mvxf3CnHMlwyqhG2A0AEXavfs3IoxtoHVi6t16IExmcYNZTpCK4\nwqE47PHVwLGXfeukKXZKNqx3Y6PJae2/Z19KYpby287oNMcPXYR4lHI2XfpP\nXOU2BHdg1OL5EafnLhEuHe9jfdPXaw4hRu9WT+SCMOMx3Z33GWCuQIIQ4oAy\nrXeIafbd4NZf0VYDGSni5mHEEQdHi3AvMaUOcayvtqclB8qCQ8rItHHK1RLS\nPsPc3DvSNOUFsm4w4SldsWq0MVqbi8nvH7K7NrR+bRt7iq2qo3KYlT/fXjdg\nmexEU1vZ8JOFrUDw857SYFYr4Yw+ghAleqvNPU3xZTPRDUxIahYl9iYWmM2E\ne2+eGMLtroNjw9iNvkyiXLKgvuT5MmNfQvpWhtCohZhczy0qPDw0Mx8Ir8/6\nsEDNrnTozZutS2hfxDbQcQW6ckkpH63D9v1ipjZof6g9eA00eFjwoXrwZnsE\nlsy16YmMlr1951Enmxt7Yobhd4zViALIKM1oLb7isGGuMHjZg65qLTOu0fiQ\nZm/f\r\n=MyEe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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<span>\n  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` 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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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\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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.16.3+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.905884690.0","@material/shape":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/checkbox":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/elevation":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0","@material/touch-target":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.905884690.0_1568677706830_0.9058155258568297","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/chips","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.199534d61.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dc56472f49813735a65722fff2ad90ec5e8637f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.199534d61.0.tgz","fileCount":53,"integrity":"sha512-FnInCrrgeVL5+QGJ9iGZzi9G9JdNdYAVQPqqNCzK6ah/2TUPz1BUQt7jFQn0UlKRVVKPC8iCf1eULoh3W1/lnQ==","signatures":[{"sig":"MEYCIQDS3WmoQ0Vfd8UMBNC8klSLFX/yQ09d8brnsugGg/AYCAIhAO0aAP/xTzgXmAx8CkX72s3fH/dLaaun+VXdydQStGo1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":717367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlvFCRA9TVsSAnZWagAAM18P/R83dmy/n82RftscsjAW\nABiZxVLcbV/Jj4j+tZ/D+t5MK+iiAWW5fmL/fL8JEopS6IRXg1wDvecaeG7w\njjtazYDqd+Pw+pUElmiLatPehMlNw3AeZTilS8wBnhfQiL7OlKBUNTeUf9fH\nliPPR3WuodmWgybHSoZ0AoCX27pTZswiXp6wOIvFeXl/mRiTKI57e+v/U8FH\nbBOxD4vzdZGWFUvPEtpEohs2rAZdvOTfE0Ay3xmXwainVq0t+BKq9rs5JwYC\n1cYx+DXqdCP+gGP5SgLJqv/aBDzdi2fZ7bCZs8faY7DYSIaoXDtDja37t3Zh\noS10aZYbYGCM/ze86rOGWg4ARCvbpsJPcBGNncahD1YuPZC0Aegq0BejJEir\n5SnGpvDSLOr36Z1u4UNyNa3PZurAQ2sTXy65RNmJRu+H6vhFrri6YHG9QmJs\n5ryES8W+QQRXwfJ5sIuvm+2+84FFCz/Th2ZOl+WGdm+YvEfCAePPqEX5f3xm\ngs5vYUA+JF0rvYmVInWD3uJUyX8jELWAxZs23GHRqNnLBXuSrvqKAxCePxY0\nQ5uJ82muvXFMtdO0dPBxfkBLqEWNhFQf+Y72JP3O82h0Rr6en1ATNArgn8Tz\nZ0+xtB/GDkW+EHch1lZdg8zFTEysoN7sRnwiUZlPR2XYRyZflxUYhcWtGPWl\nEnJw\r\n=MRb2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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<span>\n  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` 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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.16.3+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.199534d61.0","@material/shape":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/checkbox":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/elevation":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0","@material/touch-target":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.199534d61.0_1569610692556_0.9670209771008695","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/chips","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ce038f604e5daf212b07788e8e7adb30df3acd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":53,"integrity":"sha512-zq3unqAgmNBRcBiTngWUdz4YrOVR41kVi6kGaOXSB705OQXr1kNc9khWrc6x06pr6z5lMOxTtIazLI9U6rQIlw==","signatures":[{"sig":"MEYCIQC4nPZ5gwwGHgpvucjHNhwoKc1xofaBRzC7Bf+1P09+nwIhALd3goeo49/ZrN7tpUiSA64n5+DbeILfen3xQu4d0Rd4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphacCRA9TVsSAnZWagAAsa4P/128EENFwuHbXijrFico\nKHSElFj6z2IBTjdgFTPZVR6vGL8qpFhS8wjgToA8LfpaW+tGfoVeswbj9aaT\nkBddYUz2n+mbEcxtsEAct7w+1BEm9fY/NbL2GzVfs12GCX4uQHFr5XHguhON\nJ14A5pjfNgzKwLiI6dTgnoQwd8qgSHVpsU7byyuqMT/96Po6ll1UFM5uBhiX\noSUCk/S6P02Vyb2VqxbfDih4TtPlBKcEfhmwCd2RQBmd2h0Nujeqmxgz4YI/\n9JClWYYL7uns6+NpjaU4jamSQprSsMUETgNQnBFX/Ylfcc6mKM8++Tywn6L5\n1ACQYJui0Ni1n5PsKyxLay3MIrGjjTZWtuuyeHXQtN94kS3cXLdAQuo1GJUr\nWphxcziWXItGQP97CPtRkg/ey6lb9ULgFUB9J+EsSmfiLnuQSfMh1p/dnvtx\n7n4ut4+opJo5cSwJnJjIaIfChiXb1V9SDSMe7cELbDLCWaaQ3MDxr+CNmtqq\n6RXeslhhv/fsM8U1HmXCl2IOp8LcjbInNRS1pVibz518wScQFeiBJsSPCgJ5\n1fzUxOZ7THzZpZBm1T+IRTa4I74+8Lvo4WK0stskOhYgfo9vDC0Ubb2wVJAS\n2ozsm9yuw74zvqGXjk+cxVDptIVe+vES8Cge5LLBd+PpR2leXiPsaoVbuZTr\nESih\r\n=Il32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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<span>\n  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` 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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.16.3+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/shape":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/checkbox":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/elevation":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0","@material/touch-target":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.22d7ad2fb.0_1571165851529_0.49663272231577427","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/chips","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.735147131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c837c4955169c475a2482cfdbe5fe7f36b88409a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.735147131.0.tgz","fileCount":53,"integrity":"sha512-PgjdNC1JCU+xf6Cik2qRCkjxRSpJb7VuJTRckhj1pte0d6+zMcmQKvTR+qTjJWSVJwJsKtdeCkozH1vbzn87Fw==","signatures":[{"sig":"MEUCIQDCCRCNdWoSei9SZeOncrDEp1UtMoGqy1RKEl4MAZ7SzgIgP3pV3bpOCWWeIbkrfTH1F/fv7BepW2mh6ltawvjpnx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":732608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnErCRA9TVsSAnZWagAA+gMP/0NgFqbtjQB/21+pfzUd\n8XtPrGn7yGedvHhfyF/5nvS+4ndt9DmUeQQu6cTGDCNDl/9X5x7O3/CbHv7O\n8eY65V39lmnp7Rr/CykRTrxA/NGJ7qaEP8faz7l5+OaJMIg7LoTZUt0+byIu\nKwRwzUnvkcDdpFTb84w+3yOHG7XcUTuNu9O2It5R5s6id9je9fDsCIspit+M\nHBbuot+4bZbf4zIFKFnr+PGR0PDk9tnr3v72NwMRmkNG7M4ikQV/Av3yqCNz\n8M8SLg7I5nSdYsBi5tmKaB5wBInIitwGVkUcWOtQGkoBYc8Fb9jo/urkwe6D\nwykpmoOzQaUTaZ2ZMklwc7RWQ4mF42iB1FcDvRsO/zJftq0r7xVmwova+wHu\nHVjrV2t87GrqbqyX+Lso5fyu39S2zSP0bfychkwbiJg2Jy6wbh+vxIWxQlOW\nZSufzxp7UewduvbIokP1eqOmMkpr4lg0O0/EPqn1tbSJj7rirBg6SBqGHsmr\nbdPo1qd6OCNn8JEz3SpGjffQVEddYHd90ip5baUDKFI9ttGOhkmkouaBRXoW\nOQC1jnPGhgOWjjgYpv3qIfnCFArGJpVAbGtF1ns9DFREQZuz6pzovxq6gZQS\nxZmoJ2fM67Qidg1EdMNr+4rJ6XJfv2jiH2hnTQjzuE9+4haUVJoetJVFmZLm\nTDWl\r\n=Kucf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.16.3+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.735147131.0","@material/shape":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/checkbox":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/elevation":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0","@material/touch-target":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.735147131.0_1571189035076_0.9730680978744548","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/chips","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b005c919892b13800051de2047c287fbadd98426","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.062ade5c0.0.tgz","fileCount":53,"integrity":"sha512-rDLxmG2wKJ5lcpDim0STawlK2ptm3AIhHWcZll7uiseOcbqA/4Vh6mnX+m+7j52MSIHn2n4lrVbqvxmC8Y7Lmg==","signatures":[{"sig":"MEUCIHobeM39mOAfPklhM22grq4yypJpLMBAk8+ZazGGhfBoAiEAudcQXeXCAbjVpyot2gGDSX9BKWEKfwHAQq8tXVp7TLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":736423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp72CCRA9TVsSAnZWagAA49wP/R0DJETm4aH2SJYtApru\n8YaBQ8ER9WfMlUKqqbWnVjKpd2Ik+/LbWTfwvArz/EgPHK+7cXOwgzyF3Rlt\nQFMMustp/3wBRSJdoSnPxyzVYimcJ4AFHJenl43gsMA0gNLoYMnqrYFXZChy\nG9serVRI+x+AM8b59uaZ8ZV2TSowC0Y8ixCyZXhs5TMjtHv8fqFDRszRfXdy\nauA4DzM6SlK5bOzbLFrarWXxdR2qJ/NGTrh1cZow1kK21WNE6DuvMCUBmwZd\nQMW8nK1gG5MW/K3ozdO4e93wmgBDfocQVytZPHDRNy4qpScMNBgs2Z7MaHEC\nCNr1BuyOhH7hhr8LvM6dVC4Ti11bOcM1RabxWcbFHGEo0JMFkderDHOdYVmY\nonbnKkE1+IebMl3p0VXFY9tNfrM9umDtYaMzSWcHR0lIFyMHnx9Eo18HfBag\nbAI8ggWPhmaUhdfgGXkkxTOzQ4BGBBx/zQ3N9E+1zozcPOKePH6/S1PI4sUX\npza2ym0ucPEBptk9XsEVVb/6f3b1dMqqYrC5kT38VQwP6poljLn5eY7Qt4Vg\ns8AAGTXwHzXR6++xLvBP4jB+9vuDxyXiDdTe81esKWoR+m3G97DU+3xTaDpc\n3rIXDpbzh06ZwVJXhByRHNW1bl96lupI2Ix7yW25wEWaafK5thM1BpG3/Ndv\n9ZoY\r\n=AIuG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.16.3+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.062ade5c0.0","@material/shape":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/checkbox":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/elevation":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0","@material/touch-target":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.062ade5c0.0_1571274113719_0.08474566817674134","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/chips","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41e862e7d7455f4273592674e19a168db13c0ec2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.774ad4f8.0.tgz","fileCount":53,"integrity":"sha512-QccTZ2/grhq+akP5fSCffFDofciJekRKkTnTuyYiqo7m1yeek8ndWXk8PKk/ARf9YBNSEh5EKYJzbxCkoMgLZQ==","signatures":[{"sig":"MEYCIQC+1OMmqMP9cMlpYIkOkdXWov3rTAqt0rW2RD4i9kOrzQIhAPtl17ZamsVxMVnjcjh7L3cnId0ZsVWLRTo7zKzm1lfR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hzCRA9TVsSAnZWagAAjSkP/A6MejkE09Sdd6erJwwb\nfvqWKdGDUftScwaxM2KWSCh+QayEDWFnLP907y9YLEmLvY9Slv4tq/1nD1HE\nZ7BIxEeNZQ6Uv4uSSCmzN7dxtrf23+aJAEjcmusacT+owHXAO8sv2v138yGX\nOAYnlTTzKokJvGkvj+a2DjbAR+aKHp/kmop8xiYM804qsOXDbpcJm1g5Jzrd\nErBbzrlPWPyK/3g29oqxu8S+KsGYwpnA5dq9oAw/15sF33L8Bh8vRlO3ymHe\ndfbVaPD6qFhqPDMolvb4zgLqbYYyL0qkzvoHjrZMy8LAJB6NVz3UrBT+FGdH\nD/HPSbTRXyClUwZ6BpIwp9RJLzzGtofMSP59aZPHb7t+Vqvd1lPJgPhSQo0a\n2LP2VXWJsfeyrjMD+736wSZRwQm29lpW2KYh3Hl42tTUJCbwFql21RzPNQrz\n6JhYHBPcHXhxuPTrFUrKDEcMHEF+AoQV0chiLswHV1zWEzBIU/gMh60mMwhI\n9kOBq99mrsoI2ZWfTpL/siJv/gTAx8ltu7L/EdwSeNotlJmTo30j8W2x8jYr\nccnIqWIqkfLMfludAR8kVu3+AA3B/WixB5IrwK8t3vxZ4FWS1mXWPrfRFk13\nBAWci9g4pWARsyOMQJHUk1x62yLACHjrI7Q9kwqZNQiF/9m5CWebdTB5ZsAw\nd48l\r\n=BxMa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.16.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.774ad4f8.0","@material/shape":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/checkbox":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/elevation":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0","@material/touch-target":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.774ad4f8.0_1571285106479_0.5352606652220133","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/chips","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.5916d18c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5d9f8eb198d8692b70376f6723b3d29f5418de5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.5916d18c.0.tgz","fileCount":53,"integrity":"sha512-XLiw0PrdWNZUFOpt8001xd8eys07MVlCeruooVqIb6d+RzRdFdgzBmbClx4NOIbcGANLsuW70GN7hB5Elih2mw==","signatures":[{"sig":"MEUCIAxVHXzmmqTeD/IdCiAsBdas7HvwmrkKpT5wL+qmbrWTAiEA1K/KmMSGBaDa0f/79WCB9lC8L9I5lISi/c6HUCp7Qrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvoCRA9TVsSAnZWagAAAScP/2s/JBYduA4tzcWs/Gya\nNybbb076k0/TS4cxLf3nn5grcx4q8F7N64J9U/lOwFUdDbjdjVZkqYpFL583\nodraBJyfe0pki+9+T6+RbyZE+bK5ka9hTqoJG8901qgu62mdqefh2bgiDazs\n92UdPBGrSUcAbjRtpNJdRLV1ZrMA58nD0BV/4P7i+ZX8eIarCQGZL4hzOsZF\niIqAcrXOzdih7tZ5bzNnUx8RsGEAwoUtyHmWK3ezcMc6KbRQ6WsjT+nZRlNg\nLIRKiHxrFQ4d3SfXPJh1E/qMxDrr24twKbiZb39UbT0jJJVa9U9aEgNZYI2Q\nBytE3fQDZ4rpsO0Fx5ZrKrUOglDlL66gRiQ9Mj3I0BkcYyd5HMxLpCum0sK/\nAzyG/HzGECcf5SUe0pvFjtpS8arfJmhaSLKGi4QLN8vViF04zEBo7VLcP0He\ngfPIMTpE/NfnKxeLBEMbfjnKtmBMfHK0Cfbbp9x9ykFjSSG1ccJcrVr5/8Yh\nOmUEZml90mKVtAFEjtl+vdTIxc25dDC47GR7RjbNCfuYya4knxWa6INBWqKy\n8acUYktbflXAqQcbNJlzQy+Jy2Vc+iPwCnWd7aymYdmMhzLO8CR+ESj6bLMR\nA7PeHc7AdZ1fWGZIqv4TtdGcaUBJ1V5FUwyF/z7quxBI20Z1fT50WroqIxON\nVwRE\r\n=xj77\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.16.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.5916d18c.0","@material/shape":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/checkbox":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/elevation":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0","@material/touch-target":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.5916d18c.0_1571429351976_0.20363369720057367","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/chips","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.d4141c95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faba360be1e9a8364de8c91fd799b4dab715397c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.d4141c95.0.tgz","fileCount":53,"integrity":"sha512-PgYHfwZVAyrR/owqaPgmu61vjSlLHZ7s8RQzD/ZGK04vH3RC8RYX/B8AmNzPPGpTOQilQbusZsjwFCNquH/7qQ==","signatures":[{"sig":"MEYCIQDgVmmCLn/6Bsm7MyQt3V1x9RjDHmB2B3qdRTcLx+ii8AIhAIdgWEhC1kFFynDjqhz1kzszLbbYH/uoDJQFsapOuMTb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCnCRA9TVsSAnZWagAAs3EP/jbljL1XteIFkGl0zLc1\nLGMZ8zPuoYzK438pD4m+cnZljkfSPBdKYYHaOdAtERWGHArpXHkgD1ztA1oi\n03XWyXlVC2q6lOXYSPeeAifkjJEfngcWPwIF0T7pm+OXBeiICdNCXGAGx/41\n/2VP+9YoMNYGCaozI5xvotAcK3xLndOAtKJqOrb0viWtbLG94d+W9Y+YMAJZ\nB4N9e1c+Kl6WwJ888uvQpcpLwla+kmoKBIHLXChw0Cl9KV+uqk676CnWauru\ne/CdPMHWSipYMiaQ6fO5bb5Ut+dtcOonWUKpRhcv3YVlG54OJmJSLVf5847B\nXyRu0cegQyB/G1FaydZOVFnCCAQZsuCzBqDPffI6DNQs2wwPrNPUhH6zrufp\n+ImkDBnPZLwsQibgx7VRNlMGSnb/tuavie3+OLQ/6cmY3Do9JJPOKgXdkYAS\n3DGGQx/NcPaxlQMst+wiN4xLrBqG2GtSU/XettlAiEeHbZj8LqKrFr2Orsrc\ntifMUZGsgCXMyR0qcVXgRlkhW8OsX4SpNeoelp510eitZn0prH8IZJ83S6cs\nMYVqQKfIGSntPIlQxIRu58rG/snf4fmcnRBvmZNBmr9PPxX2ZM2+x4YBBC3E\n7dXjqlf78Cnw/bExJBZuPd8Y99Vb/2KDXOGvDpEjwLgJjc/pI9xI8UicfcrB\na70M\r\n=SMPV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.d4141c95.0","@material/shape":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/checkbox":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/elevation":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0","@material/touch-target":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.d4141c95.0_1571881126782_0.6700160282644938","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/chips","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"239edb86f1376c4843cd7a51df459d3b5f5a0045","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.2b878b3e.0.tgz","fileCount":53,"integrity":"sha512-PRZwlz/j/34zjh4Y848X7woyriuITtgaAUa+CbZzFXuWL3hzBQM0e0oCzF97O0pZWG8FbAMmUTJLfo0bT5k0gg==","signatures":[{"sig":"MEUCIQCXnvJjVvAVg9A9r+SKFxm/yjcNyP1yOCHAzjb+m+A21AIgPLUbItL55bnx5yGcA+Bcgd7QFRBQNc+SLF5tVKPWlKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslnLCRA9TVsSAnZWagAANcQP/RKUHOf5MYmthIAIF9lN\njeJNHMm1LehvlrSmo7KFyVQtdjR4F/Axa/oyM9oXhpTropxMe+15ywcjW8te\nTsOkeadVYXJdYKESmOHvMZKaq60VvccWmc1jvaib2h/LS1GTiryJ91qJu9hz\nKEWoLGLnq3UBD/EwEX1x09XmF0WE85wubs8GqYouorDsGrvkMfD63l73U0mX\nA4qngVyoLYQfO45cb6opgI65+IkbFgKGrAtDzeyhBh8B9UeakfJguYRJ0w1T\ngpSLr5ecsLJZyaQJaOg6zLnXsfBuofdrnvbkiYWiAJlqbliKNW82bt5It7xs\n1AvDZWTR3B99GEFH+DrnMONaUVPlgXNbR/ZN25/1JvvfApxJvPXyPe2j70nj\nXYAXU0TK6vu8B3IsR5Z0J2MMRLbQd+6Dv0YqhC0F98rOAogf7AZGrTTSM+ZB\nEzU+PKsM3tfUeuObONh3p8f1dm1FB3IDTfRfTze4MVnNBqSGAEiYHvFk2SsD\nlK9zwv85H8e3OVzYcbr5xDZECOICQqM9uhCWVWJYjvbDJzIqe8Y/SdKWSX1U\nYjyloFKFITIb60DshQwgbkDEIWh0FMzQYx6FaMunaswHBDt/xDyRD3mPgaE7\nRsTMZWmbUQC4DuzbwVL7THgSQ5DtXOLTqXVca0kvAFzM3SX5pm6RjgfXxfTw\njeIs\r\n=hdMO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.2b878b3e.0","@material/shape":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/checkbox":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/elevation":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0","@material/touch-target":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.2b878b3e.0_1571969482748_0.37683501297786814","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/chips","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"078699b3cc40790de85b3de30b85f4da79a358db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.b06c0efe.0.tgz","fileCount":53,"integrity":"sha512-lswbAV2gPa8gIk4bBItQphwX7VO+RY3IJ4FR8tew2SmTshvcgFSODd7PB9+DM4ohWDmphPXKjtTWCty+9wCm7Q==","signatures":[{"sig":"MEQCIBkhEusGesW7cxWhFW+XOgp6ZpTb+WxnGsOVurPuzVnTAiA/IaKqIlZPLEMwo9ijk4czDwrHDBPKipDCgZmtCmnHIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LrCRA9TVsSAnZWagAApfwQAIQlvU73pDz0pFfcGQSM\ns/zp3I5YLzbKyluhVwGodOWYOqB7qS4lFrv6wVwouT+XY4RfOf2SZp4dSEsL\n2J0YDKeYugl1vYl9OFjNVQuI3yrAARSh2/KWntEM1WcthJNTQcARSPcSmE2d\nZY39HtrsvJlULhDymRrUSxoptzat0e35Egy22uXHKuib5l2pT/XFiweVD+uG\nn+WLe+UJYykXJC4kE8yE9sUh3l2PeK3mOeanGbigOu7V+zd8/chWDaeZA3Wh\n3YiFwanUJBXEExc8BTxXuM4URp0QmDOfnbdk6UtIAI5FQBReNGlMqtuCn4UF\n4pkbFMR5zflDsQ7uJ7sDASs5W5DjN26U912jTMUMXGl+JGvn3DuhXM3cMmar\n2UH8JE+B0VM3u826jHshkSWAlBCugCkFoERn1RPnbv3emz9bCQepy7qWVpZS\nirgxAZvMxWvFcEhJS/nwfOedCpKiyHfUAgY0cET1YJ+UV3bx32B3gsBjWEWP\na5r1C1AAw4vBg0kh0fNY6Yc8JyfUB3i6XiPDxslXNiNVAfH06Cx2tcWy5Tvy\nIUdRa7wof2dC9CF9W+YfjJsn6w50BAjfo6wGK/iZiSvYssZElZt2zzJj88KF\nkCsKkf/Sx1FPYNAVlWsWI6CEAHwiB0cx7/gNggp6u1kMOmnp2xB43tenPrit\nLeGV\r\n=+cVr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.b06c0efe.0","@material/shape":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/checkbox":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/elevation":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0","@material/touch-target":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.b06c0efe.0_1572053738580_0.4241998106857072","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/chips","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.01628efa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4341cf02bfd40347f969b10e70877a2647cbacf0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.01628efa.0.tgz","fileCount":53,"integrity":"sha512-i7TP3Hj1ETX2Mz2Y9sZ5u3Iojtx9YeZh8mQpw3PyXbwCXaCWaj2iY2bA7IMrk+FU+EmFcjLbljN/Nn/us/9xfg==","signatures":[{"sig":"MEYCIQCkfX0L/pedkhWNsvxdOLG+2Wx6EmUlifhofacOngau8AIhANCnFCHqOur7n1vrZZBlyps3EHB4t5e3eDfLRBW1qidr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HXCRA9TVsSAnZWagAAXe4P/RaUkGaAaPF9vhKwsy8O\niU1cLk4hB5U9N9vclZ+y3ZAKYS37Kno+clwOm9Zm2v1wK+UI54z578vnEBr1\n8b/aORtOleO2+J9fFSIcpcnzYzMqeBq6urXVts9YaXd2z+InkR9By+FGiI6A\n4U8Lfpq/TKmRNEX6aNbIirzTh2kvtp1s0w65X+HhAx4DqhEtDMtFQZbCYGb6\nM2VE/0Y6Rx/Y0B4+ZxplCjfOcDPnyKxE+G3Y0TtmpbYPVRF720/58uD9yBXB\nwd5mkeJ01mfx7VoJgG93xA5UpGDiu6Yral2lAuSQK6oblljoYLCiESPyvXkv\nuAZ7wVoI2HcLUc6GygCcBKvip7M5DUDlRhhbmr9tqftBqexjop29L2ZgXP49\nA28X3p1mnSqPIT7pgPrMZpYS6fE2gpZtGy/bjHrPRpz/FsZkmDl4w5beoMdf\nLbgbNPeFLvrq4jI7Y4eVl1uIbcR3yRTGSwiqXfxBhg17R++qFASjYFkpSCwn\nfgDrzRVEvACUqjZBaKSv74hpEy1QWsglInKOB/jqSZIoVPdD/BEyLXxNfUeg\nDUEBuATprYOFeoL6RDie+fI8tQ1pOYbd3O9gQ7wDJo5JbbPJDgohgMhxsSu3\nixtLoYpWIdrUT+J7X7QWdcsC3GsCz59OF1c1kXQk+48h0QLFvpPB2L7LS2WE\nS7IA\r\n=EIiL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.01628efa.0","@material/shape":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/checkbox":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/elevation":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0","@material/touch-target":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.01628efa.0_1572307415394_0.6509103180062166","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/chips","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d671ce8e22eb6266a5581523f4c938404709a96","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.b5c6d66b.0.tgz","fileCount":53,"integrity":"sha512-5y1eO5CUGSVCZA15EG+CJX0iNJuaxgJYhJD4TyuKTd4GqKTO7ytPku1bwnzQj5spTFF1HpWGclcLVIU767fejA==","signatures":[{"sig":"MEUCIFn8RzbIneThLQ34mpG0tj25tvbGBOzfKFONQPPeCZk4AiEAxPOdYJqWNTiwoFqt/eV0aqMAifc1cR9qJFLM4uRAEf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH2HCRA9TVsSAnZWagAAogQP/39KlxJv0VwjDAAtBswn\n+c8oYHzDxSyUZ1qsEWEb+2p1j5nyQpeaPH0IDWt6L16PGo2NhHgy6sasnkp5\nfipTm0b0GP8+dz2GgO/QgL5Av8EALOSuoWV4DmkczQ7cM8ZO/bORSPGA6Z6v\nJJqFqr9Mq/BWn4wA8De5WjxAxJ3LNn8W63peDGT49gQGjFXDwSzjkSUtIUrM\ntwjCLRgpRRDoTKFQ9CUmsllJYBk50jYyWkcIzfrUKyz4KrqbbEneZxtnPViS\nqByw0y06QPJK+tTRFg936IDI906hYEwBiax6IdhOEIcBuab52QTfx9bFxTm5\n5pkrimx4jeZT37+5kTeTBnH7BlPxVZw1gIEfn9vqbafz3O7otkcFYsRSrmpO\nuKFWcqBpviEmmW6Nzn4I4wOfjc86HChBSbJxttw+WTYh1G/oxNtDhEjxi0B5\nY4sF3tT5TOVIuJZ4MQv7bMvBl5U1yi73pZklAQq+aAT+rE14NOLUo5778nQu\n1i+WJZZ5yBr3y37If9E/b20/U6wVXanwarNa4nkD9Ab2Ht/rKHQgShQNdcZG\nSHxAU8rI4XO4Erf7jVnzPoXDkrlo1C1h/8klu4bMNCDvZmM00+D9QyL4PLpK\nHsxM6QToTNyY3szHxDVGJdnRqbFr7jud+wDqy5ZrPtRzpEGI8D6+RZiVxI84\nPVlp\r\n=vRj0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.b5c6d66b.0","@material/shape":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/checkbox":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/elevation":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0","@material/touch-target":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.b5c6d66b.0_1572371846589_0.5896235027011303","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/chips","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14e7faa58fc59a5a7241c51ecfc316ca8202f0c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.cdf858ea.0.tgz","fileCount":53,"integrity":"sha512-L5MQ8u6IXZrASLR1KLDMfQafVOoFaSs8aidETkcb+e8NrPplnoMQh3ScHC/hkV1ZgEPf/6ItNc9S9UcVEGnHfg==","signatures":[{"sig":"MEUCIERD8cjdOQJDBbs1j+k0sIV8+5MH1cfh/p18dMgSMag1AiEAoHXVH+FBE8ka13eT9ZeyBK+BkSgAhUG8GqNYchWkZnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJ8CRA9TVsSAnZWagAAX4kQAKE9NUENZbl/th9w0+V5\njyeI/OPCxCs9yyAdvwykqz7htV47D9lYepUtx+nYvrI8VCwlHa756zly9NU3\ngsMnoZpHTy3o0qL8yyhNW0J/2FYFzNo0tEzfoB9cUYLrvFOCwn6wF46qE1qR\nnZjd0KjhIAzc2m4f9TA4IHmu/0m41awjA2BbMbFKAOAtRPaU/zqwPfe8pMIx\nuscYMp4gYsq7dZVk3jG35/fCBatfy3v8YiaJ8OX3z9lsXYsc7UpQw7smmyt1\nMWGLWjUqYYl+89qds44f9MDuYqGOkZ8QaiVAXo7+eQQDJOIDAZqyGNDaCrdm\nV4CBnO4WUqc2jAtd/b28oOQmoXZFwu01RipgBh+ckZ25SRaedPBRhN12b+LG\niOnAPqDxvjaG0vdztX/HzNngce6d3NPwcJzGo9ijqrA5H1RxRo5UdgZgQC/E\nzm8Xs2bQnJMZDiDCuY1CU/aMQE6RMC8LvbTdRBVUtr6ffO8b5dv+CMqKN1Ez\njShlVcCHqFjBwvZf4/w/TK99BUlRaEHzFh2i/ABmWpUsEykABoxmHKcj2d7H\nTq3wHjrI8D5cahTgwzqqIowlnqoNyhLKzM2EdeSNtxPab3l+GU/lXON/+G4L\nCZQXQkkPDgxnkLNvUAw8V6cJxJlsTRalCtoDenSYLVXUubWxAB2He/0jiFgS\nFZia\r\n=fO4W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.cdf858ea.0","@material/shape":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/checkbox":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/elevation":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0","@material/touch-target":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.cdf858ea.0_1572631164252_0.9788788043187187","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/chips","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.719b57e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa7063850c36b6abe9ab668e6999b9d33f6ca2db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.719b57e1.0.tgz","fileCount":53,"integrity":"sha512-4soMNC09EkV7BXCTT7MM5vaTyee3rXUPGlznfj4MygQDFrauBp4xHUATfRxHQ+gEWHHPJCGcYWQIZcDw1RPu7A==","signatures":[{"sig":"MEUCIFZJMxfaNZqJHnJn7X/rTS8nZqE4An7wWe21h+RXd+TNAiEA4/qMWyQR1V1ZbhKhYkwsmKDjl5AdhOjooOHAf5aB6fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI9BCRA9TVsSAnZWagAAzJcP/0dq4aPMbLhgTowPW8b9\na/4n7Gn/SUQgorIalybEwc6xAusdFJ4HgsJnYahcEhEsu5BJ9f2ZUMiaA4fm\n+Ev+1ZiSiPI1aZusQIryD3hCowjs0Ua6UKZnT/mX1S/Qo1u4eXqUMW1qFZ60\nSowMK1Z+4b19Y6Jqy75sg7MaZE8yToBB3zhsyThEn5PWpJbib2zXEfAQAxXn\nlW8Aeb0LVZSEZP9KzyyFthhHHvFvQOTmuqrGNOEtkprogOiOgf5FUFzCqdpe\nS/Cc3vUHrwyiWhCB7BRwFyOwRYWX9R5H36WfRK4eDfkAS0uzjFPftF8auiMt\nikpIP4dYP2QM13eNkrq1KJ6L4zASW94vOsV9j0vd56DzgpF+fhWKafvmoPwn\njiHlqKRHsGZIHCEZ3h9yr4OENl7xKkfJyVoQL5GLbcckJHp8bpfyR548ntsB\nFOP5bv8f4eA8ix9sJA6H7Tv1kYD+RFrGTO/L6cniZ6uL3sUmrOaZpbxpV4oS\ngHCcIV3NMjoSYoYfePFOHOHldB21x62NM81zSz3e0BeoZTtGfw/7js4xvJfC\nIlpG8ljyrTtuFs7AwFL7GQVrO93WOe2bRmuZ3C9tt59aZ81F+EqxPFfxPV9T\nOquir3rGkFaPO8LDTmIkkBI4mcbJQfPnJFkx9Rr5iIdJWzMMiyZ7OvXsV1Om\norgH\r\n=+Zpr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.719b57e1.0","@material/shape":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/checkbox":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/elevation":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0","@material/touch-target":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.719b57e1.0_1572638529093_0.5067919251396071","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/chips","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27fa5366532c56b2b59e25f4914cad8ecac2fc05","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.97cbbdc2.0.tgz","fileCount":53,"integrity":"sha512-/oyKWmcgRR+UnEyDYMyx/t3PdsgvpBd/GkrRz0TG1Evo/iNpeDiJWvdo9ixG+glzo7UWgh5RnPgvipUzRADJVw==","signatures":[{"sig":"MEUCIQCGm+W1DGSpWYvkp7MW73sR0bfmCHrR/kg3do/u41n2aQIgRWsyE9V9i4cO8Z9atm/kcOdtihp+8agX4k1vauKqVgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJW6CRA9TVsSAnZWagAAFXEP/3oJy4SAaH0o8xdj1Ku/\nlVuG2PQ5J/w+G6U5JYFFG37fVu4AAsUi3jmDoFTDAwSxBX5KPsBNex8u7/Oi\nwMy/sqw8rokfgj2WfzmMqVyTrXP48+5KpRncw1vQYRKmEBSiUglICdvrxbuK\nlCrnbcURWgoAfVSiSRPbyRQL1LgcZjaPAOmd1hAMoGE2ZLh0guz16iMTp+s0\n549Pt2TKko+OFIHZh7aBRK0IhDpHDS67vY3hnRMKHrR7OKC34veqGFQIl2pd\nBwNjtbZjgRn44fszhUgX63jkTJ42dzbZK8NL9tg1LtH/ycuufA92Z5qkt4E7\n/0Sio6XBKvQ9DEFJqcnMcGRGni8RhfQqokXVjJjac3P2aCcZcpdcwgT9N1Zz\nlUGqINSvXGH1GHslgntFf7Ixny9DYs9EGqEQRXDl9Tx6hjv9pqVL9VFf156V\ncXm062H8AraXDgStuaUN/BBGk99MX6p+Mm+HAE2HzJICcKR1JWd4hzUBvd2x\nKjqQHFnnGM7CLDSE6ugh+SR2WaxZq4TNLG9FzyjYG6MefoGSNbnodPp4pmn2\nLd0XheWJty3a5qKrhj99iVNPasCy+TwLSStZHA4d6wr2o3ccfKAlRVKvTmzD\nSxJhE8PGQK+N7QXR6dFLQapux7IKDCZDJwYFKOA+LPX1wU5tvIG0G5vkktbx\nLNq8\r\n=Jt9y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.97cbbdc2.0","@material/shape":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/checkbox":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/elevation":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0","@material/touch-target":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.97cbbdc2.0_1572640185726_0.24317128968435608","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/chips","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96bb73e546bbf50297a26d11982ca540efb4c000","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.8e36b3b7.0.tgz","fileCount":53,"integrity":"sha512-c9g+wWbJFYMnZo9kmJq7EKX+qb5eJ5inmMq9r5NgRrBhG4P6bUpILoxssU+F4gqc4FioJaTENWHY0HQpTYjkGg==","signatures":[{"sig":"MEUCIAjkLUlDiSozQ9BbeESbeinUAkpf1cKoYsNEMxFT5dfGAiEA9nU9gEPvhpAFMlatUsvbxdRDJOYa4EbxAer+/2Eyo0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1LCRA9TVsSAnZWagAAV0sQAIafd3xL3+d5lYVvk4CV\nrijvIcu6qV8dAtxK8eg/vDYREtK3UMU/nsdW2HTxshFeS4dGrztwNJBmehxn\ns1gJ3FNmfcjAnEf5bau6uo91kdQ/28Th7MXTAQ+IDwlrUSMDhqVrNWUp/xrC\ndxbfW5ku4xqDBySvGBdnHbCtg3c+BPjFdXRYMUndCl6e9LXdU4f8fJrjKVSt\nVqk6dnmP5tC4cRJqo1qIClhFf6GWGnOmkBhTuvd0FjRKc2mIRbntIJiBJJwz\n6RJoYTQAoHQK1Ho6sRIdDblGfbztTwLdrhXS3/FC4zLRmtYWBV/ClGuYdEJH\nD3+VUmfWnt0U2jInIik3WKs+5hsGtjCxJzyDQKRRODDRMKLOF9nvTf0ykuLo\nq6i+ULerLGrjagFE1oFGePraIa1eheaWXmQIpuBWC2TV8JG+6HY4puWX2wCj\n7VsdOogesYKkeiiPOXdY7ofendIBh4D9m4/8svNUHAl/JZKVStzqv4Gb6nh5\n6mWxj5GNTh0MrzhuKskBL5ZdnYDNeTN1oV0MJdjjoyz/YzKe1voX7jP8OARr\nt8owxg/I3aV59fk03JVQHMEXquPxw26wZE+kPI11CzswJYR5JyQED+OWqJxO\nMiy/y02iSUKOyxxj+wd3cT4eRKHzjy8O766sutvAcWvh2JtzLQC7JCr3qUZx\nC44I\r\n=O5Fa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.8e36b3b7.0","@material/shape":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/checkbox":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/elevation":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0","@material/touch-target":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.8e36b3b7.0_1572642122911_0.7037837034562968","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/chips","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bcafde8c226292d3e2a264684d1cc86d34d9a8b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0-canary.62d3a09b.0.tgz","fileCount":53,"integrity":"sha512-j3v2K1/DgRu1ryWEdLfxUql7OMJS13duqHWHNGQfkDCBt6pwaRFPQvMphXrpI4jbKgMmNxMGFmT77JKTJaDsIw==","signatures":[{"sig":"MEYCIQDZK9iVpn2UhxtWe8nIHFrdxY9my7zxAKAoX4onSqACsQIhALwrIoJVxk8UQ/F/bsgi5mBBORRbnEKLFWxmoiYp2j2m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ+CCRA9TVsSAnZWagAA/0QP+wbdXQNDOAByZeAyEFAU\nU3lZ5wpmwZRNb8U7ZC88zfUzVUgB2Moc8yTOuvVegP5Rx/8uu7GyFLEuruap\ni3DbEdzjIhgWhd2lNiu+tmNk2vtXygXpcjQSXXQ4yRGBYbWBzHpWCvvF1IuY\nU140LX71KgmXcLvEvRDu7gEc6CN2V/TN/Z0qxS3SxCLBrKhUQkY+eFrxZ41V\nFbxiUC1TGf1UWYT8V257gPsflaJgMtTtxnIA65VIp8ess0Zip7WzEQwKTNu5\n83HTh/7mdX5XULR9GN9km840PycoD7nOIJyAGA2w/vcw54sGmAm8tuQr1so1\nCzE9rBTy7T+3coRjk4HzcPGTu5VwvxioSY98zuXvz9M7xuFYtve5+tdi6wH5\nWlFq9698JbNtfUU1yBbPE9NdO80zEWzK8kEoIwJdpxPQrqMrgfnz69osotpT\nmf13B3PxkAi96V/sBT7hkrNUcsZHboKh6A3JVPzGlcaI8ZDjBRuVkI5lUKfN\n9qfhsxQBedxi2I6iGN8w8XJEpp1ZaVZxx5TndKZs6HP307Uql/9Uy0umsIQU\nyzExE+ZCx7l5rkxLCu+uen4KIPYEahmUP4Fzwg3nxb+BJEHJ1vkHXg5GefBl\n0QXy9bJrXS2d+bjfwdNQ6PUx1rOMG2OsaWpKXvIyl+q6pVe7ZhV/eDfvsxA5\nMzXS\r\n=x2Ih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.62d3a09b.0","@material/shape":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/checkbox":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/elevation":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0","@material/touch-target":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0-canary.62d3a09b.0_1572642689641_0.7133971137903659","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/chips","version":"4.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@4.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"904ac3e4cfa316a853ef0e4a0266625a9881c28e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-4.0.0.tgz","fileCount":53,"integrity":"sha512-+c9QeW4xC3LwWjh8RH2JjNRq+WlhDSjDkOQrr+epcYjcBGpZUZ/m2MnDNuqHKTFMqGraVsSuX2hcjN8bs/Piiw==","signatures":[{"sig":"MEQCICfxvTGdAfvNBFWWkIQQKBNrLN6nE4KCulAJiB8PgwO3AiAr2NIQS/wJWVuWRkSV2CmXEUWCq0jVusQ6+is3824O6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":739904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbzCRA9TVsSAnZWagAA34wP/jgfyOiQ+dQGQyjHRY0e\ngwCMxPq3EVcqpVVhMu+VcI8ABB0UNoFESsgeGaQErFx9c7pDnWo/PWJHaKVT\njshkwS/BLMnwr3E6burM3+4eBK7ThOBa5R1VRfQS8KkGlQ7UfPcSYo33EcLZ\n//qrDewkSVcfBPEBQ7emRm0XraJ+bhB2S1DHHEh8ivR05ijqwP7ukrSb7yWb\n+DqeLcdgcLSWWSlUZT/29W+FiqwbgO/1vEUqHe9mpjuX4qRHv3PVKJ3OXvsX\nx7OTLYKUO4TawPHvw0e4t+pYt/4TedgKCHf9ZY6aKCZKJgd7cNCgJ6aJsKxP\nSnbAI7inOpU7S4Dqo4Ul6SmfRxZknH/9TD26S7azU77qCAAC7yboQAcblsRe\ntm0HHtEdDjnQqP5eTGYUOyQICnVf0nCZ9bNnPIXQc8sObwvmPVuwx4S4u5xK\nWLpB2ZpAHArStP1VPJzB84K4XSYy7yeAtT3NhWRZvrV47mzUoZgGC8ZkPOpU\nMGxE7zfdLpN7dnorfQMAnB9d3t2LMTF8mumFP0c+BJFDtYCHhxcAnfVO9HG3\nA6HF1U1Qn2RJ9qcHrW2ieVmL5wt3LdXcyzKrPDy2fYB4lEYjUe7++04ENFZ9\nl1y93bfg66LrAqoLEWqUJPIQah7VcwPFSaDwHXukb0HJPgDyf5OqTwukiRLE\nOGPL\r\n=hEQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.16.3+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0","@material/shape":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/checkbox":"^4.0.0","@material/animation":"^4.0.0","@material/elevation":"^4.0.0","@material/typography":"^4.0.0","@material/touch-target":"^4.0.0","@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_4.0.0_1572718322623_0.926160021004385","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/chips","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1aee30e2b91ec05d18d3db4ec3708eb074d9e2d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b5eb51e94.0.tgz","fileCount":53,"integrity":"sha512-+6ifIBLhuWgM6X21wQt4+tYoP+FScKghdDs8YTmNkTkboPw4BCLCYrkVtew03o7irl7YfsT469ZaGxvM1NwUmQ==","signatures":[{"sig":"MEQCIDYLcLnCXdPw00lClquFYaQqVGhjst3X9p89UnBhSN25AiB7Hi9bWp/9Et9V+JF4zTlHtgOa8ikFrcCM26IPLx8usw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOoCRA9TVsSAnZWagAAtfYP/1Z7mcFAXhRatg3tcmgi\n5TxXVC9a0NgF2AdCzpS7HJFHCrCXwPTth+nYfhjncbZlqr/j1IOXhGqi1D39\nwFAMM8PkMVjnGPybvzdmG63Mal039eYWmMKEo1oAsyiHsDv7vjcoJ84hEhs9\nfoeCdcyst8djZPnsYJcXARZrLEthbQHWKdCVLoh85ELpYM5TahzU83JcBgnI\n/1qDTt662a7B14t+ptlSuo7Hb22WTIkDBf2cYbmpq43NV/M27YXCmUgVsW5l\ncWdnc8F8EdRF06DyxdD6YDQns7yurXsXMqqxap8MJbeH7KjEmkfAo2DX3Bjk\nJDMA3zjbLLm+06tTGUme5Sknli+x3AOiFkRxmJXo+6+6y6NLh2znvJVg5abv\nl9WPaTC4Y29N5XG9+d5zrvsFvELXEhQiFM+Sbe6GHGpz6L5DqIBd3MtUXU8y\n28KnHdbpxAAVR8sPxoNqxu3jdW3WNCuSSzeQbaHDs+HnI5Z7bT5NGuAt+kPD\nw+GYW+uPPxl28Gv5PudsB1tNK5t9kEzfALo0P0fl15BHPni7lGXKhFU9c+C4\neJsfOJp1DZTjwJJ8jF74lxQeSD3Bn9+tSz9FY9VxpLS6AQ/RAG3D1Y0Ps44C\nrXtgs8zt4dPVdHPDFzu5WZHjsj7QfWiJUAppa/JwBm1B0qDZvkU5ZlmNk45s\ngK1d\r\n=32JG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b5eb51e94.0","@material/shape":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/checkbox":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/elevation":"5.0.0-canary.b5eb51e94.0","@material/typography":"5.0.0-canary.b5eb51e94.0","@material/touch-target":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b5eb51e94.0_1573151655711_0.14887280622903853","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/chips","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.58500806e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b85aef04d27038b220ffd86d28792fa87dea4088","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.58500806e.0.tgz","fileCount":53,"integrity":"sha512-zpmSOSqfmZHFGt79udSgfcX/qyEbFS17XbLG/fP94MhD5A9AGrjXqnKYYgRgQZNFlnIG9lHlroT1P1w6PNVlyg==","signatures":[{"sig":"MEYCIQCuNrdcitPfB/uekGWIWl7voDpKTfUpPV7CmC2lMpaDmQIhAPwdtR8DNMCFS+HldhGNxX2aDEdsX+FYpeUlZp/ydNzR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtyCRA9TVsSAnZWagAA45AP/iH/1diWh746O1wKQ482\nVuzBjsjuj1MMjmg6XVRoXbsukHLG5rfwegX6gkTw4tND+hQk8u+rMwdM+oz6\nhA4M1QGg3glHKEmsmtsFkGXobEIhzs2pslnBB/UDhpfAmcAvZpbIro0Cxv2D\n/oPjq/gaZoPblZtqJggvUaS1Dhcdz7/gCuDwIxkRKVqHxcKPagX/5ulIPB15\nWEL0Lhq/RpWVPSKIvl56UNnK21JYGBtji/UYbnaTj7S4VvE0BycSjqBIy/jy\ncdKP00IIxGPWnLQrQG5CNjCBatSoqZMmZiBV4crJIZLGQpuFijpjsgP2Q0lX\nMKRm1W66Iw+ulenoflvqn6SeGCVe9HKRse8NOcNMXdBin7cveQ2KGg0Q3xxu\nfVtg+jvV7X0KJx4zefVerGsa7kMLzMnjmCYYT8nAeHe9T23bNutZiTWVP4uF\ny7gg3d5tuZ3s4mFtVsMoAz83CrLmAd7x4SXOeO8hZz9yjHWNcwylv6GwfOx7\nUNjv5HvSpRCM7pBrqDjaRC7JVH/7nvsVzJFq6NFTy9rJfJYs5OrWHXNWpXmk\nDk9NRh9CvHaLQUiktoFM66tRjsSYTR4zbEn7F4K5PA99IaFS/YalOQBgQkAC\nBfojycECB4Es8hsAF5r/rkKbxQqx31FikNl7DFXrMICWi3VnHbg5+z2Dpkf4\nXait\r\n=U6yu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.58500806e.0","@material/shape":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/checkbox":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/elevation":"5.0.0-canary.58500806e.0","@material/typography":"5.0.0-canary.58500806e.0","@material/touch-target":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.58500806e.0_1573227377667_0.6200373665733316","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/chips","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.66299b646.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22b93fafa020c195a1ea171fed1f8833868b73f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.66299b646.0.tgz","fileCount":53,"integrity":"sha512-2Ls2uSpfklpn7giPcQUkh2GEi2ZZGGD8TVQQwXhfoigaIwW78F+PufK/m//7tOKKnDFmhfbCbbiRjxa5hYoa5w==","signatures":[{"sig":"MEUCIBa68gYpS07fyxhpBjS8YN2lMX+I2SRv0w9EWzuxwUcIAiEAzc8+ftLeX6zoNT0/L0pDadlm5weqx9WoRdfMrO68bqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdFFCRA9TVsSAnZWagAAH10QAI/uI7iX5NRi6qOUpnS2\nyGS++CGCb07EqTmtRECaDuDicqGK+yKmoobYVv7bgNsFcGBXvdaySu5G2Edn\nzhzxuYJTFUO7ZmRwfhoFyROpX5RYpCvYP83bURjH6kg7YRHSN2CaR+xgmOGc\ntNSxrLUvpLtKCnU3vMDTHlGfflOq2dB/546KO9e5rEmq99SFojzC+t+gKB6Z\nOvzpsowO8S4NB1EoHN+/ItIOFP+xze5t61EVd6RdFioHkSiJVvRk+pT3vPuy\ngxOWM5CBmPAW9mArKE17zIhm89Upys2KH2nzDsqwq2UPnIpwkgYwwS2DX673\nVuMVVGgjqcKeYscy8lHt7ZsyGCNoCWrDUT1x2EprKMgaCN80Au8hhE24ErNl\ncBPy2uZQp+biINd4gcdV0AP2RsH/Gp/AkyktfH8/1xXx8FSmX5awlvk9Dq8Y\ntFpuc3hcilA3bXsHFerwVVYOyJhCzcz24tEC+JwORbVXV6H5IXc59oExomfG\n4Xn72nf4+HN4c4AvWdf7fseQMF6Llk0y3oyZ11VSmah60yke+sDVm2/ve92W\n9A9KZhufS0AMgzIGUWHQmauLFxROc0esr5yXnCbOh+GzAb9IehUkmrDuDrsD\nKnfRXpTkNZnnhS5iPZQ+Vs6OSSbNTxKQ5O4nYgj9M+bPNt2+yMIcsDJeRLoV\nYJkF\r\n=WO8i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.66299b646.0","@material/shape":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/checkbox":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/elevation":"5.0.0-canary.66299b646.0","@material/typography":"5.0.0-canary.66299b646.0","@material/touch-target":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.66299b646.0_1573245253012_0.22865356849145702","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/chips","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.821871e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e94edce2da19c2a7c599c8f3709970fa340e207c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.821871e04.0.tgz","fileCount":53,"integrity":"sha512-vbQ1yJHhqKxP2GoolscfcGWJCPpbka1gTPDcggJNvc+rjL8xSd+GVjcGveQ4hnWvQm8OXn9OGRYLKqly3vHLmQ==","signatures":[{"sig":"MEUCIAiTociFXBIeARwWN4akdCy5xfjqfzOsZEyikAcA43hjAiEAo3x4lWVEK1o/9onTsN5P9j59jnAvieI3Mfnk9GWRsDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4OCRA9TVsSAnZWagAAsrYP/2mFwCdjIib5p0nmqNui\nB8CWseGnTjEsTHkdt5qDiSYcEzv3J4infVuzXdXLxRQvpQdOPcqLB4e6A+mL\nZ5pDpYzN1dsxZ9eVpKgwGpWPGHIhXwak1+aSBPnoWRwzUP1SJ2lO8cz94s4D\nXg/YWJblx7uqm/1dHh/WRxbLJR5vQWoxBJKv4m3tPa58/JdQ51+yZz59vCJu\n4a9k66hOIATBh/s1Jtkdd2RcsoGivi2V1A03trXBjDGyYkJlmegTiktVAMfM\n9CtUFNdONxoYhnKUIvcU2fUPBRIdo88wucoSltruXGSayZfwLoKXl5zo9H7f\nVrFiTQ+jG+lnnMgMlRA8zUoJ2Vad/xDgsdtD2BCq7/wTW4UtqUDCisgxyvl6\nuwdA52suGC1GDE6/z7TcKCVl9fdnvTqrUauT4b/Vk32+deEmal1uVe78A4Jq\n19Mh93AiuzaNdv6kRn31f07mGyfE+Rc67Qq36V7UZeNsjMfP7lGBhhMHoJIH\npSWwaQttf37AHkk3frvhx19PM+vmg3piVuHdrSHCbGEGBkS74F0/22gfTcBj\n58oEoEhJHPj2ECK55GFhLZ+eAGPbYMxJbGANaVkhcWKBaFx8ijuWe4UVdL27\nswPk1fYE2w/UwPmd8sk9LdRpOQjrxjmXGFt86qJwNCRP5ehBKGvaaUO4J0Sr\nZG+i\r\n=yRmJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.821871e04.0","@material/shape":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/checkbox":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/elevation":"5.0.0-canary.821871e04.0","@material/typography":"5.0.0-canary.821871e04.0","@material/touch-target":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.821871e04.0_1573248526419_0.24101289227115164","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/chips","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.491fddc31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35cbaef6b8cd13e88d084e4d80ce36762619c5b0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.491fddc31.0.tgz","fileCount":53,"integrity":"sha512-El8BmwoTkE/a7D/m2qAGtrw/0Jq06kFJa6o2NHnmsHmZ+RW3mgVJZoftqIel6WUv+dQiRRSqPxkvbgA/72epmw==","signatures":[{"sig":"MEYCIQD2EJU3TbcALDVuCqDLOICLZXm6vQEGvfWAFvAuIuJvcQIhALOCvYuPfvCEaucMGyS9jkqdr+sx2UP/QZe0l8iHIfKB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxec1CRA9TVsSAnZWagAA/doP/i/Zl+FEuk20b6wGqJZn\nCq2FqAk/PEZRZlzOmkFbXQYfNVs9YcYJYjlchyvQ1OdiPKeI36Rty1/jiwIQ\nj8LPml/WROHe6QvZpzWTD5jgqOSCsC1QVOjWGJdjbgUEvKjknCQxtflBVgv7\naSwfBANXjOy0V0eYgXM+Ni3TY4m8ysvsPc3HnJ8hrdJKNCtUKoDBEvY5BI6v\nAs28jtwmB9PLf8H+kzcGeKLBFeFXyq/osv5XIb8jHG4v4Xn1xbkiz4D3op8F\nxgibd1enns2zFq1sfgRsqQqtU1OnPtmSRcIoCSVNAdtJYJhS6kImDKPVJICh\n5sqjzhhVU5TpTKJ6o7FdUbvafS9hKHaxbE9y2ReHzCnAgmM6lQ5+RwGJod9Z\nLX11ZVsdiq1VUk40Dc1FemZzf98p8XvvKmuLmiDI3ZvZCijyJyScPiG/VrNr\nfWfKIOxlkck87fgMSaaHVmPmaKBFjxOvraqH/MpZpS+Im1p0UfIGLYIDZz34\nUBDVeLuIA9eS33e5gF6dJOT6GOg+JKjEUcBg2fdDxVZDDyDow13PnRsxeN9o\n8v30CpMAkNsWdyBRP6QxD9IvgSiL4iNn53FkjqP+ELxwB85Lz9WBrJoioN40\n4K2YQmyMTftsyKV7Q1ELEYXWls3WbsD/obx9b4JRbh5AkCAX8pc/Zd56p+vs\nL9pc\r\n=pqoV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.491fddc31.0","@material/shape":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/checkbox":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/elevation":"5.0.0-canary.491fddc31.0","@material/typography":"5.0.0-canary.491fddc31.0","@material/touch-target":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.491fddc31.0_1573250868077_0.14907770699801426","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/chips","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82e58d066c5da738551c88cf9889a99e4ec67558","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b0cecf145.0.tgz","fileCount":53,"integrity":"sha512-cvVxLS3q10J1HTHV2ClrsTWp/3suh0bYUjtxS2x7jJWiU1GYz2oBA5mlz7VF8TytCL/n/OCf6wjY/QkD83oG+w==","signatures":[{"sig":"MEQCIGIP5gIXICXS7YLnAnuA2kfK5RoeQlR1dEFyMQgqIXF5AiAg5r8bT1jeMw4rE2eMuUXgLmGSSPMDrL2GRH8+hkGfmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiuCRA9TVsSAnZWagAAHroQAJJUICA/fKsKFxvYlOPG\nlyf7siMS5JzQYpefMisq0zQpzPwWTuM6UPTgfFUo/I2KmvDpJug8r94EwTjs\nSuo79AdIJzB2KOOGBAheBqD7gqfJGilHLTkF/R3t2RwDTqwoBmcXHIIxLkSV\npG6lGbf1671KOJni1arCefR/4evH1OFimuqsZkSytTZFEquDYcySGuwcVPny\nG4s1Mg91VfWhrmEDgrcwiaLVuYLmfvm2BvuUaU2WPsM5IFPnnSpvoXO2f0B4\nv7G0GqusTLqYYr+Y/U9BjqBy4bCy4RcHdPsDHt6cm4lJNBBssB8RsnKsRmgf\nZz+49L3t4HneBUOwARx3IVklbja2Xxhy1c026p4XcSUvOUrhfu7CqcNWyueP\nlE3K9wLqa8mUyS/5bSRozV9tVNxvV78Kk1pnpVMltlHmsnMIm3weRA7kcx7y\nb1Ax+UG0qwTIrxQUnwX7pHsF8m1Udqk6XCE0zyDHgGnJY8lZ+n6t30lMjaXt\n26QnMR+LzAvGYBGxc21qgkC28FKoDNuTtBTl5SIJEJThPxT8aq4mIlHqgtO7\nx8Kc9OzUK9yatoAn6rPc/i3YbhKTTK0+8gw/6zHVVgQ75xrrzAQlwSPX9jrB\nF6sicrO90VfMqm6SXZUnSqbFNzmPqWQ5bXZ9FX5T2Pn2Y9tnysa/oWEkIRzy\n4LYk\r\n=hxQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b0cecf145.0","@material/shape":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/checkbox":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/elevation":"5.0.0-canary.b0cecf145.0","@material/typography":"5.0.0-canary.b0cecf145.0","@material/touch-target":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b0cecf145.0_1573324973718_0.7468674307673868","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/chips","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c8cc373420794cb2efe6a5fd4118fcfaedb24e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":53,"integrity":"sha512-nKEunkdrEx3+tyhHHsiTVJtRuOiGmyBdzknNVBpDF2EiMPmDVFnfjfBeS/vDbmwngfbYkmTZef/4JEsGLB4Wyw==","signatures":[{"sig":"MEUCIQCwthEG/8x7VAVWqkacpfrc4PM99iXKloujn86m2GWWhgIgGMLwpG9leSoGCZCNarg4pmRTCTPI7O3MRSmtiqMVp3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBqCRA9TVsSAnZWagAA67wP+wd7P1Pqrvo4SSvzlVyz\nFX0KRHeRa2siBifhzvp9f9Sw/QedjE+CCEr4mocUp+qexemzk9vI8aeGuc0/\nQCDJkh/xxcvwrKvaVKP8gY3xBdrxmsIBxODLWceDyhU2SkEM5VqbFlT/k6qK\ntVaZ2Jaa2RZxaJ6y+vFjQqJF32x1Z4U9YdXSu7i4jEJ6UCC6THxdHnNdGnls\n6XsGvjafQhJg+XIbkr4V+ZHhHAnayIOJHHtYPhnVG4KZUplZ1JSrheXV1lWA\nlpF/hfWy/qxS83rpOC30MVtW7rKl0zHcRgGkeB11v5H0dP4aW/89ZsMGj4Gp\nlzIi7KDnRI+xVlG3hVpqh1pzw1pFlocIkiZeXc2i2VaR1fsDtYu8ms9AyhSZ\nxY2I/dq4Yc1B9zFkJSKEmkqY3oYFYVpWlCr6JBlt2orvH6wWsSVDoBL7oR+H\nLu0qFFJ7IoaaZE07RmrM9gpo21qTxDmNlN/ugeJXH+jxofLeQjbZZ/kxaH1e\nBN5V7F2rdvV1lGOKm5wkRiQ/QLejq189KRn2XABabCeuGt/bURze0Qat8nDj\nRKrBjbX/vM4c+Ua0caBfqyQznlWkrmMPZFqg6k4SUGylBpXlN41f/Xy/hYIY\n4yw0bN+xtqSp1VpcPMciexKuvznucs/GQFUrauz/03bV8cQJ/8NF2j+5s3ds\n+Lfs\r\n=G3ah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/shape":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/checkbox":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/elevation":"5.0.0-canary.afe0dd1bc.0","@material/typography":"5.0.0-canary.afe0dd1bc.0","@material/touch-target":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.afe0dd1bc.0_1573486697980_0.07130386602162186","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/chips","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da59350ea02bbe34da02f607b39ffcef1585ed99","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":53,"integrity":"sha512-9R6jW4TvgLUD67Pfdklon9ankEAylD3Dk0/tMgWRz01L5jW1ui8kd+/hRJsTdGfgQeUwYABFL+Mqez9WWjbZug==","signatures":[{"sig":"MEUCIQDJK7pl2SyJs/NLGwBXQy0T/KNf1scZle9QcFzG6L63jAIge1kmmjrkqiwmE5x/Mx+iilbThKKFJ6+j6f/20FTll1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnZCRA9TVsSAnZWagAAYLIP/2qNbcmsG7H0+7PiHODW\nQKFQ4AAbJg9ZngNeSTN98k/M9MqSy2+ltYVqG60lUKK8qEduFZt6uJ6np7HQ\nywIEZt+Xc3d8dOSDYPMzvjNSc4Nh4tLhL6L8F7acicq2HRB/8cHPveMCGQlS\npV1LWpjtCCV3rgHuuF4jx9Su8ezjC2PkCOorou7EtqVHehqPVhhQvr5ZoRpb\nLvLiWcSiR98JyKwD/sO4wafOKI9iQp7aHI8boAJcoSbV0dgCcum9vVunvvvv\n3IBrpAp6U6MoHBwDwemDft3ZEdWqisg7ZszUTSmBncI9becXxoeIdV4oVG2/\nd3r3v6+8xCsV2rvr1TK7pvCT+uBPrbbKaUEudcQo4m0bQUJPLE0erzEXk6zY\nLvQYu8y1ImtUPxs3XJ6wLqkf93ovQK5Tjejvot7Uuwa5aKQ8EjWpyEfqHLK0\n0hd4CbkHCv2FHe24wCjUH1aGido9rbih2ePpyRSxOpJgE/eXfH2c93Q9S78g\nJzz4EuVIIgRvJuQg0//VgQ//jd79UPPYKpdn0jKYJINg6Q8NTXviC4dC50zc\na1UogOLZ7Ny+dJsfLzrtzGItVTbDkbfYjstBZFdzff/wUq3d3dagHsdOpez8\nv+v7d3mvaSp1z3hEpah/fVaUluuiRKuvCFFdn76au9EN+4Dh/3PCslxRtuzK\nDvDb\r\n=er7c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/shape":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/checkbox":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/elevation":"5.0.0-canary.b4cfdc40b.0","@material/typography":"5.0.0-canary.b4cfdc40b.0","@material/touch-target":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b4cfdc40b.0_1573747161132_0.7467273291739649","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/chips","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.525989b5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ce85b19b3c532b818adba18c5ea5c05c2c62c3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.525989b5d.0.tgz","fileCount":53,"integrity":"sha512-ddSB42SOLio9wNpZr6mpPr7FaCmSKroSFkyr251ssUHCAKhDYdKjvVF3+k+SyGOzFDnh/m6AKrlhExYwfKMZXQ==","signatures":[{"sig":"MEQCIAbSCZAh8OoJOJQcY1a1cfyInlJrrPqLpDq4VgsWjgOtAiBImrnM0cvOtfehm8Dw3lx1+bgvFTgxmNNdJ2mxWOipLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePMCRA9TVsSAnZWagAAEu4QAIeYIHfr+C8emmdyMMBq\nE3MyuzMBOC5pVmSOucr+SJiuUWvjhMj63CRzHHY6AqTO1V6PF1oPUVJqobbZ\nBR76LAQg28mqO1AHa2mszQ9k1I4v5N3ZH6Viof9T2i12T6k+6XdidgYAdjB4\nco82c+4DN0tkryzRwZsYOjtTYmdXWbmKbJt4zqCJpdIHKBG9jdmnsTB88IEO\nNCsYAXk0R40Q3QdRepA2d/HxxTAseQMR8d55MTHHx8uD4HojLlTSxQBI1s2k\nbSz1geCLM+j13BOHhr1HJZTNv+bNHqc8wdWDPoCOG/RXpIuAjfJ6hnSs4H01\ncDWeoJ1JNF8n6udBjFsuadEIJtOilMK3X5Yqumo77cX/rWd7xGMx5hjGAUvk\naB7e2bGUIQIEZwB9LIPFrqAU94hc9nW91WDxSL5AxSwij/y58NDjbOokRMdM\n3aveXJJY8KwbuVJyxaweWBwssXzPT6oLwGQKv2vvdCoW5jeRJMAyerPXxy9x\nrxVaOdnrtgCcjPODt9p/RWD4LRAe90kZ5PeWDL8sZSqeG/GViibPXYM07fki\n2+PJWNdfNXSu2dMA6Y4Pj+quD6ynP4NEcHSYPsLlIpcbPeiZf/mkWcT+0o54\nQC0O7nJgJDX3gXh1vhxCRFqL32l5PdoAADKWUDk6wL1c1TGPWm+NKH21W6yf\nIuLp\r\n=c6M9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.525989b5d.0","@material/shape":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/checkbox":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/elevation":"5.0.0-canary.525989b5d.0","@material/typography":"5.0.0-canary.525989b5d.0","@material/touch-target":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.525989b5d.0_1573774283992_0.02430169549868455","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/chips","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7084b403a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f221681758c79e11967739799308ef69ba74bd62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7084b403a.0.tgz","fileCount":53,"integrity":"sha512-dKenQ8DkHsSkTC7a19NW8MOfXeTbX6snOYpf2G97d2I3pHaZDQQtqnzy4Rv57YqJdupcNxzQ0RnfDgu2Jd1NYw==","signatures":[{"sig":"MEUCIEcjrEH3Lp0q4d+98ZhFPSLPcyMCdBQw3XbsCmIz+CT3AiEAm6q+JMT06aoM/+AiRKefIsBmObqkVYOn4/aELp0iidQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfonCRA9TVsSAnZWagAAieMQAInCihh+8wHlepdekhYw\njBAQzTj+a+OhgKz2e+L7naTWOdTLS8+L4xvsqe/3l7M3bFgBf+AwaYw3isAO\nK8+/TwLEHaGruUiNgaYeFRxu37NMOj4s1Veju1/d0XaunWD3Jt7Etuh/+1MO\nzqPXSWi5fVj2OK7/OkullOyiGarbq/ou6JlB8oN9ZVDV3+gsQnx5Nk6yZ99v\nylFkmVFvVEmgfGEDzLvuCYpWOqa4SuWaAMIcm8S92yTTlS0ooWoen2NtkVSH\nEmLL3dWCNK4BnwUwn4U3mAcx+YaLuOyOmJWA2sgIGHiXWqK/m00+a/CLrQ8y\ngnfD3VSOQOdkfF3fHvVlOMn5ducSnqXP3blr/tXiohnZssFihLVGdSd0mDzv\n2+s3LwiJXMHjV5ArHg/CQnKGJEsjRp3mGhe35o9X7E6q4MDZ1klZu+IeGrkD\nuWrThkNVSNPDaOvo1qE2mzyjsYiheF4SGyaxh1PX3OsI6z2ZJHoDjgUb6cQJ\ntl3QWziZZl6S/7lBFXRuLDHhFTpWil+J10vl0hXIY/h/LTmgp9np1UPLPo4G\nGSmzA03dYQ0b42eYqUDiRPTYAxT0WEPEgRy21OnY76emxvFrSjzMo/UA9PU1\n50fOmK5PS//YsxlgTXG7S/9e+WPdGdY6eL/aq+qe8M/eUn89i/kxldsBzGnI\nJehZ\r\n=yxLu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7084b403a.0","@material/shape":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/checkbox":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/elevation":"5.0.0-canary.7084b403a.0","@material/typography":"5.0.0-canary.7084b403a.0","@material/touch-target":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7084b403a.0_1573780007168_0.4345062542225864","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/chips","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce24535b8ff4d70baf33b29c4e4f0f52b66c63c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.3cbee6dac.0.tgz","fileCount":53,"integrity":"sha512-qDjqSTxBgjO2ph+sR8UMxwoFRvfemRWE2tmmGXB/lJgaqXDEuiWTeLiQRRS9GaA7eopze0AfkHui/BRBQDMK+Q==","signatures":[{"sig":"MEYCIQCzCCU5bwhmOjOaNYoQypGAqhkZgYfabOeC+gqsDuvaMwIhAKtk7pq1Z82oNvq3tnzP1RBZ+rlvDjZBGXHllz6ZpZ6R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeyCRA9TVsSAnZWagAAtGoP/20iDLB1waABmEYnXVfv\nZdPtw6qfhJ4TA8eP1M/3G+S5HzjX5rqG864Oos/SgMRpjMc9TkObmjRFYveo\nBnSv5maWVOXaicl+EbVu4FxUC5/3jZbD5FeMHNEPAbuq+K7nZFTnQyEnO8Np\n4rHUzXffVF1iGPFRMnkMUO9v0Y0vz4h3MrMfKHqgifXf0WPOMig8Pa/OPL8y\ngHSUpf3X+a8/5tvJRidxpBsp5LJJxHolbdNVJvakCnnHqHFULpEkKFknpfFG\nwtIpjg6pC70jf+spIB2CLgXG5sg5BPZu0oAy5z1rFTE5QAjy7PjSvT95WBur\nqjR6n9Lbw1HoES9eHl3UXEijGMFyZ/GuiuuIA07qV5QeQK8Yu9NqqCrCwbXz\nPIR5X4OUJbRZ2taIRM9YlgxbeByPc1EnO+EqG91aYtwqZnh1DokVxGUOJoxs\nOCzjNtjhX4Bqk4WHZyy9zPTN2Mqw+XWUCH3lI1VlAZpVEEZoFEVE8pvDrQ4u\nXySpZDCzIZB+hvohiFfIEoVxliYg/U7StVROsEKzpEf1uwxKKNGra0sX35mG\nG3VlfUP/0EtqpBu/FJyvarX50Hgn29YeYAko3y9rmWg384VetOFpXykvUfOs\n3qzPvpPEt07mRVOryEG8AGRRNEIPSO1AXJl+MT4Ma1x34ZhLwgPboxWncVD8\naqHq\r\n=LGBq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3cbee6dac.0","@material/shape":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/checkbox":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/elevation":"5.0.0-canary.3cbee6dac.0","@material/typography":"5.0.0-canary.3cbee6dac.0","@material/touch-target":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.3cbee6dac.0_1573857202569_0.6762453105813422","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/chips","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"171454959204046a67414cb1999c3b9afc941a4a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.591a6ad44.0.tgz","fileCount":53,"integrity":"sha512-Iyj7Y+sfxoSR/Cxo8LA/ex8iGOuDl1CNn3zMYu/KlRs8T+iG3CnX19OAeIgc01lSyCzOQofwM5emnw6B9qmu0g==","signatures":[{"sig":"MEQCIHrPpXb5SuvtepqoPxQlWdb1Bejns1ohAioCBqbJubQDAiBq0KQigZ7T32wLqRvKshZAuEUObrJFVrrRGpcjIi6l4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y30CRA9TVsSAnZWagAAWp4P/iIh76ChK48q670Qsdug\nHJaB6zXA10ZDkOpuBDj4terzap+k/BhD/V+O4SyzAuHlzHxiKD8LAbsTX1Nb\n2W/ZbPgYHRNlYLRskK0JKWzxixFXt4HAKO5j6nEQddY3XF3Yeeyh0Z6Xyi5E\n3PiO+5geluqBBRui8AuMRZ7S1VBWOhJvwz4lQj5Tv3BUse6XujoN/VWQG2Ek\nRuNmFx/Wqlh4g+dqEv13HI61DEobtNzlG7ht7JgmxzmImu7LMhXd66QVDh0U\nFSvv6QtJJqTygKJRrUcyLwbtSGsSyrM+8gjp17AWUelerWP/P1gpBXrfmsdx\nQmCP8d0FUmhzOBXFDTHAjmYDQubbC7diESllRHpiiQXagB44Z6gdvmIAtCVC\njqa9UL/jyeRKLdbN+TsWey7Wk7XXDeaXO12vfMURR+HROIpnl0QvMUeInSeJ\n9Y4wpzyguepuSYW0oNVtvjSGQE5i8yur6J2xHGkd9enAT042VWY9BO2wi2br\nrL1/kVLudRpH+x9I9VxwIOSVu0hSnnVifM7//j4AADz89IMFnGSJ1V2E10fE\nV1ZDRQo21g8F+OZtFATEoq3ZRkSxzQLbt2EOdhb5e924skA8CmsP2QwgftH/\n5R76pN2e6ZzvdCGCbIJQxEMQ5jRmMK0fMcA2itvQA8+iW/QY0oM6N0/kkMmf\nd4Qf\r\n=fRpR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.591a6ad44.0","@material/shape":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/checkbox":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/elevation":"5.0.0-canary.591a6ad44.0","@material/typography":"5.0.0-canary.591a6ad44.0","@material/touch-target":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.591a6ad44.0_1574120947577_0.0336980431477194","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/chips","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.5729943ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6f421e78ff4a006a5108e85811f3cc857fd3e1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.5729943ba.0.tgz","fileCount":53,"integrity":"sha512-yF5VzJlWqh803fLnRiBbndcHemRrrFbscbNu5DoLzt9lbsktfJBN3PEzoDCBJBpPuEr5SQxDF5b7U71o1LKdHQ==","signatures":[{"sig":"MEUCIQDqrZdtbht4Rn90kOf0d9YtzuNBC1x3DU+HtI/+droHagIgco+UmzppKiYTS0moIDh9N8UYrYx9q+ldysDBgVMgXAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1Mz+CRA9TVsSAnZWagAARXcP+wQfS+qZUFSN8sK/9KgZ\n5NfHNoiipKCULXu5scBkWr6WnzMDU0YUahxBWfwo2+6MYefksr1fhTC96eTO\nR7FvQwr11G+9WToE0gKe1L56nJW5jzPN/To/BbL8+1uLF6NjiF8qTEJZGjln\nMyAdZwS9lJW0R6EHrHBuGDydUxYhBmcbMr4cWvqSpF6tarNYLPLQLUGMrAfn\nay20pH50lkdulXMSK8oJE/1rgSs4V5fgH8iZG0wIYpQeu1tWEZ7VY1Vk2cdh\n3PvRvCSbW7BwRe3Q1ujLOrb0DUdCuvyBLiIOwROybaN2X9D//v3Z5RkCRGJR\npgHno31BjhQwv1m36ulmFbjvN+6EvdbWEgEh+YTlbIwUwWPlZoxduhLa5i1t\njqohBw67SiTyZEpdMuderkWJgI+Pr789SjU9AHBbjX5sBIESh4Ga1FlPPJyh\nPe1/t55LEQNjPwm0X+guUx+xgjOKyy+ahPgIBiXbw0t2L2RA6jRyfRpJYfy6\nc5p9o+THEjvyr8xhk1T54yXI/VZ9FsWKBCBrkcBCMjbYaz5hbtpAyPYvTfAp\nnbEwBfzCN0+SsZy02uqpF7Xy0YV50zbMvrwNJeLvT+X8Wf1l9zHZAXvHPhAz\nFgqjmqmkcovwoQCS5Y5LC4YKnlWdxV81biCBG9Rgzj935C5EHitoyPmDkpVA\ni87o\r\n=BiHt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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`handleClick(evt: Event) => void` | Handles a click event on the root element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end 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` | `.mdc-chip` (root) | `handleClick()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5729943ba.0","@material/shape":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/checkbox":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/elevation":"5.0.0-canary.5729943ba.0","@material/typography":"5.0.0-canary.5729943ba.0","@material/touch-target":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.5729943ba.0_1574227198157_0.6149688018512673","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/chips","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"083f141eb9ff222b8a8ddd692d6dbedecd323d37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.e89750dc7.0.tgz","fileCount":53,"integrity":"sha512-Kr3dJ9rlKEEd/Zzg8dgq1n0USj1Sh6nmXFMHolmEiQuWP3Xw2P1dcc3JXaKmLQK2SC8fFlmeymtVkU4TyFhHOQ==","signatures":[{"sig":"MEUCIQC81o78f7NHY+/yFX8qGLjpLVXkhTJWG6apPD0NrqqF0gIgOcFy/fJ2k+PeoJfDHClaPv9KXnSotrR31Q4SmF/tLC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsSCRA9TVsSAnZWagAAfSkP+wTz9BMEh/vIaVqO3EU6\nd6WBlhY43uqif5R3dfNoIL7lDOEIxRBwKsUp3S1PFF6s/CgIKNbdQCr/+Ynt\nrBoC+pDeEbRe3BGqJj0MUQCbpo1oFu1s7wY9+pT35uimAW3QLq4W/zAUpMCM\ntcO6+lC52Vx9C7hRTg5zzEH4BYn2tKB2MR9y7vifb/9QWy1z4xVQDpTDs9G2\nsDwn/6dulmM0BbEArnfEEz/ZWqH0JxduhQd1fykFDgSSbBz0Q5Il+BuO8zS9\nWNaePq8ImOjKkBqLPf1RUtEcjsGVasMLLT6TDBzIDlvQOsCoxD2CXU2s7chD\nDi1afChKBzAdVoQmmNUtNGvppto3h1bZ7e6yBfrWrUbA4kcKQYzb7rdVr73u\nkOKm2tLCMWG9/xwoOWxJaFi4UtKJC3TsuO2tHKUX/BljFHjXYhpFv//9swuw\nl7EjRl3qbn2aMUf4gL0UcbkF6QY+GqnEMRAtTIdSFSXMjzFe6wSLnW78YATo\n0UDwNesX6wzaQGkLkt3VqbR0ewpI4FUrXQ/BowXLiYPbBo8BpcW+1sd6MTxg\numrZ6LTUxCVtmp70gXdMw1dmh3i8j3OWj9ZLv+M454cLgZMaoEKPt68psbw7\ng6ycMDRUvGthAmHPCiUVpX/auOGLQYJQBkw6Poth8uUR+opT9ILHeLdwUF1m\nIhsm\r\n=2d0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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`handleClick(evt: Event) => void` | Handles a click event on the root element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end 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` | `.mdc-chip` (root) | `handleClick()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e89750dc7.0","@material/shape":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/checkbox":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/elevation":"5.0.0-canary.e89750dc7.0","@material/typography":"5.0.0-canary.e89750dc7.0","@material/touch-target":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.e89750dc7.0_1574820626538_0.9762229992076796","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/chips","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54ffbd681f5f93cba216e88db14e4c5b35b711f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.3e560b33a.0.tgz","fileCount":53,"integrity":"sha512-5XJi97tmKeBnm/YzCp/udV6IaqLaassB/d6zI+ZqLVHT2WuUpGfHP6NzVVtU4/VpY2Jsk8m+q9bvZ0kOATX4FA==","signatures":[{"sig":"MEUCIQDJ60R4fWPQL3Xh7Y2Gpk0JxWOBZG02CHUP12QEoe4+gwIgRD2TQF0Jbu5CKCDZ1d0R8FjcmMTAtqT7Nkh+nCpkuvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtBCRA9TVsSAnZWagAA79QP/0nrpxxz8Tknlr5tjz15\nMNLLViLAHUdTbM27coBIHLcn5gRpfuSmbTcuAQSBIhdGOiQcKeGzTuqB/LAs\n+bxUj2H+MqvuPg2DUKutIKPuoMTDA741Ceo+nCwHchk3sjXXqy9O0mI8NwZG\nhyTOfqeSvMxpM6fph9Mw9gXvAg7OWTx4QUD9vFWCPT/Rn7IUvYKvNKT9lrFm\nBVcczLTLfTPII6rtM0LxFKhBqmJ1wwO19miLlulqJIe/WVy+iVhRVCSQdGGn\n8pG37vib8pkIAMMUg5eYLawslBTT5r5C3qfBLwk5+rPGoBcPBD9aGmKQhV5n\nOCkajBqS5wcORvUvkJ5tlpfMMCuYQDvXjXwVAtfD0iCeyzPu1DeEf2vXAJ05\nf3IupkWO41m5BU9YslQiKnuHSrc5+Xps+s3o4ry2DNAgjo7ynJtWra92jekf\n2+LZbIJ3hDUxMUNSaTWIU6si6k9cB4erSAlcs0gXejC3TLm4dHeVLzKlcThl\nnOpaI9zJKCEWZo/ivwMCl+L2GfUvMG8If7CMT+hwq9Ap3bmzShga7dYx0syj\nnGOmVVIXdxB6ZB74Ag219LKwSz7j/DUli/fSymEieEMDG+LETOL7lsDkuVzn\ni0O59DEO3zwh1Fy5NJpzGMkVe6LZYxmlJiK0pMPqaVsjhnIDq7UbPeYn8nnJ\nX/3m\r\n=fMHe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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`handleClick(evt: Event) => void` | Handles a click event on the root element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end 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` | `.mdc-chip` (root) | `handleClick()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3e560b33a.0","@material/shape":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/checkbox":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/elevation":"5.0.0-canary.3e560b33a.0","@material/typography":"5.0.0-canary.3e560b33a.0","@material/touch-target":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.3e560b33a.0_1574820672667_0.8044408204843752","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/chips","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"638b4a4273529bbb6d103ef02a177d97b12f3754","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":53,"integrity":"sha512-ksOL74MQFqyYDwJ/gytHIC9TECQZQlyaHl4w2rNL5DpU/rTcmApfXCZWqpQfiyn2soyYf3MSxQhjJQXLUqvfjQ==","signatures":[{"sig":"MEQCIAeDDL3DncAEvwWlEYXkYUtTDT6oIRS1tJKa8XyMPPHdAiBORgSkWVumu1AHtOzzSywTKucfA0rsvGbAYqMcodX0Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtXCRA9TVsSAnZWagAApIsP/2FyLYC2nNOr8QhQHfUw\nC/WRb+2GN7i/4G4duG8+GlD8NHZK7fwChHGnV7yZVo8cJGESC53uu6wqPsmJ\nkUartDLmk1755XTOUG3YHoiknAOviJQPhXT9GuyV3kLUEqQD0YVC7v5+Z+2x\nJOqs45ZdvZieKag74KT7GcjdeiV5qaYIROGHUzrZZdb6cK80F45Ef6crFX+X\nvPg5BDCeOD1PwuhkRjmxAF6gXP3sRkL3AhD6JwUYspvWYOz4MboOvnA90/we\n4+AYvWtWx0qoXiJoVXo3jhlVgO2jWaAKIontkTNAQc4iVV45AO85v5OnTwhV\nDV9N2pdUPMWzKAUD8c//QrNAVBlCLd0eCwwcFSQGuv21/jwjzlNbZblkA9L9\n2QycrOKzOqN85h8eAQ8HfDQuR2LONCP6yzsrLt53Riz9U/cqRJ/U7nvKG30c\nHa+jh9q0zSst/1NvzX4pxBv+9ICvpYsd3Syr0/44ZssOiO+cFvgS9YZZ4ikn\nqaxFGYoXRX62aiWXPaBCeBrrxc+bS/Alzwk7nC5kEmcKu/ln94/yAKweGIV6\nHhCLmrBCCHzf//UR3239JjLHG04IxBd7Zqo/yJlIzGG5sZM9xbeqM4rd3cXL\nS7GzvGvD9vf490IBHGTNdrFHhOuRejCfoV/ZeWU3zhK2mVkok9iBFH119yHd\nUIWT\r\n=n3fM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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`handleClick(evt: Event) => void` | Handles a click event on the root element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end 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` | `.mdc-chip` (root) | `handleClick()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/shape":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/checkbox":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/elevation":"5.0.0-canary.7fd17ce5e.0","@material/typography":"5.0.0-canary.7fd17ce5e.0","@material/touch-target":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7fd17ce5e.0_1574820695128_0.683880578489608","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/chips","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ec729683b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2bfbed6a8c2dfe901ac89c2bdd9e589a631bda0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ec729683b.0.tgz","fileCount":53,"integrity":"sha512-rxCMM3T9W7gADSRrZosG1pahMyZS/gH08lZ/hLMs1vvtDIOa4SEdlu8ZFEQAKxjXFCv0awy8Oh1CYAZjUlhCyw==","signatures":[{"sig":"MEUCIQDMwYVLxoQyauYin6V6bPFx738rMN2V2PmioLLomUftcAIgfVVuWUt5eNw80fjZxXwQfb39aNBZ95y3y6KIAxOCkwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pyACRA9TVsSAnZWagAALcEP/Aw4rH53444F+Ubo7ter\nIyyfWjZKqKubI6II21laUNYIzZTLozvHA0xv93No4BocOTHtGwBXNQz5+h0k\nmna/7kICT+aL30b5QSZlo+UlgVFMOsRp/fdqgFfbewjmp2SuK2Ts/oP/G/8C\nrHtylUX7CMxKgDglOPvtfAp2M08F6QJiChifxL5pHTAHnH+U4GT9BdVZG0jF\nAPYJchmbfyBHVsdOqFTDK4npxfWqEjcTJyJ83bIOrVr01DM+ie1hdQzJpdCk\nRLRnaIFnUAAS2b773Qwf47y9ghKoJN6jWxBw0IERuTdVFoDkaxme0LGz5izP\nINP7JWG7V3yXa2whKFnOBUiIEpF0hqLbc0SK6bmtEfekd7JobVBcshJv7Tl0\nfXCp5/8YMK6GgG7pslGPlPjU1dznirraTs6ESFRrgPkPN2asL8a0wNtKT0rA\nBHDG03wYgLbrezggHTmPxp4QAagbdoXAKQfqJAiF1oXw9308HbWmSWlrNlo7\nV/96hVnBmSmsM1RVkQvjwCCtSeHoN+440MZkiB7IjR9xurrrbIzuvHosAJmb\n5NzaTLO30qOggKkvTpaexOEMYBtjjld70r8eb0jZ4NNfYvQz/1LfW3nvWwid\nDMp2krHKybb6nvv5UlST8znL88if7AAS20wsMpK2Qv5I1Huzu1NzJf1CS3uH\nY9lI\r\n=FgoL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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`handleClick(evt: Event) => void` | Handles a click event on the root element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end 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` | `.mdc-chip` (root) | `handleClick()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec729683b.0","@material/shape":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/checkbox":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/elevation":"5.0.0-canary.ec729683b.0","@material/typography":"5.0.0-canary.ec729683b.0","@material/touch-target":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ec729683b.0_1574870144088_0.9769764712126632","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/chips","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c194e3da4df655c977dafd1d28179be5defc886","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":53,"integrity":"sha512-rjrvJ4UEep25wWC55Ig3iFLeVlKMH81jYPI32+DN56TxWGD1BX8gjmUx5U7kbmhzfzEspN4L8vX/xjSVwQXk6Q==","signatures":[{"sig":"MEQCIA9LkbPgt+m6kfQ7JsfoAU0XawwNkqByWtrcbzYqnPxqAiBgEEBvrRlWst0Picx8jXNNbGLUq0JO+ZvlWoS50OZqtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3svACRA9TVsSAnZWagAAoHYP/RWWm2a0O+k+FSAh7Xq1\nC6FdM14UIzw7LKBIDj+NibMDvW1r5fudTXhSadGojnEU8g7N5BwRZyy9VMDj\nljQY478oYr4HW85dw+uBJ423VGnaI/iKeNPfzV23168u4x/KiOw/4WFppNZy\nvpab1ETtPb0rfJrD0R3Bd5c4azEMjmrRqUbVHiMHDsMVamiqNwNgjM+NSwDI\nXlQqhe5Bzi0+cMtSTWCHsZ3w7NsATM9aLdf8Gz/jlpqlY8zAPwMWZtJjKQF6\nGyPLdV6VSNRy8QR/mMfK20w2OerflXA7pwrQP8m8Vw7brnerHnU7AVUgrMlO\nD/BNyZ4CvUpu04EF6BBOs5nTxDQsoodmmu7x83q7jon5wsKtoSwfJhxZ4+tI\nN8S0dYF93uYgC+JIR26oBYh6s0A9RmiymHWt1i68xrESTiFWYpP8pGPHRsK0\nHUDI6dcDD939tbOWnSJzqu/LRTU5T3YOObP6Wnh34HBidx0NFjWL3iLQaC8h\n4iENKsSbYWzEBG493G3h6QhFv2iQoP6ndJMo7uKB4gxkYVweX2fZt76livK1\nczXQhdbzfq3NOW/+uKmJlYD1TCDeKbay3R8nNFxyNhJuZtJrbUA5P65TBDh+\nY7IFjzNu2hakqlKX87RlAjtEVF9A2iADcxpGFPaK+JwfzEQGye0xfH223Z5p\ns1t8\r\n=CGLd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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`handleClick(evt: Event) => void` | Handles a click event on the root element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end 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` | `.mdc-chip` (root) | `handleClick()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/shape":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/checkbox":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/elevation":"5.0.0-canary.b8bc4a26e.0","@material/typography":"5.0.0-canary.b8bc4a26e.0","@material/touch-target":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b8bc4a26e.0_1574882240113_0.2169416372515176","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/chips","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.f978109c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3d6d82de1d5c9e3293b2990efa2c02e9571290a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.f978109c3.0.tgz","fileCount":53,"integrity":"sha512-qvV2ylx4xFsWBPNlmu9Z0eoXR1DReaNPlJwQQTQO7TQl6FDcDg1C0MLYAU1HCnK83e+IIeaHKgiaBdRo4T9Avw==","signatures":[{"sig":"MEUCIQDUo95BDoETT8y5QZOqtG0XYn8l18huC/1av5mPxDWrUAIgeCq+Bcrz5kmiAk4yYTVgqSxgiKHITIcy1gqozmSaf54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UT2CRA9TVsSAnZWagAA5YwQAIbRylWTzZDHVPNxsmue\nsWAvc2NPygz73iYlY1JuntIkYhhbOJuFkmmIcYSoKL7PdbrRuYKYvjdgbBeW\nSUaU2OGCrwWNHfXYVuwdmfw3JjQbz0j5vU1rVU31K5WF+/nzi9PFr7H75/+n\nGIM5oxIg0tNNuYvYF5TByRJQK3cqHtA6O78fdlzdlBq1i8WUOXZsuwQbzDvO\nINSU0fKZDxTrhQreeUGKFX5iQWYOkyS03lEyJzFT2WKV6O4dezSmwxw/Vfoi\n30w+zQWc6kcZIiknzVYr3GPQ3zn64gTd3Q2VPBCz4eRpA8gVNDLqrkHrwrFG\nIwO2M/nVbM5XHesPAnWOvPL2GVGMxGdcYJoCIiMpqN0oYBmc3g9PcLUVkhO1\nUAFn2ThZdvA84OECvYM0dg41vpyf+1nnRbN5QF/e8C7HaIMDPvN9GA0oB4pl\n7faCN17EtHGYvYGzoPzZxsFafYcE5OfnSsln0jogGEycZtVlS2RaX8orpovR\nBRVg2qNeioHuowT41DDDRjE3KSyrbY3WH7pJ26xsxCUVwqibjqKoSR891yoj\nOJqr0ni7zQJSa4rU7/4N+D5Jfih7eDEN8HI4920TkbpRicuvKk6xpm/cVgRh\nMxwDvMc6eW1z4bxDReaPV+9KpifcjzxEyV5tAnY/3OkKKnaKIMVvtgeNDYyq\nN8ma\r\n=Nb12\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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`handleClick(evt: Event) => void` | Handles a click event on the root element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end 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` | `.mdc-chip` (root) | `handleClick()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f978109c3.0","@material/shape":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/checkbox":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/elevation":"5.0.0-canary.f978109c3.0","@material/typography":"5.0.0-canary.f978109c3.0","@material/touch-target":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.f978109c3.0_1575306486041_0.6940343515850755","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/chips","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"502c4be22174ba27bbed635a40c6ddefb48124d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ad9dfe706.0.tgz","fileCount":53,"integrity":"sha512-Uns6pdR7qpodhdQljpOdu5OkAwI8+zYmfuokQ/NOBaosI9hf5nTv8/Kto5cY9SGSgA1BE3q0g1+qcfVLrfctSg==","signatures":[{"sig":"MEUCIBzxPDg3fvilT0LlF0xzNpdBKnOsxR8UpWpRWVHbEzW0AiEA8msR7BGtwp19qgfppjMOYyhQhxzl9fW0IYCQQg3oVjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1TCRA9TVsSAnZWagAA9n0P/0ZAuyUMRlLSCHjQQtfm\nw7Ryn7ZM4wYJTyL8uY35xPp8fRQ8H0wivPRaeudCuE6t41/vZXeynWo5XdCi\nkxKDIz5FE9Thi8HhXoMDVRGnAGk7JABQJDlH51unbrgVCclV7fuDB2ZMckFK\nR4F3WhAGpv7lkYlvqki6BsKM1Ifat3JiMORDL+lw6+q9W5Vm7O7dFSZO2j9/\nFYfQSswocCqSPotCFPrmSJQ0Ju0jfJlIhhTU/R8uwVMNl44wjllgf8kLQE83\nMoW0Q2SzeJJnvbNqPuJPrK2vU2DIFMxUjcCIIqpymoY0oDK3QMDcNBnV1qfO\nbmy74bVRXoGzO8VzzgIdojjUzWkgBfua1Z/ITSFVuEC6DXXP9Z/WhG7epikB\nzj9g3/BNAx3t8oO27iBqKmJUmi4rw4JVv2vtgYS+fxjlLjswu2RNpHVj2u04\nPEFRkc9hCOVcRf+wWemBfL95XSIsNd8DAQdaD6FycmRWtwe9oGKMqEzuKz1B\nw9+X0LoGwDEc7J2EKQbx99xnw79DuGl/nSKkze9hziB01YnIN0xgZc/ztxXE\nPwDan0VAakb3RSB47Ocv0+c930o+nwxPMlb3gc7ayx6I9SpEZGWWOISG51T6\nsb97aWWf3j7/AiOc7WBNVRfC8UTJntuLAhOme4CEKt5J2aW1OCv2PizQOJUM\nX8s/\r\n=7fWW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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`handleClick(evt: Event) => void` | Handles a click event on the root element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end 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` | `.mdc-chip` (root) | `handleClick()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ad9dfe706.0","@material/shape":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/checkbox":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/elevation":"5.0.0-canary.ad9dfe706.0","@material/typography":"5.0.0-canary.ad9dfe706.0","@material/touch-target":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ad9dfe706.0_1575415123260_0.7908903759946118","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/chips","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded1422760e464bcfa51d871b24491685a1454cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.5e45d77f3.0.tgz","fileCount":53,"integrity":"sha512-ailwTBvE39s/FFhhF3NX75Qql9G2QzrL38HEO8lHVrKAfG6hguZMg8mJrrRW9Rt6qswNLGBrh+JD2udLq09gpg==","signatures":[{"sig":"MEUCIFxjAgmNjjKfmtZA8Ie3N+cJx3Tj7Qw8HCh62yHc0UiwAiEA+RynL4kxvfJr9zMN9P20EJGCGJpfa0lahF7uacvEK8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3DCRA9TVsSAnZWagAAyJIP/RGcqnqUKlLcCmML9ljz\n4P3PlMX8BSFSKX9Ge40u5DKSobBbnxLbh4wh3BS3mHNbVsr1PQ1RMNXH1fE+\nC9o8qo3icd9IUfaajWY9AZH/8Ua7w2qYXL83Fc9IhEsxyCOBYfieUoDzt3V6\n6xlkY9M0e7YcUL7cOzbTubip4bjh3UjlQIZk3UNR5RzNzlanUISlUoZj/Vku\nYfwlVvdAZ2g/J6kQB1LGvzYGkB2Qt2ZgnuA8y3isCjokLWaPhhETYDwtjKep\nScr10vEviPyaFGFX3cOk1Wx6CKB9BIZHFDXSet/b7MWFGERZd4mQIvWfZXek\ntcc9doZm2VEe/ikE6JvLpvseah+XEhn3rIsyJZp5VZMHnuey3+IgAN8kX/Uk\nojbQJ+8Fg2/iYPVnJfh7xl6N+JG4khUqRgIsykgOyIyjrPJW1g7gagfVgxq+\nnHpQZiAllDBR6TYvlb3jPfMLwWciXXefjdvFo5csLrmXRJSNbv0dVwN+AKYt\nw4Tpf1o8CgqYVSVhSME8SHe0to+fwXyHVbXUdna2X95eLc/rvCUP9OxAOeZN\np4LGLU+0FVySBYC2u7JdCS/BqjIElTOdHO6YKbD6Buiifgy+UUBVDwLU8Cv3\nVqbps20t9GGeOXkqHaEi+hisyEKYO7aEQ0+xb9NG1h8UHFOEytmopEWOFRa+\nAwqp\r\n=87ih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5e45d77f3.0","@material/shape":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/checkbox":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/elevation":"5.0.0-canary.5e45d77f3.0","@material/typography":"5.0.0-canary.5e45d77f3.0","@material/touch-target":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.5e45d77f3.0_1575415235521_0.10581568163515986","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/chips","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08337bd23e5d4c2f2ea36d157d81fd143fda9761","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":53,"integrity":"sha512-4jwa4S/HkhsgHXRaMAzdQNEiNTeUctrkx/+WEp+SlYOXEfN9EUL+dPSkzBGaHHlK/c5Iy8dxUJukCfuzrVDhGw==","signatures":[{"sig":"MEUCIQCrPr2iHY+1eAGJXee4t9ChAtPcDU3bTCjs+tgDBIceDQIgVbsX2QJkyNpvxr1pSQ0VXfut6n+LoWoD5NIpiswm8bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3cCRA9TVsSAnZWagAAuhwP/1cgBxJxBKln7PmHNKIe\nNYzT8tRlVnZ1ZWxmfgyN0SBfJXXQiy6YsOB8dgYb9ZYRux7tYuK5+UfHBT7Y\ngjpVaTA+Z3d3+vLVOocyqqDoy8XuE7jviJnkJXUkACwfeuRWIXheB0eouawe\nCVTJ201E1ARg916tZedXL2bw+U9BUIUC9hmquRWj9MsEI6mgd2GptySho6kG\npvTTIQId+yJcLI6BwU+Fv/9PC9UMGRjCx6ruPJcgo+BsHF9wm+gfa0tVQBGg\nLh6tLeV4xPuZleOiN0ktGv4GKqEzlYgYG0aMc3W0Wujg/9o4GFXJrDG3R9VZ\nYN2/9gnxPQlQTE/3gpz6fSAFL2/VufmHvROe3ZgA0H/nXh/cX53zRshRwctD\nUp+PFmlV6ZlqYzapLNz3W5k8vC2dM/buOIjW2JSLJBhoaet+v/yiH+0gx70p\ngMtSqRHR/+CsVwc8dG/Lj7uXQQsxuKMusZX0iDNMZUOv+ozfwEmCbR9Za4Oy\nZlXsspcAFQmu+FUDkq/Ekg20ijVo6z/gC3dkhj786CdeS2COFkKMXVkiRABL\nvETdFnC7D6Um6yYHYNZYgY5TLoocjlGP3nbUm6A9PTOlT437wiqQbYD6OESn\nHt062NEa3rD+6FBV4ed+3byigEEA7Oe3W/lR79FyEw5BWpdTKPMLT6Zf9jSr\nlsqQ\r\n=/OD+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/shape":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/checkbox":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/elevation":"5.0.0-canary.d10e8cdf3.0","@material/typography":"5.0.0-canary.d10e8cdf3.0","@material/touch-target":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d10e8cdf3.0_1575415260481_0.2956700928974785","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/chips","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9340dd9ad086f0805d4a17b30a1a1e433ec0c26","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":53,"integrity":"sha512-/oFMj0ZjZ90AdiMdoYGiFQm3iwKBnteaRnIaY8kR8PMOqK31+/s/yETatM/w0A4Axn98LnXh4E8PMIlTt090bQ==","signatures":[{"sig":"MEYCIQDRBDJSVjHTCbCj1KxiPquwTod3MfR69GoQ5m8dks3TawIhAKnaYjUDgAG/+a+qBG0FK3qmG4AVcZwRM6T5rRdGSmXe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vX6CRA9TVsSAnZWagAAXXIP/iHW5/m925KKwZGRHvBE\nKwYAIXT1TUhlp8Indr9/oXdrlan108N1/U9AbbizmQDMg53PBEhgOUAHGv0j\nQoMYA9O03EhujWr0UyFcvTTMzpP2R635uv9cq76U5W57aXQ73T/g80x1PtrN\nFy9auXDm0Z9de2QBbmZ092gZjNzNTq92RImM2/5dYJLSX4Jw0o7EIBtMbr44\nobGzR9EM3uLvTp04vbQcJSRU+7HQNfxc08Qm19YIhoA73hwQ1QvL8ams83Hr\n6wW0CbazblaZFDvnkf+OFspkWhntXuxTK7lzqr/wAO3oi3K3UwX5HgQhBPLq\nUBMP5q4cVSA2/iCIFPG9zbj2WqgwcTy39zmjfxmeUo9nUNIz4n9Z8KvQ4oRU\nq7qIOavbEUGieI1Im63CFInIAWlEf7HivWEIDQqvTj+cyV9stemWtQ/8snwd\nPu30e98thTNz8BF05wuppLNXlK0Iq0dkVtR+wEyOGmk2i1WX5n/8zdVpqK0r\nCEMogvAD4dS4V0bkr+Er1Z02basU5AjDucReMJP3Qj8jsPU985FwqCiUEw/4\n4GDZaNpN/7Ln81GtGOpjjYKYgm/r8xYXS0CfdX4i0rxphCM1rSjL7u5LwFmu\noopy7fTG2YCQ4dFdsd+LrqeNgctz0WnVwuDTrryhFIvKVEF4K3FHzVPCmboj\nZ+jl\r\n=0ujs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/shape":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/checkbox":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/elevation":"5.0.0-canary.a5dbd8a2a.0","@material/typography":"5.0.0-canary.a5dbd8a2a.0","@material/touch-target":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a5dbd8a2a.0_1575417338425_0.22826666881752233","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/chips","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ee2d625cb0f528df9246c4da96eadef15a589d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ba879b68b.0.tgz","fileCount":53,"integrity":"sha512-PV95iWnY29cwWxpx5OSG+fQOKB072oXPsBAS7HMTkAOBRM++1yc5+aye/4VeRv0J4O8c9ldBf4AfRbOeSKkX/g==","signatures":[{"sig":"MEYCIQDZ5q4bWJCqIXXtezDfMBVdnj+3VUT9HcSuGM8xeDDEggIhAJAE5XHbgbI8x5RsJZh98ezpA4065OERxtpxhtPKR2Jn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BW1CRA9TVsSAnZWagAA1hEP/ihidk1FjrSEUqviz8iQ\nvFDFk3jVrqI80wkLKXa5bnhinpvfnIEd2O5fE9cEtUa2kBl4zlEfDsCnB+Vz\nEDMWgifz3v46tQ0Oa22lokttQGD5yLOPmr47JIEEKWFNA4J+4m7g4+af5R28\nqx6Ar7Tvqoolvd4R4MDoS4mxnJZ7NLYar/e7F54C057u+lejZZvT4MPFzPbM\nqkUCJSBKg0N7POJZO4ndjAJBJ1yYZ06xNSHz0ks7T05v4kQ6Q13VR8Qpe3a/\nBuKC0TXiQ1WtoWHN4EKtxL4QkjJTF2tx3+lQPBb2GC89xMewzAdjdSyI869P\nCRXEEtrCqEIh08oSTMNIqs5oO5H37yW9Q16tY6t6eCLPVxRE628VQpLZupYx\nCHUxCKipAxQfLlaA5EGwSo7GVQJ4cifvKo4igsI4K0MLcnjVepq9DnTWs5M5\nqCjbRmvaBgIYpxKyEvhrysed8WPmlfJwRvLFRKfGXW7ITpKmAGIleX2JXl4I\nMFdjp8v+J+o2iT62gNuA0se+zb0gifsO01lCdMJB7+PBREG6nW5L3hZMyG8N\nY0n0fOLZmu4JllQ6lB0tRxPt77Yy56ZO98aMsKueVefu5eb09/ImkEySUEUP\nqoXFLwzfc8jL7CgGr3AVQ4dwUvEVt/7cslSY8aGrq6SGfSuSlz6pyOOZdhVw\nN0oU\r\n=AcsV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ba879b68b.0","@material/shape":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/checkbox":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/elevation":"5.0.0-canary.ba879b68b.0","@material/typography":"5.0.0-canary.ba879b68b.0","@material/touch-target":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ba879b68b.0_1575490996710_0.3650852514691443","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/chips","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ecbea5d243fddef4b18ee5cda69e1956b320e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.aa0eba489.0.tgz","fileCount":53,"integrity":"sha512-KtGXp959EO9HOPEBFVfM5t7OWZzs0CaoML/MY7cA/imiXIh3b3gkOuvf/UEHW8MvVgvN3ulBjfpARj5LhGxsSA==","signatures":[{"sig":"MEUCIDdOyaG+aWxusBwCjao4mwBYuG6JryZQ3F9tczkMG1E8AiEA/buBvhX+BEXFT5mF4ORtczbRWbrd7ZS9NRZHbdfsA7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYOCRA9TVsSAnZWagAAYM4P/iT9fCQIAgGRpATHejzg\niphOeLk2u2zA7lbBXkEjHcis/ZaTN7YfoBlp54G4UeyajItgzUPIoWA98EfQ\nTD82EqZELB3iCuXpEwtI9tssM2IOBrpFGkD8rsKctR+czDUSMhIMqK9Rs8Tn\nOxqCh3OiiQeQs9QrP8CSXK+3zk3g0T7XniXxdgJjw8sNVeFfMr7Rt9N7AnRj\nN3R5wa/9lsTrdyd0mwIGZns/AO14cgLc08WK6tj2qQlNxFwMvacAgg2TKY5M\nM90BSfCnRW4rZ5GJ+0W4zj43NBoQHrb6Wdw8D9OimfArcFngoFI7m1cJwj3q\nxHaupaSRuxhIZ3BrvcbvfsqIZTTeLqE93KwfKcBHOGrqIf1JSCMS7syfnUaN\nuxtfqU5/4LC+tmpsNCaYk13gULbipnvEgLONuyxkSq4tM+0oAhk4DoENN6MI\nJYJ5x9zY23BlNsLIKGsHDfrE6gpo90WSlkUjh4gFkIEflsoBDg9YXdkGZNMc\nU/q1snvPvqk01EHE32AX0QMgctxEPRdGhgVuy+UuT8bDV8cB+ykbwDnOt7TT\nFX0S60ltOjeEh+9gTyDB6ptJZXwih7lFeWSIA70QN7Z89+DSfubIwNaDql5h\nr3xE1oMZu5hJkX0SE55JscQ5ZDRe5aUPhRk7xvHqCONBF2nmnsOvyrCjLL9P\nX2vh\r\n=TeYl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aa0eba489.0","@material/shape":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/checkbox":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/elevation":"5.0.0-canary.aa0eba489.0","@material/typography":"5.0.0-canary.aa0eba489.0","@material/touch-target":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.aa0eba489.0_1575597581765_0.7111755534749142","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/chips","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc6e1ded191a7da30ff1c1fe85a00acffd974471","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.cb7b71a86.0.tgz","fileCount":53,"integrity":"sha512-T1fFe2rGgaE0nM1si4iw8KNsaUwquVK/p536cVYOzXWMIjp9uXxmgz3zt6kHUgzC3ZWI5rGIL70u209NsXmV6w==","signatures":[{"sig":"MEQCIBPqD7PNJsfW5dWHLnOd4WSSyrHqE9T/BJD1S9HrUxodAiAPLpRjmjxfGp9vBmB/XnZx5del7C9bIYkz5RwMZLcysQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqzCRA9TVsSAnZWagAApXMP/2Roj/tbt8CReDN8YEbj\n+st8hQhOa7/lhTQUET9etSWmbSZrrgRINcxKHCFn9DxaN3yZkBoEGDaui2d8\n2hxU8gGeUy6IRrAsKk5LxmtsVVFlVEFoAPYzjkQXc0HDG89a2RixYhINJKP4\nMd4JAe5K1A+dfgFkDKAMvmm9aNePebffGknk3dyBHf11uSDfjakaMAv2Rlob\ncsi3lE7Aw/uRyzKOjtMtXXTCU1ZwEHaeA9WQo8QVZpKKwviPpHxtMnHNEA+U\nq5Ik7BD+WOFBWnITMx8fOa7C1BYXabg+/tuQI9jEPosVL8WkGP/uxEwIKGbL\nXEpJG/KtCkmsqAF8RQC4mW/c87WB2aLDJaqutDuf8h3MCePYKDDOAbT4xPGU\nEI/ZMpbyodGMhCsniipem2hwWrShocWY0SKQWisVpI3uGeI0vNzxfFkhkUp9\nXmxfXXIWtk8XN2LXjnCiHdoE9fQ1j8GjxAuyTSKkZZVsg8fD3cf46eCjagn+\nLsh5Csx5G1TiCoBrmzgwzvoRxbcT1hFa6pa1A8eOTA6r5lGPKLjBW/Hzip1d\nUcaHp5bqQqlG888H8WGEemUMjgaO9maL5K92rq2oo3SsO2al6m7gexc2Fdeh\npvVn9XBZiLKTI95PIVAe+Lda7iTQe/wWbuC3vL4hLsLN+mmfWcvas4t4+okD\nSfZI\r\n=3J2c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cb7b71a86.0","@material/shape":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/checkbox":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/elevation":"5.0.0-canary.cb7b71a86.0","@material/typography":"5.0.0-canary.cb7b71a86.0","@material/touch-target":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.cb7b71a86.0_1575676595361_0.06634198508844746","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/chips","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"457d29368678e4af880dc33b8f337e28f387a35c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.50f110a6c.0.tgz","fileCount":53,"integrity":"sha512-3P7IxrgH3vVWCqx+N5MaPwfc/2m04fDvL6sZYUqGBHkwraeJv2vKsZ6vNrRTVu6K+wGSK5tyeIWhePf+GE0SNQ==","signatures":[{"sig":"MEUCIQDbeCOlhcS6QxRm4UsGnsaqhEycMqj5C5grPf1/LsefVgIgaYtk1WI836/1xRlX2Z1bh3qAF919jCbf8A7XfkHmLsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788pCRA9TVsSAnZWagAAiwMP/1e3ULd+yVIM8elqDxyO\nV46CtzV7hcJ3vqvxMAVaax/Of2PFZfHYB0jrpPFy3FEi4k1pP3IvgyeTpI/5\n793NBA6mBiBFaK2dSHlo5sHAiE4E3/xw08Lx34sg5hUBR4ixOYTANKJjX5jU\nfDKbKPEJMPlJhlyGgmPq/UMf4aRBoXkZehoi2JCw+m/ZZRFN+DMVZKQ3b6DE\neY2dmsKjsDvPp5jvOS00Eg6THF2/qd8Xfu6FOko4dHEKXHF8XAJ8dt1bi+ap\nuHQ6S0FJWOLhCva1REoy34qoV2WC03QFeJet5gFtER4H9QqaNpSuv2pNRKJb\nRIg5y3O7g6cbJpRM4AfMqK7nhAxz/y84hCZcMN2flFA+v9qohC9/gQZtwY5x\nL1j2SWw9HXe/mJJZb33tPYk3i8ZbQTnqur016RvcPuQQn9svTX8zX9DbYqjg\nu8wp4ODdD5y6p9BFD9pPaYFwwx/Y+czdPwpJHe+X7ZwDVuuivbPr8kC4QVSS\nUdiL1xhyvOVA1GnVlvOg6bWBLJUeuPNHEqxpIhss3t9JvX9Smka9aD6YpIlX\npSBvJwyhvXchwhrSaWM6LCk5rN150N6R6sLgD13g2ADnxXi18ghcIuCJuDwT\nsV3m/GMR5DI4rBzwuRwcoeZLSY9wc7aFYyTt73rd0dFr8ZVdbP105B+CIdxc\nb6DP\r\n=Z0+S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.50f110a6c.0","@material/shape":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/checkbox":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/elevation":"5.0.0-canary.50f110a6c.0","@material/typography":"5.0.0-canary.50f110a6c.0","@material/touch-target":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.50f110a6c.0_1575997224531_0.2840904669661337","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/chips","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9af8135a74f733c2b7111912f5a079278dd5c8e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.878a08b7c.0.tgz","fileCount":53,"integrity":"sha512-tsz5kPTFk9AW2mbVM4eAQOp3SoYGKUjaYu5zb76f5E8GfRbYUT82Chr/8IRkmz+4DBODdp9WZ0LGqLSHd0/FaQ==","signatures":[{"sig":"MEQCIAwYx3BNPH8VU/cYSaXCBOH8hIrI2t2G2nh0bZO3E9muAiBMYzrcrie6egFOgGF9qA1HWNDB3i5A6skvPNC54Iyhpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6+CRA9TVsSAnZWagAA24oQAI7QMGtDvoA45AfiE3zo\nxVeXK9OCycpG2aiec5CM/Qa7RkvxnIF2JXI1Y5s2PXA5meanZGe89Gel8M2K\nKAw2NEf+H2RswyMQDV//vOs6iHnOK95Ko54fFyLMKyDyYJeE9lDcreXNA33b\nuN835LMUDEzZGiT+gMtaQZWW+7vC/BHv96MRrEevwc2tQYME4D4eo8iFA+k9\niB7+pIK5ccs2nby4YBaLwwzqDBb9ROfBTGW4akNQH8kyRBgsIrEtcCt1vmiE\nicyVkuFg6QfTmBUfJH8RKOz+PxOY7GWO5G7CpuCIpOAsJKOxRScB7gRuxoDG\nnDXQhD/uFSZ+qmEngBJa0n2I4I9UKgJgV9CMR5DoKwlKDyfaV8Yf5vr0zanv\nF+9r1RlQx1vEk910z1cu2QpAOszOij8NN+CD0ZixAnQZXMuLlQGAszJW81jj\naSSEA4fT4cmy7TPjx8Nlas0fVGYCFL4isAfsLxDtAdegwSNr2Fe/tlePVwH5\nBGGq+uB+uobhIvSm2RQKDreLQSGCH5PckMdlz8npQfDxwwzykk7fIwpfUflm\n3x75KDu61zdwslLAROn8V5TDf1zzVXaNrJ1Z7QDm9IuZIrmiRryt/+j9mnNe\nXHWMaz285HEzsSYK3Abjz7cmpaT3/kRLqqHCzIG6RNCVMmyU1TY1vrkmEGFY\nVKQW\r\n=pXO1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.878a08b7c.0","@material/shape":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/checkbox":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/elevation":"5.0.0-canary.878a08b7c.0","@material/typography":"5.0.0-canary.878a08b7c.0","@material/touch-target":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.878a08b7c.0_1576095421925_0.22363753770980832","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/chips","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.397905b4e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdfda39f35fd7eb188e2c41b4388cd3c2829659e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.397905b4e.0.tgz","fileCount":53,"integrity":"sha512-txQWUAE5rlod1lZTLBAxtizjV0d2A03XXVU0lxH3TruqpZKsLK25+/WHxZ2VEZ48sklV0v2MeboEjvUgm6rxhA==","signatures":[{"sig":"MEUCICvYVa9RcZNOM96KFDVOHcdpUR8qlvzUK6qCRT6e1ng5AiEAtfA8FjOVM8VvwB7k56WtKZpO+CvCMvD8Bxvm5VVa2OI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apYCRA9TVsSAnZWagAAoG0P/3TTYhg57H0F6oC26JUh\nUXR8dFuOkDFaVNj6gdZDyZuMJgXVyUrKyZEQ0scqjTNqLtb12CG0jQ++4Gez\n+no8hVFPk0avwi+NSl4XEULznd6rC0odGhIlfvGoDM9TX4Rt2Cr8DtouoCzZ\nWai02ritrL7XwD/S7ha3oh4uURXii3nlEg82y3zJuDm5muCmzZPEVECIkdCJ\n0FR8KML+mkpWXTk5jAVGqV0WKaj9fYSEP9OjN3r/jsaIec9mRhzDa4Yp0FZC\nDKNa4ja5RS4k2AesDE5kLgdAK7JJpdqC9WoSPVLERsNUIIES0Pk59P21XrlH\na4XBEMsU/5TXI6hV3oA9YKzjKbH+/stI0q/ZasBHQa49u596a4YeGpJrVbjj\nrKV/kCnHgcDyRzJwl4P/lexPcKrqViqZ7My5QDpToEKxqwYgwi0dWgHeHlkW\nndo2wyCS/nP96fk9QafXmjKFkWbNkvx5YNVS+U+NSvk/4r/oiahej+glEYvm\n/Pr1rJCqEjrlfDoDezNvgx+0Y5nC++oBB8hIqiXqtys/hK4I/Ai3oXz0su3D\nxtj3/305guK+xNns6Y7nWiAtmjs2cF3GF5xN4SfHlGjiTliIXnoGr6cicGdX\nA63JkRQAk9SnNyg21IfjkNK5w9o7IQ90Vz5jtlQtfiJseCDNEKaOWD03hj7Q\nf/45\r\n=uKaM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.397905b4e.0","@material/shape":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/checkbox":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/elevation":"5.0.0-canary.397905b4e.0","@material/typography":"5.0.0-canary.397905b4e.0","@material/touch-target":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.397905b4e.0_1576118872012_0.37914846415927284","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/chips","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9122d863f75312c0a1db883f3aae48211f96fe3f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":53,"integrity":"sha512-feD6NRLXXadkPp2LThkilfqX/Z6aqeiVYxDRUzWSTadth/wDh7eR2ZoaudmOIOh1+Ihx6mtv6zLTu7ezDyvwDA==","signatures":[{"sig":"MEUCIQCSMqDbQiTo9Dpf3HZsK2GYs3UsvdwxgO3TdmYN7M9MfgIgMCehJuQiWQW8BUGi1eueA779o7dWwlhoqFXvZ3gW/fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4qCRA9TVsSAnZWagAAooMP/iurFMDJoJ4Y4HeCFEnO\nWtKNbkwk+zS+mm0Shhoj/pSL4py1TbOXQfbTjtq6l80n3ColtBLeGfW2UFF6\njwf8kMRDgNURSZXZ6cwotQFGGtSDxeBln9Tghua4VpsUjQnn17jj1rDJFUYZ\nqqvEQUl5g3+ZQ7fuMcBq+CKY2/V8EsIrxiHb5AfPaCU7bTF8566Tg9qIvdVD\ns/V5/qySqwmsNOZrMEGsbSOS2rWqQ9v8JMxwWb7bFDfXHsrPuB+z0284B+ae\n5ypDUWuyH+RNW9sB3euHNSFSHBQHQwQLVjGFxSTSe3GsUPu3YyR/Akw4HPIq\n4BHnaRes/6Di/MSIhPetnUN9L743IYLZkyNXLa4RJyZtt4QEo+2NdKb9RiOZ\nR45HphtcKfFKWs/k1sRTTiIPw7RLZ+UwtzEsrPkvV5AnuOwcxYloNLaGF8lL\nkXq/sF1IH1j9UjTK1efIFFV2dJtyJORuvfRu5q6xP8LChOOuk3yBFU1Sap6n\nqkvRCihXIlFF3jVSePFdzKMLcaQbVNL8okdJWNIhl9MUKsqF1eA/lmBXBkeG\nrkWI6qhilf1rtZ4sfX0SuFTEO9JnbJv/cyBzCzip60/UjUYlJvxvqCJziCdj\npo3t0+1wYa3wPYL+4zqCdx48oNznGQ9z5rzd1q8GMOjwVRGWYN3xJoen+FjE\nZJHr\r\n=Tsab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/shape":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/checkbox":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/elevation":"5.0.0-canary.1fbf5bd1d.0","@material/typography":"5.0.0-canary.1fbf5bd1d.0","@material/touch-target":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.1fbf5bd1d.0_1576177193701_0.2984835674653741","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/chips","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b84b4ee67e97128ed3302e33b1ab83e00a8cff51","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b723dfa78.0.tgz","fileCount":53,"integrity":"sha512-W/qF8aW7PlTRQEkaEnh7u91u0VjBdf3MS4mKwz6oQCyAtHbcU4Nt30dehSmf1fEd74yZnXyQ+q6piynNy0AJow==","signatures":[{"sig":"MEUCIH0ZxqVMiW7v000+D88spcUWfy+TYG5Ln3ad4btm0lOlAiEAytWidi29+HGt7+v63auVt33MGhcK0yrmnFRpnS9gYnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p7LCRA9TVsSAnZWagAAJ00QAJlLhaqT5zfyHaRd+Iz0\nUySqOo4APEsnEqQojHWrv5nheOcOafAiJ+Cnz3XKOEsvzIznHQYslU+G3cB+\nIN0PNK8FpiE7ctImFcw8s24kiTXTSak2fsueV5Thk7RphCsJiwPoQUA7641L\nZNzTSM7JAZm9nlCwPPMLQ3azKEjFlIUEgv0kMpLtmIe44O+gAlwGOvyes/JE\ntx0GVg6ClBEeEwavUmjIaC6kqpwXH9+oinhlRiV7GYA/0CrjL2iJqyyuRKXk\nvLH8MWVfYNIswhocWHoUGO6s8Vigv3lfXYn9p0h7ecZR/KHcvIN3+0vDF/rh\nCtjW3NU15sGH86ZADGZ8MC1RmK13duu6aA9fhhVFRPndIGw8ERw8YzYXxfKy\nUmsvFFgR8eMPu2+PJ5oyYyWndZSf5+T4HifwpXB8U08pXyiu37Ifu6afy6xY\nyKuQ99u8wYnyc9IFRqIO6q0SsOPmwKKxzymBfuLrLuPEaqa1VkncR+MndW2E\naeBIVFF+npBFdfL7QQgqTIyPRMG2OiGlGqqsB6owCLzYPKZ9273u1AsWnWB5\nE4od5QiFKAYsYocFuqImyVCOtS1Ccn3Bfa3gOWKnBAFl3tzdLkCbjZrt1JM+\nypt+gwvs1F4L7MsqIOf8jFT+1XzoWimxEGD+tBbq0fJ/x/Gh9SWuEqJphLlC\nknlR\r\n=TURh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b723dfa78.0","@material/shape":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/checkbox":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/elevation":"5.0.0-canary.b723dfa78.0","@material/typography":"5.0.0-canary.b723dfa78.0","@material/touch-target":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b723dfa78.0_1576181450669_0.6451609102358067","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/chips","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.1c494e567.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c24c6da588c1a46dcd367dca8bd0c4f58943f09","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.1c494e567.0.tgz","fileCount":53,"integrity":"sha512-xbQY0X90K56pjPewUKrFjVUQ3R6c+VbMggVkSmrh39y/2ARAfEXNRyJ2v/iJ9FfEFVwnGSGbxRlzNnhe8wx05Q==","signatures":[{"sig":"MEYCIQC0m4FTeSLKei4gF0KLDLWHRmGp2fmKUdxlLaf9cJmpmwIhAMy9UduGQPaAzLyKAWij7+Lj4YPaszRb1OqAUTq7Y7P+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s9BCRA9TVsSAnZWagAAgjwP/jbj7olJAyNkzIOHFY+n\ngaEJWFSA4O2DgWyGOm68mAhMzR2E+OGka3xEhf8kf7Shhu6oT3MMy/E7vlyy\n1tACq5I3tMT1kSu0nhYF65s+SdtxuC5/YWSddW44CIl9bbn3MHflJeAFQ6Rm\ng8xHs2t5FEH75XI5i05YVUICMRnHOB5CdR2P7wgyuVjth3bIAODjCde7SB5v\nm4ezf2PJDGfLC2atjyct5dO1PLlu1STUlIrax3azujQHCYYf/yN3gAZsPA7Z\nxl2lyoFZKe1QvT2buPTlkIugooUBpnyieNa0St8NBO+hTuY1ePFf6LRCgaom\n4/sb9MKjSGGDzYOg/O7UpETxFeu7+5JqbYduclpw8kSzsOmH9H1hc9xYuvdh\nJTqL8DMBUwFSQWSdJyM8kWVNF8y8vVt48srYRkkTuNobhPIHnRep4GjCq5xf\noJe7MUhRwAEAXTmfugAneXHLxIc5wkatOuhZheEi9APoZzO6b4oheLILpNrf\nSUrtCgbbDK+/3IZpXqUVPDMA5m3RehO7SMDJ5P0+yIzKmqOw/rGaBRqmtRSY\nLs3apB15mXp8DkZ7OMKMwBGzaPt0C+f6Zu9Z0d8hztefz9hmqjm/n7/CYACY\nXpEg9n3kIUHeg+g8fm8ygMIkbCvDSys9vxk3GrwqEF0mIMi/Xhp2rq2hGQJI\n0q2w\r\n=UAe5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1c494e567.0","@material/shape":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/checkbox":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/elevation":"5.0.0-canary.1c494e567.0","@material/typography":"5.0.0-canary.1c494e567.0","@material/touch-target":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.1c494e567.0_1576193857085_0.45099559763859687","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/chips","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47ccc003da31595161a89e815be453547d4d6de4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.c9e98a125.0.tgz","fileCount":53,"integrity":"sha512-AwVgeNyZi+/+9maoaLGcQPE5P+X5ARbctk9Saorll3xrdkcdI6Qknq7MazlHZAhWHckTjzfHP9GUA3MFyW4QbQ==","signatures":[{"sig":"MEYCIQCMUHCEY/DpOuynyeaUxNpP4+1FviyYcN3CNyfKTPAvNwIhAMVvu2MsICTq3/4AM6njtUSRl0QJkY4x0+2xkA2n7wJq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RonCRA9TVsSAnZWagAAjYcP/3jz5/IlwazJeqmY8Rj3\n0WR6dO4HhY1nervAZo65s3iiihuTnX6/TJgLeCKcjXe588WjmUc+GmTTgSGo\nEH56Gi1GWZpOGaIRbFnYAVSS8M+rfge/iq1KI3B1/1vv5b8bB52iZ9d03WY3\ny8GAGeC9+0DMKIAT9wkbmQveIBf/9ZDRcgpT0Dwr4osFFLYr5XSTiKjZTMqk\nwn304y9cWTkntwuwPRwvFj0cYmR3/AXou6ltBoNxv7dFRTmLSxgfwemv8Dux\n8yk8HbhRfF9mD6G3MO8T2d8/DsAMhmjBO8tlyfi8UNWWYpvNqyNylEjEfgPh\nNYFv61Ufv/IaoDiu3ydXdSsQ/vFfe6YEiLWgidoYrp2VjipoPxhhuAzb5kTv\nOzGID8HuEVebvRxBBOqAGiabEeQFIt9asx+cr1qATrl5SHXSczoI80HAA7+b\nMdPwNyi2NvCGoavyy5WV8myjg7DJSEI1b56WOPq1CMQK9VqL0aeqCWV2WeTC\nBRzZyusUUtKlZyA+bcJEkCTWeJyN0S8lPa3wV8zIJkGLxWf4Ro4cnX/fDmaR\nZascdgFYuXz3L95Q+YlPKDUNC6JpgRDnYubZ/GvtT5Dh6sr6fSTmqVkDdNFx\nqN16cl0RX4QoqtBbkQfPPth+CaJGaw1cY4CCcFuLKlJNlSd/s001rpa6N2YU\nlHsH\r\n=OlIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.17.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c9e98a125.0","@material/shape":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/checkbox":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/elevation":"5.0.0-canary.c9e98a125.0","@material/typography":"5.0.0-canary.c9e98a125.0","@material/touch-target":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.c9e98a125.0_1576606247040_0.30741296657600903","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/chips","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b90aa93f0821c9aa07234426ce9b8aa7b2d561","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":53,"integrity":"sha512-EwyCJYr6OPSwIu4p4Z+6L80RURYHeTz3pa61b8qZgRr0EqHh5VKkzqlEDNV5xk0kX4p/Yf0QEjGmt0KK/iwt0Q==","signatures":[{"sig":"MEQCIHyqn4bDPhsex9sEOMIfrNz6dlhoYOgc93ibQ1d0SOGQAiAWVyl4DPY4LR01rgq+QkaX6Bmh4g2iF+XoY3TNGK8JCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfgCRA9TVsSAnZWagAA99YP/0qLUEP3i+A8NuTl7nCV\nWmFh/mdhaJAHZ2DeNvwQlIil0YIT5xhqbCu1EvjkPE5TgoTwgODjhr7bQZQl\nGMw1Ns7pZd8uIqLyXfdbUBozdpjA+8J3/KDLs+bkzVE0ZLi0iYpkiIr+qOV4\nqXP72ZjNNXDndDVyffMGCm5JgmrVT9F2Zyv42cWRQj+GkhtkBvERmt7uUF3R\nqgOGuJacUjIZ8AOeYRWI9tLMdnVDa58b8qX7IDRa+NdqxeISNxGvYNbCcCRW\nCnEGjVkF7QSOjhyKshQ1P5VYJ2q5QxSYMK3EvYUIUGoNxZPt0Yz6y1VBR01W\n398k8JawPfYq1HJFIPEXvOj13tSi/8FpP/xmLHQbp4pnttZYkmMeb/ESIpON\nJ5l/lxOn5ghi7VoGdk6nyvvn+/YN/J1hFA6QF2j8I+MjWg+lBfACIOS/hpa5\nV08pHR5rYh2jIJlC6nO8S+Pla4lf43BoUBREOSTwZWXW2frBOw8bzV+60Cmp\nT8zyh3UmKizfr/tO0PrUtSzcBTwot6BLCGxgkSGwsxJPVSAJj0e0jv6T70FW\nR0eGR557erANtGaMsx5+rMCyKySbBL9T3fS3pGZU6Ih2Y5Y/W5cG9dXjUNJE\nuudMX8OelXKVHePDCSU7bfFfGx5YsRyf1SnYzg4KsOrvFScHqa+1YGI8ScJs\nKW72\r\n=wbJK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/shape":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/checkbox":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/elevation":"5.0.0-canary.5ffe8f7e3.0","@material/typography":"5.0.0-canary.5ffe8f7e3.0","@material/touch-target":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.5ffe8f7e3.0_1576622048355_0.8641550871202033","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/chips","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.47949b08e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83eceb5a72404cf973cbf547e04d09268542bdab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.47949b08e.0.tgz","fileCount":53,"integrity":"sha512-Yd2tScLJxQ833GAgJxZG54mI5frCsOh5Wwq26Vix696H8YvCUAE/2jxFy/gINX7lrBoS1Hzrzvjb4T5+MGaCgg==","signatures":[{"sig":"MEUCIQCO8OtuQUd8GPCER6xv5USldXJUcU7axfcc+r/OEUd4tQIgap2TEMuFLWms6XW6GgCvSwuggdG1322Dw07c61aSP6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mS2CRA9TVsSAnZWagAAglsP/iBpWZrpNdPPIkrFD5Ct\nWffu3enes/z4/1mzvpdG9a1nHts4p1C9mnU25RK+KmrsvOzPgmf2TLuMUJ+a\nAo9XCXGOoWZ+TFQy96tH3jtASTRc21ikrwEVXScwJjkE4p5l78/Rx9oV2rVp\nmC+AXoQld8FBcwpWxZQ4YQ7dePyZgfF9RbMcY8HjO5OP1xnMg3cq7QKAarqG\nZxRHhY/5QlTOn8JfrxdKaeExzvB1vEkodCP53l/bGoPt/99IClJprLCeq2Rj\neObP6G3CVzSFgB7jNbS831XE9iZaA7P1ebesyBRaeivU91erSWAcTashVZLG\ntm0ihnGORjfL0qXPXzwGixcnUjUiZa81mqHxF4h3+xDM21BaetWOAanN5T1h\nCGbUJ047k1S+3eQhOJEb01k0O4NkX2RL2S+rpd6A0pzH8fr1NsOkoRGLPyiL\nWMvGRLXk68IidS8FnzEMKCJ8fe1ndoELTZz8ibrVkTIc5Y3Llfezgy6sCTJt\noOCFmDGCoL2RBWFUUg5FK7xozHWMzXhxtv+Vn3MTb7YHbbHE84k3/X8ODhkd\n7E7TPkbDZHApru31ALoxIa5WtCImuwX3rZ/dfVb4jRIaX1jEHX5JTKBfMFKR\nQtfS33FgGYit/Mt6LtA5N2zh5dpR5tx+Y8jCouVJLNx9zXFNm+GV5TUk7AN3\nQD/5\r\n=DeT0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.47949b08e.0","@material/shape":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/checkbox":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/elevation":"5.0.0-canary.47949b08e.0","@material/typography":"5.0.0-canary.47949b08e.0","@material/touch-target":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.47949b08e.0_1576690870378_0.44178456775396735","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/chips","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d09a994a39c21cd8eda2edb067e58a49d40f7555","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b240bcc1b.0.tgz","fileCount":53,"integrity":"sha512-ClXnQS11Rd60J3V/L9XFiTHAlq4flTTeaJyISG5axPYhIf8Bski0KbRq9RG+ZJ9Ddr/frtTpzm+1Zjog/a5VdQ==","signatures":[{"sig":"MEQCIGO0jMPTkjbZ2S6XW4OVhvfSaunC+UgVRx8049Y4ZeH+AiANp8z0cfo7/nve55TjWy+vOl2ECPg5KZXV2PXBTb9b6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntPCRA9TVsSAnZWagAAn/oP/1PGnbCF7aIwHjXf2Z7h\nuhDamDGIAhhRqfYqd8sDUaRSOEAhLrCeK/XXCGN1aiiccOGsRMAeRtpnf2iS\naLGM4aWRp9ntFDwLH2gvN1ZzCs1Hgd57TCflV2qIt+Uu2VxQUEIkpK2BNFjs\nlmtJ3XSQ96epHV+Qnqqxo7gZqCeMhaIlKig7foiBUoR3bSOzt/ZL3Wzfomq1\nkSJBU+z/e/VuNBoTikeF1e+KidtTssEBL5xlEubpNviWl/5b9kqfJ4eGCB47\nWF2X4BH/Xq/JjYt3MdwNEbfGT2HcbFnIhF0SiEft4C4YoGFg1hxqkzy/Dnn9\nBdny769XMfiAjiPxadKKgR/NP7BdOimjvH25Irll5mXY/qOgf4bKKbMIUjm5\nNfcVGsTo5gISdddcftMfbo4n5+CeSUwYv0tiAJ0lQ/CNC04WhmNxWQ31ydvI\n+FerCfTGjFwjYNLfQL5+6unp6rsg4NY9i0fVeSpThpeTpWSt9KvbMcgph2XM\npfrzvu85MhMR7eO/ysph2UzsqDsbymhxsTC6sIQ3D82DTKBmi5zhkPpnmM6k\nWFn0rX4t7t97JI/r/N4BjOSH2QOWlD92HYSrpC/PRsOYMM41cKKZdN7oX72Y\n7EqxOjl7xDUZADspaKPMqjp2/H70dR6zbdQ9LIvZVfE7EOUR7CcICW0npDZj\nFkzq\r\n=1Szs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b240bcc1b.0","@material/shape":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/checkbox":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/elevation":"5.0.0-canary.b240bcc1b.0","@material/typography":"5.0.0-canary.b240bcc1b.0","@material/touch-target":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b240bcc1b.0_1576696655507_0.7383184364020567","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/chips","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.391674a26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"360fc1ff6b1b9dc35792fb8cada3f81ec1e2dcc2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.391674a26.0.tgz","fileCount":53,"integrity":"sha512-f7D/a+QJ2cKBfHbV7TrzVCXhYXUMClsgTXk0HG6/eML9gIagfbO4UqWjeTT8BspbVypIjsdqL47zNYOzJBU8Ug==","signatures":[{"sig":"MEUCIHaHJYGlPzxYgLrg2/bFRhCLk3h2T3wd8zlA8tLmmvtAAiEA+QeiYCAC6/27sITh53nzfjudvOJOfSsk4e8EiFNnfC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntnCRA9TVsSAnZWagAAqxMQAJlQu0TErwTSez5h6J6q\nVFW545uyr3taZXoESR3eBFzF6jawUvCvghAag43YQONdsM834Juwlvb1XqJC\ntq2cmKC02/Y+D6os9ATQs8AwYRuwpAWHQnxzgB+Ldtji37Q/nuao3wxoCHV8\nsYFWZ1Pmh4Osy+kToXD3Pbmp36F5B1cV8KGwK14OR4buXPvGKXaVFBC4lXrh\novdnkRAb+3lV58htzh865dYhsFwQWvtrVpIcYZLDH0kWcH3VBCOaW09gLQpo\nsmuEtXSdCeJieUiwThYpP++c7bb0g10dLWLs3wXcy3WJDl3X+t19IuyXPh2l\nNvPCv/ew64DeJAXeTzFOCHDZ1kVM5aINF0ha/zuyHG+d9pz9w0DbQSON8UNz\njPnDOocPlkdHRmLpUhlvokG2k06cf/9qWGDnXNkZi07oeaK9Evjb8svOi1GF\nVbkku2vF8fylc4lO3eXYV1Dj89OONhzOeu1NKolvJ6d9ZESLhup+HqdCUrXL\n2zpUFPIEQMA/TzCF20YZqa7a5vsVt7x6v1RY43VRObNXnopjTlIIGAUvml2z\n31tpqtSkTRHAavv95UxD2C37V467yFrJk2u5JwKfNptIkWyxa87CIGjgpkOu\nDo6iOH/qT+e3LhtZKtYQYFSrxqa6G+4fQsbpeFKfdPOXbMhjzYSV6b8itvUH\n1EbT\r\n=cmEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.391674a26.0","@material/shape":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/checkbox":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/elevation":"5.0.0-canary.391674a26.0","@material/typography":"5.0.0-canary.391674a26.0","@material/touch-target":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.391674a26.0_1576696679344_0.8365291164660293","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/chips","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.c4837746c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a27cde28febdab9186da5f84c4a4aad3fc08bea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.c4837746c.0.tgz","fileCount":53,"integrity":"sha512-XcK469PCs/fzbyh4E2UPjsn3wY1TSBLd26ZWirSIR+hKllEjlL/2Nt5HLYMFiGa0UeEmEfYko4DDrkMYpB0azA==","signatures":[{"sig":"MEYCIQDzYFYMOadE7fqnPNCLzrk/v2itrFs6Q2Oo6jjBgpOPAgIhAJ/BM04E17REhqC22xs2QkD1b2EveDESpOqAyAgD6pQ7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+SCRA9TVsSAnZWagAAptoP/jw6W5C1kXIZWoEZIz0W\nu5vOvzTVQHiw7KtiE5gtcRjmODaIY4hgRG6U2tmE2ZrxXBIWvGtSBwkrzN/w\nakmk/HfKAsFVA+CO8yaeq+Qf05rQctELrSJH81RvGFvBplUexC8DhjabUmR3\nNUfR7Pjmf5Sz7+mj34CxsUXtV0NeWxO4I9cHPJ3tNCt0mLbATkKgrePTvS1O\njWQp17yNH44KuagBYRKHMUxUBuneLqAolrCf3jOv5tbjm6EgU2pYw2PzEVFO\nPFU6t/7F9/KHBb/mzerHO9PyF3O/UrKb6l/kOXfgpMhbd8YxIGMSWHsbAcsc\nx4DEZItQTJGfWxBS4xUD4INSEp0fk4Fu3xOEJmgYPxD/O8L4/vr3BjNOYi0/\ni0tzINlgYquX0p9aTOp3jLWJxmO2ueqaaoiU7rW/tXoAMyXjlB2IGk6cchmU\nbfD6QULtaAvFbwCUv+lLyDFQPdvPmfmMg43kxAyKlyF0j5TP9UVtFqQOgK+x\n24w2IXjIN5ohw2rkxOAIodGOWDFzNCahUJ9VGXiJCBHnZ6om4JxCWIp2xm2M\nipYNNQABh9v95Ll0PHZE5Yh6IQes1z9MExxC0uEpiUWpWJAtghYNLHezj3IR\nu7dfjYzQ1S1+s+S27aper7uC5D73I/YdfKAt8+WI83HMU3uv1Iz8zSBu2b/L\nVZdy\r\n=Lt2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c4837746c.0","@material/shape":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/checkbox":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/elevation":"5.0.0-canary.c4837746c.0","@material/typography":"5.0.0-canary.c4837746c.0","@material/touch-target":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.c4837746c.0_1576697746085_0.3450767793360838","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/chips","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.e41a70425.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f8523e91b7545e51f04f5b7b40a79ae80d33634","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.e41a70425.0.tgz","fileCount":53,"integrity":"sha512-reRUO9kmykPMwUgxk15sUwkr6ZIxDg10KiVcf2a0NRVnbfB3PZTQlDNbfHOPHOjwzgche7e0xeZM+FQFp9WBeA==","signatures":[{"sig":"MEUCIQDy7NgARpNKiT83FMluA6/sOUkc2j6sUoN1B/AicYLyGAIgGRkhMysCkzj4RWOdevyA0jXqGwVV9TE/rkvBNFKGgZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRfCRA9TVsSAnZWagAAVNUP/Ro19+2gOoTMLz8QTqzg\np3R1BRWWKsWiZkoyz7buGUvGCkQQR4cY1i2bYHKvohT8mAv9M+DeOVptyYwq\nnDIEdrOpvLNAM9GGNThfLYG3IAVcOzLk3s5sWU9NNyI1c4xGNweu6O/eIkzu\neSlrfln6vu1QWfPEmZmQKKSNkV1mhWwT8Qe+nuZpTckpkItLB5tMtQpd1ST2\ny4hJ4G6ZdG7+AKyRkyOj6OpSkL2HIy9Fqx86YhwMR1Qy2bw7mt4JG4SkIvPf\nl7kb++uJntR8EhLjKRtB7S5vwV/NcdsX5FLd4D8/OUu8QeCwm02z5rNixeyf\ntTT/0O2Wl4o/FvbDQReTZzplFI9TiGhkxbB9L8Iuhjf0BArVMqMQ/q8indg0\n/pLJP1o5l1HuSH8OcZ0owyVMnB6146pRSDCZeBeQ+p+1n0wxzkSh2n/vCtZ7\neVVscF8oKHH1KXkVMWn+l8vqh3y0GBsvLAXS829O8smeQoK+JPNntrC9P8UJ\nr4x/t3/TdcLXdAviExxy0GMyk5QtLFPYW6duZ2Ac+46g7n/ofA5U+wtyK3Em\nvvQ7CKB3OTIkxRc/kMNkBUG++CgSM3/IaaTlOhj9O26qp10Tf3lUtpQyCn5P\ncALhKQgZ7TWlVvMeauW2yrpeYOknOzlqdcszmkfXNzu4jmKCc9n9LHtoqOIq\nKS61\r\n=dziA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e41a70425.0","@material/shape":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/checkbox":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/elevation":"5.0.0-canary.e41a70425.0","@material/typography":"5.0.0-canary.e41a70425.0","@material/touch-target":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.e41a70425.0_1576711263051_0.3799877073604496","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/chips","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77a5b26dc3db68dc36ec5b7f510a573a46292ff4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.bac43eb43.0.tgz","fileCount":53,"integrity":"sha512-IfTPoBJ8HiN0QYzhVL8Fpfqngs9+V2/obuo27RzHOnG/Su2141one0HLft7ktcFy7ilFWszI3randUImfiC2nQ==","signatures":[{"sig":"MEUCIHK5sji43jrf9kktmPoA+VrRgwOZU+OMIKEKGZUOE7SZAiEAsY/Envlq7LG4VQIfzDWtTaSlkaga9uvbJgONpUS7L8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rVBCRA9TVsSAnZWagAAb0EQAINqO4FuS5BBfmuf2usd\njYsQ3U2HQqw59L5vQGrPWeBbo1fBGFYazUerGP4XgybNjHr0vI4jAzZ2EFhV\nkDvEI9/a+f2/427Nhucvrue0DV4J/2jM0otwfesEXOBwVZCULRlybkCVJRBs\n5atxs+eFsHA8VSt2OMzXy1NxM09taDoyMsxqw7UoISwuaQGEc2WhlwAHvzAt\nFpRhfiLsPWQjOVPVXUc1pvojQbPE6H+jSLs3V1t91DbQNPCRl4rrUYKSD97n\npqhP7S5Ar1UyBldC4aX77TRphaJOWcKrQqRutwCm0r/mk/CtGlSw+gyV4p8y\nUYWRssu4xI3QelWJLfubgju/NhyWdgrk41Hksz2Q/64pHEAKuzrlXc6tADXk\njwvSSRdUqUtnaAwA/dM1wZIXpWYqnlUvxh5oTpaKCnFFeB90J79qheIVCyRK\nt0+0LL68Z7C3faiF/53AaumLf6U+f9+Drj0spnQvHIOpZNpmk4qHBq2AEj40\n+x1pelL1HE0Q/Vpi26lxSFtl9nF6dZfvkLTFu38CGYMcWxea82a6X2nVLJzf\nQtpC8BcY42AM5luuILGdpHndidEq5zuiyV+bmrwwmUPKE8Css1Ry5E3Kfil5\nwcvuoW1eNlqjZnFXVYo5aAoeA0K93e+XUf6VkZez9gO0ULn4qTbRpLf6WxPN\nNIud\r\n=ZPNj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.bac43eb43.0","@material/shape":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/checkbox":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/elevation":"5.0.0-canary.bac43eb43.0","@material/typography":"5.0.0-canary.bac43eb43.0","@material/touch-target":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.bac43eb43.0_1576711489061_0.17685824236097347","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/chips","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.2e491de55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79cb6776981c791e6bc64ea73d8bfed4fed4007f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.2e491de55.0.tgz","fileCount":53,"integrity":"sha512-PQ71BtpSuysGWJ7GEA2Sy0HjusFsIVmLHrJPreByCwhwKyk4K2BtwJPExb2kgdX5xKIHAsHX0xAbdl73tXT2JA==","signatures":[{"sig":"MEYCIQCRW1aTeJtH+NVnDDtoZvRG/0R9tJRj+XSSJIKZWMQScAIhANSksHWm3IzB/qF/HEif8YhOHh5RXjo0mhA8+DrBhv64","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1YECRA9TVsSAnZWagAAaKEP/jFR8/os/0GlNNnX1B4j\nrQQ/ob1cZFHWLaF5aiHXVqFrRVc9LMCDrgsApy/k/l4ZUSofM2IXeXFLVIY5\ngARRTRxEOmMceMAftHefgN9x2n3qHxk/wZGRERik6942pOW4UiLOpnAHDxpy\nUPO7j1dnJRIzKdeW3kNmdiI5FqbMa3+28SZpPtTv1083e+TAu8bFXgUW79wd\nJ4c7E8huFPsojnFCqMtCI4KcLInfHcimgm0MZT4OMioyKYlWt9f8eBnIh588\nJtF1IZ4crXTXqfJBsutln57Dg4raFX12dDF5rQCTBW26+PIYX2mF6vgJf7Y+\nHe64i36rmZeXALi5/b+nrO14lWT7oYeIwjFy6PssVJqrJG668VRIOEq98vhz\n8wpU99Iz6V2OP3AXsIvr8+f2aBGOruOz8J1DnefQ/UcLMBzxpznFMFEaXHVc\naqnXLjBVEpc1N/k5hzdkqhbYIXl9iJXI93lmwzx+Ga14SKHw7kIARWP4T6Io\n19ORsFUZZxStLcsClITksTZLQHGkXE0dZyjdxtCwhvzwOO1mBF2Noz1lo19y\nz1pydmV+8H9JSdSLOnVP07KH8wGmmCQLICA+qNTxCQn9S1i+fwajkR9+4uBa\ncj7y8BOGPPO+8GVzwoPfA560kcc6ssYWQyLCcXR3VRCzwdZYl1ba+plc+Vqb\n4WJc\r\n=PqQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2e491de55.0","@material/shape":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/checkbox":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/elevation":"5.0.0-canary.2e491de55.0","@material/typography":"5.0.0-canary.2e491de55.0","@material/touch-target":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.2e491de55.0_1576752644399_0.22094467707874732","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/chips","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ae101c144.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e19ae300cea863775fe4328a42595643ad44d8da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ae101c144.0.tgz","fileCount":53,"integrity":"sha512-LP/pPJx/X9xeQRQRFTxK/m/TgWgRTuZkh8HhlZaJeBcrf5+krHr4FJOLJnXbeX8rlj0OeNwoc82Uw+poZ6Evng==","signatures":[{"sig":"MEUCIGAKM8+floflLHbWCFHou0sfVfNyvx2ASghKNsHrJSb8AiEAsfHLyl0u/h9nsj9O5Jv7XS/IGRSTGER8mzBhotKH2i0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6SICRA9TVsSAnZWagAALPsQAKGdfmTiFwbsK3BM3qhw\ne+kZzwncOzExS1+7y1qZ6YY5KR9B50Z+LWk4GS4KrNIG+TNc/8jlGgEzxLEc\nWwa0lBnKOOCWTYCwlg/l29zmSPbjQgXSompXrn3XIcZNZJV3OD+W8JBJXrAN\nARrtrUbbwulxmNezASYkKj66qLiQRw0YJSrJeV/6zZxZLkSrUakRi2HYxHg+\ntfA6rNuRMxYLjzjtPoavN5u2BaTsQF2tydXbXQertdLx+e7H6yIcZRk6tO2R\nXPETPYFjzSl++jKshVjrGAw/4IPQBZHaN0PBNGxQ3xo3cyhB8RohzMqngGfX\nHkCy81bIzrsjra54OieL4eSm4LUEohCQAfwv1Iez6CjmPO/kA8CMk4v4l854\nJWRMoZ5WLbtznsfOFoxVWsdS7iW6qCRAvpDEIE3U+yqMmtli4KxuSAKRSqVB\nAQ6bcBA8TbwPAJHfJRGH1qa7UVIX2JZIIFW7zBX07kPeOYbpZ69lMtRbsiSC\na4j3SoVg6pAwUAagjD1KSatb8LylGMDBilZpDC3DOz1UMwX3uDafib0+VJJT\nsM32vWfFF/snGxl0hYc03M6oSsiGtdWgT3m1CynjgbgoTKSHgv5HNrKAIVxH\nAbimNVKZ6wf1HdhNH+wB5+z9htvGxfvsIfximk2Qx/sLGtuV7zlKk5H7S3mb\nFnfK\r\n=RmwX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ae101c144.0","@material/shape":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/checkbox":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/elevation":"5.0.0-canary.ae101c144.0","@material/typography":"5.0.0-canary.ae101c144.0","@material/touch-target":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ae101c144.0_1576772744321_0.7224023364209715","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/chips","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6154863ec0814db6393c56b5eaab9f9ffb9c1077","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a51c31f26.0.tgz","fileCount":53,"integrity":"sha512-+aAG1Zy/fj3Sd6pAtLYglLSAw8gCb8oiMFMTMM6YwaU7eAnA21Itq6OOADl/hpVKvJtgdEynlyDIAC5G8ShUcg==","signatures":[{"sig":"MEUCIA2+IQb7t5f6v/j0oBlIqpYcWmYvgwKzh/aPnxDYem3GAiEA+wxrufGUlaRDbfD1hBo1IVxMd0lzHPl6Xlolf1cXxP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7AZCRA9TVsSAnZWagAAEV8P/1tGJGthkIRds0/ATztQ\ny6LWcWdHh4N1/x7iniwrVp27stQBM0I6BZV9Ol+oVAQJjJZpqpH9E1u36mtj\ngs3cimElPGsTKjXpc5HRcqOlttS2nAzu8xkUtvjFxN7qPCPh1mjGrl8VOD7V\nzaAasYw8GKRr6RmOaol6FeAkfdpF4P1hl3z3mL5fhNJn+P8wzTM8gH1HTVZQ\ntxCPYBrPOinUMkxXcUDWerDzFpIjfpCThjwEtlPkFMaHhwSkqKX2xg+VEVT2\nm5+ElaGgYe4PhAAH8cRInY6NNvMH4hSJvF4ljD3gqXfsJJPGfX8hohzJQ09/\nRyOprhR9gI5uUcqJCYk2F5oN1ygUTG2OStXfKM5SgZ6zTzCj3kKr+TArlexy\nXHoo/SecNAfuE+zWqnGHMaVA4/TDnLmHeMYHN8D5kvspernZ4Zfl5rthZb9s\nFMH+8YJZCmpUUjRSyU3h0uVFXeNmKq+N4UayfESDn8/uxellChrdgJAeClXr\nd1vOW/nkchG4NSfrk0RoI/QTRL2kPc3XJ4vJPmfrJCrc7QbpS5nn/hGrX8bd\nDzXL93F5h66S6/03MgvCuz3NeaDzcWR21npszMLBqeprdjUFakr+s/SQmSaK\nnywGW6vR935r+K8QQ/vHn0i7Y8Bnl1U5+54sCPsa0bF4oTD/bUrEmL28gx+m\nZRPP\r\n=UO36\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a51c31f26.0","@material/shape":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/checkbox":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/elevation":"5.0.0-canary.a51c31f26.0","@material/typography":"5.0.0-canary.a51c31f26.0","@material/touch-target":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a51c31f26.0_1576775705310_0.4972969563698568","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/chips","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3634ec86524dc8422c5877b60937866b887168c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.21fc4e13b.0.tgz","fileCount":53,"integrity":"sha512-0YFveoXKyXTIcUxBkdzwYZEM8PvEpKtht/M+B7UT2jTtpxqOnt7wySGeizEHESkxHslotrBue8JUCe2lKozG+A==","signatures":[{"sig":"MEYCIQCSfHcPusYWqSEPD6q5JAq2s7FEY5AVfMOCS0eSmMqIAwIhAKVzA+3zaETnEp7qRKlfsVZ9Nj4hqlNMR7Gd3d39EQ8D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tQCRA9TVsSAnZWagAA9H8P/0Xlpd6dMXfD/uwMQ8Sm\nfqNKtLsyu8nFdkkv7pw86x1D8Jx6owgKiEHrl1phmv8ja3NOfZ2r4YWfQwD0\n/bROL1n7R07/geTvNXS9SnGbhvVhY0KZL2JVwDkgodfNGKwB+UZ0OkgUOmHh\n6HUe7GrBqR4GsMu0s6zNFTpAx+1pPEAuFsGkgkyD7osF1oXd0QXAgZ+GYp1Q\niUdLTLerher9LMRqMyUNbCezqDAziJwxkPbcLqQveMZM31c6QtCbhO8thTyB\ngGD9kBrDqscPeD7KYjfi8CEdJLbQwuiYPxDMfQddPEKWg5nYljSxCK6I8gG0\nHdIaTa30cOvWmENo0dFhdeCgaAsx6B6ixU2QLciiONbGqthHd0ZNgkjUc1L3\nB6X+Y/IS2mJ2omovRdO61lj73Yb+O+T3SJvkTy+Au661jZ3zw8uF3u7qo2JS\nbfFcFbT5BDMZuMxdiSfQ3tnzZbpspKKT2bzylFWvMe8gTyM6O6VtIi43WePs\nnVCUKUihJitBTs/YHYW6n+o/hEbY03/RzNEPCvuIhWFYW/FB2YjDIuUgGD00\n5ebTp6bbPGZyOZggo4dUfaVQ5Su3LD1AnFx5qE/JjxaYNwmPQL70yHoO9q3u\na6MhRFMFUFiOAZNjeH7jZ+/BpjcVo0ojBWdpRTcTvXhnsyChCRqaHJcG7LkD\n8/17\r\n=v1mb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/shape":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/density":"5.0.0-canary.21fc4e13b.0","@material/checkbox":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/elevation":"5.0.0-canary.21fc4e13b.0","@material/typography":"5.0.0-canary.21fc4e13b.0","@material/touch-target":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.21fc4e13b.0_1576790864548_0.3248659838447334","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/chips","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b37a9606f19f8bbf20e8b7264a16c04526a90dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":53,"integrity":"sha512-GbYvzvj46tdZS0q+uaehoo7h2rHI9bDZa7SwDF73RmlSlU5qQHbfVjiefpqkF9COX+T6aIJ0JeIDyucxqamXMA==","signatures":[{"sig":"MEUCIQD+UrJRxCGLgsG9Eu9UMpbrcqFwoTmSPboaOjut1GdAnwIgZgfJ4TVS/N7BgK3S1gBFIOGyVPswjJDd8BY2Zh+50ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/ivCRA9TVsSAnZWagAA6RsP/RT9WNLs9a5p0+8fY8sJ\n+qUuC9GdPOSF5+hRzlQu0MsANq7y5LcPQxq4gS7/lD7E4HVBXU100OTHrOpH\nLLnEO7yhV4MX1yR7owC8J7EAPfrpZBbspwhC3GABYnVjiMZsAF8rPWZz8goL\nxEbrkn4436s1loOyoWGA/a1zQsbxoiPFm5K4W/HJWibPtBcUDKWxhLTfyzgv\n7K0FFDMNzI56aJZ5Vl3UjfoPaNM4d7sy4fKvIgGlIq9KoPDKV7lIFNB3ElIR\n6ujokNHOpf1QEbWRaRD29vm+lYRTqZpZNfuzn7V1WmFAPeWM74DxX8cBXrdw\n41r0KN+X75AUP1ku0q4MIJeFrMjXzQemckX3pv+uLFVvxDZYHkJtggOvICWZ\na7U8ecjJSJr4F3JPdHsLByEEnBviNq/vSVswqa3p7ihgHPlAj0572iggVuVE\nx6MbojJ9RO1OhbGgJxmad9Q+VpbTWbEWBeNsRM+0wv6JqYqQ8gqGAvf1htZr\nkK/KdQxWlYog+4KfqTyBy0B/7S67idc2adFMSkumNr+Ngw+W9YtTtxbbuFv4\nWQ8Y0UlbplEaVo8ja6A6vdrcs9Ow39QwmjTISM9q05E2dWJVBqMwk/NheO0g\nwajv79r6FVJQl1+zG7dJvGjsFidfyZDoKy8N90JSINt+wp53b4EGnSzDTGBO\nLV+o\r\n=2nHC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/shape":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/density":"5.0.0-canary.d2ae6e17d.0","@material/checkbox":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/elevation":"5.0.0-canary.d2ae6e17d.0","@material/typography":"5.0.0-canary.d2ae6e17d.0","@material/touch-target":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d2ae6e17d.0_1576794286657_0.3101119543871089","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/chips","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edfe354c8e1d4961a8c822f102028d6718af3fee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ba30399ad.0.tgz","fileCount":53,"integrity":"sha512-4ZAwMvNtdRaZjj3ot4M/2VgUnGnlgmaGsM/gW6ks2uwjiQh53Ts58YHSWZiekNu4af46Op/eREG3MEs+ezJR9g==","signatures":[{"sig":"MEUCIHQzvBo+ep8oYn/JV+MEtxoWbOOs8wPoeqSDG/+7F0QcAiEAnvleT+wAJS4RhEyArCJaN88Ij+2Pm98hCzKJfHJdpdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B+RCRA9TVsSAnZWagAA6IsP/3eCc3UdcXMdqXWXyaJA\n1d7u6aMCF8k+fx4/OE9vc/mnD15i5AgEp6Yac+Wt/D5gDkZRODAY0RSeJJby\nwFFN7UnGnnHJhvgi7flimt1OAH94FU/cYkYH5uaq1ZfN3+h4wRJJiY8nR35R\nu+/LtR4MDXQADQ+hRwdrnRMjfWTmHjpvO9BxeEn3ijY0LgecjLEcD5hRuqJS\n6M1pUgb+xQ/je/b1Xwl+fC35q7LxAGPMVP1Nd9mYhiwL8fQM8SDRR/ZzM9Bf\n4OU7limEkCglQKCXlYUatrKsXn569NeCUN1c9UvA7odyrLDrBpGFayhTVUHO\nxcZG8RqwP4cbTaqsK993zeY7Wx/gTL0q1ijhlFRip8EfRfliB96Cgo+a+Zce\ndLNdyGD4yx6YGdvJwdmkTYffqMBLf8hSrKZA5LwWlTZfxf943HJhlmP41UJt\nTwEHmm5J2auzspVycpms0Rw6AemdpoYvKBdQeeEemUUQChezHgdNppnuj+dn\nKmJz3l4BDUtaoKJUvDra89xAJ15+bfn72/LN4IoogTahWIfvq5pP1zNKbmt8\n4RLq7DsvrDcFaff4ocVmXZDWXz/TEe3DrqtgHSOjEh6JXwsZfJP01espvwc2\nNsGHlmAmn9fBiz+46N6sv1Ca/834bOepUI7ZDJ4yed92zkFjkdIQSRMlpN8E\nKKXl\r\n=MitN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/shape":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/density":"5.0.0-canary.ba30399ad.0","@material/checkbox":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/elevation":"5.0.0-canary.ba30399ad.0","@material/typography":"5.0.0-canary.ba30399ad.0","@material/touch-target":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ba30399ad.0_1576804240931_0.7480390360682367","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/chips","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66bf69427a3da6dac80423b5d0490933bff7acde","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a08ccec35.0.tgz","fileCount":53,"integrity":"sha512-/qKlpwIQHn73w089Fg46P2FjaiG3rl3H4z6tOrTaK1LbtngV0V9X59On+1nKxLEZ1/SqmVWxRz80RkQsVw9hrw==","signatures":[{"sig":"MEUCIQDhrer2fuxYMdIfFq+xqvQLcX54dxrWNBCtr5h6s9WnWAIgI3NVau+8hOpU/56UlPU1T+Gp6e6IK5aboNg/R8ep1eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjuCRA9TVsSAnZWagAAm7UP/iA75nE0Jx/NzUfCFeVT\n6/rRp3DyEuKiBGLhp5p7ctQw/g+zKOinREjpDC30nnU3WyBlxioPb1hS3aJY\n1XdhUIpbrR9seUlZ8At1124oWmk1a14n1w97dz6L6LzyAVsWhIkj9HfdcRPn\nI4dqLp+knjcMneNlKG3KBNJPZv54C/BnRwetQ8Ha4qVSxFcsPZMXb4Yg8s3C\nXTx4SOC/DHfCH3juA/9mGeo/v+Y0sNGNaKzkfNg8LohrpGSouwZ4cqT+mcO5\n36aWmTcSi8CQncBrM9aWbB+JvKKDfERIEPLzAfDxqNf6UIOsO9VrWrg9f3ia\nIlw9Mi3SoFBVx4NCx1tdCKqhS/q6Y05HcUchSvJSw2VKrnklMVln918D7L2U\no0tGkmyoemgRulDOaHiY5J7FCsE+Ccxv1Sr3tTVKhiDRBYCoBCrWVP43PJJa\nrXz+g9uMCj4kL3CUO8FpCMzMl4nIItNGqY/NArdtN6qbjbZ6o0J5LsiFsHUF\n4WifUeM234InkLmM0b6RDScMmnCjbXihSZl2RRZtE+3ibxTBwvGxXSHv0mmf\nVosTxgZ9Ig28FbZBfvNujt1LEmHwlWU5gVRetU7o7SzPa0S352fk1rE/D3Mo\nsc3WG45CEs8FITImXciL4KnxSbj7nOFS5S3nTbnFtRpIjgdzGKMShSnSq1JG\nHrqa\r\n=DC9I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/shape":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/density":"5.0.0-canary.a08ccec35.0","@material/checkbox":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/elevation":"5.0.0-canary.a08ccec35.0","@material/typography":"5.0.0-canary.a08ccec35.0","@material/touch-target":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a08ccec35.0_1576884462014_0.6206868433765513","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/chips","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a82a3120b685ec59bd0b741f3c7fa96ffb18ab63","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a2f75105e.0.tgz","fileCount":53,"integrity":"sha512-ZxnRrrcaxmwMOJ2/d9LW1T+wfyOtuUuMVDtjgEFREqt1D6raUveFscHQHjP1zC/N3c3syJAjJMGJoV5dYRfPSg==","signatures":[{"sig":"MEQCICniyqA86V9QS3FzxsExgYtTm6Ks9DYpUVe6s2dXjmL/AiAPr6oYArSsFnwdMQWXQkolavbvNg+a856OvYj9V20TpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARoHCRA9TVsSAnZWagAAx0gP/1nD1EgQoazia9kWC5RI\n/5H0qC/YrARoa9SNTRW4rhMGF53XzVjyc5XHGQjHe8dkRn9DW+Y+bSZgmAyV\nb+lvpzvTusOSOpugnglwqpjaTeegFKpwepp2cT1PMpkgtIk3GyGJherc3hLL\nmbeB0jt+ntgFnV8FXydmgRH4493ybiTqSbV/zNbDDUkSELSeXKg55NCiuYLb\nO6Mi2wgIxhkLtpbUiYaJLcpxSo/GBPeLVwClKIgmtTAUSv99uO6HKVtnYUBN\nJUPw2S4OZdZNJhEAOJAv0GngTV2S4GMgMlZUWkgaQ2KZQXXMhZwRYoDHYmyL\nbJw5Qq8zwoHSwgZT3smNm2WthBtB9agxHgfV5+RDfkS2QGf1EhZTeOnoZtt2\neIeg2vGdtzmQwethMQ2ksrEFzfpEl3UPoHrCHSmPfcvbQcuow7X/7ZDD3wPP\naALjjLv19/SHr0yWSiVMlYqP4WGaL6gutjOc0KLaa+dN6Q32rghgJmoZfpWP\nJ37TytHzpsjOqBCO2AnQJLESt0Hp2r8MeNeyHXcSScrTTME7nyKqkpXAGOWF\nC114uiyV9W5yIpatGNKYPb93MH43t1q5WDIC5/5hrzM/ugP9QNl7jregW92V\nifPtweS3Br1co5BGuke11keFX+q/FIzyvs+VCBBrHQjwv8HU6agtjShLScOL\nyYRH\r\n=/n64\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/shape":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/density":"5.0.0-canary.a2f75105e.0","@material/checkbox":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/elevation":"5.0.0-canary.a2f75105e.0","@material/typography":"5.0.0-canary.a2f75105e.0","@material/touch-target":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a2f75105e.0_1577130503356_0.3001679197020881","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/chips","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"555a84afc6ebd6f61d226dc5e20a6b32b655f759","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.c054a24c7.0.tgz","fileCount":53,"integrity":"sha512-wyge8Ui58pFySpGkCuEOdMXlTGVuQLivM3MRVqonbdHm7mfzaP7VdrjOkTYpjb407xo38xUkS8DlZAE5nj/WRg==","signatures":[{"sig":"MEQCIECJwO+UvugvQmC0RqMBqlmEdhUOasZkqQVuZzLi3g63AiAu/d0C675ewJEYVQ9CgRIXN7TNhxCjaWOUkYrp7Y3aKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATazCRA9TVsSAnZWagAAHtsP/iNoSz39zvr008avTl02\n69w4BZiYGMUoIfzyOfSmggIwX557GLbgce0J+29DXbmDg/GiPMNzo/7v4vSh\n4RAwuVku+nX7d40QueaImfdnFxX8ptYzGvMqE6xoCRkQCTfwt1wPaDwkFW4B\nyFZ6CFBotfFqdR/5Kj60U5KKQ6jizsS7OfUFjsiHKdE4bUfkOhCZltZv5eWj\nhT/TTzVjdYkV8wNFMzrp9nlzCIVMHC4XbpLRyk67fABevKXjvdgS+643zF+O\nRubId1M8cQLHkNhhWl+QZ2pBhfZQFV2RUp21hgAc053LijCNP2ugZ4Qrs8BG\n3fYUT3Tav/3Nb5jiNz1MKbO2Hjn/orG4DUgI687CcFSlKX+3+HAR2uxHFyUW\nUQGDH4S8Po9TwQv6cgnKc9g54bhZnup2Rb+Ppd7l/sQvpctNIAJh5GcIAjCO\nEAWO8DewuUg3y4Ezluw9vp+8cqovOb6llj3zZlwMRxdqtTr9mrWyFk5ekvrz\nC3P6FtX7d+9y3VCd//1HuWup3+Ajs3IMsD8DZX8gpIzY2N3B9Ix0Qd5oimaP\nDc4YENptAKZCuiRm4sksBEqHiYzrdGnkzNEZ0MaYjvCC5+NVIwUHE4YrTs35\nGF/Z0aEdnFFrXU92CbeTs6r0OopmRs9c3KlpaMBNqk7CVij7+iwwNbNSct+l\nEDZe\r\n=iY+0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/shape":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/density":"5.0.0-canary.c054a24c7.0","@material/checkbox":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/elevation":"5.0.0-canary.c054a24c7.0","@material/typography":"5.0.0-canary.c054a24c7.0","@material/touch-target":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.c054a24c7.0_1577137842883_0.8718338381936916","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/chips","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e389215cc8a52f7531093de37d21270e3254dd8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.c6808c51c.0.tgz","fileCount":53,"integrity":"sha512-D2sDJQauZtZZnV3I8iOkBQQ/smz8yHQ6p4v8KESl61w5ztXSTL9jegeMhVFe2rbK5KZXw5q0cAZFe9bV0tw7lg==","signatures":[{"sig":"MEUCID2vI0KC14Fft4/qsxmkhYX4gMewbPqhFlYrX9+CuO9eAiEA3t4I1QJDCaOSUemcOyS2ibFM6+x1g9i8ZLdfGQPlz4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATfDCRA9TVsSAnZWagAACeEP/38eVmryYgQHuHWzxAbz\nfE9FPaHRZWHDH3JL/2HJ8cKBCSmGrUl7CRnGqTBOlRkT5NzChMyrq0mKtVGl\n75ca47hjrLrmHZDN4ajrZKqu6gV2IjBX8Rz2jazvfi9iaFp/V/5bUI75F4MB\n9Z83Jtq8i9fCbSvNkLKRlf2TcfboCI00I6sAujyYej7375RH3FdEtBaX2ahN\nTKzMjSg770p8xHmPqFiO9D3B3sq4Zmp5fmixJJOnmnP4kBS2UW16kMVzKV9J\n6gdxyr6AT3xALFCGUIetpKK5efGn9O6zZ4Ua84jMPBwcJg1ErP5DOmlDFZhP\nFLZJEjqp85w+LP+nIOgq3GJ6ePp0vH3wvhCdUPqPII6EjZlFvVhd/PKm7G0o\nWAUdXW+betdTa/8iSFmfJn70c9MrJfunKWwgULkMWO5wjtt/paUe0Qmw6NSo\ntjZVqDflJCjF23dQabq/EzB5dIOeqZi9ykcTW/dkwNZiTe7X3Ysvt/aIgQeZ\nJF2YdCsXb+kDyXOL7RdpR2WByUT6TbptW6wo0pXq7a0UuuD5CTBCPgq8/PtQ\naTkGSRL/w01qHIpl0wSktZ3aaEYi+6qN+nClW93RJQayDHajRpF/pAALJUXi\nionyKuAPyx6OJGw4i8ycvOKLoobxw1R0O7F1X+V8ZXpohABSSUf81oFxgjFQ\nrHea\r\n=jnsr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/shape":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/density":"5.0.0-canary.c6808c51c.0","@material/checkbox":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/elevation":"5.0.0-canary.c6808c51c.0","@material/typography":"5.0.0-canary.c6808c51c.0","@material/touch-target":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.c6808c51c.0_1577138114648_0.8934528551587289","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/chips","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b448617e02bfe5d21d5a8187bc9f10114acfba16","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7bce9cf77.0.tgz","fileCount":53,"integrity":"sha512-798bpZdijv01P5CjHdTNQwccx/IBTWZYifAONxmHGfbP9m0vlJMaQgr4+i34+lIi95ivU41PQt8KvioY3rHTTQ==","signatures":[{"sig":"MEUCIQCJyMeVf+NwVqYKkJ6sc7+3zYRdbpp2moYR6b2BsfBWZQIgWZgqkMrCPLmeGdMQuO7xb4Fxf3OpclIS2GLzbbwyIpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/3CRA9TVsSAnZWagAACeIQAITP9x8H3Lwod7CwIJ8F\nrmM05qSc1kyEIFJqTd0B1Yyn0rB0uBNxd5Pm2jLB0yGQG8dYFyIN0cKuCah2\nSitAS+hyePQ4qN16IK097RA2w9aMdZhWU9h1afcww6zkvZuQezv8Xc+VJsQ8\nOpZ6e7NUxSDttdu3DPFF1g1Ol5tAwR+BBbBhF4SYZOWfJz3JzG4zWDb5Glk1\nwwi34Ch3/NOjhmbP55zlDhzzvx+kySXu6Tqo8M3GLgtcZxbE+j1oVyZfXDvr\nT3RcTyAtyvRo0W9wfXkJ8CauWqLhVEJtiJBrZTOQiaLOvzFz0qfYo2CO0Ysr\nwgxl3Nc22Zu7GkByHwlPEP3/8AubmUnzg8oXgAsAVlUFbeS9oOprhaYlvO8t\ny6CQTfTc5rYs+vVKpZgA1jTk8COLtC8/g+y/Bj6O3i7ZJrQ6DCkEfocqmg5e\nTK6zZe4vJME+a2jsOq3tHE0YB2p5n9xw/v/zANYRHZWv6AEmU642S9zXb/FN\n6xeF/rB3TqaOE1omc7UjtPBhazQ8s/TFECdHr1/BN/xnePYkWvB8Dp5XUN2E\nXL1y6ZL9GEQg2G1x4fmFvbrE3ByWhT3Af65UjqBwsG/UbGm71Ig12+UcZPzr\nRhE9A0ihDy83p+l1jfZiVVJiee0IawgA3rAV95rou+elAl1BhiXIscKEEB2G\ngUzJ\r\n=+2SV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/shape":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/density":"5.0.0-canary.7bce9cf77.0","@material/checkbox":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/elevation":"5.0.0-canary.7bce9cf77.0","@material/typography":"5.0.0-canary.7bce9cf77.0","@material/touch-target":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7bce9cf77.0_1577385974794_0.15305561245862154","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/chips","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb6233c3b3c3ded44237397fde132784486774be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.c92f038c3.0.tgz","fileCount":53,"integrity":"sha512-YMD7iw0F4yW0VGM16CocBQRcyj0bwzgPrVDVZ9Ah8q0EHvoM+PIQz09mImmKjvc4O0B+bsMESzfiBufI+Ay7ag==","signatures":[{"sig":"MEUCIHyCV8lJnBaakv0WRid8U+g02qxXacVizl6Vtdt7hgNPAiEAhs/gJs7kMWXmHAuASJiVatIXxUcXwukpqWiM9YWx/BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRICRA9TVsSAnZWagAAWJ4P/36kFkOfhMzmEyXT2yiA\n79EIxVLGqcD3wi7cbX5fIoia9ST3ESGhLtyRZU4zEI54AndlTAhxz9kY5rHO\nIjCRHPZDrVvMxlvZ70ujEFOgk3FXFMRpyS7vi0Z18+DFBcDp2Vmr2YkIhKms\nDMKNAfkVK2NtAmnOnKhMiiOJtXo3M3BgEZuLYq18KJMxL03M0h5Awjn+u2VZ\nAj9Hi0elXVxpXMnmshDpV1aKs2c+Te1/S7FCAOOjZpLLQPeO/dWz4Vc8Nupe\n8zS/oI/oTGGl2sGaE+yjlkjqU2crCkr4yDBBuEtH0uTOJqPcaHHBsJBebBOy\nN0h0ouaD5WKAi2sf4HE4ZO/Racq0WBZBxJ3n3myCGnruHw4lvXXOW3wxio32\nA2tSt58Q/VXxxtlIMmSla85wL9avPy0YI4uS1s28q4aAhAOy5SmoPJbRreZM\nBtrsPID7cKW2tafVBXP6mU1KEr1xDbT/uRIMcvjRngw9a8NOcArNnBviDPXG\nRDubWQwwpZ+U1WSF8MxD6FLcbS9jCkk14iD7osWdUPe5KpwPXpASSDRcw0ut\n22KGh/AKmen25q+4Wu22kL83LvXj1DleYhpyA08k/JZA3pPyIOUXxh1RwGci\nmydvogzXqAwqJNmjSosWF1RfWe48OOmIVZBrRSoUOgtmi9yIr5B2UBS/SAHv\ndzTc\r\n=n18D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/shape":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/density":"5.0.0-canary.c92f038c3.0","@material/checkbox":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/elevation":"5.0.0-canary.c92f038c3.0","@material/typography":"5.0.0-canary.c92f038c3.0","@material/touch-target":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.c92f038c3.0_1577743431905_0.7820408391999458","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/chips","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b70eb1a95fcfbb181a166bfd56a6d93e4ca7a1c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.1f1ac7558.0.tgz","fileCount":53,"integrity":"sha512-Jf5E7Q47BN9RIhYESKQGDmCJRVKM5dAASS7WcikIgyAKg/lctQ7FDmEJzKQZjab2yoYUEZ6vN9iFAVD4w81tNg==","signatures":[{"sig":"MEUCIBwgeZxkXVx9eDypZ3ih9zEHLQwO1Pr6TnJKx3oBZpA3AiEA4iLt06oOAQBxpVDpBTrII91nKAl6qJGKaHyKjx/SyXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDliSCRA9TVsSAnZWagAA6X0P/R67ZObdtcisBb1bfCls\nry3Hl1301bxn1fwcOVp8l5zA07CEHNt1bbHY3B13Ps3jVfXuCeA8xLzR/QxA\nSmUWyj7QUoPUATGzi4vYpHCgWq1bJltARvmQViu1udsUbz6SKk/qaRV98zia\nwhEe8cmgFbzOhljYlnRjjAKs5gsFBjmOx/U35Y5WWoTsavT9OPNNp0Mo7OrO\nL6BYcJAogOmpIWjq0DrYFwyU8aLzODJn3sPk3Pjo+P9VTM+cBJnKDE7bdRL7\nXyOGqtu5TtDNm0ylZJHsTrdZsik7AdxXW9A73O/8qKEeNCSWAIJxy84QITd1\ne+nL7/SDK8+CWppuJp4xbc3l73ZePfALjGwneTS8Zh1WJaELmPVIDy2XbQTs\nN7bXmRtANPzjn/PT2aII5g5k1VO5I4aHmQxSelMXYV5f8UX54/ljymmFbK3k\newwi5U5fCLQMvlwkUls57t6ZjxvL7+DRv8GmH6ZIQnqkxHGhFXaAKLS71gA0\n59GjkJmFO7OLll02CPVsyHzcFvbSkfI9kv7srlFSX3tEeZsuxkfaCyab2bY9\nviYIhpF2b0d+vHJGZG4V2lYrlPDKDWoWOhUDtvo8uZBDrkqHoNLW1xI6dCc0\nbHcgQt/D2ct9pkNz/xpZHHM20em/LiTVDwkiVtdwJL+GtDanFQCbCHvcAUmi\nrbaS\r\n=3Arc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/shape":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/density":"5.0.0-canary.1f1ac7558.0","@material/checkbox":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/elevation":"5.0.0-canary.1f1ac7558.0","@material/typography":"5.0.0-canary.1f1ac7558.0","@material/touch-target":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.1f1ac7558.0_1577998482412_0.14900786393828058","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/chips","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34c667936d70da149f9e26ec1020c16d6a798695","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ec26e799c.0.tgz","fileCount":53,"integrity":"sha512-NM1P2YRwnLZ3WNhyBAC7n4YZ8tDTw7ZpaX2Nv8hW69us3j0oXYHya34vSU3zUBl4cvKTOu0PdzHUVpSlRz2/KQ==","signatures":[{"sig":"MEUCIQDwXX//bBbj4KbQH0X8CN4QJS/z7RFDdG3CGEHPzOYY3wIgcZFK0Zc3+AS+MyyTw5PdFb9i2mcSfM/zxgMnmCrAccA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPeCRA9TVsSAnZWagAAxm4P/AkFOeF9IGDIbS8sQ3gX\n4FIrq2MDeMVM6Q9URHAVopgqyEejvErUeyZI6r/xyJDnYoWf0VIFfC2Fi/J0\nGlVZNhekjebbtNl3cFsH1WrArbsqnUoy/X4wsZvajOhYa7yyISK5/r4qIMAV\nMY7jmNzXuVevCkRot1G/e2j6IwRkIk3cQkus/bW234zGoE6it9FcamhQgBfO\nQP2uQCEWiAMguO4XMntPzt6cQYkRD3uRwJjvdE5d/OZ6xOArn13oXJTov+7n\nuqpFm9UewlfojPSgYPj+k47rgmm4ig7zeSw6DJ50DLg5OK3WJsXRCvsTh02o\n3nSsssN3UQvpEhcs24CWtsT+yuqKyJx8B7SNVBOamU9G0B3V/yJ48jyRYeSj\n7ovqkGsbKoa4+bYTw+85cVGfSKqxq+gDVv8UV95vrHebmaCQe9HNRI2XqQSM\nk2xWJ4INoH1/ndnkR65YTCjAzPoROcTL9cxdU2nRkseNHiE//fs5FLsJIEA+\n9qidpz90LMSC+uBbTnt8aJyXFv44kGno13Pwp466u3JoRqNFfK2Ip1Y7qfYH\nMvXUrcpBasm7PWyetQtif5zHn7+F++qDH7l5kgvLdkTiljcS7Ls/vSnPlKo3\nO5BBM1r6mxfcVihrlqhm9x1MV8PM4PsdMLFs8m+Pb2gCBYwOzumElO4lAS4P\nMnge\r\n=YwL0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/shape":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/density":"5.0.0-canary.ec26e799c.0","@material/checkbox":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/elevation":"5.0.0-canary.ec26e799c.0","@material/typography":"5.0.0-canary.ec26e799c.0","@material/touch-target":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ec26e799c.0_1578001373921_0.3814491110881173","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/chips","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"817f016faa3db76bba62e5ce911e7aca6651a09c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.0a40ced40.0.tgz","fileCount":53,"integrity":"sha512-m84tPHBeXtkVkuoncVymXbUTDV6t36AIEbBuMozSApzvgT7iU1hupvw8Igb/6ZaWZDgNqGpitVveNOOtdhzktA==","signatures":[{"sig":"MEUCIQCKYUl3Eb2EgmaEDKW0ekroRdYvR2paiPB/03Iqw8FGyAIgL0O+YDxuGAcn5/SfulCDGQompmGgJee2JIcth0YKhtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3WkCRA9TVsSAnZWagAAGdsP/3JrY1yG7BWlMSTv/Fjo\nNQ3FeablflhBmwLYhOaDHwWpl1z7kHJIZVsXhT++gOwE9PtbFR4g9wlHe836\n5emXYw0AHLQrs3xQYjGgTnG9dxQz1xUQqQBKLSloZXDw1q7OcVPD27fabg5f\n3WxZEwyR+sgaI+rSGkVV1M2b7tYgjis6QHO6su17sRmZ1EwBQzTh5mmvg+16\n9PhuRzjFgr7T5O3ZLLg6FmuV6eFpA2lbMR4GeqvYD6D3qSx4J/QA+y2G6ndB\nSCXgCpA6YoF4tmt/R4BJdFK3Yoe4OBy7GjhOgGsJ4sxDfnEbgC07p8m/UIK5\nzeKvzlPhJpEgyOLzS1HNHYZZbxDH7sqCoCHJw2JntTQvN3z+V6frGzr4Vavp\nDrswsaRPrXZM8Sb+RVTT8inAOwTxN+fsXweocz1VtWtyeco8KdPeVFNmIhBo\n7hpWP5b85abrnM5+oOS73CayhW6XPIk4hAXbJoYZS6cyAIu5RJTIL4+ZRFkv\nK5V6Uf+afrA0vpIopq3ZFfoKjdOBMkrjJPdArh3eijF5f3a8nASf7nPgACxo\nDIZKZfDR1jSs7cDg/jre5qHX2dbp7zKKLKz9nRcRDFm/nOQBZib0KLpjkKv2\n6V/3y2JZLCuyK1GNeTJ8UXQiKjXqNK/KAfxunZKDheapAstp2awzeCUaR7qH\n7bYM\r\n=IxzI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/shape":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/density":"5.0.0-canary.0a40ced40.0","@material/checkbox":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/elevation":"5.0.0-canary.0a40ced40.0","@material/typography":"5.0.0-canary.0a40ced40.0","@material/touch-target":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.0a40ced40.0_1578071460171_0.6071459609720835","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/chips","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.3adf84899.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4e1d05875b66b42b4f42bd0ff3a7b62a0fa53eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.3adf84899.0.tgz","fileCount":53,"integrity":"sha512-+jTOflBmDwVp1DX7ochJK5SoKSi3I0U164GF4kFwi5LfE9bVN5Rym9NvLMN5Ql95xB129hwxeGwtwmhMx09JrQ==","signatures":[{"sig":"MEQCIHmbVk2MBNxoZcPKzIE2bEgRDUO0ZdOV/0oE5H0tmZKKAiBtUiEeuDXxrLqKCh241ibCNUFsXbFxPQJQszvGw/HbRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aJCRA9TVsSAnZWagAAdkAQAJ5ByIm6/3+puVwJUoZF\nkayJsNYIMUEFHyJlLvbdS8UpDGYBsDlEfGVy8K5a/wosgullrebCdglyQjBw\n0/6Yx7CQ9OX+dTCGMuD3JdULIwqIeVnII5V3gqgpC+N8X4QRqTcLLXG2H1lX\ng1TbbNt98Ix0PWw7iDqoEIH9uhxcM7vwmzG15Vw8Nsa9kxYhNYlXThALzRf3\nBB6KIt44HpU4sawIr8xTAgQX71c4u/V3xYpK50tpXayPI4vjYkl8/x/9420g\na4u+N2Qt3hJ7gScqUQHze9tHi0KWXJf8qqwr4xtj7Q5SdZ1qVlRaHYciUzGV\nAkH+nMwIVAciy/WLoW50nx2q4ySYUulXKKd4g/o8dT5PJ1xm9EfbI7k659N7\nHj6tJl5WJFzJlT0PVTj/49F/4rKYVrVpizUUXhqIkEpoCRB92NxuR8oZp4xH\nX4YaaQysQKOKQ5MwC9Vid6jgjI1k0BwmEa+NSYGt4zHmXx+br/i2oS2kIvI+\nAVv9Q0CBGia0T/SFfrOMk2DcoqRMLQ5y+DqOYcQ42Oj8K7KZw6ULaQT4NoWk\nGRr/gxtWBs/2CBRC4IdVDsDkpuLdvjMiTqvzQIhAqLT3qdxrL+jZpqrZY3MU\npxlc2JBk7c/2brxRr9R8ik/EpRzT2TCmlT2FHjth/iHXIW0+fIDAEMg7VVOz\n6u/x\r\n=Eqfm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/shape":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/density":"5.0.0-canary.3adf84899.0","@material/checkbox":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/elevation":"5.0.0-canary.3adf84899.0","@material/typography":"5.0.0-canary.3adf84899.0","@material/touch-target":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.3adf84899.0_1578075784867_0.4230565990401245","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/chips","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"721a86bc5ca8d826d459ad06aa3aaa99b1d1a129","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.0d42ee650.0.tgz","fileCount":53,"integrity":"sha512-l7ra8OEJDa27VhsERCna0R2OelVXAJ23iXmm8tmkwE/fAle3tomw2UP+l3ykaiQqFxAGdAFa+ksbMSpJUtBw5A==","signatures":[{"sig":"MEQCIF6Df1s8CoxpRgYi1xYVzSKXEZ1AeHVK+dN1Z9s8R0PFAiBLHuLNdglQwSQW2OKmWPC4T9vF4mOIzgZ8NNtYj63X9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QgCRA9TVsSAnZWagAAnUAP/04ZHF+iOUwx0sXK8tjX\n4uXK3/tb58rBafrZANKHHg5WRP9fd5ulfmLapthrL0CZ1M7WBkDaHTHFIImB\noBKQGwjnTzN9NveVqVU088ga3K3/GcT2VzxCrBAnu1d/RCqA8lCON4bPgVOE\nVdkdRBXzLBt9MXf/GTPKyY9dK3kOCfC89ofIin7V/xBZXlZguvFtbUiu6Adf\nFLdgafI5Na21LaRgulNC4U7gtSvZiP54OzD75Nbeo8xSvU6mIsShBklTOGPP\nhgNRKGAU/Be84UhEEPTptHBbYzcEM9Pkh4LqDAsj6U+Wic1lAsTKFraZSPG6\nh58CaU3/2BUy4hwamdv5uCJZHPbfAn5nWvVfZFwkcQzyNC72XnP0OdQms2iW\n6MExLL3YrNM7EIg4+sLGRKG3Yk69bUG7L/GW65zqN1iw78GbJNTP9P0mULJv\nDcH5JnT6x+V2DF+cgfWRMw92kq8AphNFMr7m6surcDfwEir/8D9KhXzbQtVI\ndYd1T3CrXkrG7Mtww89MBteSEAwHZLD+NoA0qPTQ4YLKAodGt2O+KnR5+VYb\nKus6bs1/JXItYgnoO2SdT3HPsUunk4CxxZxvyMMkzSqZ80RRhAwCGkj28afZ\nx5P4reFUAc1HMhceyTz9X0pJeuz5HcMXvdwuM/sli6mtr8xc9wTzxIyMBvW6\nPdV5\r\n=aLRo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/shape":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/density":"5.0.0-canary.0d42ee650.0","@material/checkbox":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/elevation":"5.0.0-canary.0d42ee650.0","@material/typography":"5.0.0-canary.0d42ee650.0","@material/touch-target":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.0d42ee650.0_1578087456168_0.5535392491300479","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/chips","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db84035a08221f697887880dbe0b9496fcb1ea5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.847dd1ada.0.tgz","fileCount":53,"integrity":"sha512-Y17OyO2VgCCSISgTcGY0RJAtMwizKsFljtqwhTYbrWSPmahGngYRS1k5XGy8KP6WopO0HeRtPFc5bP0BEmyJlA==","signatures":[{"sig":"MEQCIE8E2qmxdhkpePKMyzACAkH0QIeNEp76mQ4cbv3ZILdUAiBJ2fvCi7z7mpreyxPNKFbtlonW6GAREZTgrqEcQfAU1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4n/CRA9TVsSAnZWagAAU4cP/A7gsogkZknZGe9lgiyl\nh63yWTkCzCUryhLFJ1m8eIziGVW/IclpACS6/YYyaTp6ew4Gw7BXBokvop33\nbDsQ6CoG0U4zAWr083t4QxkaaHSbN7VhunIoOo/ywSJ7a6dKIxq/ohPBThXq\nUmNsr4YNf2lghsjkL8sX16u+CUXTy8rvy0rSSLct5LnD1PzK+rnGXLMEeHMk\nshUtmPkWRNexbqfbMqv4xOAnxIrLIkb8y9tQ/kA7yN52mewC9+SXNoqAIGWK\nd/T83ajK9pkbzwz807VcNZ13E64Hw5U8FohscUB831cbNirO2cVOTWNc5FXr\nl75PDzmL+Q6lzt4k/mk4EwR1xwZ0UXMv215o8rRf3UhoJ3qwMV1bbBFYuVeY\nnrXxYOavLYnEzEHnafTPeu4+9a70P0lVDg+IG2XNHT/QL4G9mU/6bmJq/0fZ\nsFM3mirXRRWfwwlVZtBwpKCSdmNilDtxGbak3/buu50PfbJO6g+DVJECRBmV\nEvgLyw5X4K/YaWka4lsCtodoDUqRC1+uN1Rzai4eHWkAT1bNmhVsJ6tmkCJR\nHd7TuLktKRhPqijA+pxv0wfX+lZCBMCESf/GyhEbp2VGSOUd2Uq7cnB2+xDK\nZdTpEuUh4s9uBAfJDEgd5vu+XFV6SdJRezkgiVHSOlX2HbqzNgJWgnEVHi0d\nUDaW\r\n=4Cx0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/shape":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/density":"5.0.0-canary.847dd1ada.0","@material/checkbox":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/elevation":"5.0.0-canary.847dd1ada.0","@material/typography":"5.0.0-canary.847dd1ada.0","@material/touch-target":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.847dd1ada.0_1578338814726_0.35271504711826407","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/chips","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d38b65761c67f1ac0423b9ef4078a8881409d575","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.39df7e5df.0.tgz","fileCount":53,"integrity":"sha512-TLzmBhRYJsrnw8xHh1E2gAtmCbztaC0DfTy8GPX5Qp3zLlcw911SalJ9kD6jkRYjn2hR9ySeXLb+D35PkbLLTA==","signatures":[{"sig":"MEQCICBBuEeylq/93QfaYBptO/FyW9lw/pkIesOWOvE0haRcAiBisWEDr/T1MXYyVtQVzCy6itkhkATYPgzoF5v4V14eKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9coCRA9TVsSAnZWagAAV4sP/AppFWcz2HNjZr3/88FS\npmzo0fqRh4h4/KN016Gx60nEwmto2xKVnTHo93znOzloCWMJPg1AvHxyiQ8O\nkqj1UIMPi9oDrjzSsyU7oBgLQMgXI26aErh1Pny7pzjqtwk9OdwnR67vRLBm\n7BHEAdSJaygWzjpAG/NtvZmHyqq1uho5osZtPYT4jUgsYX0ur82IkRqNuB74\n6ekH+L5m8ec4Eh6iLb4mlV9AzsV01qP/eRtd8jGEO/EBMjNy17MKaBQuROt1\nAzPW4VmIhUwW+4idXqSib7gJ/gaLqDowhuJx28Cjoe6i8FmMWnsLDpWSaXm6\nf65uNFj5aWnAf2PINFcp1lHf3MkV6kMlJBig4P/PJHgmoy4Eii+LyzkMJ3+M\nx6/Gm6tAgvfTiaHMSpiMIV+Rwbs0z5dgRTeac/7jaPu1JjqtE5VmaDCyVpwm\nxFkaSkbAYcFnAocVo3kUtOL7jnnTsePVQ8z1rnkpHaJVGqwCKhQA0odOZtv1\nmZ5zzvw4C5c0H5L619/yDfnIdaBdvUW6h8lLje/8E9iXiut0NR7uesHVxLb8\nhobj0KmPpQwyp9iHV30RHKRK/RdUVgJ0OUFWN/hT7XlAKhkfizETP6bImIL7\nBsLgAJfbQBmVdw3SDr9ifkvEh5c4mKSREH2XUDif1XtlZSxBzS5bTk2f63IE\nbUrw\r\n=c7ra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/shape":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/density":"5.0.0-canary.39df7e5df.0","@material/checkbox":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/elevation":"5.0.0-canary.39df7e5df.0","@material/typography":"5.0.0-canary.39df7e5df.0","@material/touch-target":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.39df7e5df.0_1578358567824_0.1610321823364511","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/chips","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d8cac95038e96fa18b035a012b3c8ff59078d02","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.f1a2581ab.0.tgz","fileCount":53,"integrity":"sha512-utNoZx+5GN+twaiCVhhrnXctdnsJSA3YXcvV+IxTJCEWOHfBOfkmhHlKGBQN5macVdG2L84F9/dd13plksccgg==","signatures":[{"sig":"MEUCIHdgvr5F+duO+K9Wyx3azs+VgOBqWxZIJop7TzTKpHgYAiEA/QeTGEZttk21SGjJBdVQ6cMwx5mMQc/6DoWxGOEqbeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0MCRA9TVsSAnZWagAASlYP/jc2TF/Pk82QN5B+eGZm\nqgloGBgU2vai8DxtPBY/zz5VgZ37TMyAJCWkSjRGTQJMkJmT9ddpEE+KIXQW\nOzv/UvfrpyGZNEtegAGekMAG6V6NcX7QSZN4qlniKIRMDOd5vDuAoDWoc/xW\ng40s0B7pZdIpD5KMiWrHri/88i6ocTaf2yXK9V+gmnzNm5Zs+fn5Y1s2CDh2\nf7SrOZdH2yahYbE8gCuK9QLkIe1Tl8+NfCOtuNhAMpj4MDyxeAOM3i2tXu1l\nJ90IrMnCKbvFrwgIyocCVNL9W4hlm8ijJ8x3h3kh0s2e/Df6x2+msD/iDv2x\nTTczlJ9IXEu2Dp1s3W+hyieBdMMpsya+wJgMefVFDmiMxY4SEloDkmgIYj1I\n4EgqvP1UyvoDo2kZpmaeSqzL9Dkxuog2NgEbQAorSgpaE8h59YAE1iSZsfWd\n4U1by2Y+M1/PFOTSdVGf2fjGfZ8iqLQIVi/AIcDWvM0eujiKAJkTH5ybHQAl\nwtFIbLV0Epd3ePBYB2fDIFYEaqrmPUuiDkdYStnDzsG461duDxBq3eXZVpTV\nmo9M9SDRLO+6XKfHFuTojRCDLq/dYKIoz3IfNyzmshI7dbm+QBeMuPpTnPIH\n7jUVk4pO0Ex8wTK/X5Bw3I6O9bQoFENdi35P6Xd0VseIKIcFc/7VlvT2KzZW\nr9Hs\r\n=JT7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/shape":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/density":"5.0.0-canary.f1a2581ab.0","@material/checkbox":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/elevation":"5.0.0-canary.f1a2581ab.0","@material/typography":"5.0.0-canary.f1a2581ab.0","@material/touch-target":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.f1a2581ab.0_1578409228601_0.2655699823885951","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/chips","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c70adef9ac30379ef7f6d90317f388be37bd4995","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7c7ddf347.0.tgz","fileCount":53,"integrity":"sha512-jOMCyutErtmuZOqKCMrWJIFQnLZax57ahHELbT5kSw0DStjGpPN0Hyx9d4kRQrk5ArPpIPfpF+wtsnieCEsqxw==","signatures":[{"sig":"MEUCIQCDpkEr2QGBlaj0OErHvMjS7o6fp4VP04eqn9Xjm3KvxwIgK2g90TfE50vN2o3mMxTqwU9BA+tkFJ+EAgovkmGt56U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKD8CRA9TVsSAnZWagAA2BcP/308YBSVWG+h+IA0SedS\nWcOB0NQrJ82fCNOc50jUFfnVxzR8U8YZsmHZrlxQ25QSmMMNncT8CRZfjOGY\nTuhDR2r42QuYAnpPPVhHxFMP1bkOw3kHLnuFfwAEcXEwtaaUgenxq7b6jEId\ndEa3AlL3um5DkGn5+wxXJG8zW0xSDsO9uiChV0l7sdVUIKCyoXxrOP+MdgJH\nJjj9dZCmw5dTvAKs9UUkxNjFqSseDPNc3Pq69Xyj7Tms5geF6vX3W40x7NoH\nIwCKsb6ipf0be6UkPS/p/VW5idwfXmIpUxexDmLvRi9Xuvgxi1n3uPP6bLOj\n9q+1qW907jN1QO3qb2hWahC1+XCUJI5Zoxv1Xnu78t8IYw1TEDvlVG+YqtUD\nO/Cguq0FmhtEHWeo42TUYrx5W9Av1eBev2XDxAL9CBoms+YoThsCusU51ynB\nKwX4OP7dZ0if2/zMRtsX8MWuxzttOyfj24wmzR8v+7NLivm2GHrZx43R5oel\nF2P9wGMtpokR1EOVV4BYEcA4ME5RT1Z27tDhRPgB/jyw82id5wQ5dgUTt9dT\n94H4gwZufFQrFgvaJ+xxesStcR6Om0b6cA0hgKeV+svZFAgPYNlzrKLpQMfZ\njV5W1tW/AXddsM6Q7EGCqBMxsj3Djra2p/qHeXzhp4qMZnm+7I/BRu5sj9TG\n/z8a\r\n=Yejq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/shape":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/density":"5.0.0-canary.7c7ddf347.0","@material/checkbox":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/elevation":"5.0.0-canary.7c7ddf347.0","@material/typography":"5.0.0-canary.7c7ddf347.0","@material/touch-target":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7c7ddf347.0_1578410236352_0.22714067845326125","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/chips","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f0469e27a8623aea86abdeede406443c7fe413","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":53,"integrity":"sha512-NKwTlo5bZE681d2j3//uS7hV0uvZbCx0VRhJRvzUfJYfaWqsqhg9St6TrrFxaPP8OLX8MVT/6uIoo2qy4XImdw==","signatures":[{"sig":"MEQCIDqpd4WIjsb3JnS8FnwQrGKxcbR79WIumUtpWUbnbjKkAiAfUqib9g14I8sMI/3yPPPD+1zxT9x6ijJz3DYiNxbesw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMm4CRA9TVsSAnZWagAATnwQAJPBALlemo8KjramST15\nTSOJX/4rKdnpO/lkCMngy6msKtNURByKUVDJAA0jLaPc7e0R+qpgx0q2jBJ8\nxZOhj5h8Qxi2XkvbEhU96xMtSJjyMxpTnKQChAWwuWWCc3ngN6VpvUh58gq5\nw9/VEnRRfN2CTJuPtKdf/Zh4clfaFoPsR6oZ0AkwDEAM6oq5I1U9hQMF/njA\nb3lLjKOa2xYr3bK4+hITIEQuw3UBlD3KYLGJSFFHeBW+6GSkYwciuSHYAU8j\n84frk9Vi2d0YRS7RqRZu3BiqaF5IPSdMeOF1A4s2JZZtK+tp0ATB31RxGzGV\nkD+HOE26yAMHD+QKZ/DkNpqdkSDqUrcLDkq4TEUQdUDiu+uGREv4mMS2BESW\n1NhVa/VDvDu9tehtXp9bJTveWi7RYQOSk7b+l+JTuycFE6Pq9XpAp1xIaiMA\n04Oa0Aa2l7zAEB2qYQ+pb7PgqOd+8Rw6+CvZTQvyMvEejc7dhNsLK5vMdhAU\nd0HaLCmvCiWZH2PmIpnqMvC+yqiTznwjOTLW3P11l61O9q6nJ8j3MgyB/zB0\n5eZv/tSASMrczweN4ofoSS7TAng54uSEqHXSR7l2I63tRRHFszTAgcF1O8wF\n35KmZIvFZ32kmb/rxL5BkYOrsLWd852J91xvqB/GdmPV+F5d4Bi53Qu/WCw3\np9wf\r\n=20u+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/shape":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/density":"5.0.0-canary.a1c84d4b5.0","@material/checkbox":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/elevation":"5.0.0-canary.a1c84d4b5.0","@material/typography":"5.0.0-canary.a1c84d4b5.0","@material/touch-target":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a1c84d4b5.0_1578420663622_0.9966229891859282","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/chips","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"531b0ea5a4cf0970ad2b73c5660d79770a8623d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ec9f16578.0.tgz","fileCount":53,"integrity":"sha512-S/ywh7rnv9son/APAMl2tbfc+UVjZ4+lJjkpEi25PbctJgFr0uLUbC2V46oU2g6bRnXqDS9TH3aM94jnin7HgA==","signatures":[{"sig":"MEYCIQDf3IAQCvIR2fqkNEkZS+TOnU7weGj7EOQ0qSAxknGbxAIhAJoNh7amsXWFpJPHkqBA0ZL3guv/4H0hnfwFXTj1SCN1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6WCRA9TVsSAnZWagAAYBYP/iyDBLfuk8d6WsPMCTEH\n+L84Lvpo1gmj9Ul0bXE7IoWMX66xQz0x76tA2wpaJDyqzBbjQD37qnz/U4yU\nXjIp51N9C+5zT+nz0xnhFVjkumYPYFSXjIVXthAOYkoGI0d8KlOfxU/T4eYg\nD27dPnhtRsYkQe1zBrc8+bLfIQKAx8YNTDrQX887P2mdX6I3CME8sFOPe05O\nUpxTTtKmQ4SHoysXs1K0SOyhShnrPO1zNlIpP+I4Igl7M37yg7R5MBK/wNZl\nMvWvkHROPzNLUyhSBm7GJeyXm6nFQK39xH/wAxKF1+ycpuCcqM9hpbCUGT/v\nulJqfANh6UYIWIfTDW+6P0Q2CTqlt05JpIckCS5yD8G2dSgucXRdKtaheKK9\ngOLIqqdDdLIk2lVwMboVVwBAI3aNnFf6B8Igq0FTOFA2L/A5oBKNoWppsrtK\nGKHs68cpPgJypHvHiMu5BGyqHhhGonQdaDFUtJnhx0OzzmDAtBw2yU8+yTsy\n2UhEdYPU20PUjJiKBqzM6SOBl5Hmy21C/Vx/FIPIn5qFRTgnf29uaL9fAwvn\nW1p1bL6VYItWs7K8Kyxm3Bh/cne8ArL6rOF0RaMMIU1z9h4BDm4XBmgRovPi\niY+/xoBs/ELraf8Oa6ILoDD2J+VF3NXI9n6NPwRJ9qJyZbyf4A9g8pNJONJe\nMGM3\r\n=jgmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/shape":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/density":"5.0.0-canary.ec9f16578.0","@material/checkbox":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/elevation":"5.0.0-canary.ec9f16578.0","@material/typography":"5.0.0-canary.ec9f16578.0","@material/touch-target":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ec9f16578.0_1578426006580_0.03077301216816042","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/chips","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b602226ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cadd051d03379b80f1a06550f0be2f3b5bfb90d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b602226ce.0.tgz","fileCount":53,"integrity":"sha512-pLAiB/0+GGXHDFMFdlyCZClnp1B2ASG4wXTWLAqECB1lZmY4ke+KlSA68UKfIEFxSxFuiJx8C5wswZ8WbH3w5g==","signatures":[{"sig":"MEUCIQDsC8qHx8cZcCm7gZYsC87nwRGJdzaGUgHvYq7wJohS7gIgNCTjeTlfmfPSX4kVhCfRimF7Q2u5tjkIfjvmINenvz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOb4CRA9TVsSAnZWagAAT/gQAJbS0VSsr94oIHzhssyt\njMXo7xUZypbvnnPsObnrzJU6WTjjsYyP/6QXGBB2xCb9xnseRPK5KOPcbcFG\nqvRTaUL29knd54MX2o/a0EYrM9OtrCcipCze49GFha12J3TXO18PLvF9YMth\nFix7p8vU7Dq+filWXKtHZIKTFAxP8//VyL/EzSYoCRVwy+ElPKlxR0cDGEI6\netCqFRCnyWy9WdIBiQ+IL2K4NfBPs9WDeoph9mQ0MzZkkVSU131v27IfjiEm\nvmbl9qCoTE1GdpicmyCY+uLNwI7sqtxUy+KCjcU64VChy/0QrkxgQAcUwYjG\nvLYNfDGDQW7oP85diVEKC9swyTk0+CmVhCvzl78rrLdtnfhupJfceI5J4r1P\n2mUHHTUpQ2BtoRKxZP9SCVHXPFvp2DCy9Z/KMeg5ROiUjx/sylXLAlDdVV7j\nN8eQk8ngcnDqyg0IbuHlx6TxWdRy6HPM5+1TtB6hK5W1i9xzlmrjGRRTcxei\nz+uMl3cr6BpmmVxvPNJA6x4hdP7Z/Pc4N6fLo5ZIKfiRpnxm20mgKudtsO05\nXJvj2IWL11dQGT/6SWtpriU/3T9IG49ij6LmPNOItm9z0jgm6eTIrkwBdALG\nMaOlf2c2u209SAlWcVSAoYYS50Moe4NDfh51k8O6x/lxBKTMeXaSbwqmgJ7a\nGCi5\r\n=cJXX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/shape":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/density":"5.0.0-canary.b602226ce.0","@material/checkbox":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/elevation":"5.0.0-canary.b602226ce.0","@material/typography":"5.0.0-canary.b602226ce.0","@material/touch-target":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b602226ce.0_1578428151615_0.9750971712738297","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/chips","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66e115ade0623c2697059f672ae7d90440b397c3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":53,"integrity":"sha512-+znM9uPcwkc+dTnMNAq8/jYzOUds8MHplzbW9yMNcO2OzY/M1tImj1+xPBewDHHsbzAUl8SL/bode4Swf7xMdA==","signatures":[{"sig":"MEUCICxmgeAZmWFYTTrGcYTSFrB6dvRCjZ4F8kMuMNDJ/kkRAiEA7u6Lwg4ZkXBrCmkVY+aM8kh2Ei/N9nJR2jgfCz51JiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPeQCRA9TVsSAnZWagAAf1wQAJbvPJTi4SYzQm2kr5BJ\niTH+mlbUzt8kJPWtYBNW395M8SyBM08oDtlGMF4VXkMoeZNIvOgWcpbaqLrb\naN39UeS4K29nKdZhd3zt9iF6kaUUbIHcfUjS/By6oK4XaNvt6kujbO9fNHSj\nlp5DCpKV9dGSQL5IBvFt3Qk7xTxIOz2HwEbpT3T5g9n8Jyrt72GvVSLZlEBn\nAJ44Ch6TFvGtMB/a6Dq3WaLK7AelZqtrqRxp8xihXd0f89AsYxht0+Y7molr\nj8yErMIP7lWpgUONtj+zcT18jieW/vevsqU7NEazt8qqQ3aEu4F7L7CxBbEY\nv1zkSyDC0/yD+eoC3WKFx9xhHm/gREZmxdgMcRDbBvjPHvqWck9sbE1qe3Ub\n/Kvp3PQOD84GrXbx/wCoyPDO797pf+xlefMVJldJYpVy+bt4mD4v/kDpMD0c\nRN0xg2KTgcO980PnIMVMzdWcc7Elr2ZE1hhCLLwfRC+yzebQ8d3S19myE8Ay\nAvpm8xiAzeI7O5fHuLG+0wyZOLSWZgFgfG0iTA16gw1rwwcyokpxPeQ08ItJ\nNnRlrE8SYL33glwY+b0rE+EMjz8lLWFqfX/7V7z/9ry+GuWNdccbEi3gv+oe\ncOUG+dcmFJXXmwo9RaGya3Qw8CQahZKK3Cd6g8QPhNdm52ZZJ+AVzLWcp+m5\ngUQr\r\n=fpRA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/shape":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/density":"5.0.0-canary.b2d2dc08c.0","@material/checkbox":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/elevation":"5.0.0-canary.b2d2dc08c.0","@material/typography":"5.0.0-canary.b2d2dc08c.0","@material/touch-target":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b2d2dc08c.0_1578432399916_0.3271561726744394","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/chips","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32fb2ba994ffa362039465f73af81b1d32da4a85","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.61f2d7580.0.tgz","fileCount":53,"integrity":"sha512-0uNStxVKCW98kMQ3hDC5I7e+RuT0Sszwqw+2Wgw0hsaQQh3LnI22YLqPv8GyB1mcc6r7aE0it9AeMjs63sGqwg==","signatures":[{"sig":"MEYCIQDxpjbxX2jtG+WcvT71NhgL2vr1/9Dk8HuR/JuLzOaongIhAMkHLZCSeeCmHpYS6Jyc43lEBoEcRnvROtwko9w/Up16","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPq9CRA9TVsSAnZWagAAfCcQAIfkUXxXradzgcvs5Gjh\nVLxn/uoy+/qjSr67H6z6PM5VEwDR56tlvayF0KFuYUnPZy5XO9AI/dnMcdyj\neOi4nw/IFRrzXCqNXKv888f5PBLGPP+/EW7CpHqlKJEwK0MwhsFrUZLqMKcX\n7svm9e58nIoTJq1KlPBUyAsWYOBChgakWXClVDky9RHI+SGb0ZOFc53YP5ui\nYC22EdajPeOVf5VsKQjIYCkovAefGNLKf9ixNUETijnGVkI87kItLRSiYzk9\nsXoqtYl88FP1WuiUI3YYQP4TwVDl+48shWuohajLQcGfB6loLUkNirwYcgxt\n+1sWio91b5fHnYriQVXK+0BS0MjIWurF4kCb+VkkJEI4TkU7H9V6OYdlpLZJ\nlnBPwDgHC7YOTaYQkrfeDE2uRypsgfw1zcbj26mBMg5WtPrEBlOAaMCLw7Wr\ni7PCh2hotlKSf9pqHYFxx59zOSkmfFpDrCKn0sRISANqh1BGRkAGSU3/TFVS\nYDiooRYXBb7kLYOR+g0Vw2scTEh0/Nc3McvYgNXI1d7L6Ybk8HnYUJeWK+Bk\n045TGDsWYS1U/TxTAup2W4RUeYCz/O9jgEchm6rIB0+7TnxilL2GTufLAYzh\n0+JzO6EQbr4NaoBdfWXo783XIxhWWzZFHNWPMsUmmA3NkS6/NbCze0OXCegV\n6Z1c\r\n=fk25\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/shape":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/density":"5.0.0-canary.61f2d7580.0","@material/checkbox":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/elevation":"5.0.0-canary.61f2d7580.0","@material/typography":"5.0.0-canary.61f2d7580.0","@material/touch-target":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.61f2d7580.0_1578433212568_0.44480750311237793","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/chips","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97d995fa39361a77ec8fa757ac0648d0292d1897","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d1be53a2e.0.tgz","fileCount":53,"integrity":"sha512-dAUOKpPk/nHLqjyUAAMikee/rCokyQCceXo4ikqPjl0lYi+MxnvTv3356/ybWs8l0Ch0vyvGRtkwEplC9N7kbA==","signatures":[{"sig":"MEUCIQC0ZBaFWyOzL31RV2g4FaDcOHwyAMdt7wyZbPHXOlsUXgIgHSqNNU6mF1ngTSMjxCD2xuJC5gpV14cJJIZzmFPazGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQOHCRA9TVsSAnZWagAAVxwP/0OzkXGjOrsQLG+BuEJS\nsvOXrGlAxta6y5wt/dKNHl88OhbzTil0lu+NwOLOLE+xHMW693SXX8uYvLxx\nhn8TBZrP533hD4fxs5NI3KFxIbjQpFuR7iGdNoH8EaxSncg4vyIXyWg+ED+K\nRH3jTv2soX0Qalazv3fuQHyXZ1rFCtAfYftKcqV0hlvfWPpDotB+YP9J2r/C\n0O7+BFnafiGDvYI5C6FHy+aJWup6StzjP0XwQHpQd0SzGC0yhOFMfBLzOGn/\n4iwFBIpk86VC/5fl8Sog0HIXLHFLzCe13reUjWR9ufhFWC9xFEHMKF0Mtm0N\nykhBCcLF++CeO7VVzJezU5pPwxDrv7HlmTvFZ2XkjYzg2U1nqIuDR1TFouii\nM9ht1xtWo6dihmGigaqykHHsHFHRcsIDOWER3/MNlg/oIJDtPZdAdwJ9KH3/\nBz+mITF6vJl3GbajCn/F5OhMhPPWr5g4bxnISgqJYftDuYOdTLfYP8z0IJ46\nk3NwHhxbuJdwW4IiW18KIFpu/fhXqp3KXtQu0XN1PO0YJP8DUg4xekSjiK5u\nC751rYtWZslQGRKAEJMkvQ6Nhed1Q0dLrthibSIXEmgBTG/c6eQ980TK9lDZ\nB2VSpzSb+BNY4LRwO2eErkMdJiVJmU0EXQobt4P3ruKE711edXUybPw2RkLF\ntoTk\r\n=Mkty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/shape":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/density":"5.0.0-canary.d1be53a2e.0","@material/checkbox":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/elevation":"5.0.0-canary.d1be53a2e.0","@material/typography":"5.0.0-canary.d1be53a2e.0","@material/touch-target":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d1be53a2e.0_1578435462771_0.4904644195581769","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/chips","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"166a1bd2b592aaeeae8eaeb3de55826e1a016c2f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.9b0d06e32.0.tgz","fileCount":53,"integrity":"sha512-rC467cegNMHfWL0skyajxmL0r1jvtwyFD3CfIwiKFUYCZrPhmk2gRLTjGc7LnP0ih7K0kTIjsgUctT3nNsIJNw==","signatures":[{"sig":"MEQCIESgoI7ZlEE0qsRBMk0hXkVdAPSUcUYmKnvJquWtT2BkAiAzhnRkIhL75gcg8G5ec6I5FN+N1o4P+IcPubwQoWqq4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQLCRA9TVsSAnZWagAAPIYP/jNt5E9wUzBcGnxevfQM\nlr/UdbcrqFR94BHk9nKX1+ccLl6LJd4U2IsQfL1YlliKB9zYnh2ncMzHoTIr\n9V17CZFZ/ApaHb4RkHAEbZVY+RCK28fgLKD+2Cdra3iyPph7YqYvYNLblcDz\nj3pMf3WsZliJweiF3W8ktGESF+EdfvujRJ5vm5U+7G4TuLVx84Px9F7LZn8d\nhG36CX9a+hChBKvUrQAkm83v60tCgBhEPUXTf1DBs843S1ZDxMSW3KV5nfke\nAGQtbqCXxUaf9/NL2FbgiMKdDD5q2NbHH8idFLTJLTDezkXsQqsj3INo2/+s\n2wqTRWcC6nI7EBVvcY+arhJUAQSU10KXEZmwTY9gNC22nGVPLMLBtAHhjnmo\nKpaHcaRL57QNdfUOtchDzRC10BpHAFxpGh8SjVFZj59ZqrrJvUQj3K2FZeR7\nRoIjtGdssUi3h52QPkchJyqvS9ew4mhaxs/7QpKPyzs/W39xJXixjNsGa7U3\nnt2tY+RnwUzM9bqZY+gnCY4xlBPsX+q2lDBsraMY1MBzvL7/T7CZyVUbNLNd\nKQKhX8Vx8wV1jAZql6P+UaEGJuaIaEfY8QDaiZSDFkqi/gImdZ5JvIPKSaSc\n4yUkhp4jg8mH6iNeJ/iaTnX5rTPhdQ6+ZO3xWrSX967O4mQqeIh1Floj0woz\nJPWD\r\n=zVDH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/shape":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/density":"5.0.0-canary.9b0d06e32.0","@material/checkbox":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/elevation":"5.0.0-canary.9b0d06e32.0","@material/typography":"5.0.0-canary.9b0d06e32.0","@material/touch-target":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.9b0d06e32.0_1578435595471_0.1102714875002957","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/chips","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.730c807a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01573656da2d3765f86019c89c380bd796d9669e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.730c807a0.0.tgz","fileCount":53,"integrity":"sha512-eyGQcEKosQ7kEhr59GZ1rHnnCtw/JCl9xJN3OsOdn+3Egd4TRMAn54/kMFGJctnkFzwtxNLoaBrqJjb2z3LwHw==","signatures":[{"sig":"MEUCIQDZ3fJLFxIIWwC6cfkVF3fPytySPnHRO+OYDjHx/coZjAIgRybOAvMNzvFDTdxk2sLVEH9N5YlKKFmlYvu2ZyDGqiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRnCRA9TVsSAnZWagAA5XsP/REuEsNLNJ220SLSxlKg\nEHWpWQF9MLg3Vai1PNr4sz8BLqeXdY6LI1PjXLr7R+ZZLynTjBtfre9uGJvT\n3pYdXWyh7Gz2xdXUt6VrtDlND2Cm8g9CcTt9X4+DdKiKRm+TCOl//PB1qVcb\nRSYWSifajbgXE5y33xjxIYTbf5gwlQIjctiZeh+eliVbPZzXblyOD1JI5QRP\n6JgvmY8Z9q/+0OorRbTmX006NFaVOM9QgZkPiKm1CzAKScUDK5XnYd5rvgue\nVX0p+AJTNOw20zVfFTjNtDNTLkPkzRR4V+lAPNlXsMs+9TecAnSAHTEG3/3m\n0Dn/vWphsW/Ju8EMzS8aCsr8x0nRJLt91hVKNOgtND+Yth2+bBDsIGkptA0T\nTDGSvMYnE56U2EU6b1qwDbJ24KRklr/EK8zB2btuoS1bk7INXWPxo8cLqDy7\n3IPOSDzlc69BtZeprcN2IYmV54u4qgKf2eWVflQAwl6EFAleP0OGjm4LJtsc\n1Vxn3QvELesyYrpwfv5T77Y5YtgWXaR/QNuDH+ipnCIl0+lLV5tTe+XZatog\nxOjcr6tsXq/TqpcLvGB5VhJe+gy++S6BswGqVOwDAZ5P37evzOjjdPFSusUI\nGKhZkHCbZA1KRy43dVhXSSJwZJbtGk4NNvIoBAXOjmZYa5gMGw5bZU75hmwt\niLsU\r\n=qbha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/shape":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/density":"5.0.0-canary.730c807a0.0","@material/checkbox":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/elevation":"5.0.0-canary.730c807a0.0","@material/typography":"5.0.0-canary.730c807a0.0","@material/touch-target":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.730c807a0.0_1578435687369_0.9162885300699388","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/chips","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.2213152cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15a16b0f91ea6a3647b5ea5c755fbbf01e3b36e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.2213152cd.0.tgz","fileCount":53,"integrity":"sha512-U0+Xyc7sXP8XSkDvjrkrRHB6KGj9qnzuvbXvMjXT38XvQFu8KUK/kL+PmdIPa+n4ghefaC6wdQzre62qFlKoIQ==","signatures":[{"sig":"MEUCIQCr9jq247BMQRfeAGJ0C6CAdHRNxQ+3E5Bc6lheolb6tQIgGfWsCIzr5Ay6LRJh7KxGflAPNe0MDGeFQe2jnO7SUhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/mCRA9TVsSAnZWagAAPSMP/A9bFBX++90iltNseO6t\n6y+V4fbve9e+0/Xm0LrwRRsyN7YG/LCBmcnKZ33WJOYk5aZX+rXTb/ojJJh/\nYLckZyhH8hIZNi15Ua8nRWksUDVK216Dzn2bAonY1yfrVrKIeZmI+sawu0Ji\npGXORBkK72iXOBJS6GefMxd5ELjHMPvbvNIcpNoOtIxRLHfBjcZ2Izjst7ry\n3F57dfn4sQMOaPSB4reFxWh3kNU08cFWalz83zE8RlKhkjPJ/1uJafC7orH1\nnOSFW+PaiDTZXNWBsvexCEX1QyUtPiQpEFJZ/tcNxXHpt0QLpZmWNe8N+Bge\nRNsmYKeUmgGmDs0CCfNYgaKbBGrzBUM9MW7jpzC3EUgeOs1n7XCFDW0KdQrD\nW6p3c9Nhdh7RgE5uqOfev4raQt3K5wwSt6HnUCLZ+QsUmoWPha2idtcY+FqD\nlI1xeHC3HMY9J05NcVJhGLv+6GS31MOmw1+OqAcmvu8qhi+WlnSHJH1+LQ4g\n0nSr8TLgWoU/K48AM9h86q9EdW6/kML1PCCqMatjsTFcrO9gAIUX/QmFirca\n8gymlrOiH6d1sDCbRYblPf3V+CrYJm/rO8myzxe+M0YZ9iGvFz+30aHIocdx\nulQo/tJcRcjhz/3K7TklOxjYMlM83f/qy6fO5XYcNeyQA3oL9Ozno8lrHhfK\nGuRg\r\n=rb3M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/shape":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/density":"5.0.0-canary.2213152cd.0","@material/checkbox":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/elevation":"5.0.0-canary.2213152cd.0","@material/typography":"5.0.0-canary.2213152cd.0","@material/touch-target":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.2213152cd.0_1578504166495_0.18135707595412454","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/chips","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.5750f7169.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3accf4c45c0e0f84abadfd9cb04d56a16e981a91","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.5750f7169.0.tgz","fileCount":53,"integrity":"sha512-Jz0COXRzoIOKZnfOgdg2/cbiivCw/L7OGyVPwajWP2gcfqLW3iI3aFTO48IUCb5eI9CziwgkaV2PkF7WtATEQA==","signatures":[{"sig":"MEUCIQCkOqt7dyHDbtSITsZ5iung12+Lu5fThH4kfdlz6u2kfgIgFQUxdeshKQXPdUoVGiZVpBJ7P5HHBxs9FKtTSY0EfRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhgPCRA9TVsSAnZWagAAEb0P/2mEclFfClvMEPdkNlJi\nEPqdkWhE/Dazbcirm0oIZnkH/v+x4gV8lFphtC4STL2XW6/9zqNrqJ8WTDvA\nonmOtxAE+0sjxNZwa3nPrypzPtXb82uqLzOo2A4Dd7WQEZdKgh0Je3RQa/Zw\nK9xhC8o2VGOcV7pdhjmEd9Jpj9L6BXNzNzX87p/LWtcdEjHTw6835/nNFjgh\nThGgdKHSyy+zF5bl82Hz+FdbtwRLe8bPQYBSwCoLPdyhwuRwzXyHdTyr9YOt\nlIKaibHTlxxYmn+3NzGjWGgVJ+LCZtCaGYdfDO7cTWbg43+iFdqTowgSR/Wq\nenlDD8QlQaq8wrX2kMb1J+o+tAXY8GT6taynxvP5GtV79N5m4hC/LYEbhYWI\n7QekT6NWz3lSKjambAUNnXhcQ3yLz3FcfYwpR2HpRvzWIJZDahV71m46hciR\n4KsIsk1TJRD/kFAR6yt1nHtqSQzEbWq6h4iSaVKkmKRue3jIfiXxMSFETBDu\nv59opd5OkrIntO6dmEgJXNjDBh6Rzwl7vMbLFJjWoFpLM6EOMfGXaf0Z6v1s\n8OcXlLUP2PvwDYlzxnaQKJ5wp/za6DQM+orFIZC5lwG09GxvztFQTFUfYFCp\nIax+NvgBqX8y9xmJdim8LiRGAvQNTPI344ywoTuJ/O2GWGte9vCj4I2O1APo\ntQ2/\r\n=vXVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/shape":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/density":"5.0.0-canary.5750f7169.0","@material/checkbox":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/elevation":"5.0.0-canary.5750f7169.0","@material/typography":"5.0.0-canary.5750f7169.0","@material/touch-target":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.5750f7169.0_1578506255293_0.3705380844091737","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/chips","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c662ee7c58a54183521d55b6a52e9469666ac4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.f7abc7a43.0.tgz","fileCount":53,"integrity":"sha512-jVvheoFtYJW3onFsgIY+va6eB1dwsIa9Wr7VQgtykE05l5aA2RXbNI3K/JRS/VKuGtJPPb7KLEcS8TLs4AgfSQ==","signatures":[{"sig":"MEUCIQDrTtg5ImoweWfbjTvfjuFxFdmziKkpmiXLjwksFBMuqAIgGaBIxAir9Ldc+g1b0rs+ZDxiQdDyuE3EYYx9QHKU20k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9QCRA9TVsSAnZWagAA5QUP/2yJDg2pvzOYJ44ZP1q/\nD7DmJW7Hw/hIBPpqFJf21uJ3SpuHyVVp1mrSBuoeSFIJC4pAyLYjzthX5p6q\n2hmSGGMXxy3+o4GA8Z4o/5A21+06U3R4gtuJR7tJlpcvH4UeNw3xsMKbBT5j\nk4UdQHs7qFWH0ONc4/TML2hXvKhiV9kzyLxOS1Kozv8tZ9uisGmRTAZQUvN4\ngcWDa3K5yFPB6NjyJbMfVHSGz0siVFeNFqlnRv37vFwzNl0tllmjOO5FAzjs\nu7EwFhQAqje/DT/THem3NWgejOYO1B3CQJ4PA9DgQ6NEX8G5LMP6ez8I0sI+\na89VlSsbqDHG+9XqFrRDdQiZaTlsC/3YAxI2UvRaGyCREr+7Z20utTbyXoUr\n+nv8Sz8h5/wbdAAu7bKs9rp7+jtrn4+3bb3PPztNwNxBSIVHjOfKadgaXiv1\n5y9kwnJCBCjwNt1Iq1tydZHzCiK9my+Wq9YuBB/NQB9jWjp74/UCdjUKRT59\n0dwAePSj1Pm9Lc30Wnls/xB7zuISbf/y3JIiS7ehhycJiMmuoPyznKPV4kp/\n8UkZPEwAksf3rYiZE/m3c7j1HAR3AWMhJLYwUxDZtIQT6tJJs9m8mNVT/QPD\nPKEHp6gkgIDNgbDZrrjCD6PM3rkTuX5E9BYXPQCVpGF5mnNLDRAw76w67cyC\niycl\r\n=bk53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/shape":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/density":"5.0.0-canary.f7abc7a43.0","@material/checkbox":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/elevation":"5.0.0-canary.f7abc7a43.0","@material/typography":"5.0.0-canary.f7abc7a43.0","@material/touch-target":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.f7abc7a43.0_1578508111765_0.13096003752818675","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/chips","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09fcc66f4df0225a141b475da30eda001ca99d6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.bf7b4a061.0.tgz","fileCount":53,"integrity":"sha512-79OTEFnS4uqiowjMKQ1B52w+52y6l5ZvLvqLZzgRs7NEROGzSWeJ4KVOC2X0JN3B1KO+F22RzhUU5HsmJiuLUw==","signatures":[{"sig":"MEUCIQCgI3MLLTFVSw+JAU1eao8q5keYTHHxMVlIiNPi8kVFhgIgNZziOYCkRlf0A3uFgwYnctiAtA3EDISNPY6HfXnvfNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiKDCRA9TVsSAnZWagAAzowP/2P+TYN+50rjiiJQDgZb\n7sNRsm0Jn/PmiCVVrhaAZFNWHe2kR/ix6sl40nEo59ReIQZ1oUi0JXuyxLmc\nY4haDBCfCJE30zGcJhnw5DuoDbuxzJhiOur2cWrrJwk24RYTHpa86sF6pgbV\nSkJ1fVoCuBAwqVp7j/UCGZB4WqG4gppz+P463PTrivT04MKKMgAtitvZM95+\nXaPxJGFnWTJSm3S2bwqLe6QyVZWh1oqHgpTABxBVdgL7iAmZ92Utv1f0pz3e\n8sq0kFzBG6bGMsUsdmR3RpOEuEyFcxZe+h5O4vQqcFCR5V0MOz9lV4+4w3E8\nmwoAFIATgKVgnEzm7ET2QUl/Zk9qMjIYm1LU1rQ/yebHMhuv4bt4c9nnqL5n\n1syUyimRnokYd9a8IU7anMU7JhwR5IAh2nsWhYmxLKHFgti5aZjWXU6Vfm90\nUKbp+BAk1UZnKR0J1Au3aBnw4EaFGuUtW6M5bdg3PiLVndTwf4kNbDm1HOB/\nxx0VSDy28jANyzl7ayOomrCEmF9qxtgHpWWLFb2S9/YqUapwbt/z443eicT7\nM+wuAZxqXPfZFskK4HDK+Mn/la2DJVjCTFcvFBU9uZOhvYRWi/xMWCC3/Vce\nhHJhXzUTBH7GzGKGzUSb0q7WRHs0AikfiZeOb7KrCs9xqW68JTW/Y033TaRc\nYQPv\r\n=x1sI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/shape":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/density":"5.0.0-canary.bf7b4a061.0","@material/checkbox":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/elevation":"5.0.0-canary.bf7b4a061.0","@material/typography":"5.0.0-canary.bf7b4a061.0","@material/touch-target":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.bf7b4a061.0_1578508930859_0.30373842083842906","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/chips","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.784fa7903.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c696392503df8ed0f4e1777f73605c3fea2ca0b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.784fa7903.0.tgz","fileCount":53,"integrity":"sha512-8h8XQf6oJLAYQ04N+5S50u9yCN89VqhmQR0CleUGD9Zjqg93Q04BVe31VJRjGixg+5lGWFR6YuZKWnrWrJJljA==","signatures":[{"sig":"MEUCIQCWee9zUzQozfNQXFf6Cqta9LGzMyWjKMmTzDCpSHUzTQIgNCGJFvrj/IrpxCwr5r99cRvdHzig3N5WYXKqhiSVFC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFik+CRA9TVsSAnZWagAAm1YP/jolHtCD8PUgJjCydXL9\n8qV83U0tOcueBV8ec25ou+0mrB1MqwvvEJbwYdTLkWOhhrH1Nd7U/TgzUVfY\nb5ykgaSc8YM5CbfOwiY8jQDe+NMRbze/tUQwp7oPwFGZBU3P7aRjnJNE52Ge\nFcd6zObLZj9QgxAyDin7YFfJ7KMFKagqpCtTcKS2d3MvAj5KpxYTjpkBqzdl\nH38u6Z53jpybKm1Piknc6jkv9Hjz/8ISh8YXHROudhkCTP37JWxE1xKTo3qB\nmycNbbe5z7H92RpvuFe19FSsknQVX/NVKPbeb5UX5Gko0wv1gq8EuXOxjfX2\nBVpbWr8B5vZSA1u9MWQPGX/9X8EnKZR7Vb3z+Y6/iSBp3f9mwB9VJpxpnPPG\nHQund7B1SVQuZ+JGL63aes4ymHVB4f+RO51EjA3CE6lt97y94fynvV0HxN9M\ndoCQEejdxbkieQejzeuVezMgWwLwnNe+AtSrg6AEwo33JkSaad3FYvjbqHvO\nuvrvLA9rYPKY1gJwgw/ap4Szmx+KHIaN7ws5desNLPGKYFHGQZ9vHeskUbGJ\n4QnFy9WGWsDamuq09XiV44oSvNBhQQ/JKnDMV45TX1Yt20Oz27He3xYdB4RO\neAEKRa1tA9HU5RXlXt4VegHFS/jQML40RElYfuoE7LAphzFdF4k49Mf1LlyJ\nU4EU\r\n=BLXg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/shape":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/density":"5.0.0-canary.784fa7903.0","@material/checkbox":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/elevation":"5.0.0-canary.784fa7903.0","@material/typography":"5.0.0-canary.784fa7903.0","@material/touch-target":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.784fa7903.0_1578510654308_0.8689313373296232","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/chips","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.823c050ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a5fa0563cb25e2e6767094ed7221098c61431a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.823c050ba.0.tgz","fileCount":53,"integrity":"sha512-iq09s0sTG9IizTJzpLornKTWJiFnCL9KcHNmJbijHNGAsAD5ZMo04SvqYxZ3P/PqpNnhdyevaSe47dU9zlTj5g==","signatures":[{"sig":"MEQCIBLvVycr88rHy93MM7AHuLTbKimHh/8E8TsQjUw5mjTnAiB5xrYDuHbDv9KEVZgdJb41sPV1klpyk39Ng9LpJN2m1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdzCRA9TVsSAnZWagAAJT0P/j90d45ZdTnctY7Hoy4q\nXTTn1MYrcA0efzEUWuEtoGRbBIfZDWgANlBcy85GOq3lTUP7NM3jNSTS3Rzr\nfaPZ+o33V2T4g9P5wtuIujEoeoGKh9SHsB//SJjJyXERczQT2/M4SZJjEKjU\nxfitCooBd6t5N7pF6LaYPCGhdeVm2DwuBs6H9RwWr9I3aQfJorYfRYXkYWGo\n+fcKQlWxKZizSag0Q8G8XOtvRsg3Ks7oezoqlAClWcBMHxWAH10h7SuTsq8F\n7EQaCIqq/wmc92kG5/JMjPU24Tk5Z4HQWQcsEneXj9BIJWTdfhHQMBdjy+i4\nK8s0phRlv1hNYIE+6VbCmrpNCjNbR/UtmsgbDY9hTTDU8XJCdufsua2/upNs\nazEJ73Ge4+Mh/RPBkrnQrXyGNWMDJxHMJkUQ+6hUvW/1Ihi8diuI8w3ALOAy\nX/D4LT3LmB3QAkDW73CApfNHB+M1CND3Y6cmY0Fc7PPl/Z0hEOCB2WQIC5d3\n+9i7jIStCXg/RKh4Ihxx2oX8K1z1LqrTEthkV3I1f7JGLY+Vds3UW4o1qbGy\nRAkSVni6lOnpYnz7gAmFtBwFbElL+aMIcJ3i+J7cR56dHw+ojSy6YeRZcU6u\nb8TgcumN9rYBibNiaY7JshVEg2kGYbndEyzu44tpvN1D/ix5Lh4Yxo0986HA\nPnBX\r\n=c2j4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/shape":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/density":"5.0.0-canary.823c050ba.0","@material/checkbox":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/elevation":"5.0.0-canary.823c050ba.0","@material/typography":"5.0.0-canary.823c050ba.0","@material/touch-target":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.823c050ba.0_1578514290749_0.671011060635506","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/chips","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.70c708dee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f84b2fd21fff7c3eb44d8ee310d06119155ea667","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.70c708dee.0.tgz","fileCount":53,"integrity":"sha512-r+CjIoZ92xaY4ZB3nmMHBJ/zm9leMBHEtNq+z2MbFftAslHTA/721hZQ+6NOanrfiK6+fGYndOSGwLhG300F5g==","signatures":[{"sig":"MEUCIBHKI6ZOGObUG3+Ts8q9WLnb3Uv7yTZ4FApQaWRbeJlHAiEAwGOT+g2RhL6P/QqJL0062tlTbGBlpoxU6bd8LM+5yWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjogCRA9TVsSAnZWagAA3d0P/1EgSX/tIycjtkn/fuPa\nt4Hg1HJMX7GNcjpnHyt8RYWbP6Mdk+vOQXvxkV6OXQSVi+6gcsKtAsPB79FY\nvHpMzvM98BI7quswt05Ke1W2B1Gh0hlzCh14QmGRWefZBYDIkQlpA8XuM0cB\nviP9LiCKD5CUsRHDIEcDvoMW06P/sflvqoIOYW4hM453MFs4MefGg1evTfsC\nuA64qFb6Ae6blmOJj1gmO8wtKy04DA/AzefKk1a24edzdYh7RZhYnBdHm3u0\nU9GX/OUs0SRw573dMbjxS0C8iCh061DBBjIVyXBgRAqe7tLR10GnimAJXFwx\nZGT+2K7DTjGqrQouNYA23PuzlI4kRX92jx6hnGNk1D1b+eoPkS84DXQr7ZwT\nKKlZkUOlbQWGNs369czV0eznIMA/ZtA2HcuDIueTmdMhaJqe3e8Eg8mg56mC\nNM7aCYzx7lmbMbDGu2nffuhYaWfjYwSAyX3KdLVU+lq+ya1YTFZNWkqlPVdy\n6TpkPP8ayXuL4W7Yy6ee1jQ6GMIIhTBkdVb5mkz1/gNzkhN3JVy4tyXlrdhi\nRUWSEK9EsV+SSd5DJtO8GPpk6NifyO8QgJ2cUNvE1z0jnm1whJaQ0IL8JoK2\ns6AUwZC9hlN/BKbrNvbAWs5ddkHA1k9MQRJWyDSKz73541JuTVN9Pu0GcaOv\n1iNM\r\n=Ykt+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/shape":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/density":"5.0.0-canary.70c708dee.0","@material/checkbox":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/elevation":"5.0.0-canary.70c708dee.0","@material/typography":"5.0.0-canary.70c708dee.0","@material/touch-target":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.70c708dee.0_1578514975823_0.3188494898681884","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/chips","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c700eaf64a9ad27f9185334de77a2d68212cd0c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":53,"integrity":"sha512-Ogrf4ViXhrWdwM/mw/ew8ZLIEF71l/If+d9pqocOJhv9lZ55P+xpU3Vmq/Gmh90mCKMv8os/X0pm03JfQKzsag==","signatures":[{"sig":"MEUCIHEvTsRMxhCUqKtk51aNs+tGCiKLEI5GfoUjZsJocIqWAiEA5/1WN647bA5MfOtS6gfTwhGVMpou9xHuPWdv/qAvynU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzyCRA9TVsSAnZWagAAFEIP/2XS4x2wRVKc2tDoAD69\n9+CNHYcs0TCXI1c9XOlyAKsJ9qm2XsTtHYoLmfQqesT7ZmNOfKdGC5snZSiA\nWcPb5jejbYhDnn8OK2a/zpLqJ2h/LAJsqeM6A5pbisUliTJOE0oft57mrtac\nbW87FF17MYxYsLMY+5yXalAHzNIJwUFkq+ZCEcoL46W7WpGZLRbNKVYa0EV5\nPkuq5YlOxqucXteYt/DpdDUu6FzLjvhMLkcYeUpArUwj8GK2jaZnCGX9rb5E\nrtfZo5RxbBn0F5FKP1WGJMJoI/12QVxhLT4Q0TmezO1VK+JMMisHbAiXRdfp\nc99/+KT+NVR5sRymV2qhQIgQmQOfM7M0eNtNiJ6unvWLOJo3whfuBUHjs5I3\nU0C0czer3TwwSUJRR0neaSAQkPJDFINM+NMvavivx0SgTB7Sq+jKbXbrsOpm\nHHFO/a1pveRXKZvSimLUXK4/V0iZl2HA2r0g4Y+ZVOLHOt+8XFBTzwTguh6R\njpJ68lRGojtEleVJ35lydS/Xv0HepgClP2eJ4iM7lSfIpUy3Nam18O4T+dTa\n4cYpG/WxitOqRqX/UXhL+ARuUsExkkRri0PxGtqVIt+tK0om7gSKFmfrlr/j\n49czQ9661JK4HxjPqLUja0dzOuqcEAeFvv+9bWGHc4dV5BRyAzmUBmfLCkQj\ntPdd\r\n=nJx0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/shape":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/density":"5.0.0-canary.5ed9d13d0.0","@material/checkbox":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/elevation":"5.0.0-canary.5ed9d13d0.0","@material/typography":"5.0.0-canary.5ed9d13d0.0","@material/touch-target":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.5ed9d13d0.0_1578519793260_0.05829144294686461","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/chips","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6ea24267a6076fa8e689c932d17c3ec5275047b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.4819cc7e5.0.tgz","fileCount":53,"integrity":"sha512-GKJYkvFVq6d2vI7t6yJMhQZmfaJ5SYQsP7wPemEruESCVoWzABPvtq2jTwGXmIMDRvkvJ63nae5iNm6Y/f2mbQ==","signatures":[{"sig":"MEUCIQDPZXUin2dsNalDfWZPfGyh7BqH/UfIjek4KzrTKONajwIgcuct8txgVdUqEuNYhn4CjCahXE3YcVf9tPl1O1m3eWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCgCRA9TVsSAnZWagAAF1cP/RSzljyLlaS5rWdHrmCH\np5hFUsMfhwcObNP/Zcs7iaicjzBzdw859ieB4OWFhXvr3Zh2wQuw2rgOjeUX\n+K5uuwgKRlMguqtXINFuv6pWcyFpzOvpAlZGOzCBSwsSe5MqnZwriuZhSPg0\nCJ/ONEi/cmNT0VFMnM9WeXQZxgi8kX62WrOtGwN/0LJhTMdUG+JrE4dA0PHL\nIiYKTCqwTUawf/27D5YDnkwm24QLd9N2LODE29TxwaR5L+cxNQVqaWT7Y1Jo\nPxNpfl4/Q8lqhs8w8ItmX0jMekINtMvg6d/79zY/GqLl9dgnnYg9UXWi1hZT\nQvD+iMP0kYLxdTcotcFVa0S7Vjlk4nKMIYSos9FFOeLblvNf6gAxAz3QHcH3\ntV99b9XFxYxyP8338kF5WknVHtMJo9g3sSwqeXjMquyluL1f/FMB6x2BSMJu\niL0/c74EiuM2sqyH/vuVq+gwODvepCxpu/VDle87ppUP9Fg1CiRtEgD2NiYt\newo7oPa8IVdPTJh0sZJtAFuOrxSbYlgHewZC090dMfckPpFXShVgsvGGOTY7\nNqX1mLuRGrl9BwUXdis0/4SERxmYpCq4olf5KUk7DIvPWLyTdCxpx0Ushp+4\n/mdm2ckF09djflvFGu/kn7ThplBh7TZuzNtVf0C425eQqhJX0gXi0IsMF3cB\nBKZM\r\n=iqc+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/shape":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/density":"5.0.0-canary.4819cc7e5.0","@material/checkbox":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/elevation":"5.0.0-canary.4819cc7e5.0","@material/typography":"5.0.0-canary.4819cc7e5.0","@material/touch-target":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.4819cc7e5.0_1578520736174_0.46015570103454984","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/chips","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ecbfd4c6bee5963302dc4f820185ca120d41d4d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":53,"integrity":"sha512-FxKOxbcSq/b3yzMyBAWac/OOVCn15+15vYfYcYI4TZgRNjbksfuCrW1vwAeJNzhiiJv7EHVteiVu9IRktiERJA==","signatures":[{"sig":"MEUCIAHZ8qpZUCO5jjb0CuTJTifrpOeU1Xk/XKs2njCGwdxHAiEA5DMWEBuc6MVJOY+Vo1TSjd6HP9wnV/PafaZ+pDHb/kY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTjCRA9TVsSAnZWagAA2CEQAJU0lkxN0sm+1ikfKkWt\n7x/apXPF4ThvhrMGhjgLeARRMYfuO5uPpq7vZG+5GZ2KzgLHi8JeY/r2Gle6\nHx7FGsXrQPCUgThKRjGk5NDFsfUYmZictWCc9ihrYrXoV2cec2ZPF4Hy9Y4C\nFUS6xxbc0cCnHntaNiDcOWmHMfgmng6AZ9NzMOaiVkpOeuRZM879BeR1f2e4\nASnTDDGX0sf+CFroLafPz/sO11yMu6YCyDM3XPI7iIs79bEWR2UCJSKJnZAF\nKXWgKzX8bABjj6WARWJ7Hji4VqHjm2/IPVB4ikzGxoqsHaAceOmn8mYOt664\nr4zEovBkL3GQW4wrtAiBXt7Wj6wOeCGc3ThrOFWlOegAKvyUXIbkMy7JrOEU\n72l2nEyE/J1xqbkfF7vD2UwccxEx/heUoTN+vuI3UAxznTdVr0M5jgp78tUx\nRKTGYdvam8GrmZUDdszfLe97SnV+SrnmPTvy72HF9pUYnYGXbTAsxrrTApwz\nB9eiri82lvNiaf9MKqvm5iAX9SfWVsEPMLUfobQZXcOD5rXyXD6FG5V0U4d4\nFlpdz8MtVNeh/RoHAfTxNvy3M7gUo3uZ4utqwk98InFFoVWRAQGyPUtuh8Cr\n918zEtAohemPUaZalgg1w7bMrhndnSKfbW60gbX7WfRQlLivu2uUYbJZhQ8P\nei1v\r\n=N75v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/shape":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/density":"5.0.0-canary.fe3ffd2c3.0","@material/checkbox":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/elevation":"5.0.0-canary.fe3ffd2c3.0","@material/typography":"5.0.0-canary.fe3ffd2c3.0","@material/touch-target":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.fe3ffd2c3.0_1578521826504_0.01873582522588979","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/chips","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.c0e850090.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"794a8a7377e08f1ea21f23bcb6c450de436a10ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.c0e850090.0.tgz","fileCount":53,"integrity":"sha512-QRNMKXpVi77kD5CxtFFm+RCfHUlI2Ee6lk6vrqwG28uUwJz4hWOofEp++GmVqOzeOf41Va3ECuVIPYJAollOVA==","signatures":[{"sig":"MEQCIFdVzQHb8Jpqt9GuaZjSEyqKiPwynTY5SlzpccL3TVJRAiBM0iaKMAv9PrhLOW9DBg9zDm2o17t+3fXA+PB5lLp5jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZvCRA9TVsSAnZWagAA9Z0P/3beGD7X/0QBlh1BbklW\nnT0yEQeHvfGlbqG1PxN1TDDEoK6tmH+4tkHml6Ry3GPH7jctf1fq6P4mbXz2\nHvMVNczVLSQeXl6ixcA4nNo61/gLsCpFSDu4CCHOmEvTNOJuWVlO3TD/sqET\nJ/cpVkY3ZdWLCn1Gn9R8K86zJrvjikV+MiNvXhF29/kz7rKYdOo4ObIC9aEJ\n20eUtJHPpb04tgUcrh805OlfW4SiWRdoM8uAU/coOJwjLoRV09w+r+dwPYkS\nzxKbkLNzuKkX5K1plMdksw5JPH00KFebugIvm5oXcweU/hNfBbAwEhYrU6MM\n1jOFhTqXyvEmBZCCr9bHLXj+JTb0SthgZH7s+SHuQFlz7SH90VBQsUFWSVNJ\nZJI/4Kr6WrCj7wOGvvSSmNMcZfQu40zO9LcRd/Y1BCmbL/xyAnD+b0C5hBrn\nXjD2QTbzr43CIYh/sRhdh/Yx+B8sS1WMhrHM0x18SfRkEPIKcx1aMQnfkeGb\ndsbbqR3yddcj/14MwBG+8OnVR4XtUs6Uq6O+vLmHDVr3thSpEpmHa8nMN169\n7WKl59VqecjG75A8KXP6Y+sgZFUvoYSf9V1w23dHK5vGgY22qzKF5tugxPtP\njyCuq9KJL/SfZ8Y7Dgq+9Hh2eR+H3nv5SBqklhnkYsyFAvts0A0F25OkfrFX\ngH12\r\n=Lgdo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/shape":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/density":"5.0.0-canary.c0e850090.0","@material/checkbox":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/elevation":"5.0.0-canary.c0e850090.0","@material/typography":"5.0.0-canary.c0e850090.0","@material/touch-target":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.c0e850090.0_1578522223045_0.03348318070969292","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/chips","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.615f86f38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f733dd0337747f43aab3a34a4cec4726f391b8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.615f86f38.0.tgz","fileCount":53,"integrity":"sha512-UAs63F8+RCI3W5thLpXKq7BgJcid3cg+1IC/cmn3a5k64OQZRUbHKxjEwZPQvflgFDUwYjwr7yTy28UJzG+hdA==","signatures":[{"sig":"MEYCIQD2+QmC+qA/6P+OdRL6bgDG6np1MlTltVVDPlHL3FarRQIhAPTP942h0725Qn+uPhc/38yHqAyFN8FtG8JpfWrxd7mb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlp3CRA9TVsSAnZWagAAAJIP/A14PWwIfEYnTYeZFDim\nXjsxlK8xLBM8+Pa8zLvsJGbF6PHdC8yF0i3Asb0I98RNvOhp34rXmJX4ldV+\nQ2DYhU5pyBzTWZGx0zOhiXmZviOaV8PnY435XleTmvBQaoVKPseW/B4h0E5e\nw5f9e9BwUnc8oXpyvymQzUeMRpwRMPuniMYlaicIfxBdlKnTGJOSclkdUNlP\nbOij+Ot5Zjwur/wCfVd53l8nkv+cG1gB29v6D9QAEsF1PKDx8+YgFy94QlfK\nxh9aCpKRyTFTzi9zWmt0rQpA2ghA23VHgR0vGyIXptHH0mvfzoiw2G8SWLuN\nv8RiLwFDi0Hw5ovNuJb1MbZY1vb0qqaj5FbsQQWfU0VLTkrT7MVTQVf/OdGA\nDavzX1khXUL1gfFuYczITaCfgdwBtMVI6q7lRJDgdVzXf+Dd+HIf/+B3q7Wk\nZAQPYtZYAIo47r1a6onwYyj1Lc9ru+OeBBWQaXYDE8JfAh070Br9l9C6nA7R\nYuye+tN8WbTzgEIdZFxYfGoGRKaVoMjxy0RBS9Qrew0hmqg99GH5Bwc93g3R\nwLMetiwk6fKl4kXcjjQS+VKxSUgKKOOag1Gb/9GKa/FZZj026SFRu4VMmV7B\nXJ5t1mjq2zMAYjds1E6pazlCHHrA+EgGMAY+1IB0uX/LbRgqhj1vJcA19dqS\nDknt\r\n=G69c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/shape":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/density":"5.0.0-canary.615f86f38.0","@material/checkbox":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/elevation":"5.0.0-canary.615f86f38.0","@material/typography":"5.0.0-canary.615f86f38.0","@material/touch-target":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.615f86f38.0_1578523254652_0.7653482309381616","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/chips","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.1eb032637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b32652a205db01d5029a8c4895b6c55843f84fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.1eb032637.0.tgz","fileCount":53,"integrity":"sha512-6zSb/vK/AQwVW7914/j8YUhromzSTaFUt0bngE/u0UV3d8A+ekCMsfeCrWB2AYHtPapTpZCrB3ycHsmtHrd7xg==","signatures":[{"sig":"MEQCIAH896cmfet6z94pkwPhavewmCgRVwodm4r20QckablrAiBxNjXjCrRvpRz4vxKiB+NI7Gs5MfIZjKVD76Y7jITXCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8VCRA9TVsSAnZWagAAHSMP/1jc7zmJ5oTarykuomCG\n6VrfBMSa1XXvEm6vDWTUexn4NWxq/OxBdg+INI1HYqBEdQ7S5NkQ9xPrQyS1\nCcXraI9QWtsANdi0ECDAUECvd+LvdogiA3O3f6UnCdsfsMxG6vBcLQJu9hos\nzI60o68Bwf44+JqGHgdeX0UNPwX9q9+pfMikKtSsXE8KwuHihm0M8hyCLsH6\nezwelsjefOaZ5Y0O2CeIfqXBbBamom+M41bIe/V5jTwcsAE4Bdt7qRYzZYbL\nzWdSLKiP4hKjKXXziSUx2luM3NqFyInRg4PCMpi0gErlKc9cmdkaZ+NEzXNa\na439qomwWyGBE9NrPOOZEe4iptNsOE1GdBL/K/ZlRkqMQPlgyP+vhkBrcfra\nv2B+lg1K4DhJWSPlttTqzlpS4M64z1qqZs7i0Z9EqebQMAZbLl6hncTdIA+H\nr8Zr+tQYfmKAU4X/x869Cciiek0yM+A9rJIvCGj0mAaXUhSkHZ9tBgeAvZDB\n4tdgAN6QI60yXuY6xEGW73C/VmFf27fFaoZyxWa39U1Rw7x2Z7bnp4P2Lh8e\n/cHiMp4/jLpzwWcMu535uhzBRdoTvZL6rxUv391SPCdXz8kSGCzUmoJV+sMb\ndNAHo0tQ/tqo4UrQ86WgZXIIq5eqQDmWjohSoKnibBYdbP+Xr5IqemKdi4vf\nGrwI\r\n=w476\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/shape":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/density":"5.0.0-canary.1eb032637.0","@material/checkbox":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/elevation":"5.0.0-canary.1eb032637.0","@material/typography":"5.0.0-canary.1eb032637.0","@material/touch-target":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.1eb032637.0_1578524437397_0.2290980610165907","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/chips","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"660e67668c7823d59e6ce23f6db9c0e5d83cd860","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":53,"integrity":"sha512-rDkN+uBGpnDPenBFHvn92balLGrKzI64l/lo2ALZZA7/F1ENc9Zs5wvkDHeWZ5Mn5E7fSpDWhFejPP5pVhw71w==","signatures":[{"sig":"MEQCIEVZZOKRy+xqLC3QJJUEdZieK8sdGNLa/3IbXWnbcsMYAiBfunV0kEsqYSeaGZgFuYOqtRtyUrJsZXSrvuaMAmMiTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl9HCRA9TVsSAnZWagAAnWAQAKExaghV17dXM9SZRZiE\nSnhnpZCMOTFDFfgQD/NRW9l1v1QNCOEPYLcXSZxjpdXbG/kCKGa8mSiCv0SF\nrMVaGaw6iwzeFwm1go7NXmbLz61/RtVaXYmDMDmhcv+4IJTbur53J3LWN99o\nWjzHl4mOhTwrhEhn98Cyt0zaZ9pHRhppVsajBYL2H+HYo61kWYBfXConHSEe\n1Ko0iz8C0P7Q+dOKqt/bD7g1mY62yOA/NxEFJiYmBqnS45KKiGkjiBksI9Nf\nVhEZFTsVr69CVWb2ExPQGdEK96m32dmCYkajn8bnuH4rqvCON4dcoSRyDVDU\nXkc5BgDx7OAOgSzodIXB6OZ1OlXnzmhCdGLPlti9rpboCRfifYg/PoZix057\nn2PtHLfqfbXLvjcXhJQlrbU/eCeQl9NtP9AVbrEY6sngfVniHigNvanbUl2a\nzoOXnE9c+Gct2Www66pigyAJol0UeSvcm2a0JRKws2emlSBW9Q+0cT/2L1GD\nuM/q3n4zbggS2jlCEx7A1wH3eZ38B/maRkHaKlHQNaEdunvwnV26QYX+IzGB\nsHXFWU+PlNviosy5W52GtMP8/J8gSOtWCeVElRbsbUIMj72oHEAztbpqefnl\ng7TP+BKbQ5Qx3HT9/vmvavJF2uzAPGzsV5yxZ5v8OejqWnU7OIrOvxuPe8QU\nzhAU\r\n=soEf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/shape":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/density":"5.0.0-canary.5bc5ebfea.0","@material/checkbox":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/elevation":"5.0.0-canary.5bc5ebfea.0","@material/typography":"5.0.0-canary.5bc5ebfea.0","@material/touch-target":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.5bc5ebfea.0_1578524487454_0.6982664596194161","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/chips","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.1112b8def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e5ad1d7434dc27febeb89920c5932c438704ffa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.1112b8def.0.tgz","fileCount":53,"integrity":"sha512-0XstFLD2wEEg2I9NCfgxbRGFEOCFlZqd3/2orUSMu2Y81oIJiDWcHFbf4D2y8NCwh22EPduIiumk/+lEzckYCw==","signatures":[{"sig":"MEQCICyXxq+FKFGZCeWGh2S5qLt8zA3XQYc3tqOnPf5ubM1nAiAZ6VZElQAVdBkk+hxHszsTKYj8SXYhoJdDdee0pZYPXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TsCRA9TVsSAnZWagAANksP/iaCFMtsOoXqBfInYtJW\nS75OuxM8c3Gu6uet8+bc5rYqUITFLAYhMu6sk0kMkY31GsGsi6OATHGNnfCp\nvQXglPVUXn6yK2ZzL9k23sVviCvcyavic8E6vhceie7Wvze4QpvjNpJN4QFs\nnLN4PaiYvuXd3U5U8Pmru4TcjNIeFTBOcAJ/OzItlpGzg9SP5p9Qe+JZlzao\n6r582iHpzf9VT5gx7pK6CoSiY4jx+PC82WO7uW8Sh3yVSv4fRaVhTMaeSAOU\nV1uA9hSSf0wvtwHhTs0GFERQEX/6JnPMpB3Rot2Lh90ksaSk9rG2qnTqX+P/\n266woARPABKX5c/6vyHd5SNppOn09N9w0XmHX1AOWi7t5HAA39aHLre2/4k2\n/OLg/+IwrzWlR7jQnI8UH20YotSXZN3qhpeuiI0KKiq9fTD74TNhJgjogf4H\n9I0MtJvx+NlF2fqk6NnAMIggHQfxsruhJs7Hl56+ygSKhafpRQBO4chH1UxC\nKRJhY37Y86Jbhxxn2zTsuYv5GN1fvP6KbZebzfcgqgNJgmkr6Gge9mV2Pgon\ntGCXSC+BhE6nxm6L6WAxUxsMGIKM3nJsfMVmLl+MvZlUTSQ5Eo8uhU4D+Lwx\nxWdWaFkfdXe7IAW2hcooo4oouNUUeyOWIMHu/LXM8aanajiO3z7RJCdyLasx\nDyBb\r\n=2idQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/shape":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/density":"5.0.0-canary.1112b8def.0","@material/checkbox":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/elevation":"5.0.0-canary.1112b8def.0","@material/typography":"5.0.0-canary.1112b8def.0","@material/touch-target":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.1112b8def.0_1578607852057_0.10414772442094744","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/chips","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.aab102017.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f43e932e8d73334fa184dfa2c17bf0a78ce1967b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.aab102017.0.tgz","fileCount":53,"integrity":"sha512-5PXTosBPClX/l6MjznwyJwzcCh0mjKBYb5bJB/G+sSsFYwkR9ns1jA4rBVfX6utUd5YELng4bHfJIzHu0aduEg==","signatures":[{"sig":"MEUCIEAaW1ASNNKTgdC9XH8ARmvF4YtmyJj+P+MneUTL+gf2AiEA7QdZlVL4N1YgGESm7S1YjAGyAWM21ye5Wk6vJg01mTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8GGCRA9TVsSAnZWagAASXsP/Ao7ecKiBv1BxU2C/LPW\n/Xkkr7B7USHYMyVjaEDGxcaJtVM1n3Jlip08wBZmMDxftdtq3tk4oTPSNQXE\n46v8AsxY1NxAH0ys/8W1/E5XeNLbIX/XXlb2BQfteNFWiDVyJIiZFx5l15WO\njIjxTCKlI4c6hFcbjJE9CjIilS14nofA66c3j1L+ItibbBEWTvkzTDqJt0CV\nhv7C93jfV0dmWbUW4w8yB9FgNd5yA/2iyIChOzZb3a+oIVY84Y+L/kvEbjjZ\nO2UTqpgu54h3pXGiXKkkPAuJbI0hpzsbi9kfIiQra3reBWg5mGhV88EVZdq0\nveTS85JYOppx9UgtgpwKE9BbHm8vLff87YRLMy/9YNIAdTSsTYMB+CjWZKS0\n4wiXIOe02LRMHF5xO2jwv5FIAP96EsMbl/4ToMFhZkAmxkqbFxDFLK2sJ6Af\neyRVUUIaobLexRsmQVOrLmTRbMz6G2rJ/+M5qvn6JJpNJqLHnNl1tnRqGIMe\n/4unj38ZkkMh1MSBKUoswlDC7fiw4WM5k76HkhnriIXtmhrrnb760w/RWIEG\n+Bb0TqRHPaULLqFZNm7H6/uBc3wYC4bELWB5TN7j5O8rHf6NjMryYW5vOnHt\nYf/y039HdpcxLf5ZHxqcSiSoja7ynF3+4GW59Vi8dC3x2tW9708k5TgbPFI/\nJsIp\r\n=swJb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/shape":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/density":"5.0.0-canary.aab102017.0","@material/checkbox":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/elevation":"5.0.0-canary.aab102017.0","@material/typography":"5.0.0-canary.aab102017.0","@material/touch-target":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.aab102017.0_1578615174249_0.6512018961734973","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/chips","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.426913342.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5be7dd1f6fafaf5627f7a99865e5a34d175111c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.426913342.0.tgz","fileCount":53,"integrity":"sha512-Uq/iRWZ0xd0Q1D4G8HQwL8dNoxgLCFnOaQ7++Os5T8viTDRSs5KjwKYWpEpkzFoI08/4ZK1y5ytXp4ydu+8mGA==","signatures":[{"sig":"MEYCIQDqTXumFCuXdi+RDC3TulzuKGffNGtCuwvVja5H6CwCpQIhAIYhYc1jaWxMClJRSMnnUNsqauzXEpFj+z0WwUM0b/Rc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cWCRA9TVsSAnZWagAARskP/0dULRGOduc+hhQJe8fI\nCop1TcVnhNkp+bckUMjCqsH7ZbVaofvK0d61KHk+T1/peTMbssT1FONGF0kc\npSaDuFXllQHSwfqAyVpjiyPkTZjLQludTCwCmsINhkAqBd17GOtUbzuzjxpM\nziP/ofVgZVPV9Tj8sG47BjAv4dzzfERTTF/GR5m+7fGalvDlZvsng0bLchJk\nXnLHXyJyHPANsSCudeUMB7VeQ62nL9qAFzhL/2pF/tbIBh0RSDXdYVn2+Tnr\n0dzemoW93s2WsX7yQsRfF0U9/iJ/NhIv2+MR+DctsdhfYrQBu6bdmf7n/BRX\nqmdIx2xjrn8Wigi6lcSlzqXLEpfcsCj2tu7pDdRSdzmP38T6uL3XPLDfnhE6\n0OJgBU0kVkW45yuZfqkX8RaYWIpY5cyYSjWewG4Ri+04Lxbs9zr4KztT+ua/\n86GwbhTZrYC6py611APtX2jma0loeKquVv7V3prK1ieoHqKoTDLgXivyw3a/\npDRamSiRxgH2wzFhoZjZUIJ8wv1yHup7GBC2IYe7N8QPR2LteYj+QH7QcfxH\nVazt8pgmsx3l4qlEcS4IbRI6oQ/dCJefwo/75NkCgNLeLgUEuG+EjiXEmuPd\nAG5xrM/XOczFyPqBz+p0ljBuxvJjSEW1CTUyG/U7YwwuKbgbimutdwYwBFJZ\nJvKm\r\n=6pdZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/shape":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/density":"5.0.0-canary.426913342.0","@material/checkbox":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/elevation":"5.0.0-canary.426913342.0","@material/typography":"5.0.0-canary.426913342.0","@material/touch-target":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.426913342.0_1578620693570_0.08756213715686911","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/chips","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20e8288be71327849daaae633803132b0bdd3738","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d4ea9a706.0.tgz","fileCount":53,"integrity":"sha512-6fUKcYgz+xa+RaOp5KCUNXIiPgrCROOW9C5YKKoe/y6KekNJH/08fUtgasc9jbj3HIu8q4Xtg6Q9Jwr9g+aj8A==","signatures":[{"sig":"MEYCIQDdtsWrMoBraalGR95yw77N9q06iZGuFzpfrF8TQyfdOgIhAJGyenwJ98qhH7ZI8kZR2vTTHNtdBOj27+sEepRvI45x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOoCRA9TVsSAnZWagAAvMsQAJFkLARBMX//Ex2kz/Bq\ngEBgeBefNlF8EkT36JC2Nb8+vCLNIJ81ZcjkTvvnysUs2oQvCxgxeEjllmaX\n3DE5KeByw8MwLyWKfg5N7nLtbn8E5XgrYrCS76Y6tkd6i3SOtws6kyPyudk5\nPu326R2BQdrtHfNgmewxtuUmr4+xrCq2R9+esA9ciXak8SW20bAS/Kqs3nkM\nfKE9swabCywqvfCzTQOuX88PVfTmMGGsS1hbctGGhGQNXmA/cE9Tra8jSaSC\nA2QOU53kV0PaA9HEwXwK8kbfYGOwuXJlb2MUUqsBHB1ihF2SGtmqV8/2mTxz\nKM0UayOxdLEGFaYn9JM1cOM7vdDUBPpRVTkPPsr4wLmpLuqvp13BEMgPRaum\nF3w+KOqaDBWbodBJQOyrPU3dcAvgM02+Zr/l2ujeCkIggdumsDyV366StgPn\nurtqgpn7+AjD4DlXt21WlbVfb/Fz+LdrvJJGLWMa6WMmEK3xfbuL2BY98xvR\n7DE/ezijOUvyXN+QAoVelO7OOM8wvsOafUqnoa3WWwRFIQhFfDHpm/4ipqV3\nD4WbE0lDezNgFfiVv2YNv/RJs+mbzhWXLcH+ZtaaMXWXlwBlsIWe7bgIPUSD\nHrF8dmBK3VnIkTsBXb/MjmafAW+AENCdmfo6NwcL1UCtDQrDQV1VxCfZtjSj\nXaYX\r\n=+FsB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/shape":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/density":"5.0.0-canary.d4ea9a706.0","@material/checkbox":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/elevation":"5.0.0-canary.d4ea9a706.0","@material/typography":"5.0.0-canary.d4ea9a706.0","@material/touch-target":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d4ea9a706.0_1578677159747_0.0418992953148174","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/chips","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"124a954acf1290d7a403dc6ad6c84d99d23a4208","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7d4ee2996.0.tgz","fileCount":53,"integrity":"sha512-stJDWGBVHmBme4FCLk3N5k34LXNVEOtvDNMDwv3zU083o6AvoaunOS9cnLo2yqMQHIkFYqgllsKUb1i7jcGcTw==","signatures":[{"sig":"MEUCIQCGQlGfT3/IBtS8csTezpf+75H/RGzNwDdDf/kIPLQ1WAIgNB2cMBwUeQxLn7GXiCg8CBADhQolM3OAiIhZrYxFUxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsICRA9TVsSAnZWagAAE94P/jlSZbJFxVEMs6NZ8f19\n60ulRgpFqpxesP3z+P1Zhh67RZp7mm/cFLimZKi5biIIyzlUC5PPxslPf4M3\nigVS/CZdeTn9JagOklmS2Inthf8XXzprM9qLD8erqTBJpmiotlq1pMNgDG0f\nb4KbJaDNgnOzN5SglzOJm98m0YRdmSjkYy9KlW7dsI6xSiBoEMZDEcIiMQ52\nd6Asd2s213YhhmoJlkS5cd3RfomPQtnKzmPIVn6MA6VA+5zVxHG8GvDDFOLS\nc3LFVw+/Ge+4Fi+r4HGg651cli05F9IvGuPa/62CygQVnU07QHU4u1A26Nxs\nH5p2ngW64xqFyDIJwAhBU4mdxu+VZ6gZt5Arw81y3GXzuzJX9FEAa09RYfbK\naLqzX42bYDCcsYgv8MOYI7xWaatXlcu5q3FriNjEn7nLOQg1OZC2LrLp3RCo\n8zb9rOIVD8qf7vBHXRaL4iJxVQ1c106pmR4rD88FkbouM4scVMO4IlHvbYaV\nYjsQSjDzi549SuyVoXGzt4hD0B2N6MHcSVimKWhFVODzJEOeiZ6F47Tc5BCo\ntjTnvBYzx750S8O9qPAcJhrIcKlC/kO9Oqf6IP9rkFy4iBAAE6I/rFVe3Drx\ni6aLYAeWcj32PW6I5cJ8CBqxJ3y7m57YCm2uDAxW9YmpruDqisjhXWsI6gO/\nzqxZ\r\n=DLhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/shape":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/density":"5.0.0-canary.7d4ee2996.0","@material/checkbox":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/elevation":"5.0.0-canary.7d4ee2996.0","@material/typography":"5.0.0-canary.7d4ee2996.0","@material/touch-target":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7d4ee2996.0_1578679048578_0.11307588733088503","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/chips","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"637e23db364545448efbb0cbd211a45fcbab8bd9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.981ec9b6f.0.tgz","fileCount":53,"integrity":"sha512-j0n8k354/p2vNmR56b/mWv3iLYt78RtYE7BOJTe9jNwBixMnCaiAc8PIHi7YOEmnqH16ZozYrQDPjHg+vS0giw==","signatures":[{"sig":"MEUCIQDswRGJ9xg1ohZHl4dbccukZn5/YTcLmfjVx4tv779qQgIgI1U+6geKzmCvUadOi9ewFto2mElKgr+4OU3qs5se79c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNA2CRA9TVsSAnZWagAA0y4P/j1iDyuAKt4Bl5lm6SXu\nVYtW5Owv7yhAXDLQ9/05p6Kz0e/MSF5CM3z5wr1/ouZL4VQGoE3ULRpacW7o\nbaAr2tfWqL4MHqVtXgNsr9GmAJuiafzABqwNdkDduq0pF8+M1pCTjJlLVKh6\nwnDXzAzJnUV9T8jd0t5BSNA70//cFRbhpZ3/l///2GgMV6zeSgBASZH97OjR\nRecTyeWq8XRAL8IQAer08rc492RlhsitzzDnUGvFggKR+MZUQhsxaz7pHs0Q\nGn64p/xQ0bLNMtmPWwcH0gi0N53A/oloFwqRZ1EIGH80iOhUSGdsGOpxpAci\ngI+KnQK0dCPZEU0B5j+IDYGjwMdc9hP1pd4TIvRq7eys1dcW+8+RCSJeZSAm\nmNHhRB5Ts3X2g3msNFgH3c3F/J0tLbSExiteJREWS0u5J0lBOFQMAfet6E7M\nUu9WnZ9QN1WdfeIK1WLwSV1AdowIXaIgfKXo9GAnLBuDgNgUWVCdXADdItql\nTBkc4koffNE2YendSB0i5NUCu2HlOpm012IuV5PHHaPxE3s3JxsPq167Vgf1\ne/hj2FFZvD0J/XkjqXwHYpzdhV3CxfbcFIK4oTx33qkyjze5wg7/3mHW5GiF\nxNZjuf4PqiyDAGbJ2bQUXzwmAq4C8yMFrXZhdNScywNyiwdGflS4eoBbz2wg\n0Rh0\r\n=qkIg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/shape":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/density":"5.0.0-canary.981ec9b6f.0","@material/checkbox":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/elevation":"5.0.0-canary.981ec9b6f.0","@material/typography":"5.0.0-canary.981ec9b6f.0","@material/touch-target":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.981ec9b6f.0_1578684470282_0.8423154724398885","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/chips","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.737da83fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50a5332acf93afbd814af3112e6f364a7ea2e6f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.737da83fc.0.tgz","fileCount":53,"integrity":"sha512-gqIIARpD50s0odsIzQ1Ds/z0Lkq9ga39hhkLxKU1HTVuWlFl/LlMzKBGug2NH6lHn0q94943IKfSqyByKndZoQ==","signatures":[{"sig":"MEQCIF6aDA4rKSLLtYp36KuD+MlUY5N8E80ufVD1l3aMEso/AiAmz9cXjtBoitOdhp8lZ7qNnZqAo/MdcO2FiYib/pJSDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpeCRA9TVsSAnZWagAAq7EP/iZOi9S5+9PALA9CBbN8\nDfh6VNhzlN2MS0MbekydHH/3DbcywKsfSWvFCD/l3Bl85Ox1N8iw3V8G6dYr\n/Vh5G97lntDbC3U3UMEpYErPEa09MtLP2X1VQt22fQhuLvH9qUK6AP1O4k0o\n4I62HBYdUPYL3sb+OQgCLSuttBu3CTa34L1vRpBRWChBs63rgQrJxFm0diKB\n/EnYI09/MOTV33i9D6EeQThvy5DbFtxYwyYhf55AUXv06qPKNCyc2dQZxUin\n8+pFN/eeXpJKrH08UTc/4NYoK6U2yCmEeKB/q2zpGaIdqg9FEupesHfwb+CJ\nIehy5N+gVFIx7q0y3YsQDtb2lvEXDVxE9l141ay7EP8OgqCC2+DXnsKageM8\nsk9/soFZlu06xBVOZwIqWke1p+sfWwD/QAyFYw+/1HldP3s+Cys3anawyPST\nRKlYwmu0Geuvhxtq2pCjJmBns2F39HO9n1AHlH0t88I59feJuYM+hE8klE3X\ntjZM1fuOLJwojsk8nMjVlom62DugwDTAwbTxqydUP3IJPC25MQlwZan14f7t\nnNJvdeRwCb9ULrWifMM2D0JC43Jg9aYOB0IcCfTOui1mEw4P8gf4iKmINRp7\nO3wjoJHqjEqbZIaBFJe6ejSXD8LTPEP/q3vFL9/Qjx0wX/LCl29QNf+TXHtU\nNE1F\r\n=dC79\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/shape":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/density":"5.0.0-canary.737da83fc.0","@material/checkbox":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/elevation":"5.0.0-canary.737da83fc.0","@material/typography":"5.0.0-canary.737da83fc.0","@material/touch-target":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.737da83fc.0_1578691166099_0.9392622760583933","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/chips","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"540272b79da63ef98554c3d7d4e7ce68c6f1d267","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.aca8e6c18.0.tgz","fileCount":53,"integrity":"sha512-VMT1WroiQX4Na1JzKUI4kvsItUSwSj4R9lS2rIHsrxqVIWc5KM1uRgxp+X0B4NKWMxGMT6zN1dg/nyAskrzlEg==","signatures":[{"sig":"MEUCIQCsLy+W90TzD0aV+vtYoSbTNZezDyeqVlqJshvM/H2ClQIgSvJWebidT7ZzPwZwg3P+i3IIpxTD9UFvgWdzYlyjxCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXxCRA9TVsSAnZWagAAxzYP/iqM2yusdVeOF36xzv4B\n7X5KtTkcfYcTRS0qHSJLKRpr8GJxyufxdPqgXRrDWfjoyb3ZTJgIIR2HqWbG\nFLs0jbP/pF9wAgndPqAe3SComU7D/lnm4oRCtKlLFJByFny/Q68c47me8W30\n0K3k3FzjqtJ7ZBGToSB7UF2282sEoeG2HL75wtv+Qm+Fko17AA6rovvgps7/\nESLKZ0Qu5Dqe4f2ucxC6ODqBkeSkQwg6LLsPCVkh+VJd1cnVoN6aYNT5KuM2\nqQ+happX1iHp5nsExCD2+hjXQ4NkpALBIs++loOsOZB4io88Vua1aOstQwwt\nqHGDRY7rUsG9zMPKApmlEpGPJMahLI/kAMKLrq5hNr7NG+7WYRco8qdPugYa\n9g69ILmCGPUOjWHuF8/h4RMaZ0xbFkLmTGW4w5jxY0GW2ZWRY+CTjan/xA6z\ngXKl4hiVdr/mIlFKH5Pnh9FhTO1yKMlSOyRKtNIrLsOu6vvSmUv7iY6CgTkq\ncmffPZ7YDWDRsqQUaVwHxKGTkb4AUZFSum9Ven84/mBg5d7SBup63VBPlH7Y\nXIig1XL+W+LzkYzcYsp4HvrXix8qoPRPGiJ1LXiuoZVg+JAcGYAJENmD8pkK\nTzZqK92B3005nkD60kmSCEihz2aVhQ9mgxPQQ6nI70Wfy4yTzGfbv3U6sbML\nh8vl\r\n=KN5m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/shape":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/density":"5.0.0-canary.aca8e6c18.0","@material/checkbox":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/elevation":"5.0.0-canary.aca8e6c18.0","@material/typography":"5.0.0-canary.aca8e6c18.0","@material/touch-target":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.aca8e6c18.0_1578943984693_0.8058717951159748","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/chips","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f5adc3e1989dab0194714f30236d0a50923280e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.c38d84e21.0.tgz","fileCount":53,"integrity":"sha512-6/mR1cVc4wKdlGfBhZTNXl+C5A6gguENFHzzk9xFfA2ZUe3P6td75Jcdr2oaKbOqlq+eUB8TAaiQV50dXTVPwA==","signatures":[{"sig":"MEUCIQDQioR3KIBc7piqHY/tQlwce9xAc1g68hZ9xYEcUlZRdwIgcMy5tthRZh9/EdA2kFlOXBClJVOgWDZSJyQZrwxW07M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOu8CRA9TVsSAnZWagAAYE0P/RuxkswHV1PiPmjtiYPw\nWAlL4W+oQFnwsZ88g7LKqc40VYC00wqS/0cnCelruMQlpRE3zGo8rijPrm3y\ndBcc+C5BcKEryoJVW5iVO3ZhMPyiX3u+OC3Xyoj/DepAU6fIDLhcNV/zPvMY\nND9JDP/osrw0gk5/apk2BDpdvHoLqCAdFTRFJzGHbog8lMIDG+DnvnivdZyG\n6LQTG4m6mb6uIWdNlh7CCgfAenMqggM7CoQKW7tC5bK6eFYaOp/nnJdN7K4T\nxtv+E1tWDlSENdeFSutaHKTCW7E1caJA+Xkj0XJH1okL/wN7PeGf+h82wcnV\nsF29iPXYEzs3soKfoqKBRNi6h9IWgOMN4/QCPfB90h5oo3KGKXGlaJ/piLzj\nmruoyVqX0N7v4zyN8j3OlBYggUIwKw6A5QfHum0VoKO79age8cuQgaJmu6Oa\nv+JBEKpI3d74h2nDN2wtvMRBTGmPFlZ+jMAMfHdfJsjHTr77ytvpfNJysuO8\nQNGaMoD1WrvC6B84Yjswb+AG/hHWE0Fw4Msh6Vuu+7SR3HMQDuk/DAYQzKTe\n5ngAZ/wLGX1/1dPvmH7+ox9BaJnUoTBv0TEzKiU65FiKq7gncFU8qs8c6ZJS\nOtFXS/hA7XcThy6wKw9k+yFPj2YrHmDXQTRbROqc7CyvuVKPm3jVMXxmADNC\niS3l\r\n=A7+m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/shape":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/density":"5.0.0-canary.c38d84e21.0","@material/checkbox":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/elevation":"5.0.0-canary.c38d84e21.0","@material/typography":"5.0.0-canary.c38d84e21.0","@material/touch-target":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.c38d84e21.0_1578953659827_0.6903853334603975","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/chips","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5a1cf4baf97759bc10e239c2c0e9f73b23ddb07","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a4db5fbad.0.tgz","fileCount":53,"integrity":"sha512-qMTnPiDDh3d4476Q8jxug0Y5PYELTdiKvrBjr9FwwVeLKkOo6UNT2OBYCshUhb2IJrCgBVcSKSMcrpLcInaBiQ==","signatures":[{"sig":"MEYCIQCRZPB2oeiqNTMkQlgm7n0CzV8NZA5byus7wPKWFndiXQIhAIJgykty2fJbd8NRfXi6yVc+FDYq3WpkFqOaHBGUYORa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRcCRA9TVsSAnZWagAAhGEP/0ntaqMntEuihTyy3PnO\nTYcpvFIhau1ADVOw/ZK47kTWNwD2cNzdEsWcDynwusCXM+sO2kFyuEiE2aRf\nQQ7uPLZ9YeQdpqDHriWk2NfBPN93l1L1cy6GS2rQgdg2kaV6TxqrAP6GGlCV\nRB9gXZR4aEdsYnLtJMgn5QQr4U39iOdcYxaxmASm+UGQsSeBtmqZO2mstvik\nLzkvO5ojjVyy057B/Tx2wFrp9i5Hi+N4WMdXkiJimZpDYEIXp6ov10aD47p4\niVadQ3Eh7wm8Ea8FuE9Gbp7OnLsxliHypXDZZb3a0Zt9Q4RgH9XjIaZAhj4/\nqC+vj5iG4oumbsjuDfo7d/tJFTwr7ZUMnndQrDHCahLr+WDgTmv48PpUKeO9\nrimkaz7ey+BxR4W/u0gwfmhGEB9qN1cN1BfIy/bGqeRXA4xWV2sI7FZCViCI\nKQPCiOG8zz8Y5mtY8mz98DukhO1w3WuYSbxqQTtklttmZU0L6Nu/H2xBP+yK\nONQuaLCm+RbYgk/bj87mSikmRzaYrR4kZZJdyLTku678PrRIWKMMGZfuDxOJ\n2QB3RtQ+Wa5n4SnhiqCecT50DXeInox6svtpf83sKPfmLxeukY5Np1og20QR\nplsiCNPNrK+GMVp/n1pVSqilXoNmTrF3m5vDP33y8IxQ1+M4bMP4K3+OP6GK\nnKRi\r\n=2YLN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/shape":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/density":"5.0.0-canary.a4db5fbad.0","@material/checkbox":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/elevation":"5.0.0-canary.a4db5fbad.0","@material/typography":"5.0.0-canary.a4db5fbad.0","@material/touch-target":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a4db5fbad.0_1578968155713_0.5950118642468079","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/chips","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.faa9af310.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79de51e0425b14f727dca7ee29aa3a7ae236fdca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.faa9af310.0.tgz","fileCount":58,"integrity":"sha512-0gK3RvQq2hVii7hXV/L8vaBW7hymalN9WvpR2czhCbit8fWLmGQhv2QUPQG1WExQQfhfet6tmXf6VYbczXTs2Q==","signatures":[{"sig":"MEYCIQDo5g2vcLtat94YT04A1msjXkl2xLZnUCGNfMEZrYmuRAIhAJ9NavOsho9ZSvKOC0XNgJXDEsNme/7hsuNjk0yl9Ovg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfImCRA9TVsSAnZWagAAtTwQAJW67aI2Ub9BMYVgyaPN\njow1HhvPWzEmyFA7nSgmFZ+evlvJNyI0mLshOk6bMMYuZmUHNF4vbqkPoyO3\nUZkp4jesJQTclvWKjYPQu7XECxV64IIi32zQhLbFlJpOEWbNsXlW3aOaktZt\n1fQG0za+ZfAAvOC+pQZpOn5JyXxEUFfE/9m5aIil6wA7ivaW0rY9I9LTM2SE\nuKh9TYWz6ofBkqA1CESE0gOXw/09w/wPqgHIagdA7lfPH+nScgdzDxkoj/YF\noziTr/7nTnyNvhrBQMMwJa2NhGMPmWRUyhEiWVy5rF3S7YIDkOHU48OFdfxU\nWLlhGL2/caPYs/kd7BQ5oX/JyPbrdd85OEm2LCQbCrvCCDa6BlnzNIjHWM1C\nYDO5xDTxIpmVSPR+OY1uB+ehqM9x0KT3FGZkJMOzJi/KNkqk++PCGrOwROLD\nuBEzMVvoDmcDTu8Y0/SW2FNZpOXvQYrDS3tIhrYZ6yTi5KI+AKDxBb7BXe/n\nmebgAXSgzQUIj//EZswWYV/4fmMk6igovCaGllFrcbisUvs3HkYpIa8KRX0W\noGi10yFsGhpe4uJAwX2ANBqTxYAjt/crWv8LwtS+SyG1U9oQ8LohGObOxDSe\nHHCwpwKeONc9PfB/0i9u6MOhQeR/wB2bXE2hp4khBoS2M3N7RAEzzMK9CaS8\nrFnI\r\n=lpzl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/shape":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/density":"5.0.0-canary.faa9af310.0","@material/checkbox":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/elevation":"5.0.0-canary.faa9af310.0","@material/typography":"5.0.0-canary.faa9af310.0","@material/touch-target":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.faa9af310.0_1579020838259_0.8205187298467431","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/chips","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.60354c577.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6130717878456314bf02fb7ba9a2779f9f2ba646","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.60354c577.0.tgz","fileCount":58,"integrity":"sha512-HzCvpEti319LmWt7KZg7rWcgfIwLJsqMS5OMKPoTnJIeeCIl3pkz3rHOM8ki4iLTfjxE6wMIyk42GPDbEovYgw==","signatures":[{"sig":"MEQCIF0QeXuWfOGnectdql1gsuapaXNFI+YLTZLsB6XYhlEbAiBxyjeCNZtLoVytoxdkxXfrxQF9o+WHo8jXeodYHWyx1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkTLCRA9TVsSAnZWagAA8gUP/R07uWrsNSCy9QgzqQpw\nEfrCl24xKXhrHqP/BL/CXZoej/IoZFHWDOnXHK5gT5rCbrUdPOZNoDcB8ghW\nmhr5OJqBAJ+lpHTgKRQY2gizUkg++s92I29PunRib/epIL9UdkSjJptWjXpt\nWdwaKhZDJSsSQebLgQR6s8yzHrIZKAt56wGgaejTjGZ7VXcYXhziNxSC588M\nIfjj14ni+ngEKTlCpyGnQQsAaj1CfJQmnXyohVEkyzKqdeCrGsqYDND3yw1o\nDVntN8X6p9jUSVuNOK0Po8B29Zli9IF3pcf7hA1V25rKpiengAvQ4Pd481je\nf7UkV7+KlNGXvQv+H8HnJRMqcHbjOFfXzOpoXQ9iLxBwdwak0WmIvF7CBsQs\nn2f8N/ap6iAX/7b8PPM0WbqfiOfwRt8HwrkZWfaUSSpPa2X4UGk2vrt/IrMk\nybykoUutoJjEbQzWcxezf2GMK2/T8+Rwb3NtckkONTPxgz9FZ6ayzTV1EJm4\n37w0/JexvMeepKwST6EtoxbSF3f0gI3y7ub2TX6v1qzCq6yZxEO/p0CQrDya\nMcvyxVAvg98JBcp06UWpqsz0WZHjIXeA8nxj/fHXME2QxmkzWfhxLisM0B6N\nSTO9etvEyitAPpSGHyNym0Rbk19VRSi3/+grUuETHrRuDc+HhRcfWMbC2T6t\niS+u\r\n=uFKP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/shape":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/density":"5.0.0-canary.60354c577.0","@material/checkbox":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/elevation":"5.0.0-canary.60354c577.0","@material/typography":"5.0.0-canary.60354c577.0","@material/touch-target":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.60354c577.0_1579041995428_0.9278893786527653","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/chips","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5decc8711127524df1fb68e87ba3688f99331142","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d07c78daa.0.tgz","fileCount":58,"integrity":"sha512-5A77rOYbEV5L35T7FjUfsctbgYwch02oRJRn/xt14mH/RHsuHJSwLWu2bNPPqxcYtWYqp6X5b326e3RH+z005g==","signatures":[{"sig":"MEQCIAFyXcxKT24EO/qHlDQMuagzyO4HnLutrGhPWTP3JbsiAiBEikRdezuaZB4P7iFcP3EHnrMnSwGRj7Rc5/iIyltsEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEyCRA9TVsSAnZWagAA9tQQAIbgH01S9BzmCXQyoCp3\nRqWKL0B/mVHB0IdV//Tu6+uCMYpsVdFYd7I4VMQ2rTmvUX7kQ2bncYWYq246\nWFN9Jkeu/P4+Eehdp0wGbnUG+9yLjhvPzZIlimGcz9nUiWmtdv8o4pAixggK\nwNr/UH3/HUJdhKNJzkr/t41vpoX5IQLWezlasJz3ahXTEsrURHfL+55TRkG+\nJ5Ht2Ztd3C5HfpEpEWY9+HzwGr28jQ97fvi+EBgEE/3d9qj6vG/2vmEBnFnR\nJb9xXpByMqz48st25IKT9kdq6T9EZKnDj68Iam7UKZKYk9oWOpB+3QUfHySm\nIFUZMVkFTXwC+ru6ylv+SK3I7+o+wdWb58aYEatyK8T7j9tirin9wrvXsEV+\nV4LN13fVl3zqM6U7u3iFO7viI+ihLGjebuipJOXDU7CCfLAdn1O94uxIpTsu\nqkaGTWlmMPX81kh0TxidM5mgflBYWYpPI0aBzrgPDs+c7bW/9TMqzbBIhL7M\nZtKUP2AxxtVKqkJXTtJqmOjzvkAnEF03l1YK4374WlDvF3y3P1aOuiGQPGXA\nFJYOVuZp4DtMUoTXMisse0jJcNADwTqMo3EB6UcExvOVeFErRwPyvPlqJBgg\nZMNJmW+0zGAtkrl5vmLxwr1upg+0/juCWBucH1blUlxyZaZJ+8H40LVkB+33\nXfQA\r\n=PGfJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/shape":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/density":"5.0.0-canary.d07c78daa.0","@material/checkbox":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/elevation":"5.0.0-canary.d07c78daa.0","@material/typography":"5.0.0-canary.d07c78daa.0","@material/touch-target":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d07c78daa.0_1579045170175_0.3499629751469351","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/chips","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b415f6bf46dd5a832812758dcc561a72badcbca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":58,"integrity":"sha512-2ntYaR1XD7U3W/6mmbqNbfILR1OoqGyTtRi6mMDMkgvbn+CULNhjvBhSZy/un2MYVVICnmZKyXxOWLNPi2sp0w==","signatures":[{"sig":"MEUCIEN3LLOs1gs+KIWfGNyNScXMqCGsdvXDINPbEfPMr9E3AiEA68BN4Zvl7l48BaB6YGnJxHJ06TVQzPCDlJJ8jVR4pcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5PCRA9TVsSAnZWagAAHDMP/inYvgGp50W5sciNZBRm\nNqaIWvK1Cut5720F9VjEWQ9rCLNtPuppHv1Fdtk0QkvoSHnC+9Ky+1as7x91\na9cJBxmRjYZtqETO6aN4/v30byT5eJ0PziSXfYLWYBqTyZjx49ybLPaRtlKr\n4VXAZnx2oUPsXoItuqRwgDSi4Y2eKIWssMJKlA4iDkrxul+7EF3DxSdq5/uS\nqzb2/cWtUP4eTJxV99ZKlfi6QyCpdF0xkyUGC/ATA9ojGcoqYb0AXa8bQiWx\nTskbkMjafdjLz9ECsdy1xB14uIkNC489PsdoGTl0e0MmdoeOiKkI7l3fUFjV\najQT5IX6/r2Dz1zgkrq6EtAoBFdrlbtiM3m3nH4YN3z98Yl/uz6KEUFRcUl8\nejA7iBSp5QUpzDnKYs6W2u5hfKm356APwB+5+U61RDqsDHnm4tWOf0QMoFtQ\nPs+0bjNX1iTH7kDMDoKkcBk6oYLYGHHQwv/tecnXvhJhH2l8WijFZmB0e6SG\nJs26OauDg0BRjh4i/2hioeOGs/C5ld3QTGSsXnoZfw+vfxHoUTtslCzjQrf5\n8/B6xPy+iBgo/IgWgN4QXwP25EkuS4Dl3fYeACChArr6y9TKKbnOAX/4U5g8\nhQuRL8W/qAZLr5tXU675gj+V34yfx5AvfH+JHoPgNkM906HNfbsm541+roy8\njZfe\r\n=Egfd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/shape":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/density":"5.0.0-canary.8ddd5c6dc.0","@material/checkbox":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/elevation":"5.0.0-canary.8ddd5c6dc.0","@material/typography":"5.0.0-canary.8ddd5c6dc.0","@material/touch-target":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.8ddd5c6dc.0_1579052622736_0.9784723309748442","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/chips","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a9511d870.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7890da8f7abfea3a8a934ae49690b6ccd6146061","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a9511d870.0.tgz","fileCount":58,"integrity":"sha512-y7MR8roB2ijkqP/Is0tvTdcG+AqaybYbYAmaBgeRYEwnHF6pxMxGT0MRu391xEehlhatg+B1Yv7HDo3G+M3Xbw==","signatures":[{"sig":"MEQCIDNIGaoGonDE2BPhNqTPg8O9VETo68NK2s6i0wnVqUXIAiB/3ZQaO3xf0wHo16wop2eOUdacTb61X4ElJCnBusqJjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2PBCRA9TVsSAnZWagAAyI0P/14O7YM+Z9GuFmHjUq/n\nb5rTnaolWvR4Z9MKsHUh2L+V14zKBRMpyV1B682fXiZBAomOb37/DUCPr7u6\nZVZMa6vUZx+yFsNOi7LQbtE/ykk6XrJqUMRhHx4p6nDnuCbLGZD+1b1m7xWN\nUgO/xdLRufV/1fS0wO45ElZfghBcDnjS23bL7Vib07vpGoglxKkH2Kbm3scS\nN5ujKS5qZ0f+YiuYtTQ3a8UUqRs9DGVrRRWkWEvUg+JW0ZdQ8aacj7lwxUEl\nYwTVR1FLV7xis6uO3PJBFH+xKtO4veWAZkj+zcQ91LO6LLHJe/craOuovXyS\nhPjUEApAlNBhge4AEOTskvePOwIOh5RrM/x5SeYd/J34Q/gWNcoDE9s/vwQm\nNcJFMTHjLRvVNWQHjQ38jM53hfYP/nufAvGIXoSFcIyEiyDFkXRgm+rPG3EN\nnrSpICGCkjb6cnDdWoIfv73WLAMZBxDeXlH+vP3FvM4t2MteR08jKt38ugqy\nFW8kqgyDGL4jixn2CgkJQEnzshEZHKYp+7t8mQ9736N5oud94pqYfdKKIGMi\nvBfrk5XIauE2BJ6MzMA0Vpd9cy3B/JdpsG/k+vHhOtuUMIAkwiXTHJ8XFa1A\n6XFX4Eu9mxxEunDYXfpEWuZMu7G2BNmoOplluxexjcvffsVfZXEAQvrPOExg\nJT+p\r\n=a9y+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/shape":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/density":"5.0.0-canary.a9511d870.0","@material/checkbox":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/elevation":"5.0.0-canary.a9511d870.0","@material/typography":"5.0.0-canary.a9511d870.0","@material/touch-target":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a9511d870.0_1579115457119_0.872174991276595","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/chips","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994c290a2efa54bc2fd2ea6dfc5c279ecf3dd896","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7c8583c4c.0.tgz","fileCount":58,"integrity":"sha512-QtPDjI0InVVdxbzZpRy2F+EaaoRldbwjc81SqX3Y1RcIze475ZquP/VhhaZmlkQrx9zKunUJ6Hyjspx5B1kgJw==","signatures":[{"sig":"MEUCIHkQxXCOYuk6XuGz/gXlDJTIFrzTy9IVHvHkxIYBHxEWAiEA1DIpE+RzCgxpOpRBg6ggIebAgoHw2Px4LjXdifO3EWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bPCRA9TVsSAnZWagAA5rMP/17DEiE8RDGywb6Vl0EN\n1leL4fUaRL+KtUnOyC6lwbB9CeMBex+fPkRmGpwkBuID9y+zXci6Pjyl7Cb4\nKr4Gh3GtKY1pABG7Yzlx3w0kT0aIQSVRdQ2BPXdZqZk9Lb5nUvCQ/vSYBFTP\nrBnRK96m0nRdPqeR0pgSqyrDmpk2tfrbtHAklDwPxCECY/EbtbWfjzX0jP0Y\n/FkhIybTEolKcnWdMefw0x3HKWbqIWMaDxv+gFq+k0mo3vt5XyrIUU4aesmZ\nnnjYnFTnDz7e9wtvWGJImLKgw2lozYOAx8m24TNYP9lEPxZZnoshTu7svXHT\nQbtDMjlSe8Ri4XUfDp/2w7RKohgp6v8yXSLw4de2I3b34oZM3i/Gw4JeXvN1\nc3B5HjQInh8X/GfWBJe507SupBtrcb7QzmDxagkuAozwCzrNi21mHJ2jg3O1\nfuKP3fV/xSoEvpC3bguPkqYoqIZDjqjYqAB3v9ZlrpPkRHdMZ/C4yAfYyqiu\ncR7jCZ2fnUhFYN2XAg+aToG/RpuTR1ZHdDywCLLWGvM9SfX5UMLqh4fe6wn5\n/GZGcrwtQLOMxHqplEpBWZnLGcx6pcaWcDzqYGjuBp3BPzKFBV+vsQaJMSTH\nlaDYSJ1RzEip1zHsH9pUnqDE/ZPqJ32KJiMeqVVWLfe+tw9/lMco9B3TSUoc\nLoiA\r\n=6peW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/shape":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/density":"5.0.0-canary.7c8583c4c.0","@material/checkbox":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/elevation":"5.0.0-canary.7c8583c4c.0","@material/typography":"5.0.0-canary.7c8583c4c.0","@material/touch-target":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7c8583c4c.0_1579128526495_0.1587145211760792","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/chips","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8906410f6512eb043a78bfe72c47fef067c6131","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.5d4b82bac.0.tgz","fileCount":58,"integrity":"sha512-8no5SS2mcEujscMpPWLDoCx8mLJ0JzcjW6WwNnNrM4CciDYGDjDwgTET/cWqKyF+vA6IEGRUemGuoVFGJE007Q==","signatures":[{"sig":"MEUCICn6ZuGg2oAXHcTE4P7OkKmlJDIyLZmhQcM8k4KYTgCMAiEAmplmrii59bG91W0HwTBxK9nuXJgoxQDY3Sx7tSfjx9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bhCRA9TVsSAnZWagAASIQP/jHa0eLkeF752Tde+Oem\nhk0ZIJSnwwrZyjzUD4QqwnA+SxxV6aWYOaKpiWsHkyrMjkTqVd0gQs9xoKWh\nO83DyFDC+syasbaF1E2PyqNK/0OCZuFpdiS6mD6X6ge1bxh6gQEB4fK5i+UD\nt7txuCUE6Ez6gVQCemDdOnnvXtXi2ulqyZ4gBLfXJBXuxAsPyBP9HuZoXRCr\nLYeQ9bwsdmPkQPVoRVeCxDuupzQ5E/UzWvAvuaJLvyZJvgyzTzfGvT8P3gm0\nEmTInTqmXe3MLNqSNNxQ7NNKw5YlYLU3/To1DJ2P9C6TiXX9+wRgAwbCf365\nZ2c6CAtbxB4vI2Ra5e639XkBh9nbWENnGtGjjtarsvLS+n0iBXhvMhAX7I34\n80Bh1hIfXS99hIJhh7H4fiHWt1rSGwG5yckjF8HH3zpeL8Kr9gOsjRPEVpjV\nPDanpc8i7C2AGVp5J5zhSK4u3sKycZeWtslO+KI4ARoX68XoC2FV2IT/ZbvA\nnsP6KUHAr8ekVmfJzb8JuXjYMTWHpRlQqfEP1rhnEFYwZ8AP6J+ruMUmonlx\n93N8YdUpjyOKL2GVFB/HlntWJJcoAmPqLKuNHpkZjpFQHyLRoK4zHBvbHWSv\n247O7cC37nzzdRZTjdQ4ecGHpYe7smcFgE0AmNYhM4zmbeiS7ToHXSE1igJz\nPjnR\r\n=8CRG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/shape":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/density":"5.0.0-canary.5d4b82bac.0","@material/checkbox":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/elevation":"5.0.0-canary.5d4b82bac.0","@material/typography":"5.0.0-canary.5d4b82bac.0","@material/touch-target":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.5d4b82bac.0_1579128544879_0.5462850070383114","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/chips","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aa89e14cd45fae4afb277c1720bda04769e0e84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.57d0186e4.0.tgz","fileCount":58,"integrity":"sha512-JSVPLXrT0qfBAXQ826dqTiFTWKeXnqtHirGlkux4o1v04cEcjOq4U5xwmCSW9Uzeyl8R38mThvtA7ewWlizA+g==","signatures":[{"sig":"MEYCIQCvPjri3n4NTKCzuKELXRVnTJ5pNYXhuzQ/rtA9Gv8LzQIhAK0VLXdkyncB63llR7XB6XMgloj4Zhh5u1R4aJzMRE/e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjfCRA9TVsSAnZWagAAr10P/3nEI+VsQwSpWe3Q1d4p\njvCoYTuWopA2PUfF6iAgJ1YfIRquOe2CDFjfjOelWaUmO4SBukCBA0DElDMq\nwpcf64jrYQ66fu6xd18QF+7XU4sohnKw0lnHcQcPLwMptDUH6CI/HPF0aDV8\nl3t0uxpeEM6DNDTXMz43N3+IINJV2Y0qTaep1i8vRu2eBIIZMDhYauCtSs1m\n8ju1UZFNdK3IbrLOk2ZULlEqkyfgkdU16uxID5TrNuOVF75urrUa6I5xLwF5\nJ1c+qhbMxX4z0nVQKw1zIXcxBLLezK6LuIyws9PN68eJcfYxlrjBIIS5r9fD\nWdEGOj7r4XMOuRBx2vjSvwo5FduGpQ5r9Obs7v7+sNGdOSG63OBVEySg/uVm\nypE6cQBNz21LXSTMH3D0WFb9YGHBRCoQS7uBzKmnvw/H9CPxIzQwM8gSypYF\nO06dW2A9CrlWhuFACsV1Ej4892E5DlCRqYkuLS/zPa/EoiP1iAz+fBOKi0zu\nvOSc7I2YCkJqtjxQPSG4ysDNDfhxVxSVzF8v7khs7iMhZrC2mKJ9HaKQZJ4j\nUeaXXp6q0mKTy+nNpylkwf4czKCW4gjuCczNEdV00msPWdvj1GHiLt7RLIkt\n+BxEkG87AxpEOsUvfP3RqUUWzrRexeFAZVbzHem7ZjadMSmcTcNhieJNekph\npCAc\r\n=xZ6/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/shape":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/density":"5.0.0-canary.57d0186e4.0","@material/checkbox":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/elevation":"5.0.0-canary.57d0186e4.0","@material/typography":"5.0.0-canary.57d0186e4.0","@material/touch-target":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.57d0186e4.0_1579198687263_0.14837149756470702","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/chips","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff4fb0047610f1d36541cd73558e1833612d467c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.071a6ab70.0.tgz","fileCount":58,"integrity":"sha512-YT5KM57F09dtVSSBdZpd/5sTtzBXI6chHcws6m8E7Ch/nlQf3KZwwtjngX9obo1mVLlZFgTbJvTh7QmdH2ETWw==","signatures":[{"sig":"MEUCIDB8EpOCgN+yKeXYsVXPj4e6MJBVQsawYgAaipZDD390AiEAuXCnCwQS8P/UUN+U5xndwm/P6k0oV2J/1RBUwNXvHlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpsCRA9TVsSAnZWagAASIAQAJFsMU55r2wRezNaNzIr\n9Rz95CPmVSPSJYUosMjF1hNbXImyiLuN1qaK4pj2ySTMQmMIEJJ5zwsnAXqi\nmhH8WEkWPBTRTAGBPIXeMuquIVvBqqUPqegKSWKIdFNEsG/jk+so2Rxetsup\nJYviRW9NL24mfScgQ+h0p074uQ9P3vDrmjL5zZmehQSNZW9LkwEgpzFu+zx6\nKY83q1YNj4H93uRTV8ZmDx2/C1GOqYRZogUfNfGjkoZce9mZUMCvni7Dr7aN\nvd4OKeaOx3V2YM8SojhZuBjRrUXhaytjc2B5cb7N1VxV3IBo+jFaKJND2mP6\nALiaJmvAek0ccKLeGibX6qsQyS5v5XPvWdb1DOXSlIvi3H01ZiPYKIBdBTxt\nl1mxmYk33rzcnEW6vbzKwa8p5oJz+BiFJ1Nt5EGlQUDre8OLXpqDPPfNycK+\neZd8586Y+PcpO//SUBhzoBg/O5iKOrk7f1whf0xAVB9hNvUH2jPQdEyf8f0b\nakB28DzvvwJ9NzP90Y7dnrjZbzEsmEKcZnZeEqHllKHy6ZstRWhZWavydbYa\nQGrl54a4RXVLA1D8d2nITtVakDUtf7ldkMFa78iD6TfOS4xmrt5R/vZoeIa5\nWzx599weBMK2CqdTDRJsfmq7hW1Sd1QfrTqWlcGGsjo9zrsU/VtCQgq0zxs5\nDJw7\r\n=Lhvz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/shape":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/density":"5.0.0-canary.071a6ab70.0","@material/checkbox":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/elevation":"5.0.0-canary.071a6ab70.0","@material/typography":"5.0.0-canary.071a6ab70.0","@material/touch-target":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.071a6ab70.0_1579199083813_0.42174673487680114","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/chips","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98aa6d17dbb6294be0e43ab0343916b669235c97","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.22e0cb618.0.tgz","fileCount":58,"integrity":"sha512-mpxPykOmsUSMmp4KQxqH5aIBNJTfPjsqzgJa1lwMjbwmDzaXotBKsO9sQlxPYLrZq1GdV7O+0bwi4dvMR03qyA==","signatures":[{"sig":"MEYCIQDgxtb+sFpcPMtCBUiblzBliVritCVqpluPgYHUlPrE7AIhAMlPhI3n+FU5hkBeOKf5UOtzb/SVqEhgR08hjnYn+qyW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK/NCRA9TVsSAnZWagAAGPMP/2H73cJhmk6rdr0ojkNE\njXLuHyyZ81yNGfaO4xEq5f4i/t9WnwO2c/qSIJNJVXbjc8eyHfU5ClZ9yjJb\n6qYUZebEy/B7ho3La6DQFqhm8lCfyB57truoChhk9YZD+XU1cV1uTCMbTb9e\nOphVvmCZ2cOmps3gyouSVVcsBLHU264XnUiBsXf+eeMZmc5Qt3b0Jd9INsjb\nKOOIzG+2qFYDSGNKKYdSQ3x2+eC2IJtKGGQbPVPbM/9lhbU3/jrvpekK6rhH\nHpAq36mjIbQYSTFnq9Duzgz+jS+Kl3bWMhGTwzCq2z2KYkSe2Lb1PH845EY4\nERe1tMEfRebSUyUFbjsAmw8tTY6rxcWOn7ZhMIa+cyZwU6Z0c0IkhX3vZ9Jl\n0B498qPotBvd15yk4ZmrIdJx+hjlXyuUwMyqDY34pnmz/T95Nk/0Lusl+Fkh\nRlRoDc7Iv6qbLImte6Z/shjFcMjOChuS3fi2Zq8Ho1XTZ5UNtFGCwy5kykM8\nx+MgVur4yp/Lc0xqMgVb1Emyk3P/HZrsmtA27BFNXpONKurhBLaxdQFH+gLN\n8XYG/aQGEmyoXlYEWuvzooJqcoiAAt/3ftGAC4gGwF3hRQIhC3RHTv5Szmhc\naySZagtVhRJkQerJSWH8Hci23VbtLsD6f6026T0Z/EqsSsKEWXVH3eKtc2wv\nqhdJ\r\n=zNBF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/shape":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/density":"5.0.0-canary.22e0cb618.0","@material/checkbox":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/elevation":"5.0.0-canary.22e0cb618.0","@material/typography":"5.0.0-canary.22e0cb618.0","@material/touch-target":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.22e0cb618.0_1579200460517_0.15287678399461235","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/chips","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d21aad1de823c6ee1301e79c5c934b703386254","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.f16f15b8f.0.tgz","fileCount":58,"integrity":"sha512-r2DdiuGJwlj5/yFS/+4GjzKKICmWVRHv0qRG8tTXjt9pUybKw4dpo9qVWcdhn2Hkt/JhlRF9xcac5U9xMYeR/w==","signatures":[{"sig":"MEUCIQCqZWF3LfqOHja/G34h9m4bnUKX+VRG6vCgGfXZm2HbNQIgHocZ2EV7VKD1ESKpLP/1jbT/Bqf70KTSwMmlszVxhJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPreCRA9TVsSAnZWagAAVC4P/jmifn1YSOBN+7XmBP4u\nYaXfht9dLzEor8t/30wO9VOr9zLcXDluponTuu5tg6VgJwxnqn8OIzKp7TyY\nShcO1Q2fNX+If6tCLotFRLW8EykEflKC8jXuIgFn1OXa117l6/v//G7AikUt\nO0+sCOC3R64orhFSYD2V7BXqCEhDDsyUCJk6Y2P7hrgqiEZlvkF0yYJfaapV\nrCW+g8qkbUViaKshqsgYw8RSItWdUK0GGr9ZHWNiY+jJT09K+QkuRhfrL3TQ\n9X+nfXt60VqyAseVAw/7hl8ci+5l9oDGpJEGYinLEbgNPqqy1VzytCKoTsSz\nRIex1o1v0Qk5lZUu/7uU6uYFl5idmUwo4GmH3gB2bJB6YALawLNKQrTtqmSF\nqSk8G/3ZvX2MDNTs8+y+04cQMLWPWcgO/xAld24M1yGr5sKA+w3EPLNdTTGF\nhqM3CV3Ze7jzidmSDn2hwAyO655r8rVo4c/Ix5PghcE57Y8Knsk57zBTjdjL\nlGduCgepDqBuH3RBuHmBuYkqTzhHklMEfYC+N/HS5kiOm2OKiny9lYQzEZDK\nbOlH+whj7KSUlW1/WP7NS8+wNdEJ77C8OR/SkIn5Gq/z/oHSJTq5u6pB5SPB\nuSJVkTDztljozMq3pztSYCN1brcVe3db1+pRrKp/EbVvJZv9hLN8Hezjx3CP\nmIUU\r\n=zCrG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/shape":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/density":"5.0.0-canary.f16f15b8f.0","@material/checkbox":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/elevation":"5.0.0-canary.f16f15b8f.0","@material/typography":"5.0.0-canary.f16f15b8f.0","@material/touch-target":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.f16f15b8f.0_1579219677551_0.01505499723482906","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/chips","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84364df30420abc5b19d854e927791b070faaaf9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":58,"integrity":"sha512-JzUUHk6PTEUHSclt/iWo/O2MwB2246Oxtd/pSmn5FrBpHlHWs4eeDFqf4Q5B3NcjcISijuFrn8j1glCsjEiZ2A==","signatures":[{"sig":"MEQCIHzJyIXKaNYR2J4+rHcughybsceaGohHWA2Y0511wCDqAiAN/qaL9hDa4hzMZw88y3vu+HxCq9M3ioFsR00o0HyWYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQHBCRA9TVsSAnZWagAArPoP/jjVTdLNp0U+iexv8JQH\nfIsapxG18VstzwCnGlT4HVDso0RVBYbON1a+3Q6Pv9mylkSSm+FmKMXvjsZn\nZIn2/7tcweVHCqHozEXE8BGKYw4h6Ibu2RWmh+GnfkJHz28HidmQB5ww89IK\nRm46MvxLf8YLgFVZCeK43Vj19iqNfFfvqN80MhrbBYvWecS06ndSHE+/Ic1u\np/vNW+p8dN7nejalFQ3EpHKA5CE7DJBhehs+ntJ9deTflkJFFxvawMiKow7Q\nKE29BIn7SGl5oZe9uNGQH9Uc0xoa50TUD+DR6mCgj4Vs7oJNT3uNsgbqPcXw\n5h1er2iHto7+TwO6ry8OSuw5ofgM83zZG6pnDnI5Feg3WMI+8oYjisdg0nOs\noRV+VeicuoYCrTPRjDkSWm7AUhtnimSbv/pmS4MrxsAmhk5LnHeF8RU9IM/z\nHD1jRebg0jkn/Y8ZuUvrCax/Vwq+SSp44tUC44fLVPAkYnNALbIuapq/CYFb\nZSDwvgVQAiV9nSvqAnA15KZWmUHr0+rM4Az8OJYbzVk98aAvDFm6uJBEpzBf\nuzKhH4kflHoBVEyIAWRLouFn6NLPrAhnBQjRcXMlLy/71FQQ8OS3DUDwS1LG\n9hb+44pjSs6viu/AdPuqIry4b/89AD1kfk+hPkJK1G+mrD+akhIDw+/z7tLM\n2H3j\r\n=Wq+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/shape":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/density":"5.0.0-canary.aa8e43e9a.0","@material/checkbox":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/elevation":"5.0.0-canary.aa8e43e9a.0","@material/typography":"5.0.0-canary.aa8e43e9a.0","@material/touch-target":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.aa8e43e9a.0_1579221441483_0.5312473520749696","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/chips","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"489fc5560502e1794def2cb64ce099ebd61d485b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":58,"integrity":"sha512-NJTrLM8GJEkyVKuJBj2kKJxoY4K7PROLyoK/wFKVEPxSaCiSeqi5Kt2/jis0f3a6s/9pqLtMThjXBrK/d4bydw==","signatures":[{"sig":"MEQCIDUeOu6e2K4ekwFCftUOGaMekvW/Pvi0gKcU+pZXA7ybAiB+rMOxv3020XmWTJiPQYzKrMH5LiTdyZmDcx9jNm/Ijw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQdICRA9TVsSAnZWagAAF34P/2Cq9lE2Zzuvt/uoZ+Zx\nqjJ762s1CU24J3JZMu1erAKAKcpkcH07M0s75mHh8S6IhYbbN8lMwQXGHBLM\nW9ibPkYDdhmzqyOiMsR+BBhrhLbQM4urNixJ3+B9s/P5w48/MXWK8W1CS0Bd\nXymuBI6a6TOZ60cHILNWOduUoA6U43NI5U2x4grb6zmOElmtSFfN4gdA6AyJ\nkVn0y+dGou/Ottw5ysIbSBgX3R51+e3SWGoSUM/ROI61R0in4b24sAuWdMb/\nSDc6jCpYODNqhcBhx9iVTqv+9QXl7v15FPsSaRI0/4zDFRzI2h9kRgnaN6+9\nITLwEjFckSUbAexMs+T7Xnxzhm3qmICHUio2YEJmdvJmf5hGkByWdoucwsPk\njJ1pkhRe08IhSNDFvct5HmKbwICpBbdHSkSgt9iKtMqRBdTAe6gjHkyj6YsA\nQ+fTR3fx7zu7lHGffIoQ82VWnqLFsyMITxWUHRgEj+7PQdeTmCd7CXxpZD3y\ngL4MprNAsNeCkSyu8xlirgan5x42VBOmTdtapq8RzMyi3rRMKqXr+x7gKDFC\nkSkXigHLJbRlFm/txyhUJYayU/+gQ4SRcVMkNuaBqE314zD3Q4seMWz040RR\nRRLR3slfnryHN8g1PkdtmL+/vrk2F+KRSiBHfVtmOe4IarTlV/OViVtJ5vPN\nGdqk\r\n=ss1b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/shape":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/density":"5.0.0-canary.fe1f3ca07.0","@material/checkbox":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/elevation":"5.0.0-canary.fe1f3ca07.0","@material/typography":"5.0.0-canary.fe1f3ca07.0","@material/touch-target":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.fe1f3ca07.0_1579222855857_0.4612138320215149","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/chips","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d405af26b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4631fdefc85eafc2de45431facc698484e4fba0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d405af26b.0.tgz","fileCount":58,"integrity":"sha512-rk2UkVHqUFpGNVUE2IdTKCHGzYXmJfByziQd0dlftinQqwcwNMkRQrVDzo7g+6EBZx0lXVRqG4M+jh7JGZo7Xw==","signatures":[{"sig":"MEUCIQD0PJy31xr7Pe+Di2cPrazeraX1KFYP2i9DGn1zjTL8bAIgdIX7TsCfg6exmJAzdodaZ0oECoUbr0oIaMwTHItwKKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpZCRA9TVsSAnZWagAA5UsP/Rf6CkxcM3kK0Lpe2Ao1\npwys7NfHe0u9XiENMdtrTnPuCfyUPpLORZn3wWB5ejJ5WtOgwXb9rcOxBrmH\nRkGqdKMx2m9/R2XrIVvx/vyk4PEGbcB8bK4Y8KjZ8138AkF72BeHExqgNyTc\n9mENPWCEZHcf+pov6Gvb5Eyq8Fvnhr3lXJiMqCsL/n4u3No6n4du6gcpf8I8\nwKkrZxAeoPThs8sYoktR0TYg1w1CXEJdr41T1ctUSG2aZHMeiiScPOCKuAms\nAZzfVnudWwPKTsZFHkp0JGvDZeN0dNJ3SbmTrb5d4cjOdjgmFhp94jVUmrj7\nrZOQ9xIUYP3ilwyMfv9h2pNHVXpaAPtm4y9KyiqMS3CxBhzIj/UI6/WqZqUQ\nWBSceTBSy4R9Ac+R4txAuqSyGuV2+cy//aR1V10BvF2bEle8aUr4cD3hSRD7\nkQgJJPJxY6sPz3PwanYEkhZhcIuuOL7a+6ZVGW45VgwvrWlisd/QJr5nARll\ng6zsyYLqh3ItpsSS0FWHGk11fKYEvirFI2c0n5/SKIpMlgUgXP0nioekFpJ3\nP/P7X6JoNHOXocGnBpV4GcbhwlenMXszknwuU2Uy+FYXX2jFRskFbOw+HYiL\ne4T0r3sIJfbpKfG3x/nVBY06XprQYTLC79zQoxvRAaT8QKXIIKDHLxE3CuAQ\nOoh4\r\n=rW0x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/shape":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/density":"5.0.0-canary.d405af26b.0","@material/checkbox":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/elevation":"5.0.0-canary.d405af26b.0","@material/typography":"5.0.0-canary.d405af26b.0","@material/touch-target":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d405af26b.0_1579285081439_0.3991902680206596","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/chips","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35fdd5ea92cc5d37c9f9d84018ed2f3d50d95cd0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.6e857aae2.0.tgz","fileCount":58,"integrity":"sha512-PZV4R2ZApbHvqpqWNM6LwxYy4gL4tl5ekl5hn7eCpAMg7RQNUgeYKsya5VZHthF3x/Dylxv71Xp4MEbcfp3ffA==","signatures":[{"sig":"MEYCIQCu/yCNH+EltEnAYDalharHXRJsX3C8jfIpbg5mH3bV3AIhAMTjwr8sUCf/VwffQuqttUrd3Kw0fhTkt/Ntj3fflJcQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsjCRA9TVsSAnZWagAA20MQAJyYvDf5Zlz5KBkhh1xV\n3SxU+ydn+8qc2D1fu2NAwm5tKOvHCu3SERmHDX/OkhRLA0nlWfoz4fZkX7Qv\nXxoAmnyPzpdyvKFmshDdwTCZxHGVVf6l2bE+B0B7Sc7rfhNV3II6MeHV9IUw\nKlwbOUk0BZvVCQxEpKCQMLdnDOzwxF1X3XfoxhsDX1BwnXB+vY022w3JhREm\n9ePsn9y0d+/OcBtb3+fVwczshCu/hX7p///ZUeOhQN/KmHPBQiEI0ybC8Jdg\nmenQP67wEi5gqWiFgqzqTreUkWbERe7y49AQQZj1Rp0SHXDFmxLDch2kDA76\n1TRkgr5DBZO8fx//HL/Iy5HmGo/3P8Sxc+90xuWND7LAIz8smqszFffaQvki\nwTurAAabny7CpJziAa5N9DDqgMhNwgnk1zmo1tHQS2Bj0Vo4km2HaOL7Bbod\ns5Pzb88cqN5JSUcYVSuiPeHaoJr6Je6T8ruuHBfyKDEy80uvkG+A41ymX+ZE\njPrQIKdhNsnRioTDYejugP3qjEzs6g8RuSnbphMIsNR0jz3jvAnE2rM2KgXQ\nUJCmk9deo3NA7GHrtBo5hcNXt4pDNnUpU5Rxxj8PVPzONtkIDzZ+KoXfO5Qb\nVB3T+68fUDeoeHudGkJh5UafJvrXvWsaKY2t3hbNPrmeyAMnhu9vodWrRWxT\n7eaz\r\n=cGF1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/shape":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/density":"5.0.0-canary.6e857aae2.0","@material/checkbox":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/elevation":"5.0.0-canary.6e857aae2.0","@material/typography":"5.0.0-canary.6e857aae2.0","@material/touch-target":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.6e857aae2.0_1579285283366_0.5323241311571243","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/chips","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fb7a3b05cc614dcc0cc401498fc330f5eb4c943","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.e2e764f7c.0.tgz","fileCount":58,"integrity":"sha512-3oYPnSDpYnmI2atBQR42SVBzbcRjLg3vAzKYRuuXflnc6sBb5yb96w4rnrgFmG3HUKIu4FO5c/81PVYbhMlISQ==","signatures":[{"sig":"MEQCIDVXltK4qQt0jIvao8ewCPzzGoLJWBTUj8spaBph2alOAiBLuG8nIx2+83KNAeOog1wCwIILEAr/4elSz0fajoYs/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf7ACRA9TVsSAnZWagAAjkQQAKFj8v4R8dinh9+b3aW0\njNUM4Kf8Ies62v5IsxtH/qS4iq3Gw99taqCnMq4RGoUpJwnCwPupM5yhhABf\nxonjgXXsNFF695II+VWvyFv2fhARP3vfBWufoh67tUFmGQFB7aWW0ceWvozc\npNGAVbaOJywRHlXTuJe5Ad5dEK/M3b9t2RWWcA1dxGwDn77kznHrc8MztWd7\no1XIP6d1V/00lcbjYpgdm4isaB6iNcFi2ltH5Y5xgjFTKP1moXABqPE4RMyn\n/Jvu6oHX/rZW9pbYE7QdZRg/u8rYktuBYt4o9p0ZNJhdsE2aNJ0DNm5vt+A5\ncfs/Leb6TCHhL+S3WTDP8r5XcYujGmhs/wLk6WKjwjgBwbyIC+k/3SX8bAu/\nDIWxDMhMjmXd91oYHi29RWQjW53FzJuvFyU8qbHqUgRe5sjnDX6EJ27y5tiA\nDJTy/a/rKGfa8HtrTl2Y+q+isPn45jpB8wjZyrj84LsPyL78hwdVYtD3c1qF\nJjxdQURVtOAfcMD+YLloAp2vAZFzoB3o+aaBmrYZjIlzjZoORfy8udYwkpBL\n7hEGGuIEi+NnM/cRovp5Q/AdSeH1GYeRxROjJd3DOCjj1iotV5ptIRi1klOc\nrYn9lb59Sc59Kf2If+C81Okp5maB2vPFAtX51DXd6YDEIdMIovXRsakJshR9\nXDoA\r\n=Lw1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/shape":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/density":"5.0.0-canary.e2e764f7c.0","@material/checkbox":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/elevation":"5.0.0-canary.e2e764f7c.0","@material/typography":"5.0.0-canary.e2e764f7c.0","@material/touch-target":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.e2e764f7c.0_1579286208364_0.22977079592350558","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/chips","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39f3bd5e105d7a9975197447c8c2f5ba7bd7bda9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7ef986a87.0.tgz","fileCount":58,"integrity":"sha512-fm+tCdiDSBtJxqBl4u6+VrSfCtgO+UBqdF7GbGcaj76o+RcHbDNL3sE2aPx34JLDrcHKLloIeiOdrZo1UdXGHA==","signatures":[{"sig":"MEQCIFpZj9NHd/otDECBd7b0x5pfRrnJZtwOB3jWzo49XSH9AiAH/1LPsZ7mcWTn2PH4X0Sa0kusOeTMCz0qY/TuFl4Xqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIguQCRA9TVsSAnZWagAABLsP/j5n0VzO3d4AeAdif2Dg\ntcWDZJy8e4voWlS2V7ZHJ5UBhAmSMhiLVl4DNSoUAygpG5JFGpUlhGnzqgKx\nifEmRAeslZLC97Z3bPqXP7tggF6WMdL0iDXxBk56lHzLA2K02ebe7NR5GLXa\ndU11GN06qGFTkp34RQJHzJlFqBiMsMheQ4+si0OpB7xZOGLsVQLdNS5EORWa\n633C0xGAqsoegyFESE9M0WnoqkDNX2o/Rw7v4og8IioXZ+RYCiIcQ2oxopu6\nXNyd9MDvSZi3toOTY4I0D6KKestBuYGCu5OpXPxlwdxidAP5xJwMNfQ0jjm5\n9i0ULENp2rRhJBq7xYT/jWuyMmqUoE8uRXCoRWTq60Z7RGoB3wDffgLrOlP4\nOF6MdhSsj327aAQusfXsLKRTw9oaPSH5KSVJ0iN3qsbY7CwZifARYA8JAIwj\n6rPa8c9CNRL8ntjrW7rNkX+TOjNTBjsZdaJERvkOFuVmMHQITqQi26h6XQ4G\nx1C05d5LOfMAOuacvhEecQf4ga0iqqbM0U6alp+c4lEnmefXycjAbTprcvBX\nxmp546c8Pv7tAxKi00f0qWgPj42m+vTJ/l7sWrcgwptJkJ6oDqzZghfiB+PW\nnja13J64g7Lh5vdRr1rJbqdEAMpyWIMn+8oZDIYxIgYeH6uNpbJw/zF+Se/j\nRY39\r\n=utHg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/shape":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/density":"5.0.0-canary.7ef986a87.0","@material/checkbox":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/elevation":"5.0.0-canary.7ef986a87.0","@material/typography":"5.0.0-canary.7ef986a87.0","@material/touch-target":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7ef986a87.0_1579289488118_0.6715036721889953","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/chips","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41b32783172ad1797d10f2fdeed76e1155a46973","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.29402e2d4.0.tgz","fileCount":58,"integrity":"sha512-Qeta3rhfqOzJSmq8dovPJ8Tp+MCTYKlIGTBUjGe+phmV6Tv4TyDO94EaZQ7PVR9K6l6AaYcnCUJeqi4l3rLDbg==","signatures":[{"sig":"MEQCIFgcUtRM2Ap+prDfdYWDTns71wTTcHLQsoJBaFy1QBSDAiB2v2ArhZxMUJWAtu9+BnYCEWfsmZpcS83qVVFvpc+3LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhvKCRA9TVsSAnZWagAAB1EP/jHTMLSsHKiffcxv4W6I\nvQpMmQEIzTPfLLsGA8DqNA8mFogBSl08BaGRFceMRsPn29W00Fa2zotp+VW7\nRQVOWz7KVEB4L+5gx9WSXVWi8FN2jFT5Y84YpqONxR0ytwgbRjGdxhhUvMqj\nXWgcXlBH8hRHoUDnhEYoC8RgROwyEM45GGounVMfgfgspaDle88loX4ybTxn\n9yzNTHtuybvG0Dp3HOixhkubi3ZNn/WFMu0/5e8RfztuWfWw22TOSGLSZ0BC\nt4V9LmA6nAHEnSENgW9EenI/Y/pYoziXDC9tjQ85FtJZojxlgDQ0ZnH5GfdW\nKpeNOb1NMC7KyEVj1x+5GjZkHELZzlMs3O1n2M2H1ukpWgk7+J2mGOaGfjku\n6RAgTiuObjr/VSruhjlcjpgh+vm3PhR76Gfa9Shu4siz5Mln52lTZsbWO0q3\nuih5AThgBSo8v2M/xtScrUjwjuiswsIoFnG0oKbgsWjxKpeqJJtuQlfL5snr\n+h2zQ4OsD2oOa32VK2yNSBChlKtwdo6FTZg+b2LMGSFisFgKM6vJkL5Q7Cad\nFHuGkJH1JBMahWIjPwtgvU47TvdPYSEqrACcc1OU09xvyJxPX/65m1DrP1ce\nRtoTH2r8y7LpsuxHLHNvnXikepi/vepiRDD5gYXb4rl0vF8kz+tKMjZPNVOX\nhlly\r\n=YqjY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/shape":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/density":"5.0.0-canary.29402e2d4.0","@material/checkbox":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/elevation":"5.0.0-canary.29402e2d4.0","@material/typography":"5.0.0-canary.29402e2d4.0","@material/touch-target":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.29402e2d4.0_1579293641665_0.21165444708168102","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/chips","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"371709b67bb5733dd8cd09002cff83fad2bf387b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.2b3ec563c.0.tgz","fileCount":58,"integrity":"sha512-d1TD+MgOzZbR9gcpW2/nwEFNMYfGaZy5cvhQgWMHcHZSgPW6VbFIYY1yZ64OnIRVF66LNquRgnQ+yVrgpeMnaQ==","signatures":[{"sig":"MEUCIQCz0b3GZAhWvrnnLfpCXQGkeyhXUGN8Z4ohj0eghsCargIgfIHgb48JfJyb4ieGpu9HdZ6/9bgM7XG6pag5xaoaObA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9TCRA9TVsSAnZWagAAT0QP/20jJuP4JPjXgjdQBiiI\nSpeMz3EpXhw1INcz+IsLvnCi+/SlWVy6BUuOwvo0FNF+rKKf4ZYryLZMoEyi\nCn6yhZprC0OCbJ3tlXxRzhnyqoXdppKl/b+nkjmzdrjGjcfamJ3bZ+91e9CH\nQEsGia8O3Myf/Tin1BKNSXaQ6DXbhch3XzmJQd+wACdSV8pDepnF+Fy7pmqA\nkhitpKZNdMCUko5Q3H20TsjbPDdcctSWLd/wADleME51fhAIbfOBmMavr7PL\nJAyLxy/dZg7HMZ5EHY5MwPKTZTC0KuX2bNNC3YNtf6tjH9fpSbUXus8MQKwt\n2LvQVJkK2oZ/ujGXjvgHme+TmCbdW+AXo+jmU5GiW08YN52JV13jkYKoMHpM\nVl8Rk2wJQznCnXflkf7k1Co/nQgVPFISCd6OUq2lbHtSf7k8yPiz/ogK8A0j\nvYBKxHoLfbOckfZnpa9b9o4/hcQrSwypPwtyz/Wodn1DkuS3Lf5BeIZNPRam\n4VQQGjxfEwKnIDn6HbOAeOlOzjWmdANGnu+cFajr0dxIgEk21JGxuPv6O42k\nUOAdpTPvy4k9ASZaX453az6MADqGeR8tg1GTQMVi4xghe94LJoagHYNv82k2\nCn8om0cfBWSzQcoNG6BK0YXqdJskyorOJUOSY/RE2Y2K5V5hY0g/+esLzN1P\n6w54\r\n=MGvr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/shape":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/density":"5.0.0-canary.2b3ec563c.0","@material/checkbox":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/elevation":"5.0.0-canary.2b3ec563c.0","@material/typography":"5.0.0-canary.2b3ec563c.0","@material/touch-target":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.2b3ec563c.0_1579302738966_0.23998958331635767","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/chips","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.e8a993677.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dab033a2a0685570fd13dac3c1ddbc4cce02da94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.e8a993677.0.tgz","fileCount":58,"integrity":"sha512-PGtvGaWtbCEEWscrxTVHatDO/5LQJuXu9q0S79+xli5eEOS35WiBRchDGtEh9XKUpz9fprGW0MsuyLmAYOCckA==","signatures":[{"sig":"MEUCIFaO5WPtiOheElj48KI7XBrE22yz/b6/qPY8UPMlPPT0AiEA68BDoY9UvtVPOiRAwlwjGxv9eRZoP7oeG24TmRMS9lI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvcCRA9TVsSAnZWagAA1nwQAIuM6FTqyCwoCdcRmO38\nHNqHXKkWvPA4GqQzXS70JeONoUOCH8lbVZ+guQPYXtcv8zQLa7l53kd+nrle\nMgY34/N3cgIIcQnswMOxF41rCJxLU6rF+apDXMmXoG+ZGONy6v0YxUjRrkcV\nYG7Y0tqiw4EyXDrGrka7Yq4xSE0D/4NZJ3r1oJ/98JD6MCYFEDpbDflyg/xH\nwDuYp+c/YoXb3wNT9g0XSdEQvbTMm2sLs5aWJcb+5pGf70mzdeOhowMjyxm5\n/N2SMqiuEp9FoL7BYUeI9vNUnN78rgPIWkBDGWJkI20pEGxKANKfB3gVpTu8\nQg8ttcwPVkO/ktvSG0lHEHFLQiu3dbfKxP9Ud1K+t4S9TFw/87TzTgcXC7/S\nFkPA/iUbdL2PClRHTZF0UBJ/caQQdRAdSYMoVmFHTDrkIpv9UT613Z5WuUkX\n1Y6a4k2qkzA6zD+2OFlpGhE5oQK4D5v4CJXnLLeMpeCbVKq0bjSWLeLyXKwL\nTC5GEvaRXHwhCxh9SW1xnr9c0W4JIxA+uK+oF8SlqZnRYKFk8VY71j7vXDVt\n/8CwfWFP/5PpNQ9HoNEK1421O7qJY+s9RxwZV3I5fy8nmLKHvxlAA+J5vRh3\n7TjFeRRqZ2Rt1okpTeqtwBvgBZSd3W3LQaF0UcrlmwGk0xgdQdh0aUh6vRL8\nUWd/\r\n=HnyN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/shape":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/density":"5.0.0-canary.e8a993677.0","@material/checkbox":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/elevation":"5.0.0-canary.e8a993677.0","@material/typography":"5.0.0-canary.e8a993677.0","@material/touch-target":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.e8a993677.0_1579625436331_0.04573262045425075","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/chips","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.cd4903304.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce008808fc35cb8bf2bcb0dd6f3c342718e5a309","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.cd4903304.0.tgz","fileCount":58,"integrity":"sha512-DvHZaX9NzUCzZtFJ+6OZTCSm6Ki9MLo8GBmf2SD2B2r5wjWC0QFBf0YZgepKtmrXwrUsKxB6nM+2VrkPJymLKA==","signatures":[{"sig":"MEYCIQDV+1swMJTxT1hyYPS62G8FMkDZRqr6TTsNcXATa2qe6AIhAPDKQJwsTN3xARnvlBLBj/0tvxWw9y78hnfFH2YV8kzO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ282CRA9TVsSAnZWagAAOnkQAKO825g2EYFQzwFT+zaj\nfasjiWBNP3/O9ZZx2nunBXja9tTwg9uCkzorSuHx8paWBpHMnRSsXJVyv9rr\nrG+QyxFFRcKYv+au9esAw4YjMUuiRQSxAFArvtOmSA36Z1EUm6hkAYzAzE1i\nw4g0SevsQD3PoNzu8d+r3g7go9jYVU5UgfGLi2CgFOVUPXDQzkUTvkriLg2d\nD7C6AcOQeyZS+4zAPZmeEQrmJlAiqY8ltZxSgdbVSmWnAa6uvckqhrwt9Jzd\nsagFk2NNQFVU8X6Ik4H0FKV7hn7wwJqLcmTTM2SNFXB4P+hARHBPb8DligRr\nRAP9CVqNtgqF3n3AY306jYQW0K2o0Km9s/wRRfuG0e2CYldMprSod0mySfKh\npp5cciVzW0i7zuWSJQCPln34WuELoyTmW8Hf55SC57gvmMxEJuFULIPxjSVh\n4MWdS3CEXOdpO2ZESpmspqJJEKES5ZQTRrx/XzYRk5zgrGQExvGWqPXcV96p\nUEE+eDnvryLjNIs4bVkQ3eOkNlrPssnSC3oPYemdhcMos86qIJCq4YdafuWB\nb1RBb1pgDjeuY6GTYIVAnE5GxHwnTFyZOaQSpxJj07o5Oj092ZKN2Xp8mWRt\niq13USb1eFlVPrHavSvlYQ1PqeqBWiK6iC07DkEjumPJpIDmgDbhIsjWq1Eg\n8iIn\r\n=SDE0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/shape":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/density":"5.0.0-canary.cd4903304.0","@material/checkbox":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/elevation":"5.0.0-canary.cd4903304.0","@material/typography":"5.0.0-canary.cd4903304.0","@material/touch-target":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.cd4903304.0_1579642678378_0.4714022361689889","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/chips","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1310537ae1f1bf2e16fb996a8e5ff1aaa9cde774","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7e4b04b25.0.tgz","fileCount":58,"integrity":"sha512-2Rkomo8r4WzVos5UgqlvE/fwcDCyL3MME6gx1Iu1oSRBdZXWjKvZF+9uLG+EMZeoA4/kfxEPr9P0aDNhBZ9c6w==","signatures":[{"sig":"MEYCIQD/MDkyiiwzX+sO8/Qa0+0sN+IfjocS6MsMPwQ5D2A4QwIhAJDNURRk6FiTnuaK1JlIAMZ6EypNKF3FmpQRStzoViH+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39lCRA9TVsSAnZWagAAvZYQAJtjsyASYzdn4b8zk46o\n3oqzWfAHlZLqYuPZqJ3jodIuklyLgaeCjN6RSReE8QI02wVpe8gkgOM1o2DR\n+i+t6EQ++p8OCAo43PO4mef4FglCFFedFV5ZyAjsKsRteUSsht92bUAYr/aQ\nBQDP/EhW2Yd36ag43tCC1npuGb9ksTVjIeGYEp6cufXzmkw+XnmQ8Gh/Go7l\nLNEUPUxsuTqdwLOHA2VKmDQ2I+kwoqicx0aHAz1qZek20ArBDEcLIF6pPrlq\n32XKEhzPhRr4dzFhMFV5/t5cR4SlzFaDPldqncL0FMSM59bSQRg5jFQxYkMz\n9uWaRd6qTsSnR9xU/KTEptnPhqCtK3KNAJXSv9zyvGK2s/a607nqyEKplSFz\nA8YK13nn6u71B9iiW86RQ9EOb799geqq1KEcjp79yp1Dq4cKr0C0p3Uma1aa\nYIu9fp96K1dhpKloMl2bux0cBAf0JyuMTI+5L33g70LV/QLH/dGAKqvmE4rG\n49gpUsIMdaVEIbhsu7wc86bg6c0ACp3U8XiH5phic191kReW2ka/A+447PII\nfkYe3zm9XTzCI5FiR623NJUOsNC/wK3fL1c8Jyr3ylX2Cp5S0yE2ASQEFpIb\nyOXBbZPXMCQdtTATQYetSHD6W8JQxDn/GfXAOIyTLTrJE4R2V1ZRAACZ49f5\nVNK5\r\n=QS47\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/shape":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/density":"5.0.0-canary.7e4b04b25.0","@material/checkbox":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/elevation":"5.0.0-canary.7e4b04b25.0","@material/typography":"5.0.0-canary.7e4b04b25.0","@material/touch-target":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7e4b04b25.0_1579646821157_0.9358934906275207","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/chips","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ebc296937.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdfafdc5f294719912f91fa38d592ea27725bcb7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ebc296937.0.tgz","fileCount":58,"integrity":"sha512-lb2L7e2P86kL2elesfV9m5I8W0b/l3kWEzoUJ9iKxGHyPbSvzvTrc/mpo0lFmWgXHjt0heeRZ0XcliPmSv3btg==","signatures":[{"sig":"MEQCIDPXJs4eFYnjEGvW1H+njvPTvOOWx6DeWJj2ILRleneAAiBhmcaaEZnwrH4k8dHBKSP2u42rYOipbV4p8XGw++loHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40jCRA9TVsSAnZWagAAFZoQAKKTAOYsRlg2ceNqxUmx\nn+9i0YU02LAuYbxCoQHNhn2HlyhOb+HAEAd7q/kIhrVtsb6QIR2wvJulumpX\noqm2/qUEm7PtgvcWemBWi+rgg+aH6T3fQHAapbULmR6/MfocD57+T24bYVaX\nGSYBTr4pzZa9owvzxS3UqTHOoy3yKY5/ifs/LIUN5oLMdlhcBxFrirQ94hBa\nynd5izfvtssNT1JNDpoMGoGT/BoJZa+1K4GP5C0yvkaL30wgnAsu2RPSOd72\nl6KslVPzPhQkihoMlRIDPVL3wW2GWokNT/I3d/oRr5KvNudxNaiO2H/Jv/00\nL5aJ8wOiiuWbIeIlaQ4YWcC049S0I1+vANOaQZvyNjjLJSBG3K4+e1zdFjc0\nOj0bTXcqqyWPXpad9jCCEJeky52WHQlo9HvwecH9cX/HizBluD41NaBvV3/p\npv9N9L78HMxkBs64T+KvOZIAns2gppVycScQ6VkuWqEIuOmcs+UKs8W+nji2\nwbImXTQ1idWD/r6UGg6G9rmWKlIX/I2dfk3aA1fpfxkyJIkZyamkKD/SzCuG\nlARGtAwT1pIDqGFcKuBg4YDCmoRyCar5sQB3KpfpO/FWYHV878amwiZHyGj2\nxRhf78SrkheCxF84yLFCm4O+fTsgu77c7Pju3Cc5sIwgwtqfFcvEAqK0YfRT\n6xGF\r\n=XFNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/shape":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/density":"5.0.0-canary.ebc296937.0","@material/checkbox":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/elevation":"5.0.0-canary.ebc296937.0","@material/typography":"5.0.0-canary.ebc296937.0","@material/touch-target":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ebc296937.0_1579650338639_0.49652839933099835","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/chips","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"130e61a71ccbc491cc1810c6618cb7e2288fba5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.cf33f113d.0.tgz","fileCount":58,"integrity":"sha512-yXEPcRBGgqRkgftAu+odTYJCyVqduiwAlNHNFDlHIQYg6eRrZWScM827QwqnRvz1FC9ljkzEwkQe+l/8YBLSMg==","signatures":[{"sig":"MEYCIQDmZaxW0eyms7RL6s6DYVeumB2hIhGTK2xOli/TsaoNSwIhAJ9E3NAVFlWFo37ZIo3jSlclBaNE2AAcaGNLxL7dCYyj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6QGCRA9TVsSAnZWagAAUa8P/3XbAwKc6NAxPjsStjiI\nv8vaICM9ZDYMVu3BY/tnn8vcNaqxfRNk+Qb+ECidnRXmQgGsBvDx2ZJGu4v8\nmYzmdZxlJbyvOfjXKPPmFiGvv8E3twZRW58bpTgZo/pGMm8kbEV3MuTPojGS\nI8gisUt1eeIlTKzBydS1MzlXGSxFH4Gh/Jcz0yTqGuKrdEoIjYBm052/1WDV\nnvsW6+rmdQR//sbaVuMOpQGad9XA7YCNZK1vCQqH6PdYCuS5xpHciYkm9E1l\nqpkfN2lM9ajOPORoEuB6TZfBuhp++Ka27NeGt1zFl6HWPi6vD30V2HQ2DWW8\n/rhWYaB3a2gT0n58Qjm4oUsoT8mhDzVevUZujq3MpLkFvYVOZYAPCi+HdGcV\n61Q0IGdrhzWEAQp8493xzSwhlekZLLmIP9rNMMc2uuhG2iQoVelQtb+Bo/jn\nCkJEFzjn+g83OGJRFygNRHZZrEMpMAyAM7DQMyShnm6D0h3MocrqFtniSg4G\nxWnvJwhTOaSSrQmy4640swYTEjVO1IZWAGrbWiN30ykSTDQ9ZudlpIwp+ht8\n+1PLCpkvwi1Tx73qLXHEvrIimMJnX22yrl1o8fJdv5PFNAlJmUF4EqTLCc+X\n36QGOmZ+Xhu3fpH5eUAImTqWSappik3sZ/7mwKD537cPvd4WptQA54F1wXxS\nZ29W\r\n=aDXC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/shape":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/density":"5.0.0-canary.cf33f113d.0","@material/checkbox":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/elevation":"5.0.0-canary.cf33f113d.0","@material/typography":"5.0.0-canary.cf33f113d.0","@material/touch-target":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.cf33f113d.0_1579656197785_0.1615037559409238","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/chips","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02c32a2bc27433bb0ebda78f7fa373ed62c1f0df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":60,"integrity":"sha512-HwboIEwxTuBBbNErJKexdJ+Ldt2ktaiPb3p6Dbrz+pv56WpxHezBLRXax22Gffg1PKhya27LpTiw7DcrHkRzKQ==","signatures":[{"sig":"MEQCIBAeO/WM3dpO2J4fFZl/SHw0C6j79f2l0Ybym51QPg22AiBJA5PU01ylooWXHaoYTy03DydVAaCyDQ19BgZYeWackA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH63CRA9TVsSAnZWagAAl6IQAIcnVOHcIUxF2vfZtVSS\nSce5pQgNA5yZVYMF93mOgOwQ3HduZ9FUbornpeuPeg3cp5qooHKHI7wNix3o\njjrZwP2/H2aRcokDiIaOlK7xW5W1GjZhcYdGJybtm92YGlzlLpZOQHJpPhtr\neKu/XiDH4UrQvk/SYGZH7j0dw2v8LEwJpltzK3vkLudR6Xv8WlMccyNwC3GO\n/rm51nxq3pIlBO0JpSkHwY6CbjbeaiTJ/YMWf7xLvNYj0tLTDnmv+p7gq8cp\nUgYSQtxWu6uXIZdhuqk4ro2Ze2X/L/9FGQwqB8CO8Gcl4gj6yt7RgVeevhYg\no4IBDCq2pcSOiX6dzxjRBz2s3L3zoKVi23/P52yVCtgwI4x7ziCfpb/gLT+P\nsj2rn3ScsokLdQxbituMy9iQbHQs9Q3fMJony/vii3DlXWjpb34QyqSdqf7S\nvuIp9AXQH2KF8uLi041KUzi6dgZdtKgjiydHqp5LzRrz2FZ+xvH8HNrhLAmS\nf8AmPkHTDVPJFLM54Yi/6CkiBF139Oks6iWgpYMMtm46+3zUkTB1y/b3Dlmn\nwy4McGEiRjX8S8G/KqpOkdsvx9k72lsKFv2QigTW1S5GlyyKqNPXyIGFsBAt\nbhJrT0nUGqygLju+WONmyfaafZc5Mwvhk/BuGPlI7og/R6vYe+DBKYOa4vYk\nIYo5\r\n=GIEz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/shape":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/density":"5.0.0-canary.e1d5f1be5.0","@material/checkbox":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/elevation":"5.0.0-canary.e1d5f1be5.0","@material/typography":"5.0.0-canary.e1d5f1be5.0","@material/touch-target":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.e1d5f1be5.0_1579712182861_0.35240003121221886","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/chips","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04d1e370e5ed9c56c54909e15debdc586e364849","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":60,"integrity":"sha512-/iHyRQyF8xShomrU81sCTR5mkyv1vxCCJGT2hf1Ee8xxHOc1gwI8nC4fAp93A9J1YAGQDzDS3dcclFAIK3bI6g==","signatures":[{"sig":"MEUCIANHm99BDPjXqSk/kUk8H0nOSz5QJAQN24Z7jFPIrbGVAiEApWQ2Y34omIX77NjW+ikE+Pk5uvRkBFSuK8C9Yxh6uq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI1DCRA9TVsSAnZWagAAApAQAIIY8J645qR0Aodepsd2\niBUSwo+8bH0lkDJebhI/bs0Fg8BSeYQhQVzhTtbaZMLmZXzNnWkY5ROpWH3q\n1me6Uzq/9OoZLpunkPvBfNg/zqAvu/hldHfAzYc48nAIUmOje0RynapnAG+y\np62wpT5dwwAbmAuEhrhdUIMJQ/CxiTcE6u0Zgs6K+DbpFbqX9EI4mh2MeLQX\nIIn952Zci5T04WbXiz9NJCq8sa8XpidJX2yvk51/3WNH2zFZ8TWqRpntQiM1\n61TDNLkBVonAW5sM7wi6uOeAnBaikGM2a46NtjmN/kgb+B2sYNopR0TJWVDY\nvCglzliJbWbIwt+BZ2eGKxzlVY3viWZ9D8Cxnr7Hq8OZ/U7ivlaCEoJh20qu\ntR4+vXS2mgvXbFKHxSMIfqiysT1KlVyxbaSCCfHeib5zIGjmULQbF2/4Liz9\noPjCGXTKZXA63/5alsC8awFePd7E4hG2iOPbknbSbfsOmlSiYFnLbJGnqrnA\neFZ9GpyQj/TLO81j3RqctgJBgGFfUC9oTNh7IT52iEVozPnPBxD8E8EBuw2q\nvzs8Ejma7FAzyO6wIbCR0mllWlzZ4FxzJZtYFRBqwSZxquqnHZ613Mty8PXn\n0UFDu1FOyuZLQt7ZpIQqRc0aKv1iXI2uouCNlkeshemOcarAtfl5j9yMU4mK\nsNfz\r\n=Bb2j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/shape":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/density":"5.0.0-canary.6b6a4ff92.0","@material/checkbox":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/elevation":"5.0.0-canary.6b6a4ff92.0","@material/typography":"5.0.0-canary.6b6a4ff92.0","@material/touch-target":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.6b6a4ff92.0_1579715907018_0.0034241893557662717","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/chips","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7972aa66533805b5ba6d43ffb345b5d846e0addf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.6092f71ee.0.tgz","fileCount":59,"integrity":"sha512-j+LztGltSF2Ph6c8m4NLokOJoTIF+JfkceM/GO9JDsqdKDOyoJEYneUsaQQGEDlXvqFLhckrAtCMAsWoxgIqXw==","signatures":[{"sig":"MEQCIBfMq62Y/Wv64fl6Y3W6TnHuboJVlsddn6rukUzlsRb5AiA+Tc/vW0PbdJIoBebpYmudj8jSFIETt5JsRDjTUmsb/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLv+CRA9TVsSAnZWagAADhUQAJGmR/0TlHsm7NIuFwdA\njlimryp6fIpvgSUzNetF8V3jZBS0TAyoUvyO1oTqnh/4PSe3wdaotGuY19rf\n8k2mKq4Tf5xFuXU6tgOKf+AmYTabiokujcGz+HfNsD4eMh3CPl4Gid+4FiHK\nSgiIue8q2xqYkxBVZDdR1eYmMV9mGeq2nomO1DSYklr/C4tLra2Bpu4I22RH\nMUdtJdIsXNQ7OvKP0B8MNIfJ8RKTEUKMR/haZfhQDoYVT8GPp4UXE/7yCI6z\nqoQkrS+uu+VUFU8HpDqf/2B7WRQITyPS5SSXHHZGWFUIG4NgsRHj+RHSpm/q\n+ha1+BmUSQrWGuDFaBb4WCBaObcAu0tC8wt5Qm3CelsxQ9gt963U3h4k1PyO\nDBzZhkZ0O1s+MzJfzytYCIBmsxX1tSRhm5hb8nK5f0+vdGx7loQQfhsGu8cq\nli8iUt0RMFUULw+v4Vm7plqkLX9KQg93r/86XSTraphh5G9W9U/ir1YLeNCX\nKanVQ7nCveZGB1FZXyp8TJCmqEHNNMvG2A2KERHn9LJS5n277+neEPA1BGuK\nXuxsmIJKwwbHCzH54kkKFjXlQJ/HvxmGOs0id4Uq0fZRWs/lgvFyxP4ruSt/\n6OSiLGkVROdZcIgJn5J49h/yRLLWnUgXYlywWbDmv2nnYbUtWKYDdjRDCII+\nhoMD\r\n=4+av\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/shape":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/density":"5.0.0-canary.6092f71ee.0","@material/checkbox":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/elevation":"5.0.0-canary.6092f71ee.0","@material/typography":"5.0.0-canary.6092f71ee.0","@material/touch-target":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.6092f71ee.0_1579727869622_0.04809361681487512","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/chips","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b9e994b4e0ed503d3cef8555416e2be251e86df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d8d95020f.0.tgz","fileCount":59,"integrity":"sha512-hpmh15Qp0aO+NB6QwS3MervmnPXkHFfnzanDmmYp/gEr+UqAx3r96Td0zQ4I8VnN3ZYOYMDKxebwdyu4dX57Pw==","signatures":[{"sig":"MEQCIDPb8fdX+KDOrNTl6NjSFpJHWs1856GCpfnrNHo/K0PEAiB1UoY2H0Ui+CexRvc2KQSQa/6Z1OYU4FuJ62p4fFCaPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZMCRA9TVsSAnZWagAAEssP/it2qxObeh3Ao3poiErS\nFmtnzxcV4VwTNhtbEcYWw13XESFBzmE7IFXXDyKxv1euYPlB2iqLb3OJbXYH\nMI2pWZgIdoi9j88LKvmR4nmFVwsN+5WQCEnm5NAECRgglQA1PR1V5TIbz8cv\n3g6v24ix5w9BtPNDN5uqUpYUT8EOqLNaX2obWo4Sp1t/sUrHdsi28EtmSgc7\njpX2PdOV6HCZpG6mOZR38jLLanetNs9QGQ0sJfmzBYIT6pLb94VwRZDZ+VX1\nl/45msAo0XshcplwSRrdV3jw5Q51Tqk5WKsHcmyiFB6nAKE6O/aO9icSS/rb\n9a+5ks5+770zqXuu1pMgC85K+5qa66PL+8KBrujaQMo25yeiEM7rmya8UbBp\nWer6uUOJl43lVU5XqErw2cAuYeU8KziO8Zx/gi/Ddis6N0g2tniOa1/+k3XO\nhTLVUsFOtD5qsyyRIUyQiXIQlJSdSPsIg4zrCQOoJj8vVUAmcLb40LPUXE/E\nyXUmSXsj0REpuMruKtPE3bi78O/u9MRntdJPC/6SGDcsBHJjVeIcbVcGkwtl\nO0CRo7noPaByrAJ29TcVRyeu0ZO5eGY7jDxvKOAsSzN/w/zQ2yxQS0XzjHs7\ndWxDz/XjsSbTsyTGBcOgH1qKp/Sa1jtFPuHnhidBtyYeQtiPTAxCiVvaQNpu\nFX6y\r\n=kvhX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/shape":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/density":"5.0.0-canary.d8d95020f.0","@material/checkbox":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/elevation":"5.0.0-canary.d8d95020f.0","@material/typography":"5.0.0-canary.d8d95020f.0","@material/touch-target":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d8d95020f.0_1579734603800_0.4120023087922342","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/chips","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b7facc628.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce4913b3284624eb6b618a3b6f5f57dd88410c46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b7facc628.0.tgz","fileCount":59,"integrity":"sha512-x2cg/Jjn5E/VtwmmM4LglrWVsz+Zk1wXaMj0k3xTphIxdCDKqTOgG2+pQI9TJBQSvFtUk6Fg+6xzk8ZKkwshAA==","signatures":[{"sig":"MEQCIFEQSZfMUZiet0cLAqRa81t884qOkjz5Tq2W8ZcJn9x1AiAMhm7I54wAjGnz6YcJwLway/RfYHTZf59uF1PSV7iWcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeI/CRA9TVsSAnZWagAAVVkQAIddVGLgChKRCT/icZka\ndycb6IddN/misJYsF4Tr7NUGuxpoLcvmHba5QHPkBKGdcdkyqimoyFPGIa7p\n/0fy4ijAy3opQF6IMTPpr+MiV2P8Pt2WF3oHCVExID/ZtvzM+52ASmivVKh1\n+pSFem0bICPNXMuG+XzusWQxJmZIwKMIPV+iOUfr6H/MDnaIJVt+ETMre+hI\nuqDG8jKu7XUG76JLgT7RhipTAq997W6On9nF0I5e+pCtiqCnds9008Y2mUA9\nmALYWzYGoNKbJm22UTRSqTsxdddZ/3WW0sMJS3r9QbK3/xkNw2rTf9Hjcn9q\nNjDGmElbNuhmKCtEvRjcF+Xb5RCeOHWCIBdcP9Q3DCYtcwR9uMqAjQzD7/Bn\ntC0CDdu2KF/+H8klPzY6TmVfBCTgCyFy7LX3MtxyVzBjIgHJYQGCoIbz4wpK\nIe9Pu5DnHVA8b2gElfqr1YdHTqABDIIOi1bc75m7EBRA4Fe4UKyZMvqvUqHI\nAKR8dJVlBvPWBgocYYQNtAqC5i0STbc8/0+/Q3QQGW+9X8IE2U/hKcRbPGNN\ng3S9I/MTLC/MWjzwXqE2GvXx7+MA4HzjdQ4fyc9yJjW/SG64tAUCqAOOuhpa\nq7bsSWzwnlHZsjU4of1KUlvE8vFUuQfJnmExLd/6uKDkTjJxSphHaD3YvxqE\nFc2y\r\n=e+DL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/shape":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/density":"5.0.0-canary.b7facc628.0","@material/checkbox":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/elevation":"5.0.0-canary.b7facc628.0","@material/typography":"5.0.0-canary.b7facc628.0","@material/touch-target":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b7facc628.0_1579803199325_0.6098216052320637","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/chips","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa3408d5a2029039ce2e9132f55ec004f865ce57","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.63f357dbf.0.tgz","fileCount":59,"integrity":"sha512-erJsZ3dNWe/6wM8fvYIbNHJnnfh3xyJmitbxRk7J83Lb/DQT9GnzHvY/iBl8B39WdR7pFkerFjuNRqBdXh0xvQ==","signatures":[{"sig":"MEQCIETOlBJAaEfSkvUNzIEK7xhS2gclAsQdIUabcDY/mftkAiAPF9ECYjiNysCQ5PwMcispZ4DDZSqnCG/D9Ysmr9o8Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZxCRA9TVsSAnZWagAAA/cP/jZ90y3if4QIwH56PIa2\nW4LWn6w80pu6S/YydCEu/z04f+8b8Yf7LQYJS05oUAkAN1zaeZSnERW6PBma\nX2jwHqbND2lfiT3B1OBLKTxOgum6x5bCJJj/xOjhE+0Ln1waPKV0Gk2joKq9\nvOcbak/qx+fGOEDbhE3RH61XCScrqQMRAgQFFqnYpUMNAe65kM0Qu9oNWkbU\nd4H0jOwAPRf1MC9/c8uYuiABnQzveTAHx1XvZd3r5f2k/Fb09fjHFM7ACMmQ\npRmM/ONfHr8XhPtNeRD+DV/KJFHq8K1jPBDfGqFB9ifHTC0+GwLMCAD9sS7S\npotWgqvWk4FxtM+P1kQV7ogU17OgP1RIP858BN7kL/QfOExJOg6soHKfk7Mz\nVqvHuFn2ux0gCWe4ekff+03YwITmUNQLvH3d4Un7Rjb1Ffs+apDB3wdlfARP\n9e1NGBIVQsYOZAIy2XOrMPZ7DBl1mZn23x+Tn7nACRIeokhVGVbDAUErBjGA\nUXezrCi41RETbbZ4FsQkWHFaUXLFs2+qz/vGZaGcr9s7PXT0zmxGqnDkhxOm\ntdIQZ641hl5VLosttigIfGLhVFEH+Kx+lFv/MT6M3OkMRH5uRiS5RjgyQVBX\nyrPZtqY7hjFKSkQTJW+84UaSynpyt43N6axVSCrOb0YZlSe2x0qMwwzqIBfP\nraJN\r\n=RtGY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/shape":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/density":"5.0.0-canary.63f357dbf.0","@material/checkbox":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/elevation":"5.0.0-canary.63f357dbf.0","@material/typography":"5.0.0-canary.63f357dbf.0","@material/touch-target":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.63f357dbf.0_1579816560969_0.990663221333471","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/chips","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36d2e183b86d8a870b65c8d520666cdbd7195b6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.f2426d26e.0.tgz","fileCount":59,"integrity":"sha512-fA5iHZkbSvxHrF8zhlCVGAfCvHKwgJErT1cpfK3xqqy5RstcBOnka4Ic6jLqD0ooBWj98zsur4xr+hWz9OdVUQ==","signatures":[{"sig":"MEUCIGHhdLqb+uX7mAdYXBDAL2/7L6SV/isVtkUjcAw5jzqNAiEAxRj+gyPlGnpUJZUfUk0rolF9iFu/gSfavb8Q+hKA250=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjKCCRA9TVsSAnZWagAArDMP/3OSq+ffQrcV30K+TGuG\n1aeocGh71L1f5oqUh1NThAbgmVJsthydxiGdasVui/6Kqc7KoLqyBLHWwQno\nHV9qiXDg/F9dIlZXU6jActDv+U01x/MHoB4o6LIoSXzCU64UYSDXKx1jATSF\n0iSDLRSwqLYCqVZ6HCWKQf0kf+K80W6Enpo9g9nJ+wODf8glV/aSPjLHqC0l\nJ8BTnOfFdFojn9BK9rinkisLxIhJntf4Z+A4Mu4w3elx3gdx8WIWA5pjbWEj\nZEjaCwIg8H0tCMVjvvEkmvEEZ5RQPV3Meec6aa/kr5iRFGtZ9nEZHGmQPh7K\nrW5l11elo5Etaq/Sz5nO0JsKnSwUHXNnbApt4+MSfmO1Jlrsa95HkWbTK+hO\nhF6LdCrMJwTMmAB5l+wuYs6bbaMqx+P4L9EYxm9DAyFkTX19JAI30R5ngdui\nfNxX21ed2xUwSlE/R15Qz6UJTRu7Fom517NWbS+j4QxGwDgqZ09RQkXZBRxI\nfZYf+dL8eVDYBeoY//7lAZrueLzTuc34M/PX8K7L+wfhIyqjDTHPep5RHais\nHC7LTaoOIv/R7LBg9fFnB1F0ClY+mVVaXHHgFUds4QL0aOMlOrH1z6gJBS3z\nLAkBBE9BYVRb6ZpykKqk7qz1z94bsjHpuWZF0/ACMWrRhY20MSxtsgBQu2vx\n1xdE\r\n=9Gco\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/shape":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/density":"5.0.0-canary.f2426d26e.0","@material/checkbox":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/elevation":"5.0.0-canary.f2426d26e.0","@material/typography":"5.0.0-canary.f2426d26e.0","@material/touch-target":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.f2426d26e.0_1579823746123_0.895715782528629","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/chips","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86390484e62a0f9638f50fe178b4fd444bbdd63a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":59,"integrity":"sha512-7Zhekq0ZuWoIW6cVEui6Sl3V4UpZofdYHlLFu/Rf3mIoyqNMwOBEYAPlgOhQUjuMUN1ldcZkxSuj5LrXGemgmw==","signatures":[{"sig":"MEUCICbDwlK3WA9AeO9gjaKfxvOEpV/91D0DBUp4KHEPU2oEAiEA2W4b6kEuDRNrrDU5OXMoyFnXeWLg/NyzEstCuSX6XSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/PCRA9TVsSAnZWagAA5N8P/0ClAryjg8CC0r+TVHBA\nk3KN1XPkR6XbdHx1zYwIqkEfEAhAdCenQWb88qc9U/TiUUC91D1iDZUMqcK4\n7SsL0iwX1i1UZwQ2cOqXXw0qZsiQSlfPCdzjTjd+bbEcX6FGWxTkwhM05fkc\n1HMPmRI7IRWLX91EiGGVHvFCpiLJDuKBeJCNb/9YxbRbaztTVX1ezzdc+yoo\nEpGsYedwc7vMm0+cXZE3cToDiuzUSMJiKAqvqlsBgGq5uHws3gKhKVSzqyZY\nWhbvpNWvNPO6yiH1baUaSdk/IMe+UdLDLMIkbMVThIEofsbAK+LZj9jrJPgM\nltaJ3+wYINSDFCzycz+ncxScRCSND1ZAciC2FHPBc2CmbFGJY/HxMR+MDfJB\nMWIOijuP5EZ5KahlCOrbEa6KGpmMt42MBmWfn1I1KCDBgb6K4eG/CP+7J87P\nJgCMlMxqftktbHx8tQJw03YPkJjCoI41we6DbZEqB/qdNmTamosFhycDzmBs\nkqX4mznfJMcRJt6yzOLLbVMFzg9YFsHEG2uY2kGqSkzl4uRAsyoaj/HlDD9b\nuFlvdLI5oHILN27DEnYp91hojLEBtPtihZwy6NXHbmJb5kUiOeuKYwCLuvk1\nf+TugFmuyLWy5XSxVZzPN5MX+3QxWIbcb3k6vP9v6PcOPCBj0ofkqLy+tJEO\nT4I6\r\n=oqlB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/shape":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/density":"5.0.0-canary.7f5e0c23f.0","@material/checkbox":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/elevation":"5.0.0-canary.7f5e0c23f.0","@material/typography":"5.0.0-canary.7f5e0c23f.0","@material/touch-target":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.7f5e0c23f.0_1579884495137_0.18149431865503662","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/chips","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57e1921a2df546e93092058c5c596ed752b3e47e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.3fc3ab520.0.tgz","fileCount":59,"integrity":"sha512-8hexOxLPed8E0x9lK2kq6C9aMsYbULLF4c/A1Ki2footYLeXsjeAsV15W1OCG/0qhPCtiv/ixAFrdc75yv7SIQ==","signatures":[{"sig":"MEQCICfu5zUo4GKfBDylsTnlMpbRjMvTsDZwmmA2wFbmsx6+AiA7W+MLtrc1S57xh5xja2f/H3+qjS3YqNIVfNDlIs7Tlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyeuCRA9TVsSAnZWagAA9ucQAIZFsdN814WhHI2UjZrA\nc/3USYMBwUsgV81lJPngG/fTItaTzL7fvCNH7Cayqk1oU0NSjTysrZHnfyXb\nSLmP3Zs5mFL52wUPKFlX6N7Khl95FL3WRMagYOjK8T4Yekf9LBD552j9szq2\nYpBrfZiDJ3ByeP8CAD0Pw+cjO/nkuv9qgnKM//1FSIswcqyuxMWuCCG3VCf4\n/2WsGJnSQCpCxgUbPDbRLy6kAbuqxmfR9UFO0qhkPXkVs/Y6/XM0nyoegBT4\nPS/yWGPf2N0vAuI4ooz967h+z8ef7sXNlEiyx873zrmcN4nYrlaaNpul0Mdq\nKmZV3ccGAz/cg5QQhghTyf7hT51voAWI1cIhxrkarFP5LKHBR0pU/Dj//9gu\nFVdZcmGjv9ZmP9o3Nrc7QIhVzuNGQnAF2ICu9dHVcKIEWIo76UCH+LkbBEzB\nplLYX3S247AZoKInJQzL37vGs6bfZORt+2M25C4/YmxaJAJvs02Tut6X9p7z\nPHjwkL6Ugn6eP6qYRAfXbqD4aUCBY5WXGYyqPTVPrhJSnsx7FcMgeNl9PfFl\nFdzwE3FSUqwI6f+D2cnEQ+wLxh6uAEUst5HSZ1dkAMlLoDcKErZRocuSsdFa\nKgNgSy3hLc50xeeYO+vx9qL7gjYcBuBG9Yz3yPgSH0sfUykaMvTxirSPZEV1\ngXJa\r\n=xH9T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/shape":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/density":"5.0.0-canary.3fc3ab520.0","@material/checkbox":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/elevation":"5.0.0-canary.3fc3ab520.0","@material/typography":"5.0.0-canary.3fc3ab520.0","@material/touch-target":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.3fc3ab520.0_1579886509762_0.6560892032120913","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/chips","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e523a1d6dee717fb753a343fdebda1194fc05804","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.80a4d326f.0.tgz","fileCount":59,"integrity":"sha512-XytliiVRNMQ17LEpFVHlifDjx1NrnytjvMlkBoC3FXnPLIK88Tx4oSTAzfIzn9vt4l+v/UwaVoS8b9iaQmonTQ==","signatures":[{"sig":"MEQCIDLCuVH7pnknKGLZiGX63D31DMNUIsvcOI5i/O9paohEAiBz65v1fZRM669ZrI3dx3H5Nl5fta3UY7F9xyVE2b1QRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1etCRA9TVsSAnZWagAAgq8P/3IBmi4jWltNmCPfO0rZ\nbN6TLDcffKEkWWdSNE84zJL4IOPTPEpzACfQTBakL1zsyTDuARt1n50Wqya2\nWc0zgOwJ1Y2La58CnAKUN9udNI0PluYtQ6pEoaQqaZpTcRa2qj//ZCjOqjnA\nNSxw+W0Qth4x7ltXpMQrlWtP2GOJbE8TFBhxwQQVo+jhtaKerCF9hEuKztoi\nGjuIWzd+lahzF5uIzVV3lpNfPgrBzTXZXruoUaxIaobG6sxN4Xhd4FVRFWhL\near4Ox/CYx1QSCTCsXBpAItyRLAx8TvafwjGIK8fWMjjOfjAXmfY4Cgh5ChK\n4hFZh2yuvr8CY3S4OCfEH31I9GNVXfpTsSNYZS5i7mcDZ0I0SX8TZwxZ/qQT\n9bsS7aHeFoJ3DGbWr+VO33Emx3I4LNAwdRDXdtEzZJ15OTwUQ06hNXTO49oq\nb27CjSrkU33mgnHVRHvt+O/3w7nuZf2X/xHiLn0OXUWvtkVC1g3JYV8R8y63\nIF6EO1mz+NW0tEAQn2l71qGSwi0jVPWYKtOrvd6kdtKT3M+5bXNFvYjwdERE\ntkbcvXhJron9sh5LzVEdfETvEyBBovXhLsMKU/TvQriShLvfDg50CvjWSzfj\nFzYsPyJgEp01e1cE6glsZWVOk5dSgBgHvARutQdRxaqK4AgaypmjbGKb1ZO4\nDs8i\r\n=gyDm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/shape":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/density":"5.0.0-canary.80a4d326f.0","@material/checkbox":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/elevation":"5.0.0-canary.80a4d326f.0","@material/typography":"5.0.0-canary.80a4d326f.0","@material/touch-target":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.80a4d326f.0_1579898796829_0.675071313603514","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/chips","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46728b82840afc5148b09a2eabe9183ee117462c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ef7de4def.0.tgz","fileCount":59,"integrity":"sha512-pj/6kJJpJmZq8w95r2iDUKmTW6gJw0Tww9LR90mdyKXJ75irdADpkF9tVbDnFTYIv7QBnaaijPNk2f3KSInqyg==","signatures":[{"sig":"MEUCIQDJZpB2g+8e3vCgaHs2u9+WlTlolJFW/dGJg2yvpo0uUQIgW8UZTrbiB/Vai+gOMDuOlz2I+GAIlV2hhFE2KwMrZZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2KYCRA9TVsSAnZWagAA8b0P/3yUadoA9sAZaKrpIguL\nmNPlOGO05cEesxEMkf37vAGqhQPFneFww9koaDaHvckWbcJNgP2hO9DMKN8F\nz+BnlkzqhUMgLN/xPq4DWdVZS9H3cH9RFAHQj5tqYEzhH2PoRQ6DPvnJa53O\n6Fnmy+H7mNZlYIPhPHUmvpVjirEgD1YrW1CoH2clnT9Ap7TcFnwXJdBWUDbk\nesXQ2asavbpgxvyISwZnfk/ky3APFU4kXDi68eKjMMFNej5nS/y13UZSRWqd\nteWq/I/FwLM0TTEN4Xxcywt7ZRd+I6o0AivAxly/HmJN4FPq4XaYGljXkWdy\ncEvV+C/Rxl4X1iWeS6Nf4tXNJLpJQI/gdKy9tByZluBbQlCEM+vJVl/wex9t\n15FssPI1x6S1QUxfcfY4+kfVR2+vhw4Lt9Yac4Hjea3b8OVDocIo4FBqS06Y\n6pw2m/ZEd0amWArC5esbVpDliPVqG6LQRuU7Y5p2855dmpokUEJkH8KkPpir\nR8jKuTTt3vn0Il0zUZXA4NPHmQNsj75vGPNwREQxAHPQhwX5nwfFeqHnz6po\nx3T1nP7QRZT2/xx7w9yj/9xCW4ZOE4xUloj+bIfRwA2ydauAITyAOlVi9SHy\nkMxOAn0qlXmNNrkDxWgZ2IAfIVZUgkTAed6l+w3DtGvED1+KiHLnAvfHEypk\nyXia\r\n=KlN2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/shape":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/density":"5.0.0-canary.ef7de4def.0","@material/checkbox":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/elevation":"5.0.0-canary.ef7de4def.0","@material/typography":"5.0.0-canary.ef7de4def.0","@material/touch-target":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ef7de4def.0_1579901591579_0.44215121154595804","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/chips","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"988570cc56affc0c6cec1a164a0df1d2c8b80db9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.93e2288b6.0.tgz","fileCount":59,"integrity":"sha512-FSS++xMd7woufKbDECSA78Xi7xTLZLuoTuLtaUfVNndglCSEZhUWtgwkJxM54PoQyuRm0oiITqTqAMgYDc5Y4Q==","signatures":[{"sig":"MEYCIQDiPTsq36FjEVJtxsHEFH8Jd6w46BSn1RIm1BdLKGmy1QIhAM9ig7MKP0C1X0ZqMWnQVvEaNC7qdBIbw3NRdVA4GQ0L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGfPCRA9TVsSAnZWagAApAYQAJNqjskaq4RHPzce3cvo\nlGAYbmQRD+rKvdEjiRLIjaatqIjjdV5Vo1U0En2IY2rEtE9LFQl/s+VdvfTG\nHQzcV5W/YElxaSZHAaCbgL82TvIZfnP2oNBb9L7i7SlRuHU3pmNi8+ifvGrM\nwyCWN5xDjjkrnh4NoLrFuQqttiX5P5flfEsTfZiNMrzTzhgVb2NI7Ck2jW8p\nGm1hI5qy23+3wHXaIWBzBGE48tPrpQQDzchW1YcEPQr5F3DtdfsB7RtqFiBL\n6Yv1hAonmf0YDQEn+u2Ka0VDgB2OA4N4mFR16BOm2YEUqgWqNFoficVRvDlH\n0iCf60eBzcK67ki7cEB5CR6324voXG7lv+4uMi6IJ6P+oxf6/2zZfUHpMPG0\n7BfAX49aCbKL+jDrfGkyuwYPV/26huZYCZYVvUAif5V5y1edalSVMuO6iJrm\nIe7TiHFrkktLn6iH9lMVNUF4vHijewjRLUHt9ou9tMEr3dyO7IFwH8JvJ+k1\n6QIEp+g0U6TfmVFfkKQvHnPg/CAzCdecv5s0q1ipMgliwekVAEuI3HouF+a/\njzijAgdb+5To9buTKB4WFbhBmXRvB8N9fUz9v2UwRIPg0s0B5MIh2T9y8B3J\nv9wGfZIubhkRnGbKT1CaVzIZxx3BnrqaR5v0TwFHOh8YnUG4fmi8eQI+r9gs\nPWDk\r\n=TGDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/shape":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/density":"5.0.0-canary.93e2288b6.0","@material/checkbox":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/elevation":"5.0.0-canary.93e2288b6.0","@material/typography":"5.0.0-canary.93e2288b6.0","@material/touch-target":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.93e2288b6.0_1580230607438_0.5986947997743957","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/chips","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1b45e0835610a740238c694bf8663cb51cf0b35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.34ef15f67.0.tgz","fileCount":59,"integrity":"sha512-tljicJu01u/QmUD4859545HwhhJdGzZk1ZlZD71lr34tcveD4QDgONgRkbmVwlBClNJticQMq1EOqVISgo0uCw==","signatures":[{"sig":"MEQCICdKKj8/X06QY9SX5eERWCFq3xhW6ehjKMlvf6msL+cDAiAIa8VSws4pVBj3Bflp5nbnfGQLs9qhLYx3vkJRtnW/tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5nCRA9TVsSAnZWagAAXOwQAJ6MqOCi+qOuA6JE8O+d\njNi1sU7OZCKh34Q21wH6NK6HmB5JYZQGiU4u/zwM14yX7COu6MmQA8Q7Cq3E\nWFZ0I5dtX6HScFJ7kkP9CiUxjQDNyOqZGEB7VJfjj5m7/wWC0iiP8EsXRrsx\nXwzl80i2Y+kDx1fdsG57GyfhdCnE81/A7J/iOrJiRFUuzOVgF5ZHJ9Ezbkui\nAxShjMVtDTexzzP4ihSkoEJ7FgVUpPOt80NwFcYAYlgB8L3aUXKJovX2xCMh\nnPFeEXOTeYTuVaoXH4ekuIPxzsA9ZLTO14k8ZjOSvrnNP4F67gcVtDD1F9bR\nr9dBOhinPjmKHOrdg/FPrPTtRrfQYaVLRVhubMpWmsvllRppo9AxZ8u64wwj\nSDC1A4wWiQ5E/pfFOkFx6KURKUZlWKmz05jyHfOkAcKbdn30Zlscy6XVAr/N\ngzq+3SHzRMyF+PKjiL/pLngxlkvQpLRbHWp7wu3/rAb5c96d1WWkQJi2rzCn\ne9rgWGb9pVu+rtkQBPjbf+xXHPGRq1NpJId90AQ91iitdm0tTOCRtTZXou1M\nRaVA8inwKZD1VB53azdtk+YftBet49+EptQJ2DV4y50C8LG91Ezs9IvpPfRC\n230OlzPHS+nHq9sg3XK/lZNRVtkwb8Dv648rvawY6Qi0BywIk4OM7uM/ks7Y\nkD0K\r\n=EoM5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/shape":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/density":"5.0.0-canary.34ef15f67.0","@material/checkbox":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/elevation":"5.0.0-canary.34ef15f67.0","@material/typography":"5.0.0-canary.34ef15f67.0","@material/touch-target":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.34ef15f67.0_1580232295455_0.33694928485831843","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/chips","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95da72a30b0ae5f636cdf4064b851a110fb7d696","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d3d176ba5.0.tgz","fileCount":59,"integrity":"sha512-/j8I/e0DuqDYwAfE8WhSCUk9F1qRQSsdr9FNWmqcMP3S34+ZQ3v9pfMfCbACAVMP1yQmmeev+KQNsIlkYxznqw==","signatures":[{"sig":"MEYCIQDuFZYnqfcTBX+BJSJSNYqRucKqM4P2uFb2N7JHitoI0AIhAJKYrWOkZ/OCb7FG0FWIP8vSrIHoF7T6syT23CdTjTNq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+YCRA9TVsSAnZWagAA8bEP/1/swV3luxyBx24cgike\nfaHWGtD0+742JhSn2+AW0GwQlf0vrnT0lCmK234ip+06I79Xg4rhSe1MPYew\ngVymrJRLfsU1uHXDAUv8csisqU5R2N+OqndPP95S1oI/bYk7QCl2Vdi8GM+6\n6b/NO+4NrSfLhiIKg31MxTz1BE5oZwHuN9YTGps2+uC/++Lu5IMKXRFrkMr3\nGikZsXrKi5yRzN2VPPxgWB6DqxlxCP390/5jS/+sIW67SGxSpdUx5h6S152k\nP8NW9mtfGRRCkUPMGal65NSiAt5SoREyoF9h+ylfI79LdWovtv+71u+WPB0w\nDZtCli5TJvWsrvmrPjRtAlCNq4QcSEfYeFz/NbddG0+J/gAoxP2m12+2nu8o\nfdA5TTnKKBJUy9K2ti4VprLGjHaDLU6kb6yHusQynqpqSbZ434ZPah3PQkIs\nNA2lSHUQjmZvWFj57JfxfiIm3XCzRWLXfzVYbb1t5pJQIsmHbDdjqjMTyEHb\ntGal+GV+OR3eWS2a6mW5tc3VAR8EwNcZJgm2iXFVKIrgp1k+ZT3vFdr5zg2E\n3aNZdJtF6F/U+z86Y5a0Cnl/hr2Qc0UPUDhMVBQP7B3NN6t3lU7PDV7nRSSI\nqOfkWFGEC2zJUCDg6hWtzRfEbOlQlksmZO0uQooh/e3mF1yNxktPf+VO9N3C\nbR8o\r\n=Mkgx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/shape":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/density":"5.0.0-canary.d3d176ba5.0","@material/checkbox":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/elevation":"5.0.0-canary.d3d176ba5.0","@material/typography":"5.0.0-canary.d3d176ba5.0","@material/touch-target":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d3d176ba5.0_1580232600176_0.5175387891371657","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/chips","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.32c1df133.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b734e14d1853958d85c93dfa6d4df0890777bb3c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.32c1df133.0.tgz","fileCount":59,"integrity":"sha512-qZr3Hy7y1du9LKS/G7nZ/qY1BupbDtAPUU9JBswLYD644VKwd+NNklgGruWjgmOQTExZPkuMmbSuI1AZv7bZBQ==","signatures":[{"sig":"MEYCIQClX4TVJTgkcHxPaSItrOxYaY2j9nxwBsUfgpbatrrPOwIhANJBN5AsW904sHRIKypQv8V5FUN3cbkKr+WJb/PjQnib","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI8BCRA9TVsSAnZWagAAXqkP/Ru09JmnLmoLpiQCNzWI\nbectfUX/DapnCPIT9kKPnpnGsD5ypkFWGSy4ahyBnWYmFXN8mdzFyMIZY75q\nrJMR90zwuF+nF6XF4JMXV6u08H/kl4IFDtxXWQEprZ5dR15hLZOqLTY2GcO9\nGWudkXg3UnzIV4fRQq6UB69Qhwn5XwOBOsaxDv5NpQQbENLx7ZiOlceZ9J5R\nBDzalI/rEdmvj7nAu4lHL0GY4GtIYp7APfa7n2utBYGdikpUBUycezi7IjWh\n6BIk3NxjrAlaz2AdTJ/cW4PSN+ON0kLmVQ5hO3P0lH2Wqbhp7I+JpVhbEuNW\nbuXl/g+M8+yoIgd9kwJ44iFR63Xbl35SCMWuoXckMIgTLvNnomv8ZyiUP5uS\nfebVN7UOw6l2RkXDxthhsrq61jZmCRzqoKrODShODiXaHjuAx27wqGnmkG3N\n6PfAWv57/K6e3U6F57C6bfPtkHDZYnBC9gVDQekr1GLarZ/jz8sX1FlgI+Q+\nJ8JiIaPYn5pvwgx1fSar0bQEnuq0kZPYx2nYCP2dN8N5phzDTnx44sLtbu34\nxhpJLZTPSMXxFaCeQb3DImIIwqwtXbTU0d0DtovFD/JeE67LpFTTXsh18B2I\n0g70s2nBS/Z0kBwAZCYJvWBhA5kJy8uouPGEhIqneGtQuy5Iyy8yLfrq2KSd\npN8v\r\n=CESQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/shape":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/density":"5.0.0-canary.32c1df133.0","@material/checkbox":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/elevation":"5.0.0-canary.32c1df133.0","@material/typography":"5.0.0-canary.32c1df133.0","@material/touch-target":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.32c1df133.0_1580240640556_0.17372270056840478","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/chips","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26622adc7f8c104440039e96e61197861128cc6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.f3adce86f.0.tgz","fileCount":59,"integrity":"sha512-xQyKdz9vri8sFF16m4TO2JalZo0IESWI4gGhl0mm7cppIyQWmWUDNjtYZDsq6RpBr2nam2Ix1c6X+3ZRMsr7rw==","signatures":[{"sig":"MEYCIQDptaiJuUdIQudHAsnWHjTu0GEmxky/qkX4on5duKwnrwIhAK1f8dBew+DQN052ZZkJ2GEU/VU+69e7RJytu2IAIvBH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxtCRA9TVsSAnZWagAA0RkP/17U5actKwvwWnyYBr3U\nxpMckODApimYo7H/yOMAKzmK4OfXUacid3DrdrfrGXsG/6VOlGriKNYpydI6\nSBS3mCP/ZyqMKYa9POyIChhOE64uCvrGu8WK76ZWR1bQxOD/k+LHUl4d+IGN\ngf51OLmjqdSmK/5qKhX0KuiqIE1Ij4BTZFGRMuVslL7Lc+PeNOn7twIjuCAt\njjKtP/0MR3COHAs6XKDrJ3/J31wxevDQXp52v4ubtDq+STC5RLByeUDxtg/q\nwJFa2k21ZTD8G3wze1lt0d+pr4fzII8baLd1FOOR1oa2bA3XeS/h6DP4uKyT\nv6yzpcecpNtXw1Nj7f37fivv18gann39+3S/CaC9CIFW6EW4VxS4uD7k9xMH\nU+dJ3jpgp+wnalCa0zfrQE32UTQVKx8eud9sBZ+ORCM0wK0AEqDkymhSeWrN\nAiRyvf/yDRYvYdnSU013sI76hjygKY7mBQWWqWsgUiMWUZb4rgHPN7DR+BV3\nsvo0uJhNCbs0gnS9BhPO9Uvj6FbPEi+a4b5SKVd27qdx7FQGRIdAYi9TexhY\n2JBE+4fZuKm8q5RpJZjYwJEquH0HhNLA1Wq+LSlOLxkzAOkJDnOg93fx73/D\n34L18bBwHFLTtIY1Ea2BRhiJaQWFH5MiW5wggWqIEzHtxHPsZFKk/g2j8iNP\nFgFZ\r\n=p8wQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/shape":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/density":"5.0.0-canary.f3adce86f.0","@material/checkbox":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/elevation":"5.0.0-canary.f3adce86f.0","@material/typography":"5.0.0-canary.f3adce86f.0","@material/touch-target":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.f3adce86f.0_1580248173513_0.21700915086443584","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/chips","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a4423f890.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec60cd654f1c2af5bcd0b36d4854d8e68e5027b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a4423f890.0.tgz","fileCount":59,"integrity":"sha512-SW3hO4/ZbRW6Z4XPmbZHhj3qmHTC9q/HOKNamYXYSLTxgGMLzD6wJUkQ8u2fxeB8Qmgu/oFIWDjTlWNnRT2oAg==","signatures":[{"sig":"MEYCIQCp9zZid2VR4InfoRnc5fxbXowU2CsTuh2/rekTNtSEcgIhAPQ0ePLZWNIw3xjNEn7UPL11irH1pc2OhTB0kWIxXvw/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfTDCRA9TVsSAnZWagAA0tMP/0ZxK30++7Py5sxCbwB8\nYdCEZdzJQh+Ow40YlcZRM7TNF63qtGKn+6rHbXQALv5/sIY5Xjag1atpTHFo\nfe76owX36xH7r9f/hq4RDcKVi0+hkZBLWwXJZ6lEwKGZjFxeO/THnnMsITEY\n+WZ2LG8tuUXsu48GtprU3wi886bMenjrZ/dB3chqcQ5kOVYU5qnaa5mjhuBH\nNBO2uSQE5NNMwzwvzNTzd1kAeehI3sxpcPobjDjqTq2fr4d08Ng958ZIfetQ\nam5J7/ahmnhwL/oGqI3qdMKCJ8hcJNnZvEJqO+MeyYtegSispJiX0OB8MpSR\ndqtQ/TsyyYA4kJPa7jc20B1PE0SS89BDGlqWw5VTT1/xG90ZpomBkvMNafXU\nLsWSsPWDyyWmSu1hCUd2zN20CSHkngXtNkKt69xiq6lNFpMc27WRx6oDggLN\n0DPHHS7qMRBPIB1g9hfmtn+JoZE3S47/4iLnDb6o4e2/0/YO7a0KrJYmw+QH\nXa/+YVcVRCj403hbh2TXZY4wRQyFUtHEPtwsojM7G3iXfHD+R7Xo3JYXelyo\n61WBbNbGFmLPCc29eg/IVTfgTJnChx97G+RfoajZDVsKcRJj2I9gMCHkLgij\nQ8pmGBLXRViqXY6aMBCHJ88RlHlVbXmJ9iYxzBQHq7409S/rlaqUCWMTGfg8\nUX/B\r\n=O/j7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/shape":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/density":"5.0.0-canary.a4423f890.0","@material/checkbox":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/elevation":"5.0.0-canary.a4423f890.0","@material/typography":"5.0.0-canary.a4423f890.0","@material/touch-target":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a4423f890.0_1580332227180_0.9165152177900338","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/chips","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.9351f167d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26c10fd107553ba0839c2f05ae188d55deaf6922","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.9351f167d.0.tgz","fileCount":59,"integrity":"sha512-722hUI/KWIgPMxMSsLzRHqF82lhdwUJ36FkVOi3BwYe4JGN1J3Pfma5yjq7Jn6FS+YWxupOVgdH/e4+QPeH6rQ==","signatures":[{"sig":"MEYCIQDM0o1n4TbBMQ1lDAehsW7EkmxO7ikbqaOc4+QxR4A8bAIhALyFWKs3/+8FoyGKMIDdWyUB6w3NgB5LCav+3QOvtdgD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf+JCRA9TVsSAnZWagAAgQQP+weqaYN4Zyap+RIyQXMC\nGqEjiP5TgTMPSi2tL0EeMEaCO5AtML+mx93oF7ye0sN+Mw7bbGVPOk/7fgQ5\n1KTVE0ZoUtuyKpm4OewjbYGgrOYpIk6TEWkqf6S9g7VWTHgOmOpKtKMiRmWM\nxjEaqkybJdbbCUHFa+nmnSHL1ikydz6i1jmdBNWQ2iItPszgXRQEGc1Kfluc\ntt4mq7unrSiMWeY+waDPk5iqgEWW3OzwVgT4JXi5xzgI02zw3ZrccdR+DSvv\nVIwNj3IR8RsuFexzMzJYj1AgNhEFApFCUxjFRr5hNQzpOvabvqXc78xg0CI5\niJbmQdPTs61nk1P4DyzRwifd6KE+6Ad6k2Rwo2M011/06DlYYHpXu3D4/dfL\nrKuqS+4AG+5jcNe0VxWoxrhlVrQZUqlOdrmn9/hqHTcV6r28lFt+Ui4UomtD\n9HY7u5SEsVQ5DjODKZKQcY5Hy9KGJJUHcxyyTbWqFdqn832NO/V7UYsCcuJV\nyLmqWLx4tY8Rzx5NNwMwQzkq0N6v/ih4EF8Qo+43rVQaR32HszQAswqvpaNl\ncAXVUvPrqEcjGFMLnck3Du1F8PITi5i4koLH4sD3dbvk/BAcWYQafVX8rZoj\nuA2kn3SlMd8LSH5XpjxCjckmG56vBzwgbQLMilPVLlfT22ssXD1NyJ8ve2+Y\nD9R9\r\n=YJp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/shape":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/density":"5.0.0-canary.9351f167d.0","@material/checkbox":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/elevation":"5.0.0-canary.9351f167d.0","@material/typography":"5.0.0-canary.9351f167d.0","@material/touch-target":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.9351f167d.0_1580334984992_0.8042082199073584","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/chips","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"840ff067c7fcb033f4910c1c8f0a7f27a98494fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.29b89dbc1.0.tgz","fileCount":59,"integrity":"sha512-ggiXRYhDD6BZRcSBlklSDI7ic9uB/vRynbLR93IkEIF2k0p5pcudeCTtqSq5T0i43gZw/tyMEy5eiPuqriHH4w==","signatures":[{"sig":"MEQCIEE7+yh3Ut/T5TwXJxfThVYedT9+cKDm8ti8vwnVMl5aAiBxO/KvqKyRgT5G6f/Q+xHBRizxN8fggRSjeEg9nvxjsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":713109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRwCRA9TVsSAnZWagAAks0P/jwfTYEN0ieZhPEYPEX9\nAEwFyOJGXyizShj6UiMeehT/R1aRsiZ4Ai6R5dnx6aXWZ6+1ee1tuXbL6Kuj\nbqge+g7maqehBvDp5ccWu7BqR6OCIzrk8BDcej9mGhNg3QBvxJbHpoD+I7gb\nhL33TtLJS4FslC0bLfSSO92Bkq/D65lmSSpPxrjuSnmudHsiBV9G9NO/Drzp\nrO+wW09gcgdHzEPwG8sGm5vXI4nO1QH1nzMKomVVueoX1F2pUdu9l9M3XDws\nT+mdCudhobCYZWEQTXb//+UNYsDmIxCtVH6VTw4QT8j/Gy6q1n3PWlMQw2cH\nna10MzTGGceJOXJgSqyYeeSsHlPR/b90AQr65jpDN4UJa11BxA4FUk6NxS4x\n8D9FjSP0j+M7cGt96wXQpaYUMU6r8A8XxPDRgWuAmpw5UOKUbmCSMceIrHyS\npdDL7piVJ9nZDOhfu/klHmehhecowt/u7yY7DlMNg+JX72LduFbEBkPSLFA0\ndlJ8bVD362jVPE6OCOte69EW8RDNkU00WpImNeeNfxeGvCaLC9qGLVgH618t\n0OAdct7kTaZowWHiUcw1eN/KHQ6u2up9yfkjd4eqlTDYKmc9Ek3ABZESCxUd\n0zTUBMObtVRZtPDuCpBuI9gji+hd70PP7QbB4P4FZy6cdeKwBKb/fBYRlwVY\nScaZ\r\n=vZX/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"anonymous","email":"prodee@google.com"},"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.16.3+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29b89dbc1.0","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/shape":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/density":"5.0.0-canary.29b89dbc1.0","@material/checkbox":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/elevation":"5.0.0-canary.29b89dbc1.0","@material/typography":"5.0.0-canary.29b89dbc1.0","@material/touch-target":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.29b89dbc1.0_1580336234465_0.41117969170170743","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/chips","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.45985457b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"959a7015f6c3aa8c7461df8ac77404b7d749f634","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.45985457b.0.tgz","fileCount":59,"integrity":"sha512-aaxk1lyv367fw6iUogG2PuDZ+dzSOKMV6F8mD+e1UaIAbvhM3naq2VeqqdiPC525FfXkidcn5Dfx+k4iJjnXmA==","signatures":[{"sig":"MEYCIQDA2ZLlUVyu9+BbEe2ydaP6AOYvqKUHIPtoWz/dNmLVlQIhAIqx7Ots715PxYMSjH2OP8tLYurWo03NjcafBlH87Rog","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":698005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhaFCRA9TVsSAnZWagAA3G0P/i+cT93dQQXD7gHXJ+5H\nlew9aYNePblIFyQaWsNYcEwX5h8Nzip+9mOfRMElD4ZHgorT9KTlsRqkSA4g\nti3od/XLpQYwyfAVBZflxjRbhUU2nqVZPzX35TRhFHlwbCHTWPLNdSC/6pt8\nEOJYDp7ltFAV92TPW/jXAkq+QkMb8DflDn42cZzcd6oKEJEf2oPM6NAeGBhI\ntYXZbEcQK5qmOWh1X0sIFjmT07BPQyDEE9u1Jp2oqI+JnFzbl6fajIw7b4T8\ncDW7xt6Lubu66HVc3ghh9aHHllIaa1DmhCGctEfxFXII+hpXGc2DppqM2PaZ\nFt7bm8+XiheOzMIe9auG6Wx+wdSnc+7rV1jn3E8PqoGmKcoLMcMM4vD9amCa\nW/68+h9hpFiaIeLZTqrnyF2SpfhGbf02+S140vxzzLhrX8jkrvxMSKgZZ1Qm\np/WXBi21vDC1NQPvc7kyy0/zrv4ZRG2T3cqpj7Dj6Aa4nfPldVa9xbJUl3nN\nZ4v2oqlrGlB8C2V3LUvcjm0nGoGi34PI/4xY1jOFQqV19afwppPvHK44jxh7\nQ2AC4iQ6u+YPptFv6ESaAR70exS0OWUs++VMBKuhzNiD6YTdQos2iI/iV6h4\nxuFrN/JIcFKSgjmhPnFpD9vtM7o1ykGF9NXxiS0B7HnykG46FFUhC6aF027P\nSMl6\r\n=189V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/shape":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/density":"5.0.0-canary.45985457b.0","@material/checkbox":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/elevation":"5.0.0-canary.45985457b.0","@material/typography":"5.0.0-canary.45985457b.0","@material/touch-target":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.45985457b.0_1580340869201_0.5106695049126313","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/chips","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2b5034cd27ae902b64acb76056c7c34d80be9ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":59,"integrity":"sha512-W3wwBctUYSreIoAzvSJklWzvbbYQ5ceb/E3p0gowGkX4N+yJcqNtq/xj0/d5Ssq2o/HfQDGfavl4ENB8JX5xxA==","signatures":[{"sig":"MEUCIBrfBvgEoIP5GPD8LyFW65DoEzJYKpt2bx2OQGIcGkc8AiEAjIJV5s4VSqoLswWF609U8E0jnB67TyJLsYUSgUfUvAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":698738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxR5CRA9TVsSAnZWagAAMHcQAIGmkYyS1zwEQln9WccW\nV31ndLn0VRrnqIa15kHSWnHauM4Z9NCl/Y2wNLQauqBj5GOyZ+NVFAchVrpg\nrLB38IAGM0qoBMDcn0p9p8/iy4Yz10rZBWKSI3rKr2YVEPvKaAY9Necd8Oix\nSVMxJUUEjoRjONrtZrTgQ46qxMvG1R7HgbwZXzmX9mEN+2DogeoVfofXEe1B\nhHX7XdjLBe6xW1F1x61qt53kYpkr+wWUJv0IWdwfjztzGtg7eUkCAiM+epvY\nx2YtGHPPSKaT/o6m2/5UVG4Etp8RvhzqPuE/a3WU3kkZ3DFc5LxDN15rYq6r\n58ImNcSHkGDYe6ZAssR2DojNCP36U5x3z9ptj6Vxkc9EGY/Gf1jxtrxQU/Xs\nYrtLoz3e/KR8BTnKGE7auRYFp25Uq8E+w6JuEC3M9G1vwodSQ8FtsEjHn1pw\nKyrcPm+ugfbi5iVK2e3MtFaUzlTqzCDFQ3PM7wY89bR75rLOEU1LSiORZQkS\nHLb9Fjegs6vm/vb+jR7QtWvcjjBI3OEV8NLyYdKt1KyFCCP1Ds/08o2xikeD\n4P3pyhCAIVNfqpJrCQkfbX6tcX19Rqf9tvNHxFwuSprJkSVxw9vKIaFHDPzV\nzriNctk/VIhws3hnuwHK5lzYi9GMDkooNoGQSIn9iweMcPVDBUpPW/rxIChh\nbEi+\r\n=KOEa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/shape":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/density":"5.0.0-canary.a1a0deb3e.0","@material/checkbox":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/elevation":"5.0.0-canary.a1a0deb3e.0","@material/typography":"5.0.0-canary.a1a0deb3e.0","@material/touch-target":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.a1a0deb3e.0_1580405880701_0.4357939954818155","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/chips","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.181486643.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7492acac7a77a75c2f5d9218dba75d5712523c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.181486643.0.tgz","fileCount":60,"integrity":"sha512-0bKxa/FCtm9PdASuDYxGz4heBaiUMUXNgY5by44oH3MdG/51qmlvBt1bBfx1rHnNgfyDoeX457W+zpzteg3J3g==","signatures":[{"sig":"MEYCIQChb+opv6m+aiPUsxdwkaF1nfh91YgIHCHdOEevqEbaPgIhAInb4eZnxhx1hCf/2TEZ8FJ22Y47uFqsy+d22OkxxU1R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":711848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MSCRA9TVsSAnZWagAA840P/A7RXvzBDuCYUVcI7J1R\nfVNC1zyBQ4OwhNLrzb4QxRqNewtlpI1FaB7jUkQp5d2LT+PRk9+IwVooQOf4\n+bIXpV8MbULjZM5UcunLQPjEgPWtUtdJ4mccybSODSrz2XQC8G/o2H3mvRoK\ndwHqA4GLKxku3lfEum2FeNhPARtBjRo1ruEAt2ndyUw6PADzPFXVbmdghtN8\nFZJiiRAaaL3Th8KOHhrymhSxOvo7I+xU90vythQxHACgh8iQi5NqdLgTzRWw\nrcqhMnwcL+p4SWZd0DmHEW72sc6qV4YU3ZOTjT0om7LLz79PtLVFxUHuwf3+\n6XBHusb7gSe23HCp9D0xAwD/YqpKQo5SrPRHFIihVhtV7IB95n2hzcoD8dx0\ne8VqlH26woH23ukSskmP5idYAL7xuAAlPz6+qaUDIFTLJoe7+iH/kq1MWkid\nXTp/nEM8IITEYZHc2aA6KeTR480RelQ/xLDYVi3ixZkI7gb1Zu3CcTXS+WtI\n9yEMWoBaLwwrmD3/O0WUcSeQp6rYFvd/VUrH/ZrydjmlKvV3iwnFosD5mK2y\nG6Bl5WkZzcaElNmmsuumtwTrpIzGqTqJfNdDHJxvc4WbeuZGcst5h+o4/EXz\nlim43uwfV003W/u0x78W4pOqOhc77wAiKKF2Fm1WUaK2nMLWakqeRx0CC5ih\n7LAh\r\n=q2ME\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/shape":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/density":"5.0.0-canary.181486643.0","@material/checkbox":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/elevation":"5.0.0-canary.181486643.0","@material/typography":"5.0.0-canary.181486643.0","@material/touch-target":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.181486643.0_1580417809629_0.5621936960465004","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/chips","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de1cd07bc4493cb3d305d59f92238bd8417ec02e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.3a85313ac.0.tgz","fileCount":60,"integrity":"sha512-kh0UcSo8pMEpHyGCEKix8+kbMsAhPKsyrHe+ijYRXThlT7vFSpeGp06gAV4Q2tdLcAHClTJwPOLkoR9jM4tVsg==","signatures":[{"sig":"MEQCIGqnuvUjwfffsGcuXGTvJvzQUrC20zy9vmOcVxp8rNH8AiBgrtCf7V0k5fAg62AA3KvPbQe+4P21e3WdkB3uisgbkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":711848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSZCRA9TVsSAnZWagAAxmYQAITWfTxzJAGkNfvqfmvT\nFsEg8TFlahSop6AMvymII2glevOGI3cXUrTRvP9rAYW/gSjQx5SAvHiNphXP\ns6m2N4aOv5kLXe8NlI4wNHQ13HN0Q/sHO9O45MID0DqagMz/SCq8n5Hk3iDi\n6o9+EobgPVb5JIYc78LwQtmbjS+uF7VUeNOpmZaWeebXe3sWBxo2ujBoHkIL\niAgAXtTdP+4h52ia/5Xsd/uGIkavKzQChCPMe9r84/YKG/WE3mdn7XtNSbFJ\nZ4Vlli3D2dFVJ3iYY9/fv+DCFz7rZT8vSNSExcAieMoSvaBAvf+fXSlXza70\n2wNWlWHAwPqH95gcrrFba+VNpsuLytWj2+0xrVgrQ+trg+pyuhegbCN5WTlJ\nfD2Q/csdTGkxiGvfS6VSx7hZFeydZvLxcJPcjq1CKE9QgnUFwgRayhRzzMNR\nGLviajxEki9sqOLbCQ9z+jQ5HQiua1SGX5B21xi/T94xdVV2WXiF2TOKS/pO\nBRcR/akd/BsbdmGbn4egJWCcjoIUmtjO8JaVxVnHAHfcZ07J/Cjh+/6aTDLa\nYHZ1Y0HopFFS2yMQWpVxJDgKrieNNih2+F2z5kfY9x4PVS285w52U4LSfjXA\nt6iHi2PltfWOKOu/QSohooyRVb0bp0OHgpbEK9z5r6Ms4+X6Ny8KXBlsUN1m\n+O0g\r\n=KV/S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/shape":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/density":"5.0.0-canary.3a85313ac.0","@material/checkbox":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/elevation":"5.0.0-canary.3a85313ac.0","@material/typography":"5.0.0-canary.3a85313ac.0","@material/touch-target":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.3a85313ac.0_1580487832970_0.8210182750076886","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/chips","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ead25a07bc8bb771d8a9fa395b67c57e5990d8b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b6c7f624b.0.tgz","fileCount":60,"integrity":"sha512-AmPB8dVXfKR94rnv+24uFW2Wbh5SfTqxFiAr5QIX0otWj9Z5LB53/NXu7ElSzNCBLPE+DcfZF226KN/dx8yzDw==","signatures":[{"sig":"MEQCIHDTrH9/qvr8rX2FqeGKU/1UBczsgTY9GfpA1+ssMQ+TAiA1OZtPsQR86I/Ff9yJntWVpPvI4Y5vQQ9Bf1zPki0G8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":711848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3tCRA9TVsSAnZWagAAukAP/j6bunGZ3jwVrEJIYljO\ngyoNLrZiahJK8FvKX0Uh6qGzSqtkNgs/6V1zXHrRvMCOxzKOi17UwVc9xHEu\n0CeSiLo4XjexAzAQuuFkl1XDJsNijQpvKRiqcBJw4vM2mkgR7gzuuJZOLcaX\nc+/3TFpKLTYdd6Xau31h7tB5zV0sillTC/bATPYgYGxKc2+BOteV74nK2FQo\nhWdfHlbWE0I2UJCHr0x9+8EHPQe0NidBQxjkliP2vMzsEzxw0TuLMn9K210H\nFiWkhgm8qkneGPIZS/A+CqDq3uwPUA4iMmPShm5JrNOlYsniwmXprJ1T1IVU\n1vGcRAXaENO9KCGR/6BPlzUqOgAAe6ksTroE8ifjXgDeVBZ7xLvhhBRwoHPw\nknV9we9i68HB2W9RBkY+fqaWjh++NK673bcH9xAhXikcgajGZnCABRckBYsY\nz0IiMNfqX5XTJ8CJE8CgHwlr29ipbnSViqkkggvAYcqpjmGpf0kLO9QihjtS\n2x1Q41KLexTGiu4d3H9u7H3I77nZ/DdWPY9NqBdYat+cWiE5FnAn3SmklB4h\nlYoTLhjtiVDQGHawK/1CHBc8fqfJ14/6ZRaAvikqvu9KS0c7iag6IpH32CVK\nRoWJtNP/kqkx7BuGHu1hT+5Y1gNy1WMvZtkaj+fGsinrY9BxBwI07Z92owC3\n1qrl\r\n=JprC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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, root: Element}` | 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\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\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(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(chipId: string, selected: boolean, chipSetShouldIgnore: boolean) => 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(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(chipId: string, key: string) => 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":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/shape":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/density":"5.0.0-canary.b6c7f624b.0","@material/checkbox":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/elevation":"5.0.0-canary.b6c7f624b.0","@material/typography":"5.0.0-canary.b6c7f624b.0","@material/touch-target":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b6c7f624b.0_1580490220845_0.9645316682553366","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/chips","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff147fdd61667e685da113a681e72eea5a04aba1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b3f70ebde.0.tgz","fileCount":60,"integrity":"sha512-DQ0SpsqA+pAm3yICfCJcMx1/h1iDOWdFyvok3w3vOZSC/uXvr+pe/lYTpQlf2eb7Ye5UvXIvBiqSoJ35vyf6kw==","signatures":[{"sig":"MEQCIBNqnsLpk0iSBct18bFfWBu065PV/2jVFskXVP85lsMQAiBJYg5P2IIlbHWnPbSzARn/dk5DSfYs/5mVN6L5xpn3xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNInTCRA9TVsSAnZWagAA+cMQAIpEW95whO3Oeff2JUC1\n8Njoj29sj8/7IGRDmjmCcykNsw2Kb59dS2d82X8jheB7SLX5kGICUSQGywiE\nrD6jopQeOVKxKsSugnMiW6QVf5221fLK/uM2kZhY+Y6ENVHUfmhSqXiYNaPg\n3vlKU3a2MA2lAtcWoei9pNiMiesXMkHxLtK+Joo5Q8YssaJyZJCtjHFgVN1c\n5QN7Ikw584BgeZi6cidZxM2pPASEMO4YI3hYFV5vxQ5lGMNtViAQwX6517w2\n324WqiEfry/mDRT+l38loqjp2u7+HAUzlX81a4DNNKwLIeB7vTFpXhEtjXdf\njhp1eA57KLwxfYdbBO9TDZy5nCLgA2906hhf8sb5xKrm6G4fJ+zoyM/DjK51\nGI4owJiO1PiO3/LQqNHzKJ1RrbM/5TISD0iBOmWAJOyMpBzdjE7pW1grJM1x\nABQ/6qCaeuhOYrzrKYDPAhcqn0kJb0kN2/fkeIho9Z+B00W4BrkCZG+WLth5\nZk+mUxgLZan7Qnc0zDPZ7GcszK9/Ukwr2k0hwlxD0wYAC2Z6//zlFdnLts39\n2Nx7OaIV5xYqZvpkYhButt0E1wpWo97Q7qjkcTHzdJ3xQf5wIuskSg9rfv84\nkjIlJPe4u356rLQTdavHAQnALoSRb6WVjq0mfuAsE6oT05Www3OxYJ0JyVf7\nvR6n\r\n=o9Cd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b3f70ebde.0","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/shape":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/density":"5.0.0-canary.b3f70ebde.0","@material/checkbox":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/elevation":"5.0.0-canary.b3f70ebde.0","@material/typography":"5.0.0-canary.b3f70ebde.0","@material/touch-target":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b3f70ebde.0_1580501458640_0.31075632104091166","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/chips","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18ecb3d08fef99a565980ee35324e31d38ad13e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.3e782d8f8.0.tgz","fileCount":60,"integrity":"sha512-8ClHMQH/zxi/NKdgwtfl16gcQ3A5dnOtjP9KVETsoG5svS+Ld9BcN3TUDlbBlUpZnyqlkUhDBiHViglMXNAFuQ==","signatures":[{"sig":"MEUCIQC30efiRTsWwJkFlEtlpJj2gBztXsz608Y08KFfEPuHawIgZa2V+H/hZkhtwwDFfGa5RYfR2VlO+hOkobcMB+GZB1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIsCRA9TVsSAnZWagAAsTQP/3QlcIWCRKm2gktXlotj\nnTe4mUSb2ctpAtXal8xWDWpIPgwrSDJEzeyXIIhlhgW4VD5alrDTrApT7MD7\nhkTazvhZGKx705GlM3P8Dc3p4Ir9xj+OaPl6fVNUh7TqEQHVx2oSlC4Yd3aQ\nqjxCvezT+VO0purzILTyHu89QzSIj+Az5AmfQHPS6oQYBmOfAt4yoWOC9QvX\nSIcHvkBSuQa2+D3jKXwxwHzXKb2nBXUWRM6JvQEeH/l+pKtccD8LeCE/aD9z\nqrGoPF/4FjwyQkJDLUuPaiUs+5Ksu7vaeqEs4aJWQtca5AYs9LG5jEuBIbW4\nHu/Ik9UgWdOCi3SdB1IXC1QlW4QqECX6+xxX36HLVjZDCBcK+MLN59zLldpR\niXEw8X80HSRv8NewG6FytVKpVA/l4ltIwPJfxM42XHIbKfBxlks98kii9Btc\n/SGTyE0HVtsJFmo3nzgZhMe5TOFK9RMBwNF7n1vLXEu9CrwPuOI7OPtrZ0UV\nGtaeSg2tExBwJl3efVjTght2x+caKecc0OhD5BmH8FQcO+R3SzpCZgij5ZwI\n23C5Ii3ivbalEOPb0yj3btNSXjexzHMJ9TpS3m1KZcnlxC/JrMrrENeW7gR5\nMwWF5a63Mx1nnKjV5gTSgJ/nArk7BjuecsjMXYOGewWOYLViSVvMQa5J8QUG\nqGJD\r\n=7ghG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e782d8f8.0","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/shape":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/density":"5.0.0-canary.3e782d8f8.0","@material/checkbox":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/elevation":"5.0.0-canary.3e782d8f8.0","@material/typography":"5.0.0-canary.3e782d8f8.0","@material/touch-target":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.3e782d8f8.0_1580605995747_0.16544855898973898","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/chips","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.535398572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0710c3bbdbd04b809e82fdd2cf8f926775b340a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.535398572.0.tgz","fileCount":60,"integrity":"sha512-CSwwCQn8XX6LNhJZD/oHFKoBw8hO8XfmHRksEBY+eeOPB5/1LWPcHYTuE3QPt7DoPNAIItLVp+W2tJyNJP83jg==","signatures":[{"sig":"MEQCIEpiqzqEXhQRMxpj9p8S6ovZZ9GONNUxxuroKCMBdMqeAiAqJzrDfKJ0gq8Umw5KFLLYOrvW+5LuBVS90vWzq5p7XA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKyCRA9TVsSAnZWagAAffsP/A6BVkAUTjxqgjG3a8+Y\nzjuTidu2TfDZtzVBcKOK1ymUv/5eAQuc3QnVDUy3MkQMXvO1Xyrt5HxmiqkZ\nY1A7u20NbeQgceQysMLhVsLd+5yILmYa0JQppzEXeZ0aSniDoLvAAEHchiPs\nZAgTK7PANxy7Q7g+O4FhQOeGwuer7PQQRwU3hrygFMX9sWmXJUSGezu9Z32+\ndCjbZIo6WL44dQgCSB9OaGUYNbE2qmcp62NccouHDkU0cpJ7pCAG8bA8cPhX\nogYF41HD/3KtozfrdTB7ZUFxIHkvM1dasA6Ysscbmk1w5ELdJidcByw4eAXC\nddrJ7yDwCZHyU+P+G1ADUcZE36XZ8XjKYGPSzhgxEZbPlMfmnryeQT2WwkY4\nVNO0B85o1I3DEyCaouAFIjfa0DWAWheKUUP5qXuI1uUH0gtONGaXT7NYjDko\nZuqG2o1LA7+wPZeDud5MIOHIhmgb7DNKQfof4a4R8Wg1nSFoqw5c9NwgaLGq\nF0IiFHZBz/7nqKJxGMmWt5p+6WUhkglGtHeBy8eOpwJoPRL/PCaMa+QG6TXu\nH3ZnzNmfBULOaAlzT4NLlJioPa59tIVai+Gjc9DthjeZKAh0KBZd9smM/tf8\nMGP+GlYZWSfW7lMYpQxaoKA/x9IicSg0XE0q6L0l9T38bRXnlUnevMS1fsMy\nzjUY\r\n=uiXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.535398572.0","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/shape":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/density":"5.0.0-canary.535398572.0","@material/checkbox":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/elevation":"5.0.0-canary.535398572.0","@material/typography":"5.0.0-canary.535398572.0","@material/touch-target":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.535398572.0_1580753586203_0.972109105067676","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/chips","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab5186e41fe632c0c26d7b26ca1340d5657a1da6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.5ff33802c.0.tgz","fileCount":60,"integrity":"sha512-WF6esz3AmNhmxHRuk9aNSWNEtsluqKAlYNBVBUUgcwv03cXfmUaLa2/sSPpHSPIHT/9KTHPp4kmpBAqGLV6yuA==","signatures":[{"sig":"MEUCIQCeFxxm/IvttZPnVMZR97WSIqYUiInmU6kF/IfEHSxstgIgYLTaI6DKbyHGg6B4R7VvCrdmFPbE4VcbChb/EYcDZXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIwCRA9TVsSAnZWagAAKoUP+QHJR0J9dBp/oOY1+ya2\nMFcc91rzokmsX4gSu4uMasddoE5mHRsNjLgLpcLiuscD1jAqt1aBYTeu9jb8\nEpH14fMvkBIBNCzLqEB86AzZdp125mZdBBEMOsMVOaE7xaIxc8KBYiwzPoHA\niuYt/EenAA51qgg7ry0dd2FQKSXvcTHdARIuGWPt3EPLXTIWQ2pYjs2QBYJM\nKoyeIV9Dm4n0nEQm3lxnDpBUtQq8clxQ6M3Is2Ljoax2oD6smaj3HLAVQxjY\npeD3Q4Nn+KRzRXHKnV1Fi2bjYZOS8zETG3ENmVReJ8etWs16YmzcnRCzrd74\nu+e/7hBZoeojJ8maJoL+8GfxLAkGPTtSsfaeL+Kq80DTGF0yUkJxnkU+DfBq\n+wX6rKTzUK/axB6U9jr0sU8UhfA8BUH4e6IzTjUB/sdieIRlpkhU4amq9Os+\n+lU1TYNqFgbIOuooxuk6OO0GeOCa2bowHcYHP6XUlyH6D/nw00286Dy/4+2l\nUCN3VJAfK5cJLKo3qRz2w0uS7BRhC985h48gEMsROTAb1PBaOilq8pzrXbGP\nBGNeRiGjCzr5UaiGlbABVvl6zt7EJnLWmSddjSMfySwambYEmCf3/HjVLP94\nGMaw4HZwwgUZAvGhAkiQrCBtwHa8hU001X4/jJjjhY6AxOm75xzuhsGRk9bE\niUgV\r\n=VlN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ff33802c.0","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/shape":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/density":"5.0.0-canary.5ff33802c.0","@material/checkbox":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/elevation":"5.0.0-canary.5ff33802c.0","@material/typography":"5.0.0-canary.5ff33802c.0","@material/touch-target":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.5ff33802c.0_1580839472421_0.8707392270889265","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/chips","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df6a1beef29063f0bc66b7cfccf38712d974546","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.1eb29491c.0.tgz","fileCount":60,"integrity":"sha512-r9p3+7WzBgEitfhlAhvc3QkTZtue40v0vH8JTIbtfWmxpwEUjGtGr5vGPz/Bl+4AKXKym8ZVCl9gylRO3F/HhA==","signatures":[{"sig":"MEQCIHGqpHt/JqgjzeDQnnVd8S+xQwYa+vsx18HbMYGAnsKZAiBQ3cW5z7W+3KZ++/VImhfzLhHLS8HR+YJ80McdLgtAwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOduwCRA9TVsSAnZWagAAT6UP/RDDC5O2Z7T6ufAOw2uT\nMePpsOopw4a6/ERX8oXLEUbyIxcaTNH1Bmi32o62AcTtFOfHyJ2Al9NBFn2s\nfPKkTiyjy98ZCBkifHqQqqetdj8ZjcHP+0VxgzXySUvEVzvjQGnlK/ZqHyA1\nkYQ0UPx7leQlYReop9+P6Vz4OTjPe8i5itvCwOsYwQoO4C7JkB3Q6rLOzzPV\ntANQ3Ss0PIos9aWv2FaLz6OGzKJJTSNj5iibg1IzxrhNsJmcgk2yOg+fegKw\ne4AOyzuXvhTULfb1L4RnxHR4mZ4NRISnWHrNCibOSN7dbfYYWQRQpH6mtMhT\n7jgHKQa+BYBjg9NbcyeVzbcxcSeAd/e4VXchBYrUK97UUzfKDK+YIEnmEDbO\nIejKOPDc7otpITTrs6P/R3QmR5medxpqVhnncEYbDQL7oShT1I0FQj1ip64u\nMrXhjIEbd3p33jt4z1XaDX1HYcui/iEyCnyY0nWbLbgXGEeWOOOfLap/QEL9\n8h9Jg3vLLbQPNN9d9rxWUZoqB9J68zmwxGPtKy7MNuUSNuLM4E9ArYo2KzPM\n676Z7wLFU8t4e6DWJVlySZPjDde1SOycZXhHzfSdegrea0NIh1ih4nGdsG9g\n9tKDdwrbYkMgUfDs6e2bMr4YJwaW1A/1KCVWmGFTVVqllpjI0VIMfLWEU9PB\nZzjo\r\n=5gpA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb29491c.0","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/shape":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/density":"5.0.0-canary.1eb29491c.0","@material/checkbox":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/elevation":"5.0.0-canary.1eb29491c.0","@material/typography":"5.0.0-canary.1eb29491c.0","@material/touch-target":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.1eb29491c.0_1580850096241_0.12069528620994885","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/chips","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c449f520ac75974294a08bea9dc635a5b33da48d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.4c7154b26.0.tgz","fileCount":60,"integrity":"sha512-njIgf9iRuCMhaSX/Wb59D1aZPJof7dIZEKVpa9dM7/N1g5Hh8mvL8s75Xdu5GIaGetI5dr62jpdKFujJZuE5UA==","signatures":[{"sig":"MEUCIDtn+1TDLWi+Dpgk92QUIgbi0A4JN34prtPqEGTOklUWAiEAhX/rRjpAdGndHKc+V+p+21FS+QvResjddoiVTapdp8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOuenCRA9TVsSAnZWagAAzlIP/ihpHENh1vQ+GkIaej8z\nyE6rxsXyZkOqH/kdutSI09Nr3WiTX1j5noIqeXG17XNw5nbnP78nJUOEfzS4\nY8/D/f/rB3bmqv+u8kQvVLEEmTZjzfzE9TwHfMeEFc86uqyeIk9XFKYs2Dui\n2M7eaUX3q6VFR9djqCBleguKijRHQY1JEkyxuDMUFP9QPOZUHB5nRb8PrRpK\n9py2lgaF1fmDIUKuhBWnmBoquu+3r8A2VWWQVTpVNX0OwwuW4FTNCdsB4b8l\nEZhfQ6r80ceKZ6K9bs0oe0h33KgxHtU8eyFDDKGwLxUeFOKAi78QabJJYCPA\nSYznk0vLCfkYiPwOsh9BJxYEGjOX5+oOAtZYU+w5bAsKso/M354WYpZGorPi\nWYZRkD7f5qMjA00FE+fRys8tDPRv0O/e6u2YVByruXzz8v6TI/MfGfAew3Lo\nrRYFy/4jQnsEBqWFbSgAWkwgwXkrnb4js//aAKG9mkaij49QqvvDNutnFEM3\nrEZ0v1TQ7cb53qd3oPvPZ/647sgXRgBP2jgy449tmJm38HRb6quEDZCbf6Kt\n+bAD5dQfFidevCuYYJKoYT3eV3gi3ZtiWnM14LuaOIeAFmCJkV484e1dK5z9\nasb2bPku/vYy56F/wsL/VK46pYEEKc0Hh3tfZ0SyN6oP9ZXrNhN4Zvo1Sk3J\nlUml\r\n=JSTv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4c7154b26.0","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/shape":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/density":"5.0.0-canary.4c7154b26.0","@material/checkbox":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/elevation":"5.0.0-canary.4c7154b26.0","@material/typography":"5.0.0-canary.4c7154b26.0","@material/touch-target":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.4c7154b26.0_1580918694624_0.22163088309139356","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/chips","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12df547f9549ac56f474ab061618be4606275e12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":60,"integrity":"sha512-dHyHzB40qhrulOMtv/3y1MJm5dZmK4BOhnzApxity0VyRysjfKPHprSpKdoKih49MtQg9uq51mCHluCPcodgYQ==","signatures":[{"sig":"MEQCID5WyTWj1SRUSIL+ggp4LHxgn/B+RwVorsVrRHQ0Tp1GAiB8dXxRAzRC6gU7jQHlXqBAmNn0OUscfiwqSxhj4WbAwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DnCRA9TVsSAnZWagAAH6oP/it+++2n+2iJB+FGxYB9\nGDDc6GnF93Aa1CqbrtLAo4AjsQTfG4zgcgntfqgFeOFrKECIxafLyTlwmBhg\n9Xz2Xyn56BOecb62PWWpMwqfFsuyl5I4pBLdrtRSiPzLf0isIEz1PZaWTpNW\nRfVrAghF0/7OGNziv6voVitZod0Yd1zPDH0h3NfSEV8/gh69aV9XefCrhCG/\nEV60F+Y5th74D1+Y3qjaWius9V+sTuCpUHDMQhSwku9jbv6CnodbCeVCgyxs\nEYE73cuPlMljFwdoJIgem3xf+j5i8L5SEqUm6Fp6e+egwtXRwEBGYBxOFqlI\nhErmBeO4wYagWlGcnGccP+Yjplyt/CFTblsmIPfgoLYcqgJDEvPqJyB9nCBy\nWArQUQ2+RTAbJz3AP/lUnZLPoXYmJvBnt04+/ldn0XqX9yQGawKU1NjRqQO8\n3sJkiysEkG4vt4v2LPM/9wtoUfiqWF+hklhZ909ighIRcFDNtP2+o61y2chw\n8IQ7FdIwurSJ+LP7ATIDUcE69yIHpJhHmIk+KsOaZBeeYKpiRT/DWMmMufOy\nxRN7bV/xwMYsB15A7HgBiCIUYztiQtJSbE4UupBxSWbhj+LDl23hrRpDX1lS\ni80WVm5Z6KDRQKAHyzGqfAT4xVE+DpW1n/K/57aUyoajv0qv6KIFG9T1NqDc\n7ZYo\r\n=+WVD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ab5f49a2c.0","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/shape":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/density":"5.0.0-canary.ab5f49a2c.0","@material/checkbox":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/elevation":"5.0.0-canary.ab5f49a2c.0","@material/typography":"5.0.0-canary.ab5f49a2c.0","@material/touch-target":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ab5f49a2c.0_1580945639176_0.9043862862789229","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/chips","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7bbd01a951b83e377dbc81fe7fda7dc1005a770","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.c541ebe15.0.tgz","fileCount":60,"integrity":"sha512-RW7SonCMjkLK0n5Z334fdNnfa2wkDi40eTmrRhjjCREVRnAIlMqdgnYX5D3P2tsSP2Qo38dRHUDTkMUo6+1T6w==","signatures":[{"sig":"MEYCIQDpIE6/ubLndd4F6SIITIoFlYNkig4Wl1a+vvbEY0QpAQIhAJjJmHStj54fuEY0oQMhEY2J6MLFfdjxcbEcU76r0MNv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJOFCRA9TVsSAnZWagAAY7EQAJ+BFWosoajD8RdzJBUT\n6fk0f5eJk+QFQWAhaqZBPuocKECHbYY8+hFr83Lbez5LmoKTM1oKH1NlwjrN\net/p0t3hWrZSpyLvU+anp7bPnSTykfIpzx4s+gtUgdK+uFyOMwUFC7fYJDl2\njuZwrrdOm7lBEittV+x6ZvgUA63nq+UAKAq/6VL7dEqpMNGQ7OKNtx4okOOp\nmngnHBdZ3D9lCOpd0LJY2fU3mk0x3vl96r4cJnJoBzeGzLuw9XzLkTIOh/kg\n9IZGl8xxRLWysnnXwmzN8Ah5Iz8tzMLFxswV9oyxnLxD6Nwd2pI9MttPNNDW\nQTtQ8Fusb0t9gj0UrMLOiLmH4hyq5wpDGLZwkZxVHFMzBPLu1BwycKYK4akE\n47mDLKOnhEa1vLkH/+RaTqM+SOnZdX4nPb+7SisYQ561qvUUK5+yEnYLDNEo\niSyMW2n49Q/yT6Vr7g8X9Pgymgg6JRNedYHD5PjSYfrCb4fgPQFcdNcJRkvz\nhfk9p1TuRrYoCyyQrjgjY3SCsUBE+bRctomGykqGNXqSpr/neaXbPdARNMSE\nQxSZOzp+YamMtNdY+2cw6r/+FqQ2sNkXarm+BGtRpg7Sygd4lAr6asH8YqrJ\nPrwAffH0N/fHohf1xVm9sEdfovxDwXIyIh80n3i8NfJXSQ1M0kGk92pVBm1h\n6sEN\r\n=fwKn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-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`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, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value\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-height($height)` | Customizes the height for a chip\n`mdc-chip-horizontal-padding($padding)` | Customizes the horizontal padding 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`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`mdc-chip-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`mdc-chip-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":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c541ebe15.0","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/shape":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/density":"5.0.0-canary.c541ebe15.0","@material/checkbox":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/elevation":"5.0.0-canary.c541ebe15.0","@material/typography":"5.0.0-canary.c541ebe15.0","@material/touch-target":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.c541ebe15.0_1581028229385_0.66868094922591","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/chips","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b2d02656e1bb03ac97e082baa18df6a5c90ba99","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.98f7faa05.0.tgz","fileCount":60,"integrity":"sha512-O/MlTDCSIi6SzYxiR1jbsOMsBtNPD0UDYPA7yo1VkVv0CKlf/pofP9VaOk0g3m7jJ0wcILYbBXBvEisd+XVIeA==","signatures":[{"sig":"MEQCIEEBdVehzu2PX1GXQphPPCclhF+afXXdPj67xnLoaM4MAiAwI6Mz54kAQG0NN6nGRGZCNNAPiF8OQVx/42rm4fQfYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjNCRA9TVsSAnZWagAAXF8P/0K3FNPqqdsPaQlXXxyF\n38SC8LeVAVO/03Y8gLv8BPOp54JAptW77tEZSr3VPWG7IthG7wpkL/T4XahQ\nvBYCNrmo5tm9DpwtMDPh52//N32laJECT9hgu7UQNBdwlV0CGL8K6hZb/aGy\nx2gPcRv5TZrEktx7rMS+st/ccrfltZWgZt9edMCo5LAUVbNMEPK7P9jVBaJs\n8FtHF76JxdCh/N4LwqRBOmWQfLaBl/j6LnNmLd5jj9JERMvaDjwsDjv/ZMBD\noFtM0RpUkD5OreGROj9k4aoOeAuRvuwbYWKMe9wAKAXuyQ6z/13t+8zL5tny\ntqkjqwU9j+Po4Ge909crOACQG1QOXMgMQXb+jE0V/yLnAzfD9vDqKXs3t/Rx\n359jVYIkO/Xe6NLLm/mucOBQKnFQUFaMbcSDtsnawpLiwF13NvpNVWivsb6b\nv/amDxMuWGZLg2P694pcCO2qKKKQEYz6zwRaF+NEShdda7ZmGks67b7pLNEZ\nYMcjBlySEAVfwgoFcQwnt2Q02VZcn+ou1cwNPFHPfAmBc6qjxrTCjRmYL8sh\nWzTtR6mbsjWyq/X2rAm8lI5Mq/U4MdJotIqFwQt4E4ZC0QKVIXIYod2NXrhk\nyCD1J7ymUcLsPbiZNOd/OcThAXN7blWgoRkY6lueaotGxcdSw04JEag63xPF\nX5Fw\r\n=u917\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.98f7faa05.0","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/shape":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/density":"5.0.0-canary.98f7faa05.0","@material/checkbox":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/elevation":"5.0.0-canary.98f7faa05.0","@material/typography":"5.0.0-canary.98f7faa05.0","@material/touch-target":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.98f7faa05.0_1581103309285_0.8824532506750036","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/chips","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b80d9f793737b9bed8549afd8e1f0b8573dbf1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b4727e43a.0.tgz","fileCount":60,"integrity":"sha512-ouTcDFFTTkO534p3pVX6T15wNoHbvsAA964cDkirDK9NVWGNGfpsqUDez9kjh16KW2w4dXBqO2M9KDpiwSsvhQ==","signatures":[{"sig":"MEUCIQDvwyZQqbEUHJG5In5jEkdAbof05HTyFlXR4iC+DvmPgAIgKA8GHNuFU5EC9TpmJhcz2cr0NOxgOd0SY37BCwSRqoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDWCRA9TVsSAnZWagAAQmkP/iQSoJG5tAS/JQy9euOH\nlZHJeyGm1JRSMHLnNn2HUskR+xTR3Wv2U9lCMNQH4v6jMriGtYzX65L4TEnD\nx6OS6j4YM3k0ZRVszS+HlOz0r0VxZ30x5Gz7bTfeQkNUc35I8O/4aR1qdBRe\neRJtEzN8LRxyOWBajaTg6bc10AoG9h5KfJa5QbVBVMMQT5BpE0maNy8PwDfh\nsAKzDuqIIIBbAdxDfZPaA+z3JPGT53W3Qfr31CaGoaKJuuJih/7SbG8oDxFK\nTEG0XBb9wzviZHsgppJ27/iyk+6DYgLmMYUEDrOyk4Ptsb1SI5vg/Y6KuxO2\nIA6QjPeOnaC4lH0O7UsQFnUOvakoLAGP7I/pSKKmGTZlur6ggUIwbgbF2quH\nE+VJrYnPeFLm7yG3yN/SHizOzVDDZlUzxNFn0NPLsVUOTYIxTR9ME3NO/rMz\niJ0Tr5wxj4AV/Pm+XKa10NkwpYV+wbRNURfTEhGbOfYawi9wsId6JUKbu+fo\n4IpM4krdszxtzeb3e6VjvYcHHdMLkMM41kzg/COBUvvZNjvDAZ3nv/UN/W8J\nG97dCw5heoktlceAjtNw+eQ4AwRkryMJ7yW/uK0ZfxQINRnqN+smQjctSQi0\nHIO9o82CQVlXqm9ag5eOpO9wXQm5Bnz/vjv3yQMWIAF/yOYr9eu3j3Q0JBs6\nbbxo\r\n=d3Ta\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4727e43a.0","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/shape":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/density":"5.0.0-canary.b4727e43a.0","@material/checkbox":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/elevation":"5.0.0-canary.b4727e43a.0","@material/typography":"5.0.0-canary.b4727e43a.0","@material/touch-target":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b4727e43a.0_1581105366450_0.0803049700063061","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/chips","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"809b791f95920cc4d9ad5fdc8f0a488469a8fca3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.91d9d5a65.0.tgz","fileCount":60,"integrity":"sha512-1y8UzwZvwTRhBltgZpzIc/cMxDiDKhbwgV3nKg8BJxLfJ0SJUwOMlDp+oYgX0QUCzFQ89sEpYqajRGKPU5JgvA==","signatures":[{"sig":"MEQCIHHimFlIwsmn07f6zTzFjFrb6k/iKBNZ5QV78Ij3A89WAiBr8sEQvXIbagXNR6vs1wBvu0XJZK+WsST2hRid+X92mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevyCRA9TVsSAnZWagAAYPoQAJ84LnKpLDV4yxP1h2O7\nWws6bzExpk/GlijCDvvSGYs1OCEZEa3QDTBdck7aStDQrqN59ogRr+S0FP7m\n0gbnzSN/ORg3bzwg6RvdXbAMT2lGg9LUiyDv/Koe033HFF3za8ldpQSrFOB5\n2EN+lVnQPBeMztXWXwK/rTliSc7ViNEhj4HOAmcba/4u8JEVl2X4olfFTT6U\nZA0Pt0Ap04AAAQaLXf3TGPbYXaBgrqD+IJocsUmLmZ0LuBeYAelOFiHZUMBz\n5kO8WEhjydm8ME/JEQ/4RGZ5wASBCxxxux6rkCBOyD+5/rwyGol3j4+UqfgY\n3WETJ0dMY38JA1AUoz8D3lR34DozY8T4HbDf2uWbBk69wUWDh42RKFJKa4PB\nYIiH9BpelR+I37Ah+gIrCp84naFbSotS2t9IWZBqzjQCrI+YmoHZxlTkphOh\nR6qsUGyPIGqKMkhqhEQBnV9g8yBu6DtE18hRviU5MSEGN2d5Fv5FOU8qbFlW\n060mY4pCRb4uqOUINfZ7UQLCTgGW2CvngDqTs8+DnpO3f8SReb7Rr4356eMz\nIaJArcKL7rN/hATuYrLhI2+1okcSvMqUACnUoN0KWnvnASL5fVvLwE8kp06C\n0c6pF9AS73oNBIRUFElWB49iA3nh6jbzKxC+gXB+4xtBhcjdBHYIkgN519J7\nN8Cq\r\n=+ONg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.91d9d5a65.0","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/shape":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/density":"5.0.0-canary.91d9d5a65.0","@material/checkbox":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/elevation":"5.0.0-canary.91d9d5a65.0","@material/typography":"5.0.0-canary.91d9d5a65.0","@material/touch-target":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.91d9d5a65.0_1581116401848_0.42838820769315045","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/chips","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58d90ef43eb0ff4f308cf89000148b0fd6611bf3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.d5c006ed1.0.tgz","fileCount":60,"integrity":"sha512-Gknco9j2P671Moyc63etvvUuSx4loTH/KEM2S7ZmVL6WaxzpyJvzB8oXwQFynwl6VzaoyBISh1F4xGNecazdYA==","signatures":[{"sig":"MEUCIE5BT3DYMyctwHJm0D71HnQIK1Paqi56souUInlkvQQFAiEAp7l6vAfWK44+UPV9r2jlw3fXWBGQQw2uzlMnXvKLL4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmXCRA9TVsSAnZWagAAU4sP/1FF0yJHrtgaCioMXJ1n\nPP3Tr8g4TjZBGZh273yBkwyBtOASuVvDk+0pM9maeoeSCYFIYk1wmMCQgdlD\n+3cuJGUga9D1XfK6VeTCW9T9kA2vE3y4lG17X5jsLr8aT9kfDbaCe1drZqkB\nzZNZFfaCT6E3BHRWeRa7L/Vp5BMY8Yh2E5iS/OC7QjlpdiO8fWEgKj2Ka85M\n7lGVzytyoJxhD6Tx80yz6Xgv1SJdR0JxAjvoV7e2R2Yd+df9YUmd6xmepD1n\nh6s3CKV5fmFsDGTdMvEGw/cXwIxxHKlDLJCZrXCBGDTsEMhzNCWI+OCr1m3j\nP7H2mHbHqC0BGMaToIBR959ihZQFT8JWC2otQKHRLrsO8VSplPF1OvBUHjQd\nbUaClZ0H+4Hgy1HTct9yJKyAd3GV05BjvyqKFmksId7k4l4aLA9M6mkg7F21\nuuZJAs5yoQb8t9CI3fS86t0XThvqN14uQ+jUwxbgu80gnjXM1qFLYEDzVlLL\npHh6l81rE3l66vth8k53SUTHratEzr0toXYnO9qTibOz0uZHSPPdBp8Dhwn/\nYKFPgwWXflJwKCGWGzMC+U0Q/bP1XSem+C1E2fk2CFnt91VAGiXRtrcN9BwZ\npvHO4aUMcBGFPGjJOqtqVZbb0FmMP9o7iCdfDh2K8lfO+Xs1bODHLIFY/36x\nFoGO\r\n=pUB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d5c006ed1.0","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/shape":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/density":"5.0.0-canary.d5c006ed1.0","@material/checkbox":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/elevation":"5.0.0-canary.d5c006ed1.0","@material/typography":"5.0.0-canary.d5c006ed1.0","@material/touch-target":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.d5c006ed1.0_1581353367341_0.008750578136904608","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/chips","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.559f1a570.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b10de1d12fbf0e9006fbff1fccb54b07548b859","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.559f1a570.0.tgz","fileCount":60,"integrity":"sha512-H3ivAihHKqc2SYT/bAEugjQkYjaZhPgZMe0lqkS2QvLIJPxSF9Fy9UPPrP74oXyGYEUxUh2XIrQuT+/qq7TXyg==","signatures":[{"sig":"MEQCID67/taSUveRFt35MbgWTT1rqVR09o7kHTscBU3m4ytRAiAgKVG1xQsA9gySUflqh7yQQllIE65Ls0W2/ft63uayGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIjCRA9TVsSAnZWagAAiOEP/ibXjSfoJC5mZk0zqQ1S\noKrYyuJ31Khthxkmti9PGN27Toa0w4mL53DThmO/Cfi9J9zel6gYzQUMGVZK\nl3gUVPYk/NMOydzhIyW3SBmUfdwfs4M+0Q3sbVAV7JSL0BzEQPUW+jNEQzPu\n+kx6yHhdiFwKpRQp0qrpKnkA70Zv8kelTEzmoodKkO6tm7gR2Y7YSJvF6Njg\nQCAW/Dt8XByJ1j2ZtgIBOcR/l4UnADYhIt8I/jXir3AAuFeW9YgwmWqVqPXQ\nkk1tVvNPMCYrf14We1RZAyzJJgbopsyAfWr3ZkzWnCAm6Ma9lgG2Rv0iS4nm\nwdGlLyZpM1yKivJPNAvg0Pz1o8dN2hsKSH61hhQkjdbBvNR9MuNqW1GYJh3e\naZ6d6hEpgFl9ZyVlVzqMbhvk9z7lEd1EWFrSOz7tilnIkO2BhyMhY7u+pjfI\nOaO3Cwt5gMmf3VsknCl/JEMIuyrmi0kSDN7IwDjst0WFbLEOjVzGH+MDlfm+\n2MG+LbPKiR+G9kqs0aRjKQsdop342PoAOkNqfMEPrRjqdzbPrlM90F1bm0LA\nuC+wyd13wA9Fmg2e0jJXjT+dooLeXp80aeSIvdEDJU5g7q2txPnpUm6TLzGS\nRTwNPmysHHIjf2qwfwdx8z5r8tQ9wi/Uf8UojoOV6DbixeioCpQLeMVUAcPj\nxzg3\r\n=rWQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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__text\">Chip One</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__text\">Chip Two</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__text\">Add to calendar</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__text\">Jane Smith</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__text\">Filterable content</span>\n    </span>\n  </button>\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__text\">Filterable content</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__text\">Add to calendar</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__text\">Filterable content</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  <button 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__text\">Chip One</span>\n    </span>\n    <div class=\"mdc-chip__touch\"></div>\n  </button>\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":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.559f1a570.0","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/shape":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/density":"5.0.0-canary.559f1a570.0","@material/checkbox":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/elevation":"5.0.0-canary.559f1a570.0","@material/typography":"5.0.0-canary.559f1a570.0","@material/touch-target":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.559f1a570.0_1581355554607_0.21567364412048962","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/chips","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3330a4c4a1eee177be5c3db73bda60b55f806dc4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.ad3bbf782.0.tgz","fileCount":60,"integrity":"sha512-Sefujz25+F/jQ9okxBkFxJCU9kOoQCDV/hhggL6J3kbXgTE9gKDnCqYXTarvreJJP9FqCLpwjaII41XG91267A==","signatures":[{"sig":"MEUCIQC36gwwQjsRxJxUUkaYfGfW9FAB6PkttEeW0+fGqsGy5AIgLostc9iJkghgzd+zZrIeU2DQqFWZ7LSUMh3/W2R9Vhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQasLCRA9TVsSAnZWagAAuc8P/izdwaXPEnpGjPVnE8k6\nhFVk+n9P1Brcfsqk8wgWmNHappFOOHYU4Z/vTPfxkyjLgpfVCTF9EcoMbkQW\nLeTqoROQgM+agWj5bixu2bwaNYoBCcAUNBAW24c9XNUrtW3qgk4C0LmB6deq\nfXqzzTr9kKE0NwEeJ6yQRmWl4688p1v1cLgJgRUDPOrUlDVCP5ZEyiSFgpfw\nCTa9gl36CiWg2rcZXW6kC6EeP6QD/s8QfXOLkverFDwXAgbfuwUdTzK6dRM0\nCiZ1PHiU/d7qkyibxboa+l/HlGC5/WAcj1tKpmYLcEzh39DWgvxZlB5qlfsU\nmBf7m1gJzXbFhKGRPLUSBNinWwoOBnxxOXgTvDy+ZFN6WDQIcUEhbx4bF8M/\nrN4RDzoQQlh8cQ5sLEvuu+i6g6PWnaWP0VCoiWkjosby4JJv3QmHxxAHI8Rk\nelulxS2h02wdpQypBDdGFUPelfs4QVnLrojTKc2dHw8tLo9in+WPXynKiOnK\ndHlcLKEh47c9GVBJkARxqB6QA2Qz/caZlb9cwyKSJjw3HZuKXwA0Fq8hcvb2\naHU0oZCyZUOoxbFIxIhkQ5zI1p/iqveHW3QczXkC2t+paQrdgO1GE7kkhgac\nwsB3J+DFQljBQpFa3jYWJxwAATsqkUfVWkmpQ14LQwEzOIblSIvtm1DaM4mx\nxD3k\r\n=ix1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad3bbf782.0","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/shape":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/density":"5.0.0-canary.ad3bbf782.0","@material/checkbox":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/elevation":"5.0.0-canary.ad3bbf782.0","@material/typography":"5.0.0-canary.ad3bbf782.0","@material/touch-target":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.ad3bbf782.0_1581361931478_0.8456310636273947","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/chips","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d9679d242a5f43afc7f582563c6e335d89dc187","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.570d8e49c.0.tgz","fileCount":60,"integrity":"sha512-e7ADLh2kkfsUQu2kwMFAstOok87wmoWs2sSzhd07AbleRV5c+MUhnJwOKHqLtK3EcPKcnrqI3jJug1keddziEQ==","signatures":[{"sig":"MEYCIQCslVaIiiC7cgzd33L0vXONpWgleJwBqH+fAlGVCdOsbgIhAJ/QTrDTyUZWQ/n3wIPJurs8DGc95aTx94yY8/TQIHFD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCSCRA9TVsSAnZWagAAtK0P/0CxWPrUVMkL2GzgS/nB\nbkga1vdFzmBIvZwQ01Mzx2B3vk1AtMvBs8HYfIvHGl0IPlmAOXFEgX8l+DsQ\nB51V02KzmEe1n4PC5NuYh550b787qYLTON9G0JPPryeb6puJnrGNGwKb4RGS\nbgI+J26UxLc5c0/y7N24+wx34A7ShWsCAolt0PJK9GvrO4f/jfNuYXcN2u3M\nbn9gAzNyydScKInKcm/gzW1FgCN4jititpqdkWYIDpEG+Qwc1VcOsbItqc1Q\nk4KPVM1kobPl1hwVBaiSkYN5W7v48t+2URdKfpp4qoFiTjOazncIA0S3nXqp\nrQ2BH3utK10TRCpBYoPQv04wagBQO3kM+mTTfBhrzvkBEVu7M6q5OgiK7xS1\nJkVKKKa8Aab+bH7oH9I7+D5he1dZkwRJhpXYO7IY5xldj9Mc5ZuKnwqWuKQz\nxU/jIMrBium+pmreaVLlNtirdMhIjlIAm8TEdypGazCmwUDkT6a8R7sdT989\nMqkKX+cZUA3bq4+tzq8hwqra9ZlTE3QEQNpt/NqO+hUL1M/QtDbVKUWQnCR3\nF2VYkBr7UtJcsXfgQX7ytOmSBb90kCQLNb3+PSnaop1CzYpYJcrZ5Y/vKXTg\nKvQpxRZzPMFx/T7tSs73M9NzfGIJRgJBAb1gUsBkKKtZRfQzqIFzinGCDis/\nNP4K\r\n=oeCG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.570d8e49c.0","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/shape":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/density":"5.0.0-canary.570d8e49c.0","@material/checkbox":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/elevation":"5.0.0-canary.570d8e49c.0","@material/typography":"5.0.0-canary.570d8e49c.0","@material/touch-target":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.570d8e49c.0_1581367442536_0.2338913552175219","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/chips","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3be17744d57fd78ae91cd535b0681349c436250d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.48b06b89a.0.tgz","fileCount":60,"integrity":"sha512-9jXGBNET7UT2p4PP0l8D47pFvqu2IsO5NvNFnED8T+UdLNkC0TXGVszcKgqXQt/UkMwivf1Jl7rZRLxJhlncBA==","signatures":[{"sig":"MEQCIDvCUGtTq1W100ajS5OzNfayZanvUMP8Kz1jq5WjJTEOAiAzIVNIRRKjaNjL06vJ85Bnlg+tijf+TyWTDZT9lqxy2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXmCRA9TVsSAnZWagAAOXMQAJjeMARCs6DHor4EMOmT\nGxQo5m41Rzs/78pT/WiTb+lkIZTpoeJhRLWP5WOVr3YnJmwKC7xSELC8vs0w\nSC0ykKXklA430z0SM4EYWqOcdLsrc7MzXE06HLzJ2B93KyYIKpGF36UONUUM\nwb3ghn79HWqopXu5XW/+vfuosoUtow85vELL0RYTgR0QnS8QfZhrA4DihZSZ\n0Znru+NJFEZuPi2SCU1Y3rjlvbSqXHlVpbolLgQSL3NYnbKY/+B3CeGUkDB5\nKHAvB4Ey04Cn9/LQGPZPNcm1wnpqvOUowy5vLsYGAA2ZTIqYXpfn6tr66E9l\nQmL7eZvv5mcVZ6HzzI4k1KCb/q2fpS5lUadECQG97pNErusb5JagNlZ0eIZ3\nEzUbUwPDnKtCb9lbudl7sP3xngloyT1ok4RPTP3uJTl5+yUywucKANWx2+9L\nI1guFzdpsTBXKUA/9psdYoLbHv428Dhm56k/NUK2SuF5PS7VNnQRJNg0Rxmg\nVl2oGsq+zhkOWt+Kw5aMxQkowrWscK6H+U+Gf/pt7rQ4rTVSWmyryF183LtU\nGk3oKVTpxIfMHsfjUQFp6EHitv+glLEaaGuoy161vqSGFx9rcstdFb0wMEaB\nlmd8DK4qrTyweXrAdhZ69NPugCbChxDnDbB4A/aE+xL+Um1icISyHH/I3JI2\nbe/h\r\n=xQ5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.48b06b89a.0","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/shape":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/density":"5.0.0-canary.48b06b89a.0","@material/checkbox":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/elevation":"5.0.0-canary.48b06b89a.0","@material/typography":"5.0.0-canary.48b06b89a.0","@material/touch-target":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.48b06b89a.0_1581446629665_0.5105421015101266","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/chips","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.612443dfb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c98a7b28c7d80bf3b18a3c8a4426cbf379e8fa5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.612443dfb.0.tgz","fileCount":60,"integrity":"sha512-Ytl4lLodLFi2E7AVsqP6SHDUpiAjsZ1UlqjED+FCKmkmE+U+gGv4k/rmXt/cSSqlh6snyeVAKugl+jfJ2uUtpw==","signatures":[{"sig":"MEUCICB1Q3ivj+j0RI/gnaRfyl0YDdLvBlItr91dhsHCYLavAiEAiI8zjzQWE3WnGFYRdc2ltP7Drrr3+Mdz6dSfQb3759s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwVrCRA9TVsSAnZWagAAeBkP/2pMICMUGytahAWsasds\nNK0+OCzOL3nBY/1rsh7K2H/9qMWf7jND7c1qsdj7t24XposmRDBQ2arwOi+K\nD8gfrRaYoSmA/soY22TnYffpMZFeIjlyBcSRJiM/2xVFH+f7NzGSxXPIpm6h\ng9yTSNZ3nUlypZwvR9j/jbuyr0LQDCd9vR9V9+n2Jhbkkcni9SbCsLMxTRuf\ne3s1pMOriQH9SGJWSNlWdK23yqrAVag3dy/cV8uNKGBmX0uG8fiWezEkhnBh\nCNaqtNGWwE596vohpmJKtJJcIMFWvPIsG3I+lckmH1JKfBttCyhudQxiQLRa\nxA6hNwcvQCr5qZuR5nX9Kpqu/Ljs3vvE+TN8UEt/Xt4uUeYkIW4jeDbOc1tb\n4vsy2LXRIh5CmXYWmaRT0+9plEJLik+8RfAMYn7No60Su6zh4lNMJtTb4m3k\nCPN/h5bJdIwItboyV1H7Pt0yIfsA0PoKcadmpfp+s479dysaEFyw1nH/RmJz\n//wc9OtOMmbGGJN9VewHyy6ErbykI8f77aJdPvG/xP5jVnapUjTfTJSbWcmG\n8zA9lO1iC78bg4OdpU5wi5L9gOEJNorvx+i4KpSZTMGdGoET68SXJlQUIT6i\nFPOP8Nd9hA2XMfxLr3QJtZa80uDNuOIikTQ5Xg3dh6F3125pRhn0mcT7w6L3\nVhHx\r\n=iK46\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.612443dfb.0","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/shape":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/density":"5.0.0-canary.612443dfb.0","@material/checkbox":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/elevation":"5.0.0-canary.612443dfb.0","@material/typography":"5.0.0-canary.612443dfb.0","@material/touch-target":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.612443dfb.0_1581450602641_0.9886631636780825","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/chips","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e99110a3e208a89e6fce1aa3853dd28f22e28a7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":60,"integrity":"sha512-mbw39H4ZER9i5dTTmU2uhLCIShxEprBhfEkB0Dgy2Pld9Wd9xRZXzzg/+UIG5VPPE1jrp2XCeSJV7tjGq9Aeqw==","signatures":[{"sig":"MEYCIQCxD5061EZ+2cleDqexNptsJtH4SH68jo9MjmfgaJviqgIhANvOurEFrXwgbMo2321wBv1ScIWjd4prhQX8kq+sIBF5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7y/CRA9TVsSAnZWagAANN8P/iafeFu98CcyGIaMr4UP\nPjZvMs3KpIkoggP26X9DfoHQHaruionVbdM//guTRR6xfuNgl7ALJdWRdSrT\nuOR8im3dzAW958KseRj86ZrGuGjhXWiMfuGi9xQNgeYWBZmXTDViePotrsWa\nisn4qufsjBrlLZulQ8MtRa3xSIIyMXPvRIgRC9GXUGIY/k/9Qlrm4Gh0JIpY\nN0BMNtiYDKlgM4QUZv45KFqelW5EdwyDmRmIXY/b1rOORQpiS9R7ywnD6VCX\nRCzXnAQZLZeQHb5Ftf2vTQ2RThtReIyZ1twEYLFJ6KTvRtQcWunwKYOa+1x3\nNiui7vlJ5hGwiTCVFDIRO5DF/NiuDHhGxkcOWoMBHYumq/GfD+hfAL1/Kkwp\nF1Xoz4l/ysKfC4AEbVl6CsVrj7gdQML6xBdzVZ+USB4dzG5fuZT/D0zIru9D\nmdMX9zeWZd2/cDG03qgWf6a5V1w9oyaLEh9jXt6OGAPfATTJ0tNEPdJt65v7\nRvgCuZdVPNSALC2ZsXopgzwCqzXFYec5TQQb5aww4vJJT4RVvROkMMoGK8Y9\ntU4/K4zU7KjCYMdDw6EWrNvmWkvxB1YpzlD8bMqr2YuAu14i/9BpAopY/5HD\nYw+CpElEsIIMQsR0OCBsjbKzUyuoMidelbhvfQ8stTba6Oqj7AFCVH1nIo5r\ndejS\r\n=/gX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8c11ea2a3.0","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/shape":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/density":"5.0.0-canary.8c11ea2a3.0","@material/checkbox":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/elevation":"5.0.0-canary.8c11ea2a3.0","@material/typography":"5.0.0-canary.8c11ea2a3.0","@material/touch-target":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.8c11ea2a3.0_1581497534840_0.3835457946931824","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/chips","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a789735e7fd90f87ca913d9ec20305945b7625ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.b2f3d311e.0.tgz","fileCount":59,"integrity":"sha512-buJ71I0xuLsQYod7JA2ybQ+Av/cQIdtb2ZPCBHPHDpccvMn6GjtowEGU6mpvt+OXR80zY6hG4doj2Uv1MQKbjw==","signatures":[{"sig":"MEUCIDF1tTicWuzMjMlw1T0DsciFPGjVlJ7XfXiMVtIduJRPAiEA8y66TG9Xn3SOPUrnXhJj4eMFuDfpn5SIkxuC7sDazL8=","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\nwsFcBAEBCAAQBQJeRcNDCRA9TVsSAnZWagAAZz0P/1OstlVs+eD/uIkst2+J\n5dsXAsOoCbknCQHfhUYgIJACH+s+er/T2DW1cMuX1SN29vDH9p5lzKJStVpU\ncE6W50hlm9mmfISIpe9n/sCKsAn+WJ7Ilcbu/d3z2z8fvU540uuaX8RgpNUY\n27Dc5yKaNgsrXLmG96LioX6umMpC07SEXNC+YbxVn/0bTPsGWbzS9PtK4o3S\n+gJnwExfitqs3wKosZi6t6TBkavG/vpM+wPiwdLf4bOT/LCQw13qrl4jRy77\noJfDR5shLqtMT/jf3geucgF6zBidSouHCrPFSqrBBHqqyb6AV59lSsL22vz1\neFLxz6DYiqgI1je1DhOd8so654iBY0gJsbU/JxwTp+mIXDqJA0BQZf/gnyS1\nHaty8v/xfmWoww1WReU575ekXr84RvQH9SxFpD4tZKnS9aUBkyYIlSLmZHbL\nBUBmCg2p4m4aHv4h3sD80360kjhii1gbc0gzVibDV3Z3PvmyZlkyGrLxeKBJ\nGRGKDumIYbYfwY2TQ1Ol4rEcV+DaojhiTquSoLPLh5SGZ9krj7W1fWHCaDM+\n1ae7p9tq55ma5oi9RDRicAlsBFGYsVApjMlOPKdlX40ZLXqyk/qfqOGNnJPi\nig608PTLG2O7O3p13ofTxa3dbaDBrPF/CL6+vtoQDs3fc5jlW9PgHXV+6xKa\nc3oO\r\n=yxIU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2f3d311e.0","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/shape":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/density":"5.0.0-canary.b2f3d311e.0","@material/checkbox":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/elevation":"5.0.0-canary.b2f3d311e.0","@material/typography":"5.0.0-canary.b2f3d311e.0","@material/touch-target":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.b2f3d311e.0_1581630275309_0.2893866394471647","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/chips","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f69eead760d26b5acdd056a7efbc0b9ae1a067a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0-canary.4f488d0ee.0.tgz","fileCount":59,"integrity":"sha512-IQXwDfxawhafzC7fDBCAJZGoaTivowcyQGA5aabdfgPi3lQYR8aTi8Q+/khfiBVNPK2qF+Jvi5o7c+4ptnbuLA==","signatures":[{"sig":"MEQCIFBjLBAzHl91m5w4YpwXY/3hYA90zA+WYxzTchy3//5PAiBuzAFxZKzLp/nanb5/7+nByp63dqDzXBismhgdEnMhMA==","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\nwsFcBAEBCAAQBQJeRdaJCRA9TVsSAnZWagAAeyoP/jCh+CXWPKdffQd8Tp9O\nd/ZxTAYUgZMfgGuM9vGKpKhFTbRfwdq0YYBBNpsb6j/Dpf4egnc4/CVoKW+o\nOt3poWm00zxM4nW//XI4P365HmSnsunK5agDuO1IMoOgU+K4goQgd5Rz2zlO\nEE3OM26FONWCe6lIEsZiJWN7QEqEaerVi+55pFIWNyNQ9VH4i+Oafz2TYUkr\nbmMwnV5sqHT8+EV6jlFHyUryzwua8Le1G8Ib2rhDLiJdscfFzlsyeh/r7XzP\nK2u1+ZTCI7aET33Sf9TMoWmae0Xy/m0hR01f2+USHDLcKm4xm6jlDW25QtAb\ns29KbnAFt+UitUv7pi9Mc3Et9lF+POLalOUoIW2ZAeYW8qADqkCmaXM4WCR2\nS2S35PChzTNtabHqvJStYSiZi5dooFwGQ9GYW6SbMD01n9H1PFIV7IUChibA\nYqFEFcV1I8CiyP6rJysfTdcSxGT1qlCCkoAQeZ7ecf+vFFixN58+5lNPZRKB\nEA086c81jeXOOB4hay24zN2YSQ7YUwVA/1lS3oj+UlxWQyNQRhtPUawGg6Xz\n3rWsOg6SQ3jC2pWA949/LZ/ov3BKy/qHoauzr2ckGT54KQNrkHf40fiNPinG\n96Nx+D89YkDLlXNLHuBC+5GwQpROJSNxu36IiqkQ0God9cgdqnYO+8qTYbWu\nq615\r\n=g9FW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4f488d0ee.0","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/shape":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/density":"5.0.0-canary.4f488d0ee.0","@material/checkbox":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/elevation":"5.0.0-canary.4f488d0ee.0","@material/typography":"5.0.0-canary.4f488d0ee.0","@material/touch-target":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0-canary.4f488d0ee.0_1581635209521_0.3872578431530178","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/chips","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f29faad6eaadda2fcf0e0a0c754f3bd9c9d7aef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@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","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","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"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"}},"5.0.0":{"name":"@material/chips","version":"5.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13d88fb7f319cc13782783917a57caebe52c1703","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.0.0.tgz","fileCount":58,"integrity":"sha512-xDCnPPfVkGbixQUxO/EDQgbzCxscpMWe3/ewdVbBgTaHPqsFf+OBNqb7T3C+rLfCIqewQ0s+74fajCQUi/A11g==","signatures":[{"sig":"MEYCIQDlILLJYK94CJ/Rp5e+9cRGaTFConMioz24v1a+cHVLLgIhAMSIsc0ArcpxRDJyTGA2JscvCeA9OKQorxEHCSwL1TVl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReU6CRA9TVsSAnZWagAA8QgP/R/WRsGhtS2clRx7zn/H\nbweHVWqE6tKjqDjMKZBd6qgVLIBejQwWhHgC8p4s7MLPDKwS5aY741Z9Sfy2\nGT7PaiYf+GqLodwalk51CYiXLAGyvcd1wXzYp522VCAog/kRTxgY9YoYcpmm\n3nGOdFKobvh1TqsD2bDdtnL1wsKowlp0DDOFYYtb0qye6ILu6SDGljbLkHKC\nk0T5RXu5RJoK45KDD9V24bpSvi0rEzCVNbxDp1sIxFegMaGeFWiucYPWqHOK\ncs/oTcHMjMjOwITyKIeVtGZ6MOdIIGVyGq4xXWtP8oGbte6k3B0ZJJAJMgd+\nUNrHKTZ6q8onXlIRv8tUYm2ufeJamjzmzETNjrE2V24/6GDNf9lWljqP9lw8\nyVbKr58b9t0i++HOTtFh6b5LiIkbyA2uFHxIwJUwI3PjxS1qlkSAKtt4BtPU\nBB61fq2txET0ilzwUOI5a3G9MJqk0tPAORlHwxfYIIuBrY/Jnc1yNB599V8y\n6cIN7ljXi2TyQNTZWy6gczHNZ5eaFzlcTL8Aap10qdOz7XSSa0mWe/qZTmHZ\n85dKYPqMiY/JY80BGYKS/zekUDJGqv4Tds9xJbsSb0l1BYLKI5ev7+7DgI3A\n7ZiwNX5pGkyoEdivgFwniaa2yQo95l0Di3P2XhaaU2Heg674OTbB9XmP0uWZ\nDJHC\r\n=YlhD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/shape":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/density":"^5.0.0","@material/checkbox":"^5.0.0","@material/animation":"^5.0.0","@material/elevation":"^5.0.0","@material/typography":"^5.0.0","@material/touch-target":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_5.0.0_1581638970150_0.6328314788260836","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/chips","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a227e410668ad15b784f30786c6d5780a4617707","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.5e313b1f2.0.tgz","fileCount":59,"integrity":"sha512-uAyc3Rio53xNkTpmaLVWm7DClWgHHpLcsLHlX7cJcXLGB/DmfVfCRv9qSMqGmtnQL7ALDu2Xqpv4rWDxrVpGug==","signatures":[{"sig":"MEYCIQCWyCFGhwX+8woQKzJ5YUQ/ucRzmghO8m6JwODazifr2wIhAI1ISwIVe7P4mUiGEu7hIFrBhrzuy+r3VUvirR7NNHco","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHhCRA9TVsSAnZWagAAb3QP/RsilnplpqtDMK4836oT\n6wVDAI54S8RY/mO9DDk0ux5F4UN0A6K+3+778pi001oR0LLcrJDa2DBYfEFo\neEYEkiLPnKlkks9n4VU2W0G6u9XypaylQ0fpVmwOB9cFHDRtDwc9aUBAaXT8\nMOqIkhNyUX24JWH4QqCYLcEpyV/x/b82O4X4wjty+vWBJM1NHgGrrH9BiYBv\nmCn8doL6ibizdI3l1578ms8G4UPvPVufaLEK5jGfPnN8eggkOR+TLltfC4r5\nnOcdBy3CgE4H8Bx4pTCpk8IZg89tlNtpD8MXBANR4Gtx1LryOYiIg0tm5J4q\nsGloQlc92KqQhiKninXqDIJAr39/ISI7VBxxr7q9WBeL9FBJsmvNfcV8W2XE\nj3CY7GdwgJBE1LAA5a9TKZeMO6MbdkyPsabCraMHWJ1XJ8vUh0gq2swG1DHv\n50xTDsM68IZRkPJ3ynlW84NRHPn7SoW67RAmoQbBFALx56ih+TlGowd6iXPj\ny4c/cbMPIKjaqwSdvVMOk4SJHr5wDaacA3ASlkJvLxSxL/zlngW1urcHpOwj\no1xG2ATBHPiG1uNL+1wBEjj6Lvokw651qbzzGEYSXLa4YjCJWQsEglUJZWC5\ng5ZWbeYhYDBKfe6vRK4YBxkzwBPvpvt7hfA8SMAWotTRo1sTG12r/POm5ZN1\nD7ga\r\n=/xCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5e313b1f2.0","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/shape":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/density":"6.0.0-canary.5e313b1f2.0","@material/checkbox":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/elevation":"6.0.0-canary.5e313b1f2.0","@material/typography":"6.0.0-canary.5e313b1f2.0","@material/touch-target":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.5e313b1f2.0_1581724128701_0.7106893481476428","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/chips","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a93d7fb698daa7c8385400b61a5b6f400b59d4d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.6a56f387c.0.tgz","fileCount":59,"integrity":"sha512-57gPN0aDmlGa+S3Zmq7Znfav+mAS656Yy81ti2K0OtU3dHAp5JzrG4W6qDCNeS//wr2eK8tW7fziFt7M+CCLeg==","signatures":[{"sig":"MEYCIQCSJmMsB85HX+K588xP3vaQEPFlIpxtw8VDcTmCANlS+QIhAPJNJDqEWTaEEyDEfOGr32P4HRorm7OK8dYjrg5X4ILQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6RCRA9TVsSAnZWagAArxYP/i9qPKzHya2y93qFdXLk\nrDYSleuGduxiLEuU6ii7E00P+LLzwpYZ0P2FQ4YBceWzQ6VbdJF920lC/fNP\n2XqI+cmxrd7ow4eVtn50FQXHEihEqhS4dj9huQLtXlRRxoaozPfuIn//fNP2\ndmdNKLgK7LXyc0ShW36XqsnGJlrQVB7VeD/di0XQYkTq5HuIM7NihD6BSrUW\nLG5lp5rafByqx3k9kxxW7bjeLYASvjYCQq7aXE0FA3deqY41FlgK0mtueWpU\nuqLHf32QbP6SgaIhJP15ZAVYmp2n3XjIvnsYnjIQfkzijym32fFI+4WjBZmV\n1m6ALLvsqOg51VnotM88EujYFEBUPnv1fxEZCIKzyD8x2ChiubNJnCtYaIUV\nV43YEAa9AAk6lf4c/O7ukVXbHXNH0TOQqjsK5g/y+VFKlPE3drA3vG9rBuzs\nRYvqKvN0gHultzAN2x81uDHwtID7p/GvQzPcb3+Yyg5ggocLPaiER7Aj0iM0\nj81eBjtNXeDLpuQZaXUxPZkTnCeSGJ4orEleWVCC0JGhRtJ4UQm+h4bAQiKl\nHO3zPN2No8GV4IUk+emhj2qkPiA37pvZAMtb8iL4kdvk+HNrfRLUS4hY2dkF\nmNxVCfrEUdpmQxGExk5c9VCG3n96uLCmvAtguFC1+u00cqdWefheY/0+tHCp\noR95\r\n=aqrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a56f387c.0","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/shape":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/density":"6.0.0-canary.6a56f387c.0","@material/checkbox":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/elevation":"6.0.0-canary.6a56f387c.0","@material/typography":"6.0.0-canary.6a56f387c.0","@material/touch-target":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.6a56f387c.0_1582055056791_0.5171456907572614","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/chips","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbbeecc7b0d2e4283a0ce654db11f03d07d796b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.bdfd52632.0.tgz","fileCount":59,"integrity":"sha512-CjnG8jGkomOJma4F9fDTqOoW5t2912baGn91vHB9Qqn+TB9ML1mkAYfQ47NcYHzFnhnrpaebfE8XBUmYOzfohA==","signatures":[{"sig":"MEQCIDp8QZHI6s3kqdf3Mv+CsCLAuu4NSjzteLYVq6Y3mUQ1AiAiI9iWJhVZTJIfFYH38858ocnWE6D4YBx7CgHAQlqwBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkrCRA9TVsSAnZWagAAgdYQAKDLbgaDzDg0cpSfP4au\nbx3xo32y7bC9bGiezS5fmj6l9shTo6oWDka9oddzDOMU2oX+ZzaYAtjF8N1C\nZF7lAZQ2XaISVX0fpOtVlknukEp9Pp3AR0LMD0WQudMvcbOWfcIKGz9Bisnn\nf6B1SzDd3s4+HDJGYbB2yXR+GSphAXQY3oKBFC9Exe+CDRYXVkqq2nQE2Inb\n0gTEMSzac9FisKurxSTG+T47SoA94CqSAk+9IPEPmSPtfJckHvQIs9ZeTmQa\nRGWx8iV9omCiJtipHBQT7RC6DXMiBDGN9RjbS3Ry55kIh+JqCA7dFa04qftA\n9Eq/W3BfXvxEZwJvTcZVosfS3eAWYqEpO2SoYvyISVTrizP7garMsXqX0k49\nvaLZpzuMT1HlJQ6Rj6OoVBZAHZq7eVPaBeakrBKkhlEPseTfe+rnnGfKYLh0\ngGzJVByA+AKxBGmJxNQQaVjMQkIf2eX5IkHxdKe4Urryft3tUhUSn/BXcvMI\nHvu3NIj/htF3gGHhl/plyNsXz3yRAQno6eS41qFHddPuAWW6ZMMDxfuNd/qb\nNjzpB+pbaICw7OqBeto3Vik3uyTlAyJoXVfIxWX/7ZeWaeh0Cx8v9CJfu6KJ\nO70zznqe/ZCnL5b3jqOzXGHa+lkjQOV7SI4FmcBfWQ7G4F4YLrfJwJLwCWjo\njh6y\r\n=uE4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bdfd52632.0","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/shape":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/density":"6.0.0-canary.bdfd52632.0","@material/checkbox":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/elevation":"6.0.0-canary.bdfd52632.0","@material/typography":"6.0.0-canary.bdfd52632.0","@material/touch-target":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.bdfd52632.0_1582143786987_0.8328865020233593","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/chips","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7888f1608d2d15680349162e55a0f63be8a683e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.ad2e4376a.0.tgz","fileCount":59,"integrity":"sha512-ubJg9bQwZCUxMF5YubECwa+n8L2ERmTl2NLBIlynvl9y2CyYoiN/EVl8Sv3IbhcmMn1bqOa2E7oRJg5vDUGKPA==","signatures":[{"sig":"MEQCICF81mcdL6xKtl8Usy+PKAtouVe1R9LgNZE8yYCe1It0AiA0e40EUiFwUgbbK4QKK75U6lYA+lAWQZqoKzy8uEyf6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNZCRA9TVsSAnZWagAAX68P/27pjWc1rMAZR74NcRgQ\nl/PjaAL/buyL95ZoiPDfYZhxPs4tsFCii/zYD5VQoZdAFovc7yGKhki58GEl\nEmOOPdEa+zXtTMlIjZJ7V0EizUFzvQKTyKkT4V8q5V73QH0yDETQYVo7RwN/\nbrgWob6Zy8t089PnfyDvKGmdvvyXp9VhThtOelRj1I3UA5SGP8pfXTDV34LY\n8Bz3OSJvKEU9F6YpwBuGBYY0c5d/TT78EszQZ6sGnZAJ8dMsRGX3V79ToSqK\nd+D68aprLJlDpkVTr9i5QkzoBaGe577A6q18IF+jprN3/qUYJGEiNtsL6U8v\ni9HRhCbjs/JT4gTc/K0J65daZRlUNJbouFdMlAi9SHg2R1cU374Uig/D0XXe\nEWPVTdZitWm7SXfrHgwt3zjvxb1zcuDNXFrzN8as7SIF48TL5QwiIuluoCnB\nJ+BH7+tnwOlHSzMUODNz0gOxuKkOCbQ8b0RTPiA7AUPF9pkQFmu6Y6EnlAWw\nPnaE93y5/3eUvYv85Eyy1kPh86Rmjk+iUPqmAWFvMHGArcKbl2d6g+WxcKpz\nLli8JUuuKBSsAo8DFBw8bg/ttImxdaseZcPrJtWKEUrxEODcEd7fJtviupFt\nqzAlc3IpueYkgiGdWMDQy3AXAdsXcqCZMO2A9nrWKZot8CJH2yyJiRAH+YNv\ncDrP\r\n=DczI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ad2e4376a.0","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/shape":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/density":"6.0.0-canary.ad2e4376a.0","@material/checkbox":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/elevation":"6.0.0-canary.ad2e4376a.0","@material/typography":"6.0.0-canary.ad2e4376a.0","@material/touch-target":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.ad2e4376a.0_1582240600649_0.40115774179870844","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/chips","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.765caef18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c21ddb9fed37e0b4a1a05cf7528481eab511e59d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.765caef18.0.tgz","fileCount":59,"integrity":"sha512-zAaYKcr3Rr3GH3yMmRhApJeOHmBnNmL2Tuyve9agIsnW1yqhsbKcyxIhWvBRkUTQyfzJpbR0VuYNzXu4MW3avA==","signatures":[{"sig":"MEUCIQC8pMirhO9zxfqCXrrQ4eoOBfTtSUyHRVgmVbAYs55m8AIgd17JxOaws/0cMOD76VqZmS/yr1IlG4yFBSohUmnbE1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRtCRA9TVsSAnZWagAArQYQAJbSysboDSutkA2ywf6i\nH5/MHI73EWoRUjJDnLY3hTgwbjgBoqjLTvOvnC+qlmoJKeNKMG4Sx4NAjwt0\nwIv5pnkEQ3DoTfLEgo1GchVRHNsRD7x4EfQgZaHFuljXmwRteByZq2N3D1Hb\nBlInU4LflNCwaXM/Pbsc5O281jrgO1dVGO4dzfMpXL5Fk6RnGlSjSe5Ahbb4\n+blUFvOlJxNGfXQtym4+dqqPtcH6tIqim7V3rvuKkVP2Xes4flKqaT2y+ZAu\n6dI/3BhQnvW9D15h/BLhykrxtmmmd3vs414GvwAcuVbxltERkSTwd1GOgrwz\na+gjmEY+SaPMaOZ1PVqLi4u3OZ6pdLwfwVykKUxViQjHOTrEmTAibofIgV9A\nC3Kh69XEEPQcDbh/44bnx8NmSb+QgQjLftPU9gckA6Q1cH6Akh4z5VTPDkCO\nI8d/jhhmBPMU/fDHnUK+6DVltj0teCgsK3d31YqR/cnFV+S9bIa2drTbAlEw\nCq+aKyrGJFh7iXIFTHl70HIGvaydWHD6O8OiA+19petyIoYvcQ6PzhpoaYxp\nPtcsdsVpnRqR3hNNLl8mv6Sn447lboVGmZDGJpU/3lFgh+SIsHOkovx6Aw39\n/DbleG4rf+CZqoyeKr4bVPE23Ak/V4ENU+OnKV1yA8n3UpJ5k56KMVFHtmZg\n2PL1\r\n=xt0j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.765caef18.0","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/shape":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/density":"6.0.0-canary.765caef18.0","@material/checkbox":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/elevation":"6.0.0-canary.765caef18.0","@material/typography":"6.0.0-canary.765caef18.0","@material/touch-target":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.765caef18.0_1582306412660_0.48583515006097744","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/chips","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.949562303.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd1df69c65acea3bacb8f828fe3bd1366d55078","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.949562303.0.tgz","fileCount":59,"integrity":"sha512-wcntnWggUNnz3QQQribBy7H8giZlzbyCkWzsEf7dTrhuRBK9m6rZmSjfsvnsYzA4c/d4+YmdBUwgk0M4T7pX+w==","signatures":[{"sig":"MEUCIFC5Ll9hz2/x4B7mSVuA6BJ8/9g2zzvSco/PkimAY/nyAiEAyCX4ezv/KJanscSbglxBh9GxgB2KvIzoDkwN8b0Y4No=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+/CRA9TVsSAnZWagAA+i8P/Rg4uGoUqEDVb/Cr4bgz\nwwOBZ2CqKSB1yr+W2UEZK+5JZU6idemADS49BVARISm2gqQOTbKTedx4J2Xr\nJalQV+36g9yNVxQsztCzNaeZ8MF72BEzyQEf96jwZE9liKiSkwKugTsLH3eM\nSpZQc5HFXtJsMefkf7JUMGDKICyHC2mlZJxKdf6nHiEmyVD5taAPXkUNrMaF\nb7YdZatpJCbQh2UMQRld9aJVrAXey5ulw2BRmGZzSUoiA0gU1g5idb511/Mk\nFgD5aflelTF62rqw3XOnL+M32k0bj6LQ5ojKYs+J0hB9mJWoqenr0SSYbf+5\nfePskI20WIVbgU8fM67egPNMd0ch0gzX8wTS/7YfBXLkLGdpeqAW+yyGDI48\n2NBe4KmikLFPE68VG9quyImumTGvCevJ3gxz67zXBBjN0omjabcsJTzfbukC\nnTf9vY5n7Zudrpq30jSseGA90ADXcVWZgdNqTTpbG2vWlzoTY8GWHwlw/xDD\n7pOM/hWAkWHN3BUxx0diCrrnzF9ULpG7VdutVmy0IMqjwWttXlRIJJzxNAlq\n9Sn6Ld1JUIF67NpQoE6mtQxEYHIPCT/g8ka7zxAsBC7sA43ZRxL9S0Ctuan/\njcEtwcKpoH9cqzlQulgJb7ZDP+WvFSrIxfAO1ZSbBmy/87sDPqRpOtY5sm8a\nlu6H\r\n=N9jJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.949562303.0","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/shape":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/density":"6.0.0-canary.949562303.0","@material/checkbox":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/elevation":"6.0.0-canary.949562303.0","@material/typography":"6.0.0-canary.949562303.0","@material/touch-target":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.949562303.0_1582317502714_0.07215173356645099","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/chips","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"350a59d24be6d3132c935be29455307e1ffe9ed5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.7ec96974e.0.tgz","fileCount":59,"integrity":"sha512-/sTH+tSYz5ekTUCpgeS3FGJUNzhvUkl9uKoUY7APbGG/5e+Rs3QE9Bgg+/b+qy0+kBiAWOK+QpEGNyk3VW8IZQ==","signatures":[{"sig":"MEYCIQDMJqLj1vOYSxCmPcMVzuRfQCPv2mqYIlEUN8oKtJG5hQIhAL4C4fj7xwxWLsOktUlcZ0/AOeG0RzhlxD38I2ho0URH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzbCRA9TVsSAnZWagAA8RwP/RA4xtr0WRo/HKwfuTy1\nPT5azInroDmQ29nb1eZ0rwMyW8czUO5fqwnMx/huFESahLUHH0P0liCHb/LF\n7THmB6L+pqpE8lKA+BzhBL0VAllr7ozCSLTyTO6ppm0b7RT977X4ENrlZNAZ\ntqj6h0gEFDbPSGwzlFNvw2Re51fJkdKzwIn2LxmoIahp2Ut8XLdlod5/hQ1z\nr+Zlvv2NICw04VGLgWFoQ9CIH4k5srmEcDteJkK1yshWG9TvPgrjhfwuC/ZS\ntqatK+5gitZj3JE3i4qgFK0ZagLcJc/9qsKt8tM5qB4djo9EeFeYK/pXSjRZ\nw0oQ/DGfjTRC1REht8YvJZwg7LZ21oSRWcWzaoD5ddfIrCxnr9kROmQC8iiR\nKZr9LrwtEKRwt/Oe3G5x9G38DbA8O0YUdo5NlqghBo1lTC74TEcQeTvyNZUT\nENUnUnOqx92N6CX5oZsOa6Z+dyQCXe2cZocSvTYEG0legs6WsjulA7vStLp1\n0mXTbEAMnXlDfidHfnK9nEZi7BaBYvomFxF3JVtHcClEwHA8C4BBa9YfoNM0\nGPpI88fHtyGmf7o5nd8aDurmh2NmJaWQJ1No3P2Hf2y498nXjU/SRvBcx8D2\n5f6GsV5RZSYTjBJKaoNdeH/cZtnDuu5yxQqjDfxGJoTLuMYy80ARuqxzV311\naedt\r\n=m1XV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7ec96974e.0","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/shape":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/density":"6.0.0-canary.7ec96974e.0","@material/checkbox":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/elevation":"6.0.0-canary.7ec96974e.0","@material/typography":"6.0.0-canary.7ec96974e.0","@material/touch-target":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.7ec96974e.0_1582570715186_0.05807686443174154","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/chips","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1fd27ed34c703cb92d70c1fbe691ed416b843a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.265ecbad5.0.tgz","fileCount":59,"integrity":"sha512-5bIIB6/+Rowj4i33Xyb4iCrA668u5tBJZfgxvuDi7tsSg6EEx57KYWoyWsNd4p78ZksoyiPF4UJ86kBYzoUxog==","signatures":[{"sig":"MEQCIBwTFH18KE9S2k7sX6oWcWTWIPOqvm6l26dO5xCaTRdDAiAdOcpFNNwjC6fFyYGDhKiR1XN3mCOOnUnBR/b11ABKYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYscCRA9TVsSAnZWagAAkW4P/RNMqa+7ln3yQJ9OpQ7R\naT9/1SF5Wpk/wmtdp1MN6cMUghhzrnM5DixDpbDd8LfZ/Jwcj/rCJSu73FAQ\n2ApRpSKCDmavySfnZLpz4uQ9TJdbHPX1n7JoDVeuLA7HVK1FmHmAQt10ahBl\nPV3xHIXNWpCLyfuLIvQ01cz9jORH2Wi7bBciv7WhjuVKByRUNtXF2l/wP4Um\n4dp56xwlfqNFkrIRzeUpffM8ss3025+Bldf1IhIiKrBDygfT587NT7i4YtcK\nB4dIyqQ2I2yPsqjb7lwFxzHGFtZJDyLOPS7Z4vuOC9Vh8o+vSPF/KbH9RmOi\nGB3MQjn/Qq0meCQNlhoO4Mgn+JOOaIdi+e3JpDaaGiJjF0Xc4qI2BKgZTSXe\nkM/2J81v4GV/YYGzv0nG+LLZixRQqA4yBvDlvwGhWX4ew0F52iW8l9ERqxac\nYsV/I44IDZMsEAQyR4b2sP14HeGYGznUHN1yK9n6JVN/9eaHKmlQwNk8lhWg\nySDpBeLj1mxTUmFqADUb03WrUUhG3lEC/LXK0YaRIFBWfsSf1sQWGERUDQdJ\nrye5ZlOYgLV/Z/NXs04x/U2urqylkAKA/Gd6Ek2jeu+aJxI327XP5Oa7r1k5\ndNLI6ERAjWiDTgKeYswHystHM0ZRefxvbVPd+MWaXQoy6C9xr+wsOhoCab+H\nsfG2\r\n=cTo3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.265ecbad5.0","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/shape":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/density":"6.0.0-canary.265ecbad5.0","@material/checkbox":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/elevation":"6.0.0-canary.265ecbad5.0","@material/typography":"6.0.0-canary.265ecbad5.0","@material/touch-target":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.265ecbad5.0_1582664476027_0.008154214595954334","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/chips","version":"5.1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@5.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bbd5b2be3300a9453cf6edd9186a7c0aa757ace","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-5.1.0.tgz","fileCount":58,"integrity":"sha512-eYWrobENtXbnGoEx5BEURqoCfoc9aHu1JWq64mF12a/JSk+c035KYMjD4oyhow7dYqobbfQlWWdLQeHoRpYCeA==","signatures":[{"sig":"MEUCIEuj0F0U41k2DZfNX6JP+rD/bMbt/6QP98DM0saHfQuIAiEA9JtwMeNwSgDhRxar2e5Hy7pFhpXCGro7IX74mDjuAdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPhCRA9TVsSAnZWagAABzEP/R6SbnFZWrMAxs1Uz1N/\nShJtN5CBqAbTfMAlNe8m2eH2T8ntL2CBf8QMpSjcYi8duLKuTh+0A7gakEF0\nWNKysBKcjBC2TwNIhL3ajo07nkEaaPvv3NaukHbDcagMXEutYR1nYTJytmzd\nP2hwKRYsBiu+hE+MvrCwQlNc6b5cfn1L7/X2IkXhmnYwkiJdOaGAji9//n2C\nynDeqR909DeH/mpZV6c0Yhh7vuwpfGFk88NwkqRVDq8DwucTsby7FTP4vety\nFCEwJi34FLLHeDJqB2XqwjeITAjsczCpGb8cAK0KVa/l2TmQTvWkXFmOeNrC\nGZDhvHK9zhECniuxfUxN4YvY8a6XIe3SK20wdTJFFbiVVFw+tLsnTX19/Dj6\njTKPwBjBqBKbEJ1/L2KKiCALgMzGtx00K6cnvMnRqIo1n8f6UbZKaFgJR1x7\nRFMzSW/BhOsKk25rwZafziKlqzU9WIM8lBtDxcyga+uqoL1jE/CNvimYcQvT\nKC0Ms9aC8CD0EKA5gnfjDMih02ENYk5j6LtMr5J9G/3OXEFjkQqyMjL2NsBJ\nQWr4z1oBKt/Sro9J3pReRSLBnJ9prOtOeYoBovHVoDRirHGACTWceD32Y8+8\nVxJ3SB4bZghY9NJFx8GtCrikgAS9qPm2oeJvvv2WfFg/4ABkG6UzZRQbLsxw\nOikC\r\n=C5CZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/shape":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/density":"^5.1.0","@material/checkbox":"^5.1.0","@material/animation":"^5.1.0","@material/elevation":"^5.1.0","@material/typography":"^5.1.0","@material/touch-target":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_5.1.0_1582666721042_0.05227353333976059","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/chips","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2074f2bfac63f931fc1c8b4b696524a97cc3591","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.2cf87456f.0.tgz","fileCount":59,"integrity":"sha512-YAs49VkrlmadWwlWjk6WDYQDbZRiTF/qpjFQRvWNWL8qnmJ/bGE1CoPWbD+cijC0XbUFJPDiJ5+JNT9ssW3SOw==","signatures":[{"sig":"MEYCIQCYmys37h0woQrhmU1RZVftsiykOPSIv7zLKHGQEQOlpAIhANZBDOd1vrshcPTZ85nCtnvDipz9mFujVptke861JKfK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZQHCRA9TVsSAnZWagAA1nQP/ixLpZ7aijfdcHZEChLL\nbZN3WtQiAXCxOiwXVfxo50SKQXChP3MCW9207MmCzwy0iE8fHr0fQoWn5cL/\nUnNbNUlrNWlnXlUXY8EpFi8ERbC7bTbOIZlGw6TKiHv4cl4uXa5Rj8QgVjFr\nIe1gG+0KsBQuepFCAVZfgknMGifUhLuVGs9TQyeXzfKXpAjMXZEvD0iJJYSA\nbNYR805Jd00MtGcaHoFX6Oa2ruCAKMLbZqB3AvC6k1wRdtQTRIm7NAXYWIsm\niBwrEzMqKu+xZGrQ2tMzOLvi7dazFBLT7wTzmerx1tVlQZvn6dn0BzONLXel\nuyA0aww3GVPbwZqkDD25nRcPj1rDxY6vOtuzzO2QhgHMrkG+Ao4s8VgJwHLd\n4TKD9Z08JWh1fIv7kCAsR+wzPmbhHn8J6sMIc91RDmbHIWAqLKHtqbW737c2\naNxoa28w37uxM+16YBnyRnI6AJcTbIbQEQ7wcc9lx0YUBtYJ/YQ/kJH3nqm4\nUvjjgUjUdfbDig+63fw25QUDDcgDnaa3/ecTuVZQaYLp2NYSMKEmKljSZdII\nxQM1ovTPrxt6VFwT1G7ngaXjo97TEBi4E84p6dPrF0ZrIJR6ZTTKEJQ0L0Sp\nzGPmfOsfNblyyD+nGbci4qvuzfZmxI3jjfY2aVMQkW+mOvB7jdviVNvt4alc\nu7xO\r\n=6ZTs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cf87456f.0","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/shape":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/density":"6.0.0-canary.2cf87456f.0","@material/checkbox":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/elevation":"6.0.0-canary.2cf87456f.0","@material/typography":"6.0.0-canary.2cf87456f.0","@material/touch-target":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.2cf87456f.0_1582666758854_0.5830506979811345","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/chips","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.781434a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b8bccc68e66c230bffd120466d1c5d2cae3a24b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.781434a92.0.tgz","fileCount":59,"integrity":"sha512-wwccwOzmjHClEY5X6Rwoye81WWkwMHgS8pfapkMe3Zy/0hgKLC4VgTpRLM5Qpf78x46Xs5KjAVUwL5WNphUfNQ==","signatures":[{"sig":"MEYCIQCvxjWBOEmM4sOOs5Os6IAPseGjlZqEvC+gETf0h1PpOQIhAI20FntSr1or2AC8T9iVSXk95e7UxApFjJTL5w5iZ0NH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2hCRA9TVsSAnZWagAAhWAP/R54DsGBwxsfKR7vGcky\ny0MOaNYt0/ocbJrzgJ84bQW+WtU2vLkAyP84izKCa+wjK6JHOxK1sCeOZb7Z\nE99qgrvH0h3swIo5TLW7kXyS7VHfBjGIQTnX0Q4RwweUPSg56ftcFLusTQ+6\njYyZ4V+uP8r6S3U7srEGvRF69o470jNTuwLXWeTisFuDG2dJfrc4XLd8YUFK\nxYIUezYOxMHSe1VPnySa+gPPOgeKwK5P26M+NwilordlRDO3lIhkGvG8FT2b\nyqy1AZeVI6U0bpGqCbdBGV1YvC7KyKh1goj5DxbyGDEKiJzdxUw+3XOVxk6+\n/uyg2aeuzFldx+cmeOoy1qK9D620HbvXHH2J+A1mwQWIjZqDQFHuBcpZdi/b\nFQspZ/Z/zr4x9e9JCxczHVZyqKivkWVZtkW12ggQg8ax6y7+8scjs16NlaVU\ngYZKrD8uKHp5JjLS4tnkXz4ruMBzGMF7hkiwYdFYi8vtdOL6vRPpsGnR3er4\nvr0Lz9XQQ44fz1REZKeJSoNkeEXRzKi6joZVv0QQjbTXxiwPMgn+aJ8ZpYVA\noZ/KUmbplAAFCeJIgEOlyKmuaIxh7Q9JTMjgBg5YNa1SlOKABJRe0gjS00yl\nJ2jQzedR3MuRzux+juFlaGUZcnLJ2ZK8DJd6BGJTSUVwBZ9Em9OVMzeQ+4p9\nYcpw\r\n=fVHw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.781434a92.0","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/shape":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/density":"6.0.0-canary.781434a92.0","@material/checkbox":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/elevation":"6.0.0-canary.781434a92.0","@material/typography":"6.0.0-canary.781434a92.0","@material/touch-target":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.781434a92.0_1582673312935_0.5286243623458315","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/chips","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d446d562551b13eccd074b760278cb5d07913556","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.d6f60c98b.0.tgz","fileCount":59,"integrity":"sha512-/oDov/HnzArUnENKOrQb+tmTm+JCQFa4m4uLBnQi5GCnB6eIjV+2hiBO6a6kbGJd2RTKg6UyLHvMM5yAX0kj4Q==","signatures":[{"sig":"MEYCIQDHNBk/Sngg+S8tvLLzZv0ALUOEGrvhT/DIFaf6cEEUlwIhANOmBdnje1ej/o8E9mt8s4KNibYWVFh7iRoMKCtBygIK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY5jCRA9TVsSAnZWagAAhe0P/REp8dXtigWluBMv3ivj\nLIVWbucTrC347iV+zSFnfzwmOUlBy77DaXAchYLlt098l5vwGSVUBQYsi5Pc\nbmeJNjRXpxKvi53YABPk9HhJ7Sqyie1jlYBNkC5p6D7s2mvQp5d0cqZ77Md2\nGxgbYbrloxwdRfCpFsGFSrIgDH1MJPFX4ZmuCBjx0Rf4P7ZdgW+hxXVE1yYw\nYKqSZ+TFth7kuBMCKcaMYmUdc3XT3f/vRxsmFneKT6odebhSU7vo2flYEZpO\nhhHLgdPXmN/kseOEmFJxT8KWE/c11q2xOjVgdWun3XTAEaoTzsIgrFSE6X/o\nWNiMfb2b+CvdvXocBCdD6OPMLhuod1zFpiOqs/tTm+D1tzAh8NJRb6JlkwtV\n5oYP0QAPKQ1PitL8uEJzXex7ynmQqSpVpwaPQCfFaCc5MYh54u4CgTgmyry2\ncatUzXoMUnVH1OLXZbObkn5b2CbDM8ChHUAcUs5DB45L/oPMOYunaiOG9FD6\ngbfzn1V520zWuiNBjuxFmj20+Z2+v0yNgkdV5ya3py6uNGwLbrCytxp/T/s9\n/aCTTFTr+C6hS8v+iDPWTZ5ZlpLmrqI10gB5GRykrgFWAKlbaO90KOhb84kP\ndGYHESncG9zNWUtiXj7uzAceH4VNNZMzB0s156ez2HngnYu6DZ7joM/ff1No\ndz/1\r\n=+a77\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6f60c98b.0","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/shape":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/density":"6.0.0-canary.d6f60c98b.0","@material/checkbox":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/elevation":"6.0.0-canary.d6f60c98b.0","@material/typography":"6.0.0-canary.d6f60c98b.0","@material/touch-target":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.d6f60c98b.0_1582927459433_0.32268073256640584","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/chips","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fcba8acd681a030e35a6d2d226c3b2422fbfc81","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.69edc6e28.0.tgz","fileCount":59,"integrity":"sha512-BJc4MKRyt1qLQ8syHA9qIWtAh3EnyMDzUW4XBPPtANoGyghdF5PG8TQLLG1Uno0jmadY4LmQ/WLS3UWd5cXbwA==","signatures":[{"sig":"MEYCIQCLKefeam29vIQqo5PosAYNxP7nz4WIHtafRJZ00qY0IwIhAKliq+7XED3hzqhTw9wqUXLAXs2hqOX0wanw1Uydk2jO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBcCRA9TVsSAnZWagAAAPoP/A92N9Chr2BqwsYyj6xO\nhUp/yDnQ70CJYDvsclN5PwZ/RgiJB8cI84ddAYnBoK1Kns6Eb7MBg6btK1hH\nS8kQcMEmxhAKgqkjKkm+WcSGT1lPS9Xf5g9SLfd8xk6OOiGuBynPQDwYEMka\n92IpOxH8tC7zGseMvtpdZmWLyob3dpHnYffXymFJAlXN2qzpS2mTSaANzOId\n/y5ZoSJk3Qf7V04pIEiwsZVi8q4mP+a28R6b94oQ2/VAfoDbuoX0eEcne3m4\nP48LNlt6lRs+Plz4/Zhh7ZBFOgMug4m5mFYf+UkWr+/nVk96ftJ0rZ5Z4Myn\nsNLAfkgc4Xet7pdhWbPwf0uwsV71ZN6+6Hw9D2KwI2skXC4+smQYlf0STc99\ni2fh0RMEEltaCKZQfhE4iF4xh535A0Momq3XZcewAx5LwYZt6EZVK33IodDp\nk6yS4sRypH/ffxiiP3Xs0mEPb+OGs1YU235OdYlcZj6vkN5WYbzOwj5kgqnp\nYt+AUNFkHuBR66FXFtx8+V9v4Cl4BKBXERugk2TYhMgR7TRJ8MSiqR4aN6yx\npH6m7pEqrR4Vdh2BRBeXDTo3hO1ZggrHDB8cxv9fzKLORhQmxMs05A6AE2LK\nvNbBbMBu9lmHZHlFtkpl19QX71KS4VtOVaum6O3cKo2cG6SehGlP8GDb+Ih2\nrDsd\r\n=rVyy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.69edc6e28.0","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/shape":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/density":"6.0.0-canary.69edc6e28.0","@material/checkbox":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/elevation":"6.0.0-canary.69edc6e28.0","@material/typography":"6.0.0-canary.69edc6e28.0","@material/touch-target":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.69edc6e28.0_1582927963715_0.6321246589284326","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/chips","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.9372e4939.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"504ae5da58e7a09f6e6540d36555f20e1e86ac73","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.9372e4939.0.tgz","fileCount":59,"integrity":"sha512-8mwLEararOc/hP/p6d/VLuu5ixB6S0Fjlw+pjuI4P6T9Yjhty8XtwE9h6QKCDiKNkGCxo+fOBhGawh5Kv9fqfA==","signatures":[{"sig":"MEUCIQCg8RNmuEwQ6qx7ICxdcC78Vf6Esx5hv6X4qbo5z4AefwIgCqQ8m1CqxlyHsmPpoM+MBeSBePwsLqQgbMRLilLM/kU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqvOCRA9TVsSAnZWagAA1IAP/RcnrwgsSwc9+0+3a5oF\nWX1Vytq1axgl6CeRNtBblVeyCedwrPUtILkmbe0uj+igWoo+YBF19BTcwwLQ\nB/0TmNheSOZdBcCxH/XZEK82u3sSz8xppISKfXWbomFNnlDgw1tt1H4+6fUc\ns3+XkWuyQvfkRezW5Ef0u12gKV44dyC2T66aAPmhpUlp16JpMgyYh8cke3qx\noPSbIcENEhBan1uy7dvOz7yDmpJVfwleJk4eT8P2e6Uwdo6HavKRzgAjn24W\nidO3b5uKbW4egq2jkMOeY8kA3J7SYg5E0JtpQp3MUdsK2IdHJWgEJp7yiDII\nfkTNqwbwcXnf7GvPS1rIh05Edq9y9yrs9XNqhJ8xF2n+vPHFqsEVW72T51gp\n5sz1MedhRd/oiFzMgtyR9hu3O4FqZex9X41P1aj03MO/V9cXb3I8oy42/DXw\nwO+1NPmnYIUVr2kLYK4ddoslWu6bcBYpiygA6Xk/02yrVPAb/pQ2lcu+pXY4\nzDx4rjBjkdE5dsWwQQv4zicreh7sFQh7iJ4piH5nqrDz0FlWmr3+laHihVKv\nkvAlTYjm+oHAee7e8Ya16Ob0w18erxtXxYIbc9uV+JEiPQ7r9kUlA97JJzkG\npHED/+e8UEh+BT8tphZqPCAUTgpEJtTCxOXPD1PEawM/hu8sDQiSDYSAqemq\nuWLw\r\n=3qrI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9372e4939.0","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/shape":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/density":"6.0.0-canary.9372e4939.0","@material/checkbox":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/elevation":"6.0.0-canary.9372e4939.0","@material/typography":"6.0.0-canary.9372e4939.0","@material/touch-target":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.9372e4939.0_1583262670194_0.38518788110241187","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/chips","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0a45a82d50b9de11b0bd04318dac0b8340828d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.9cf5e9842.0.tgz","fileCount":59,"integrity":"sha512-UrpiScFH8c5XudZS90WU9eeKC+lXYnWz24gvE2MVhtUAJML88MgWz5wgywKxbM942Nh/8+CfLq3Qh7J8Uk+JJw==","signatures":[{"sig":"MEQCIFBkB61ufnzmg5iksjzLHTu41SWWpM2zc8iXVS19Dw3uAiAJeh0HsZQTya9OSYyLY0f4L72BB1MMGzESsIFJ0d8ILQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXuewCRA9TVsSAnZWagAAegcP/03Ly7moXD6OdjweT8Pu\nbb2x+IyrWlswhnsDclJoxGy9FVxoL+0fKU6nD6KTkJcW2r48e4oJ7Sm0bmjQ\nYCAFAilNF02x4G0k9GWhh16KmVsGCH6wRQ2wqPAqh5tSahScwPNl4RkcKaBN\nWdjeOm2fUO63PbkKTrg4gE8SisdqnUwJNe7Pulvbq7DEe5PzvIpjW2h2LMD7\ns3kg/xv1y5RvtFj+GOvNYLS/I9ephSgzhEHDL84T9L95eT4FZM++klfzUB0t\nAwc/BTo/RA0HY8U4PYBgXaxj0sSyqGdcNG3gEQZq0pEX7AuSJfhvao35e+uE\nySs0J1lxi/PLAvEvzXh49CfeAqRxEJG2fQSin6r+K9lVmxClF3RtbhBmNywr\n+tg/LOQwPkPWx9FxmrfKn3YyUGSV3lP8VfqTvD4MYJ99XLd3Nl29TB+4rozT\nWr3EmXQG+OgY3vM4P21tfa+WWjUMbLtQlFeBOOOzw6PdbTNpHejziRlO7WZ1\nC0V8DCwG8LEDSR8TeSL6Jb8nlY/7B2UY1HvFIb/+jj7Y1XlUWwr2MbrEy49T\n4Jvi/xU+yy7p1fjYuLciBv70PCbtz/IVkApOeuT34OT+K8Te/NhM4lY4OfCw\n5j82sgonsWL8jOyA5KrlfuMzeHN9PyG8Wzp0+tMa+oCesdbhtza30fEIpyJj\n6+8Y\r\n=YPjq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cf5e9842.0","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/shape":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/density":"6.0.0-canary.9cf5e9842.0","@material/checkbox":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/elevation":"6.0.0-canary.9cf5e9842.0","@material/typography":"6.0.0-canary.9cf5e9842.0","@material/touch-target":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.9cf5e9842.0_1583277999631_0.5992184266519252","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/chips","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.3657f8863.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b907d4e9f4dbee55ed27d3d76be3db97e096a707","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.3657f8863.0.tgz","fileCount":59,"integrity":"sha512-S7E7MN2cTUL6NVwKaSzS9LLcwsBSWpqu1oNoK0wIHIqx01vslj7K1AfnstDVsy7xnoPimPoJUnAOwiqyQuKonQ==","signatures":[{"sig":"MEYCIQD/ojWN0TtnXz7pQIU3Nv4XkorouCSSaYgtMvhLd9JNwgIhAN1AChBoMRMUcPnEPRc2YEGfmI/1Z8XrFbve4FCPswV7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+kICRA9TVsSAnZWagAAxAkP/i2Svfd83x7LnjnT3wKM\nv8l6bt7DWjueIAFz4Sn83AFVbJ5WrSLxnfky1aMS1FKBTieIxL8Uq9Qw/L8X\neaWujJlxDb/oHWOpwHaE+rg5Lk8HpmYV4Yi4Wl/8Y8FmIspXaEF6VuMyxho2\nSeZzxS6D46LJtoiUzSB1mQs1DrUafJ3oKeQed2O4oV90nHWOV2SXB91pa8R6\n7N+yzjnzXZ+iJWNGwoDzzmD4x/nQ2YeUgH/iAovEMx53gmYo1JPyxKn49YyD\ne0ykhX6YzR6aM4TQI05zCAd3zupPqXxaI/U2lajqCfla/QhtpZuvaKM5+D2h\nou6x9Ek0kTnx2SGZwdjdymfQbuz8rYTOnxcP65SK3otzy7mc73AU4m24+ZSc\nKpjcxNXw0EzGsa/HzccNl/woUJNNt/XZQfHt9gG82dENdw4IBy37rP7FTvMM\n78Yp93vk+L2hsH/BjTSHn1x4Csp92eygbD9hDE6eDGh5VMn5zGv5zXYd+WJ0\na/2ZUhQimZ7nCLYgswBRGqIM39m0YAWJYiUCqkzw5fZVW+pLXzX2vRml7VmX\n7nYtPST8UZ+fNrxGV7dPsNV4AxT/2vzL/kkZdnzS2b33ws8LgzFQD5u8SpWR\nY6JIQIUsVlWHdCCtUfac7cEdpszeOdtvle5q9Zls8YhH0dyndxqbLJo9wd2C\n41S1\r\n=Kb7N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.3657f8863.0","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/shape":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/density":"6.0.0-canary.3657f8863.0","@material/checkbox":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/elevation":"6.0.0-canary.3657f8863.0","@material/typography":"6.0.0-canary.3657f8863.0","@material/touch-target":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.3657f8863.0_1583343879876_0.8521246344905133","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/chips","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.98b843417.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2efa537565cfb0a567e9102b980fce8bec7c8584","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.98b843417.0.tgz","fileCount":59,"integrity":"sha512-hWOamnuiLfH/+bz5JA/bfKmR7Al6eTm4AfijxHjstHkwaNJk/Q0/PvEYZHMn9AhC92pqzW4Rp9oUhUMb5bgljw==","signatures":[{"sig":"MEUCIQC9mbizSB5Wqz6kZguazM7dCke7rmR4wEpG7ovd2DFxVAIgZfaY7FeELos+U+stAQbVZtpA8BgeXi0k+KZtJWDgPPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUWFCRA9TVsSAnZWagAAJ+EP/1FJ3mTzp3yiPNcmwZy+\n6biKguzGFsrqBpIyVcgmbBv8LNdW69aCrkYw5lFrUfovdp9Id9XmFFK6mzCx\nTAb/4TkainpgG2ZQis+VDma1hm6JWBPtfH3wu3BG2z3TElBDlfrpQYu/C92M\n+5IsjXR2rgzFilRef9t97mnRQ/almMykIJqcHp5ulHt62iSnhqobcwL/UBT8\nvs6hElxZnaLDPrpmnVFRwAFum4211Dgd/YdVcy+QfOmXUY04BeraegK2qgFA\nfFqxcJmFYzpdZnEkkroFFnxZ2rizNiuP/ZHlOq82geZMWalNn7dL6xH6GtH5\nh7M8SFEoppeTGvcCn2+ktHs9gI3hv6a+U/g9esmgHMjTmAS6NQoC9OiIXagW\n0L3lCoF85JtrOUYdS4llHtNA6n7o3EmIDnkxZLRc7LuQY9mjRza90WSs8BHo\nUijcP8dVyK+QjhoeIq5wK55QH3DtnvFYCvYZ/6MyWOhHStIr+4fh2H4xXppD\ncY5JQaPwwWrCnMAtaGhgXzckeiY96RMMjVmmn0mTpz0ZQ8jx+Wpnn/KVAX/f\neAhqEYvIfhVIVGLbzS4UlIta9CXZDirrAFQKrJMpSV2IYadsERIkElBxEo1A\n6lVNnE2+xZHI9esuEV/A8L3aCbhCqt5kg5ObhDWuAPocW/JEeWEUKTytg1Yz\n31vG\r\n=jmxJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.98b843417.0","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/shape":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/density":"6.0.0-canary.98b843417.0","@material/checkbox":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/elevation":"6.0.0-canary.98b843417.0","@material/typography":"6.0.0-canary.98b843417.0","@material/touch-target":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.98b843417.0_1583433092517_0.7196820316097654","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/chips","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"908965000e928f4de428b54a42f91ec71aea0049","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.17b9699c4.0.tgz","fileCount":59,"integrity":"sha512-Jcd7oXjGo1t0If2XpVxS+Jb9cKA9GRo/SItMsu+WBHXXKmc4C77jWrIcWEKV1+KtNmAu553HWE+J6zQZHTiwLQ==","signatures":[{"sig":"MEUCIHdsFnHZV6Gd5NN7cfEff5g2Y3n2jn6MwJ6lapZ62krkAiEA2ceUX1p37NYfS+epMZLBJGg1PAEDHpsW1VpJ2/7mQ6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVGLCRA9TVsSAnZWagAAwpsP/1mStZUfb6cybL814RjS\nnX6xhFDCcejCcbgttwhAvjxQiBXfU7K1ISLTEPXCwa0nMCMUJy2liLGlkqQD\nXqfAnRopIgq7ClrqTYhu9DU4Ft1HlDjd6BBOpsJg1iOblkWrCcJXTXyE6YTB\nJc4AJc17GrbrX5/Jrn8CwnPyQd9c4qMD2cQ//BicQstAfNx5I318Lt+WaPf2\n+uwf8DBTZIt95CemXsSP91Lc3fVAxiisxu2uu2gj/UAD+S1ww2+8VtzhZWBh\nv3g0Nt2XWHH8IQtcz7pz7Q/lYVRCTI4xmr3NXH76o7vBXpWJxy6ptA6ssVlZ\nyBiWVt792kZ/87ycCfheL7w/KuBFB0SqxxSE3jffpAit/PLFiAYaGS4RVGGh\ngioj0lg1+4SFuzXuCqZQeaNcpwGyD5DE1tfHrg9qQrX9yrRPCOrwNDycYBNg\n6iEhCxrPfjk/BmCPK9fHwMlPJoOWzwDezmrHLnOe21F8aYTPnZBP6aGehir/\nH2j2eN181kBR8/0Kbxba33xc9WKWC9TuX2NW9DC7qMn7bsuEgGJARmtusn6R\nAyKdPlRvMEbAtENO+SSxepWw0l4rGyGFv21oL41fz7QA2twSYmcUpLkzj8en\n60BOb0/n8aFy9OjLAcp4v+RbrcBvBXMBURT37zOz6y59U8lDc0U0KC7aNV5a\nnF//\r\n=CDSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.17b9699c4.0","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/shape":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/density":"6.0.0-canary.17b9699c4.0","@material/checkbox":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/elevation":"6.0.0-canary.17b9699c4.0","@material/typography":"6.0.0-canary.17b9699c4.0","@material/touch-target":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.17b9699c4.0_1583436170507_0.08694619289228389","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/chips","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.6ee035572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"275266630c822e501f6203a9665d170f1d9a73fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.6ee035572.0.tgz","fileCount":59,"integrity":"sha512-WfQCZZolKJSK0xHOFT2+5vQdxmnXsin9imld9kTvSa2HFM+CDhnH9bfSm+eiJdQdOyHi4P0nSiF1zE4V+HASrg==","signatures":[{"sig":"MEQCICz8hPlmBaCo0CmqWTGle+BpQL3Qe2hsnopdXSMCaewLAiBTTBpqg5aJPvYDB4gOQhPBlz9+mFkkunC+MPDDjzFAFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnMvCRA9TVsSAnZWagAAi80P/2ifTKcoyXopjSQgT3xy\nJNssHUH2Jc8EN8L98HdQwpp6Udex46VqiZ0HGs6+FftwSjwKdjxMZ7CrMjxn\n9vYCt8mu7tQ6K5eD73Hi6ptCVTfDg23rmZkrARyFUciaJeyPqLxK51YDMF11\nAkQBdjyS3a+sxjcqewBOZuqoxauB0wUiwCd90ef6oGysG+N3SYjRKXpGxmC0\nQBafN4dpfA1abCNwZcdyPXWvj/mCJa1CFEdzdZm5vIL0wdS+Ht4HYwo4iWvR\nbkBe49S93m5hCEDfStsSkDwlFDz9yVq4E2ToEMQCZGQuBLSio1f/7+zZ6Umg\nZSrWNyLiM51vJOJwzEH7mNt69taq9/lXghz6gp8mnSw5yCwdextr9G93Mdex\nYNx4uOqWaqQM39xfzrr0XRQ/iX8/NGQNBTF2tZ2ZXoBghd4ACphM6lrsUckI\nF45qmgGg9rvldiHfD1QJvOt7E0iHClD7QSzhBNt9nyTjGTI1w3/qlCmgCLmq\na1CZ4kQs96PBWSjxiBvQTM1tkpKvHI+cJeE2d0Ds8WxxVVvo2Le/sNPsDLG3\nYGAcGN/fI+JzsYH28xc5tRX5FnNrjXNQ8s+XekV9QCQ8435QlGWv0bOKGQwf\nRnfv5C7UcR2JStTe68c4k1vo4kjzmzCRSg/qBk/nibGrw8y9N6lqsYFJ64WT\nxnV7\r\n=6zyb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6ee035572.0","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/shape":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/density":"6.0.0-canary.6ee035572.0","@material/checkbox":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/elevation":"6.0.0-canary.6ee035572.0","@material/typography":"6.0.0-canary.6ee035572.0","@material/touch-target":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.6ee035572.0_1583772462745_0.45847112939096624","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/chips","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08c023050d83bb456146e865bcdb9f781e47e2b0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.bd33cb56b.0.tgz","fileCount":59,"integrity":"sha512-658EwhOqNNtjDGSrdyHrVZaHU00/nNgx0LXwXr1A9o0lMObo3QW1FVdHa9LZ+v97hSSYuJUsWV4KdQoxq4mRpg==","signatures":[{"sig":"MEUCIQDjJd1szbSRUXqAAW/CPsI+1FQD0c7sJNMF8gVCVxjlxQIgGun5tIzAHLGPwIyNZlc+BcBZbpz6Ii9l7QSWcwHUvuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZntqCRA9TVsSAnZWagAAINcQAIMDcFRuDyuvj2tWL9f1\ng6XusGCUh4NXOQ2EP4IEzjiy5emELxzzzbU6YSPU1hGAH7v2+ObkGi/yTPNt\npY1/Vtlb2YZ3mQt7MdCcfFi1fWwM7GmCJuxiCQXUTf0l3/f7Iqc5P5+Q/8Dd\nsBUhWlkfT38gU8rMN6rfA2Uftqksx3gfxXqSUwYGeKFlnKpwTkPKa40XWoxm\naIEQdP2tAcEd0EDbhHTvWeSQ8P6uGWCozpXJoBei3gUqMsci5Jkb4XEeqnCZ\neiV29YaRRh53hGIl2tbpyYqH2DOVzRjUO4k4rnyTMKY3/feJkbjM+6f/0nnW\nT+dLBR4csvJMs0Nu/tgFcQKyyxWDbgD96mTcJCQYq4syo7bwxDMsBOCR+5n5\nlCzA1ipI9rGXEOkppyPKA+pyRSjc+Xg6kT6s0K1tmSRqe+vTjh0eSNAIoBgB\nzCJRcKMiD8E1mTk96hgqNyyH3UcDaP9FuNrcWWMQ+3xZMz3IViimLSCeHP+p\nZ+qZaLS4F+lrO8urubf3O8eNiEC551Ip5LHtklhu1TCXzx7uuBoJsU5snD62\ndWXiHfpCN0Wa6g9kqwpHXFoFsjFNAiIggg37sLo/Czh+kKlLgmPItb1obYKj\n54TVlMUq6/09rb7qGnEMCaJFUO/2JHjatxDfLlCKVQ//gAcFAV3p2YgIh/nf\n/dJ/\r\n=/7V4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bd33cb56b.0","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/shape":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/density":"6.0.0-canary.bd33cb56b.0","@material/checkbox":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/elevation":"6.0.0-canary.bd33cb56b.0","@material/typography":"6.0.0-canary.bd33cb56b.0","@material/touch-target":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.bd33cb56b.0_1583774569568_0.8114659921279324","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/chips","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.26c049afa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98c26391103626f3f2fc27a6b91782b097d2406e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.26c049afa.0.tgz","fileCount":77,"integrity":"sha512-i0XXR1O1cyOa5rsml4TotRMwuW3PoVbvlMRgQXSLYALRD2E9NkjWXhqaU4hYRRyzhx5g9WHtMwfdhOLnFUSNJw==","signatures":[{"sig":"MEYCIQDgeJybIc8fIYJXQCh40mC2ZkJjAjtvKnaJ9nbRkZ1nxgIhAPtL6R9bm1XMpMWDS0iMiVYY0uGSBf9Frzm9CIdiybNd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8hTCRA9TVsSAnZWagAARXkP/Rk94BlFWfs0/jOTvGke\nW+3YC6iFfsW1xvGSUBUCNtHCDdWQXLUfb6bjmcfI5Uky4yQu5i1MmRYz7EQX\n+ZbMsM5NCtNLJfzM3Onk6udyKnt/u7AClkQfDP7Hk7CXw5KYZeBdzwkMn6GJ\n2fSKV8sVUHfTZhGYis+Gaha9O4rMsmjfLErgLzgtDrfJ+PMFEcYWSq/Ujc2r\nw/nKPrJIMpTXMr+2nO7wGL/YTetiXxOztLPhT8PJmkvNFB/1NK4XVmz4bbug\nGg6jIIrSHW7kx1EXOgO5ppi094YDaTmQA4z304v2ZgOY+/OnT7scCj/eRkve\nQIkfEr1jON57xDotgZMcKHtoFE/rPBnegS5Or9y+o7ly6ZJebMwravsrmdGd\nsplyZFvh2HNfbRlmOZ5llXu+2THO/MrHmSzO/ERWpXRWqJZfEaCh7KZOL5O3\nAHnsFf7AVEFFnGf8PQFAuUmmwvKc/yLr9A4O1DmDPqxC1HDgXPVJpwdXH2/9\nfNK7so7n/iQlBbbAPKGUJmfffnEdQZZxOMzGOY3nVdF8phtc5Y2nHbd5seMO\nrpBt9VqmAWks9bbN+4ILiMwNjyCMwMPZ6hoK68jfiyd0j4PMQMUdppNR7eIJ\nG9V2yypoSfky729axsvuUuwAvS51Xgj3BR+s+sQ5PjrRcJwyElX0FGEbffkD\nWNDP\r\n=wvkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.26c049afa.0","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/shape":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/density":"6.0.0-canary.26c049afa.0","@material/checkbox":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/elevation":"6.0.0-canary.26c049afa.0","@material/typography":"6.0.0-canary.26c049afa.0","@material/touch-target":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.26c049afa.0_1583859795241_0.1075669331588538","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/chips","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aade2c3667d74aa580b4e7c6498a94dddcd27bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":81,"integrity":"sha512-H82grupN0OyvgGFS86Cmdg3GQ5khQjlPgqNCwurLU2OSQYdoTR8Gwn2LfWeqZpXZR12fDAJgukJru5jKnkSbXg==","signatures":[{"sig":"MEQCIEtE1oUfZjrM5CR1PEjCxwLscdghgYo/t8JFUAlEuF7yAiB+ITuqTjzn3sjVgWeB1Gchsm+GlkexVQMbd8i7Po20Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":779125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qXCRA9TVsSAnZWagAAHfwP/ij9nf7nX43W+gDe1t//\nzVKEnKVcYr9SwOqgiX7JgP+LiSUd28YLkaRzZXrO4aPeRmneI6jbtMlCjd7I\ndistkeCK1VfiONROkyXYIk5L4v1qdhteQXM/R3EwJnfaRGztXfHbJYz9bvpn\npfgZuV5AWkYcR8KfTBRiow0cLiWb3dCLjDMfoKpjqDfYXbJg1qkrHp+ApOCL\n2SIEzuHKgzOTWgT4Iql5SPS+IZNgR1qQiZbno33Cy68Yfjr8v8pR0fs8b/n9\n0PCC7EeTLza7waBlISbBiMO4TeJSzzo9l9SbJ5PCyjKV0zmRuWefii0u4VYm\nb9k7QjSt/m/0w8S16CI4mrzVEd4Es5U3Kdej4WnIw6rENmHBiAXtYMVGYDSk\nu1AhULC1n/nMCw7KFwHPyc6VdDuDwPWAK4IvwWOAJqjk76j50GACv7Wg9wEz\n2G6EiKAbF45F7zA29/G+/q5YiC3oMQGrejwVIqUbwW/EwuwxoEHc+ZtcYEyz\neCmKVEXJw8z/saj8LFqrPEH4FcSMxQ7aN2NAgcKIJFu+r+TV7HeoAeNrVUul\nLMmIa1nN+mOIXLfG/lUl3B6pnAatbWu8r8ML9uZfL6+otnPUQVnq5uDa8FWv\nYFY4n8Avta1MevreRoK/3YkxbCLN3tAqxdOm6xaEwE9/+qpluxTdtPQ/bdkT\nTHVM\r\n=6Sls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1db5c9fc8.0","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/shape":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/density":"6.0.0-canary.1db5c9fc8.0","@material/checkbox":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/elevation":"6.0.0-canary.1db5c9fc8.0","@material/typography":"6.0.0-canary.1db5c9fc8.0","@material/touch-target":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.1db5c9fc8.0_1583872662697_0.5858680903690008","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/chips","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.4971637f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c39d0abf3918528a6de8300fab5041cf5a8eed4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.4971637f4.0.tgz","fileCount":81,"integrity":"sha512-M9ngfUdsYgh/HL1EpdoMdm0QiCrrYI9JmZ8QFRSD5ptGuf/9uZhS2apVyM4XP7MMU0uWHYnTQhm23sVh7Yhfqg==","signatures":[{"sig":"MEYCIQDLvabzhCU5gVoCj5PWN1uOa0isriF7H/km6Ve9r3rvMAIhAMFFQT5MKDPlwA6+vQrapgFRLrEyGOYle7wAODpKj7i4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":779125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBvACRA9TVsSAnZWagAAbHkP/RISuwzvX9U1HGcLDfOs\nq66Fg0U0vezhyZ5gF/0jAXgLZo6ywQiia11Ftdg518aleJU81R6c3X/6C3KN\nL+IYMpeUcxJ+HdwRrgVuybiV19vSPZyfK7X1/jL2NF82VN/l9DOF5IWaSMbD\nU6RyaTHss5DU8ZPYGExOnQdn1PtdXILGi5lZBONe0mTruZ4hI3YVMGRj9ea1\neZd1ocWcWfDt/e1iUD0pzMXwSqtldK2lp1iScKkmD+wBOgT30AoTDlGHLztI\nwkPXDVaKpbECZ7iF0WjXNESesZjn057KP+c0Ecc38hafo5XnwPS1uMx6EP/s\n7b/Z4Q+BrN3RK6MkGZP2TsOiY3hJiAySj3pAQ628R+qqhoEUokFJsaldM8jO\n5zkgQQ6IFZOAP3fuUX2R+2u4WwEuaM2dEkVMuiAHSJ4Ly2Qe+KSxg8ILeS/V\nJ0cOek6X65hrlMVTr5bnLIosLKjQlaQU8Bu2dK8xbsx3Dd+YinnWjcUZszz/\nhdH/s3p//Ju35Wb9ARoCq2puy6aJxaOgrrIdOSY5phJ57A2FZnULhOv0B8JR\n5sz+Rzx7MVU2/wCpoid2Myx7wdTxIzp+siVuGT8eMrBtDK0XiOWMmgrEej7H\nvyBt0RC35wK6cAEEDv8JMYDQZoJT8fU3kSb0+QIECk2xYK9ijbhHr/hHDpxJ\nuPEB\r\n=mQnc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4971637f4.0","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/shape":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/density":"6.0.0-canary.4971637f4.0","@material/checkbox":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/elevation":"6.0.0-canary.4971637f4.0","@material/typography":"6.0.0-canary.4971637f4.0","@material/touch-target":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.4971637f4.0_1583881151436_0.3606300281167232","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/chips","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10feaf2845539342a6f1e87794d905453410a654","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.1ae8130ce.0.tgz","fileCount":81,"integrity":"sha512-MVc2jM/QLwbUup0oZTmX6P42ej7u4rBeA6Zjtl+T8wR3KEUd++SrNx13HaWlgAj5mFeIwI5sz5iyTn3xFO3jYg==","signatures":[{"sig":"MEYCIQCxTLblQYa9bwm+mGQr9k1ZEP+AuWEkqlYMmRC3n6H+vQIhAPZzQ8tf+lfvfE3taUtevit5e/vozehuFGUr/hBIYNWf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":779125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1VCRA9TVsSAnZWagAAiYcQAIFKRC3o9B+LYBK56u2C\n/BmaHiKCc38Z0Bh1z5ror+8ax+uWY2PgiZCcdBJLHvHlzwOrGLIpJfd5OUti\nf5JElyHiMxGlPZowQrJQ2Ggyp1ZzwCxZInqngCT+LH5nQ/nu5y7NvhVKHE/e\nTxusF4jxL0/yxV/CSUsLhAZHCJy6N1VVA786uldNab9vSKBOKNXf391VSfoc\n4q6ZTSsPOlZLQI3RtLN+9KyM2eY6EfrwsEUPrep09q+e/1deyPLu1wPiK2Ym\nckubGGpV0Uo5Uu7pvpjDHMc4wmsLgfoha2rCPLe4XE8HO0daTCeUDglNByNT\nLQU7un+8s3Gb+IM904bO8vsMfT4yyxGrpy4qQE5HBKjZkp2zt6Jbt26rRrmZ\n4JSdy5wVjiljTvuECRTEOEgNdQdVJxbnhLupWVjBR3lRtTc2VeuLNy1JwNhT\nrdm1prEdacpxB7O8kyucREToRZ96AeijS0z104cDQYN+M+6W4HKT5S1PKCGg\ngwCx/g+PC4sUd8ECdO9mgfOefeOrjyBvC2AKq29o+eFmpHTRczetPMrIu4wv\nMPt/J1a7J5kFRTnFMUwA7uwEsNyjMsUzJPfwMOTcgM3mlXtzcMPHYApYsyQF\nDOE1pl4lbo6aN0LzwpXXXXzpoxJipnBmy9pir+4pvxtU2c/Sj9DnGZKsJBP2\n11/s\r\n=6DYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1ae8130ce.0","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/shape":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/density":"6.0.0-canary.1ae8130ce.0","@material/checkbox":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/elevation":"6.0.0-canary.1ae8130ce.0","@material/typography":"6.0.0-canary.1ae8130ce.0","@material/touch-target":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.1ae8130ce.0_1583881557020_0.24615006394023586","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/chips","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.8639c2690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44ebeb63171642d42e1ea1622bb29f86072fd30f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.8639c2690.0.tgz","fileCount":81,"integrity":"sha512-Q6wbHIsMQGnitPzkpH3xWtCh/e+4ENhJ5FXk1vzhWzszw6dku3VT+0a7NJ6pcH3aWtpUWvOU/w2z/Uc5TOfmUA==","signatures":[{"sig":"MEUCIQD5MndvJWq4bRLLhAsZftfpZy6QlLyC2ToM7KvO7cXzCgIgM+yWwsa1ocAkrJ+tcyYcZbeILASipaRYrMspWP+TwPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":779125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIZQCRA9TVsSAnZWagAAkccP/j23MLHO2kljIpUJBbkb\nvImg0UYis4MMPpgyPm08XxLFt+8U0mpdpzoVKL+UVgDGXIpRTIa8iq3C2cDa\nfa3YRGgct8dR0NREUqbUaphjvfdzhQr4ef1xEOE4u0Zw78cwm9J3Qx4CuwC1\nD/PszpJqBp4dQcW5qYNQ+xZP0REPRBKdoNfgr0uq2mPRmv4LXbfXVInzDQGl\nj5d2dSdos772nT+mCOiW8edHrZgSNjjWnsj5QU1J/cCkWsddOox58iONq475\nfobc5JSTYi05Y8Wfn/t54kqeciW3G3eQLsXz8dAOXy6gyTuj962LsXdD4WCN\n+9dlTZtvEUOCwGb3zGCOan195HS+xRe/Ehp6mJCx+0S9vl6WIFGGSrFIbacl\nU6RyWKHdwlJ9t1VIR1kEFC6otBwq/ImeIjlGKS4q6g7pTT5DT1Hmekt0dwau\n0Cco8Rub4KtqQn3WgbCbgDKHgiLxag7mjp/5rpvZmiH3LMc0AmPT4+yFTBHC\nGBSv+LlHd4vu8T5YViieQfCXY7JoMObtCLGMX/3bvYwI2pS773NiuN75L0i0\nqepis3tHT5kOCYzw4fNITNdyGM5QdPNUqbvfHxUey8hG6IxgyWZwj5PbeUIc\ncxkmZmYukkflnS2jA5+pTS+8BAkHquL5TfoLfDYI9ZHtI4G2xVdpRo2M+AaB\niouj\r\n=9LIG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8639c2690.0","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/shape":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/density":"6.0.0-canary.8639c2690.0","@material/checkbox":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/elevation":"6.0.0-canary.8639c2690.0","@material/typography":"6.0.0-canary.8639c2690.0","@material/touch-target":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.8639c2690.0_1583908432151_0.9888510300271427","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/chips","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.d5808057f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2370a5009888f97cb970187d2b48009d97952ba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.d5808057f.0.tgz","fileCount":81,"integrity":"sha512-wKG2XeMWhsM/mN0yp1etzgu8pd0AvmijC8EhH1WZu6c5mWH7F5UsfEJnZG6pWymEeu7p7YMxAS7t0Y20Qx5lVw==","signatures":[{"sig":"MEUCIHoWHZF6IDAFC/QViUqof5gAIvTgfhOiZK/G0En7rtoaAiEA0ay1cCSLMyMeRqpWIQ9lG8vdHpo9dXaxDJP2jlLlfxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":779125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaREhCRA9TVsSAnZWagAAk7UP/RpSIxjSP/OkaMO7UIuV\nS2ub2voKgNhWauvBokgCfrn4XMF70tfP9s0fR0ENC6wIhyAFYaS1K/N7wEU2\nnT8otsssrHp0H3EO5ZOtHfn/A6OTjekHXZhcPhqDVIWBRkAG+TnpWwXR+RaQ\nupZpB3rNtqvu/GkMwQ1VlZSiHGykvOyCXN7iC7V2hfyS77KGaNNeDWLnsfgZ\nU62eSPfWpnectCTXhTEH1FCowN4hdGJEYN3dvF6s19gUj02iSqbmRQNsUyB5\n2iI4A06wnbnRIENFZR5Fmg4upHNkSjZLXOJ41+5ajPZ5J7gLjmtslfQ0w+20\nuED4/VKiEgcY9FPBS4f6IS0CV/VsWWpF60cJ8/umbh+h9XPs5/WspC59N+jn\ndI8o1xhamR36FCt29tvxcZp4LhBK0FhdPPfHJrs5ggV8O9kaXDYR1KFqYSYO\njT/AOSNGlGLTcFnLMxfLiSw1NMUwjO1kHbj4z9LozR+hxQDyLlXiuASI4579\n65p3tB73GHcALjDWHo9drpcsqcXpJlAA6eRp/yTq0hfzibOnP43Y8FdO5Q12\nhsDYlU4rKyWS3K3JBpJvyLKpPirZjG3X2oi0EIsqsoyzooyyrscnPuYuCozc\nYXG3aW7Rl5XcMzNwnCqEcUir0d5qKG6fh5qT0tlB+pcbmIp07E/x+TeI6lwL\nASNl\r\n=YGFZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d5808057f.0","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/shape":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/density":"6.0.0-canary.d5808057f.0","@material/checkbox":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/elevation":"6.0.0-canary.d5808057f.0","@material/typography":"6.0.0-canary.d5808057f.0","@material/touch-target":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.d5808057f.0_1583943969212_0.6559925255406598","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/chips","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa3c1a4e8137d50ef8091af6aad521417c5a82a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.b3f58203d.0.tgz","fileCount":81,"integrity":"sha512-XJW0k8J437Gg03ff7bQxioVOoQzXLkKcS3T+f5nZdcaezPNUuXjG1U1IR7Yti+BrbyTujaFysy3ErZrMjCFEyQ==","signatures":[{"sig":"MEQCIHNDQTLMRaj0CuWvuLgRxq3RLmoY3+e18jsWKgGPdZigAiANJmN6mYxanqvGyXaq64Y3amX8cMRI3/v1qZ3yM3vOdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":779125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT5BCRA9TVsSAnZWagAAKuAP/iNjURr1hKkYoLOWt1AC\nBQPdlJ3HFXI+Rp2uKChmqZFEVKhrjlh/d+sy4hVd4wbdOX0ETMk+2ZoKyryx\n9tzOx1qA1CADD/vOdJpwIuA/9va6afuNyVHq3J0kOzT/v3I4d/nAbqym1nYE\n+9qnLKHpewjaSUqqhasGb7Jg2qkANY2mn1uEezcTRiobFt4G2NmCbEGzyUo5\nVXT1w1RPNr1UKUywaNC6WcXalfFFBKyzGU59EAziFiRbgmN+qRhFfudCgRlg\n8dGEbvdcBzR8kU/wuwe6zjqdNbpOOSrEffwnNxUNi5U7HD7yLG7+JjwviSUY\nSNzAfCBsxZDiCwWNlwiSiXfRof7DvwFgVqsM1I4N83AnHZY6ze4q5K9xEIrU\nIa9dBGl7cQi3MVy8foGzehTCR+CXoZX8T80G0e0/r8fBp5UxR2PuoNa9bkQ0\nAauz1kRQXbe+vH4J2x2BvZ+PUWaseZ5geqQNTObMTiNCztOHjobN+C88GRt3\nYJpo6t/+gpPnHX+BWltOz0SGu/0I0hG1FnuUF3pgxzx+tvikcittUT9UDUnI\n7QcjK+e9oGdB/ugyRmUActXExA8gXHmyFGQz3tXeZGt8HWQhoVajENLo7BNM\nOgz2/GlfWgY3F6D+voltv7L0R1c6QCwG5vvs7nhDiRgFeM8Alg2NZjc4XVr4\ntgDI\r\n=xt4Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b3f58203d.0","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/shape":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/density":"6.0.0-canary.b3f58203d.0","@material/checkbox":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/elevation":"6.0.0-canary.b3f58203d.0","@material/typography":"6.0.0-canary.b3f58203d.0","@material/touch-target":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.b3f58203d.0_1583955520902_0.88534096073061","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/chips","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.bec065920.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70c04c2468feb52496e0f6f0754cb81ba99e86e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.bec065920.0.tgz","fileCount":83,"integrity":"sha512-xBmqk4NrmxHBUpiy5bqwjDVllQp36RCwABI58ciQVKXIMhGFoOEiZfOMZi2p+o9jTvDiTX7X5U5qthFwIlEapw==","signatures":[{"sig":"MEUCIQCv+ke5/bt6cLzjlOmHEnm1hEKLFIAySVPRec4VDxvEbAIgZUSxyhfX9G4hsa7PJwlW/9qLTfmzyMx4Ds443erA/8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":784830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmrCRA9TVsSAnZWagAAB7sP/RwCj9sGVVK+OM62kB7I\nLcgOmzK3rlo3xAJPuj8JsB6pbWRgxl+vwJnrjKWgL8xcmegBI8h62vkbwAxc\nmztzcpsVp3iOd1NnD2SHc4zFpEXUyJV63AcCZjkYnB+8UD3pT609r6Z7Job3\nXP98bzUHyAjVc3jaEu5/mm4hN8dwnVQiPUUmW+/9aWXT8JCkipUZbQrbnNAD\n6PNa7MF5ZDkN2qorCyc3QMAMQAlQ5Wj04hTd44zzGL3sQzw3lzC3p/TEnbiy\nczFUldrPgZvg4qHtQj165mLuZ4p58pL0/mOth7zcvXDc/XaDd2fWxH0+u1E8\ngEt9/eZpO2buD1+UmO2cpc1D9VhmvXgI7cXUne0YJutYvjuU9ftiNueVDB14\nG4alr6J1Js1Crc0JY5/TkToI8bn/1opbqZ7wTh4VtKyQQ/M0/F4rPi9jL+vl\n7pta37MqFRWf03Tuk+Y+4Yy/DlyYzO6Mz0zZrWMeNfdm4vpoCiOxOlcCj6IH\n0ohS75Gf9fk3ePiBylfjqRHwNuwPDUMXlTqhJqM3oUlwLXk6ECz0yihcRIAS\nxOZ8gL1XCQumYZYPHJM64EtbkuJepKdDZKgjo4UwsKhA+sf9KalcoOh2DF/x\nNTijo9rYfFziP26T/smnz05r76wx/jI03+3BvtfnIs7S66+IH+9SwuOgth70\nCuIY\r\n=s1TU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bec065920.0","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/shape":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/density":"6.0.0-canary.bec065920.0","@material/checkbox":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/elevation":"6.0.0-canary.bec065920.0","@material/typography":"6.0.0-canary.bec065920.0","@material/touch-target":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.bec065920.0_1584044458601_0.6570181814241354","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/chips","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.776291ef0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6605392a4235935bafff35c6b49a7d0c688065c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.776291ef0.0.tgz","fileCount":83,"integrity":"sha512-vISok6sgwAWkV6JqGnAIFAI0x6KL5xIC/WV6+X8xkVHKsheVDeSbHqLfZP5gVtLFA63+37y4pSqWMDFmA/Z45Q==","signatures":[{"sig":"MEQCIEtlrVfT+2zwywOCG+MUgDqZlojt9QVd6eb3FpWAYPAAAiAdBN+mwoNyxmBpdZhIsvpUxrd8rIl+iHNSV9fSfndjXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":784830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSM7CRA9TVsSAnZWagAAgyAQAIQHwXAut/X56xb585Pf\n54hc90mk76Q/QizeGN5nyaI4ZC31P125Dpiwvgehs55NFniUPZniiqtz2DPs\n0Htg42yCj6JROut7ogy+Qt7EsoU1h2bZfhKlKzlvBEPnizwGnQd4K2vQEv/3\ngkLcHO68KW21XrcnPg6PjJaGx1C6HKQtq2y0UmwD5G64FqhW99Lxg4mz+mpC\nrPAPrQZYI42ZkrHqC7ra2HNR4uH21UqrpBsQcI1duLhVRUJC9Cv7LyziKQM9\nB5ZGfXneFv1IdDR3lp3Dlrek1wOyug5edz2wLh3iFoHEF9kuCPlWIlRhq4Hf\nK2avAfla+ap4cSCWD/+3cIKpJy+vFSDEPy7HQz40CavBZAeczz+2iBQRkoOB\nJQEllbgv4PHzstR3tTNwT4DCg4Jiqakisgn4qe70nBUGs0rt8nUNtAjEF8Or\nVOP4TsvmkRTa7jvQavRz5eO4yHwEEtZfpVED2WEB+VVWKZxJiFbfsKcEqWPI\nlK4usu1zAtqPB6d+TwGUvegL+N0UCVTJunQneTKaRa1L9817a5NyoJm6k1Vs\n+RsGktY2GjsCCpXaz5onhknewJzQFsf4CI9B+eA9I6B7hDEgV7XHszBd1HNP\nxYz6jpGYZOlG2/VJL1Oj4ASXKZ4BgopbEqVd5JPnHUhMcCvZBV+ObLK0lBBN\nrYkV\r\n=qEiW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.776291ef0.0","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/shape":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/density":"6.0.0-canary.776291ef0.0","@material/checkbox":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/elevation":"6.0.0-canary.776291ef0.0","@material/typography":"6.0.0-canary.776291ef0.0","@material/touch-target":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.776291ef0.0_1584472890814_0.8798103309011287","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/chips","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1d4390560968cb82ee08ce58fe26717168e4e21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.ece19f3dd.0.tgz","fileCount":83,"integrity":"sha512-cxh0G4XNgnAASulOimSxOZKJBnbckPhX8nk9gpAopnnOPTWfhaDZsWOggu2ekZPtjEsCALgsONWWQp0vlmQx0w==","signatures":[{"sig":"MEUCIQDQvRUuJvhV8YyOt7KwiGdoJcL7EN4TefpEDHorSzDu2QIgKG5aczYvB+3/rBBoBUTIgj4XCI2qr6Q49Tbc1EB11aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":784830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUjICRA9TVsSAnZWagAA2TkQAJ03oNqUY7Jvky5+zvIt\nN/oH/rZBGGw0sLHt1QzVtAto2NoejqA2I2qiEsJ0uurc7uBUMlGtI3d6bL4Z\nLqcC/qq3Wz6CkEpZfm4XSeD00zjVnSmbmN8wvAi1yKOUzuAKFHtTsNGGyBIz\n6ISVSfyoBWi8asFJ6ohdl/vv7ymNQqXn0QKAGT8Zc2aQBfFBkycJ5xQLvUv8\nJmZZ4gySnY2uMTO8cERGp3TtfA+vrnFjOWg72rBuUeik3BmLMjDO3YBIS0vn\n1Wi0Mdn0zMumW+N21PxwTxFRJPiUzb+Oda/8QIBUxxcjugzOWKoikvLyeM0B\n5Iczx93cYwihQZeaXV1X0nXhFxqEQr/x9RIKlBR5s4E7g+Nd0TWCw+APoK1y\nAwpZH0YaWWLM887XdFym4aLs4a4EhpYOfuitiPGOvSVykXDOlfpCHXf6SQ3U\no/jAsYTfGC9gUHW/s8Z8/bONOSKfp8jC9H6PwmRcjKcQTxTeUZtJsg48xHh+\nsU7Y2OQDO05KXEgiQ3yFBSHfuEs392sMN0ArBVUsLxIlIQ5d1u2ikfEaEXRy\nm50vkozapdow+dNLroDm4OHx7njf18UtjCFiM0mT0S6q8xUY6qTJ5l7UvCq+\nOlqtWopD6TErhtvAHNihgKp9cS98BSPkzwQdMDm8uo5qxKu99Z9alU3877TQ\n048T\r\n=LGqZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ece19f3dd.0","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/shape":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/density":"6.0.0-canary.ece19f3dd.0","@material/checkbox":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/elevation":"6.0.0-canary.ece19f3dd.0","@material/typography":"6.0.0-canary.ece19f3dd.0","@material/touch-target":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.ece19f3dd.0_1584482503645_0.4751530294583768","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/chips","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9a8dcb61c985744f4cbf746448bdeb54f574955","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.4dc45af6c.0.tgz","fileCount":83,"integrity":"sha512-4ysmUAg9cgLuwEMNH/Yee6l3yni42G5g9rtCgO13N4Ghi2IE4/cEbepnR6VVlwydklK5AhCJOQQDhmtyKMQTWg==","signatures":[{"sig":"MEYCIQC7v+3c8tv0H+x8z9S3EljayDb7V0L8KlrW+2UsjFYlVwIhAOzwoiV7syTcycCG/1JH5Rcz/Qqoa++SHkjDP4hISCd8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":784830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3tCRA9TVsSAnZWagAA4N8P/3il7yG8Mpb9bmUsbBYf\njNNzvmOfSi+EjqnWIv31RoW5e4Z93CIa0/EJv2lvH/3Flz89RerLL7+4rjp6\nMfAxCU0QZgUVWLEvJp8rttm27dSOIPNF4jPMTvh+dst8r2A5+np3cJyuwgg9\nHZdGNfteSmvcYL7TFceslY6YS2eyPOq8eL4Q0ZpL9KD+nhRQlAweyw96QNl8\n16ZcfUTtT58sRLYwJUBmmkA3zSExCgxrTLn8Ti+Wisx4GMujSKKl+XVRfdSo\nKeIGiBwJPy8RIxdpj40/TsG1zfZbxhYsdwg21pF2IYqOqVlRBk7fW+XpBXmz\njgxSDcV8ALhKVYDOCyxUN24WaJH85j6OUnvfrBJvK230mKVX6v42QveMgBuL\n0VmeeJmRDx16m83a2uxllounma4la8FFg9yV8PIu/yR1zYNAksoxxxXLsVhR\nYluiZBM82t3QHMnEABA4Ylx3yV71epu3Mtx+cRxUkI6RSFJcK/aat2upP3wX\nFoSYwMZ0IgH2X2gMVeXPu83QnLCPXhsshlLbn/k04pGLCA1uzHOWqw0UHE+d\nx6JVbD7852oayy9/cStmLQlEiffWLijd2TWd2/END4AXYLaGnWQwK+CR4Hmc\nfEVm3pwi3uNo/3MSGefmiYFXRQZtDkQWE5kXmKDe22D4pblSOjka7GWaOeWP\nWRvr\r\n=Mhyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4dc45af6c.0","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/shape":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/density":"6.0.0-canary.4dc45af6c.0","@material/checkbox":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/elevation":"6.0.0-canary.4dc45af6c.0","@material/typography":"6.0.0-canary.4dc45af6c.0","@material/touch-target":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.4dc45af6c.0_1584496108840_0.27878404489141295","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/chips","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5186a57e6ec97a4a1e1ad5e819caa0fab56e38a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.6b48781bf.0.tgz","fileCount":83,"integrity":"sha512-X1oVL/1OXWumFrfojQHhIeUVwySbQJmXsTkE2soMSnWhx9OtGVcE438TJPVJ8BygAMwRvt2GB4t7g5SURQ1ZBA==","signatures":[{"sig":"MEQCIB34z3SCrWyVcVy7/Fk8p1A+6z8OQAvDR09URWV2pXotAiA/4XcTzkA7lrRTZUWAlQKnUVdYim1i0IwkuNcn/Q7M+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":859172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+/CRA9TVsSAnZWagAAlWkP/3+JDnE2U9sUWZmT0pOh\n43h57pyZ8EuB1/9VxR1dsJJadMz1tN9MpvzwcCt0BIgoiDeF28DPyQNtkmK9\nCynHPkRSqq02SsoStLU+N3qb0z1k8ypR/ew7lizy8r+l7Kwy/FtFrf8hUzsg\nprJvG33Mj1b22vHB3sSCP/cLcZTJAzVPL/b7TbDPLzmvX6tG3fEV/uQ8dV83\nXFW7gPtT6YVxqEVt5klqPN8+CNRDQqt5s92eioQsAkD5w0mx320OQJpsFgXS\ncHMDVTK/6tQ6U2fC95shzkIP/ybs6hk6qxlOIsm9YUtQx30GJ5r35aiOOhYH\nQj2IaW07VUzPJVrbs/DC9DpU0BnHf/UPblEs1zw/7GwK55H7WEWKx3rqI4R3\n9je4NeFYxEnrBuoQNUWMfkJHfW6BpsjZVE2ZAPrA1PgYrvcNuqkj1U/xVi87\nH+jGIsD+dzc8tkEoNVrKZNWpsE3kqpBVkbVJsPATOOZ84dvyRy9nCrfrT0xS\njlz6jZUgYzDqwWZ0v+ylLFSMY4Tg1NAful1L22FT1dOul7lOQ7tgIBs6Twmr\nhRslcqwk6az0uRur/lJy4PxsNvn1k8erFHlvZpFEy6xVQsVvcqjriTi+vnKs\nnplwxIhIy9SuB8BAZvI5fKpnVmPLGZXJ2rwu2scQghAUxJgfBfySsZqSQ+P7\nNg7G\r\n=swKn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6b48781bf.0","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/shape":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/density":"6.0.0-canary.6b48781bf.0","@material/checkbox":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/elevation":"6.0.0-canary.6b48781bf.0","@material/typography":"6.0.0-canary.6b48781bf.0","@material/touch-target":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.6b48781bf.0_1584545727270_0.6124412637030767","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/chips","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d33ad42dc11b0097b24649989e4557701ed2343","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":83,"integrity":"sha512-z+cvQG4CsgL2/Nf3G7leYbev3l1oeZOuesIfDBGasRy0+OOn5xnQ7JGguqDm3E7eLc5BDGUgowItBWQCp8OrRQ==","signatures":[{"sig":"MEQCIH06nGOLfqawnnFW5MeasVxi5paY/+7IQOQYoXGrwOk2AiAboh0zPySHfBQzylGTOCL0my0g3RzYhSAA4nZU3IQcnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":859172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62XCRA9TVsSAnZWagAA/3wQAKSe8dvMv3f+m0mWU487\nTRpJ4AxYgGWJp9m5PkNkn1Qp1Myyrc0qciuhd/TQQmnDKWfo0ICCVgowbZtu\nLqJzg3H6epiGwiqr0sjvHvJfMmwcgKx5yfCCeXyQpQ54I39DJvBmlPISFIgy\nFG6toyebvi+gE4p1qBQgeJRCwx7N3pfoJmAwk0BT8gl07u0LE3KXsd/YfTF8\nXwJxQiVchAf7q0kFjNO688kHjHxCbkj4wXxcMUILVTYUnbGLMeMSSEoaLbFV\nqVw4TVbD9T3PNrW4Iu34syKGZZlBdBxwbZmGAnH+BFtOSHTg9DmjXVk4H94V\nKLvXnM/3DU7amTd4b3HKR9szyqEztpUxRJm0UfBpTc5jwpVAWZZCeFR6Q2vx\nZfGoOTJAzXjSgTOONnFgtXV4fnTKSA+JzQdBzMmJSkLo8HyvNQJUBbQRcwNO\n6CmKfwnK67l6UKUVxGi3OFDqeq9QRv8hnOV0JzeIKflGstriZrta6shVsjsR\neRUaA6jqCE+C676VMW1GWZtRE268lHK7O1spbifmusAdGR33h7+M+dNIpFfB\nxIJYJNU4pTTJxqKDGv49jIq20sQUGsQ3Spl8WBaJhrkMkHgB0wgVnv+05q+b\n9yNRfIeL2DGMFNBsY6Z7KxARB4ofEro3NptjneALHa0qjhdoagHfY2SfuAwb\nDgm3\r\n=hIza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a88c8e4dc.0","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/shape":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/density":"6.0.0-canary.a88c8e4dc.0","@material/checkbox":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/elevation":"6.0.0-canary.a88c8e4dc.0","@material/typography":"6.0.0-canary.a88c8e4dc.0","@material/touch-target":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.a88c8e4dc.0_1584639383574_0.9504493140268178","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/chips","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.cafe18860.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74ad61cc5ab77421fdc6c823ece620dcf24c4df9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.cafe18860.0.tgz","fileCount":83,"integrity":"sha512-+/buYqRmiltSgGbUQDzAtQaQ8pD++UXkF3F9QDpfIcUnyKpFuUY/EoYoBT3qDHObvKQconQzh0pjBMD1s8G6/w==","signatures":[{"sig":"MEUCIQC9IDyJJUL0R6QxLsifph0Lp2NQsY3EZ06pz3DG/uxmUAIgYk+O7Mhfujh48Zovr8FL8F7PNxgfuiojKOXsOe/o6Ck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":859337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNkICRA9TVsSAnZWagAANt4P/2jv1SlP4cQHZkqO9DZK\nz4Wq/CCaaoWqsIq/xYnNz4Fcx7DLyJNruohRKoFk+M52DNpp2dZqTOyYmQWN\ndiwwxvi0/02qIr9QIL1uWB4TjwGMmVAYISBtfw+OTS1oNhVuBXwcyEt1npOR\nfseGDiceMtpHFR7WgXOakTp65YE3zYlvX/K8Hs7H4EPI/PGP6+iCJj+9+OZz\nT9C3lXID+y8JSEgMZQGjjE3JYVzrNoVjJH3SJqU5J+p3o0lg4jfQztuPEk7Y\n6OzTSV8fGt/VnrTe7IE2wHs6WFL1CDRh4SbsZaRCtRl/IaZV9Wz+h98mPjbh\ncdrPyB9WAU3PtF1a081qYNk7VTN9DYQx68yMxt4qqNZuFr4hGfSZgVjmxaSN\nfiv1BPlw7kBE72MK1uHCliD98+Vjp8uAl69Kp/AXFN2n0RV4sk4/BX+wpmJW\npfTRvgtzlQHxWl2wvXn8ECYCO78XWUuubtAIxcrqC5KAZu3BrLQZS+fz1rTv\n+1JUYF0RD7KyEIzhM9dOdcU82p1O2QNdWy2PQqYIRrRTqj7V7KLs2eQ7DmEI\nMdQZURV2OA5XH+x7nRdBuWctJzLOGmAL8BS5bqKiKm52PZxo6NyMf6J3oaxB\n0DDZf5mFlWbTzAhsm6OyPwN7MlTMcgU5NxT9JaCUOqKkj9rMKQkD0eJ1ZJ3V\nkfDT\r\n=cJIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cafe18860.0","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/shape":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/density":"6.0.0-canary.cafe18860.0","@material/checkbox":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/elevation":"6.0.0-canary.cafe18860.0","@material/typography":"6.0.0-canary.cafe18860.0","@material/touch-target":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.cafe18860.0_1584716040187_0.6077921043072321","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/chips","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efd0c285ca3acd9a89431e223014ca906b03022f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.35a32aaea.0.tgz","fileCount":83,"integrity":"sha512-P1IPyE7arQhFj1EscLNc7rutHqOf5yfXBNM1c75pVwmBF/XWFKpDRCSBtaaWxxnwTT40l51SBVprnSNwLp757A==","signatures":[{"sig":"MEQCIH1gjMRGQtWNu/Da8M+DAnb6hBsJLJijF/9qERldexSHAiBrptip0a2gtos0oKzrqmxwUPqILF+n1fshU/25a/b+SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":859337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCvCRA9TVsSAnZWagAA5asP/1Qs5KYoPeTGV1jBt+Qp\n8iERIga4E3MDLb8NDmQwTNXB6B/ML0HB0pXPuP5O1BO84acw3oBPT2V2fO5B\nCzS9u5vlSM+BwCnLZqm0FSvmACNls8QaSEgx7lgwl7sb9Dzpt5b1D2oaCK7+\ngY5VgS7c9gLwVVdWZDcHSQqgAcs9f6t6qWmaUepw0wChMh7cTmwyEDTOTjHb\nD+iOi2zn+bbHx+tLFloiPAcGCkssyFi72IlRhwEXAnpMJZHJuzcH0udxavKF\n0HJ7InYeaWNGqz3JtWyZUeSbTL2J5OkdS2ez/qLuJFkh12MBDBLO9FzlzkYT\nyXBuk2PTRYAvCnttelZqT2mlmjdSSUvLf0IAUW309kNkGP5x2+eXfukoSzds\n8+FeCiu9uv81FIuJA6nPy9g9OhWSRsLtLa0fL0+pUeSFwzDug7cXDkePfFC1\nhOfvo+Vmxnvda8kOFSLZ5PFBkZfdRYXwFtOC6dH3Y64uAOfdFRVRd840JA+G\nvHCqhHxyOxkA9f3GxT09Z6vXRLIYr7F4YTYRZouBI9jgZnvtb5czJH1lXe/t\nGXdCPOotrS9zds/tv1/YCapb0Yhv+050ZI28GihqNkfV6TJlu1yzn03bA+Kk\n//j7JWElfjz738PgxKexklR/WBVXcq+Y1SUVO5S3VU2olyPuvTEAZt4vGtBs\n+KLd\r\n=S7rx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.35a32aaea.0","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/shape":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/density":"6.0.0-canary.35a32aaea.0","@material/checkbox":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/elevation":"6.0.0-canary.35a32aaea.0","@material/typography":"6.0.0-canary.35a32aaea.0","@material/touch-target":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.35a32aaea.0_1584734383149_0.09350532433637992","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/chips","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.e75deb854.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45983fdc4cf41201392202bec1990f2c184575fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.e75deb854.0.tgz","fileCount":83,"integrity":"sha512-kkpvANBoYpPSCnWpARY9PNcGu4VwXSJOzh/vAj8pPFt81E1D2dmwg7BMd9SWZdCaVgeFVQrlF40S65MJMl0w1w==","signatures":[{"sig":"MEUCIQC5364CDVs20oWfC4RBk141zgv2OwKMaglL3IAaABPdiwIgTZ6//K9wpsSFyD4Ud84YQPxHMaEGakVs4RZPHY46gYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":859337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUCUCRA9TVsSAnZWagAASigP/2vHrkKU40k/ZrMpDpTc\noW1/MYONxJVSXZpQfcrdLDDHwHTRDp31CnOUVv3k+n0U6RKpzUh1jej1oi0Z\nbmU1K9xefIbo8umn7eBkuvQ+K4IdiNWImsI9pSqKF6CwpGBvKTTcQyMsJnJE\nj+DdntzSy74rL5/PZik1P4I6uIWwlpLBiu7KNDEzzDo041PcbmcGratVwRWx\n39D5GixvPP9FEKZrNrUr7FLTBkxQGJRj/3ZQCxmMbcHjByu02IKXEv30gnIs\nFVqlsEWiLSQpGvO+B0T26C4g56I3rxoWfOc3Z1EOeYyXU1Di2bnsYzascsWE\nMU6YlvImRN7kc4nYVkvH1VHOE79uHcitKAd7gNKMm/OiIbcWaXl+3V26QmpO\n3A+7ZfDmAcm0IcSjvgs+E5loabQDylKb3bjL7sZZ5j8ciJ1hxIhLTmTAQ2XR\nBazls0YSx+FpqYtnw7+i2T4BwwSbGdw6nm1OEAUKdRfwioUrmqZaSkMKYv3v\nRlT520Tlopqh5mR2ybEzvYS7Usbu1EQus2bPopnIm0nZ3+YZAxq3oEZyQGHB\nLfzV03p3SptlWpGJsekUZMyK7TurjuWlESQaY3NgUC6wIWYuMxKLk8RsdjWM\nN6+1ho9+4+TT4CxgtHGOvj6cnyc9G4ovSZL9oRkVibge9Uat8GaxOOwMdrZX\nNhaD\r\n=b+M9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e75deb854.0","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/shape":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/density":"6.0.0-canary.e75deb854.0","@material/checkbox":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/elevation":"6.0.0-canary.e75deb854.0","@material/typography":"6.0.0-canary.e75deb854.0","@material/touch-target":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.e75deb854.0_1584742547878_0.8268452073695423","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/chips","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"699eead16a4401595eabb84d04467ae1c89d29ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.2cc6966f6.0.tgz","fileCount":83,"integrity":"sha512-CkGkrYRhxxxGvibboPbXvH6h9WV4jCnS3c6nJ5hlFRRgO7JTQSmWMKy1dn61QhBJODQr+tsTGGkyiE/85SdQrw==","signatures":[{"sig":"MEQCIB3GhFI2LZJNrzcnh1rf12hIwv1AiSODAVtpj44xWS2YAiB5GJjT4o630eMxPwvhSQwv4HEC3FhhwNvoi/+o6e28DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":859341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelT5CRA9TVsSAnZWagAAP+AP/2ZBV4yKQBshFFXy+2ep\nLsvULA/74ysn2EI8ifGIWy8S54pl3LVhwF9Gqt0ZuPLCMo8DKsa3zQrqazmI\nm/LisgUFgxpJq3nIuthjGwWxSGs1LLaMeM4gDiGCMlzf/Yt6rmvgCG0lTreQ\n0bN9PC41Y6wb6iQW0r9dTCESFDhFtbKwfsQFNiNKRhmiq0n9Zh9+qwi83ehT\nhlfIMxepUmAoqFY28RG+r7YwGHXjRVKpE0/WLq6wIIBCr9YWNEhKNFhNASJT\ndBUravYmScdcBcBbLptj1XkZ5Fg2NYdsdM+T3RCCGOyhM57IsN53cmsvXefp\nPUi/de6MoP4Lf0OPFUpeRnLYqWJvGrMR3J9B+12jdJonMd7cvdorK9Igu/m+\ndhiS5h1WjBSgWnfBohl+hWF8Xbt11KkxsDO9GodrBhuY8HNvDvhBxZZPSFVC\nLvl4jfv/BPZA+dvm710I4aO598IsxLyXTYj4pskJekVy4+kQ/ZCAgH2I/Iwx\nGGZmAE18el72kin0HTH4UxNaovryE9pxL4B1jAmDj6vUHCKh6ndmFbJUo46Y\nB5ekoK1R2sJ8eU0FS/vULOYSMAWN3eojEVf3eTl5R2g26QXb+EZeiNfWxyKE\nRTufWjERB9qbw8wQd64c6ITI8zu3ah0FFt5wdFAPx3Rd6fv7BZSS+Y6+5zPu\nJSfj\r\n=lxWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cc6966f6.0","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/shape":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/density":"6.0.0-canary.2cc6966f6.0","@material/checkbox":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/elevation":"6.0.0-canary.2cc6966f6.0","@material/typography":"6.0.0-canary.2cc6966f6.0","@material/touch-target":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.2cc6966f6.0_1585075448799_0.7723898139228405","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/chips","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.8707953b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83f3ae4137e08577dc9b3831c45006b1b54d3061","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.8707953b6.0.tgz","fileCount":83,"integrity":"sha512-tTLrq8IvC9uMWo60CE3a+pngyfbuqHdNMcoReb+O/Gt44rp9mQzRGsJMJwMH9cbQ7kpCQPdjmD5GWgQTBwuQ5A==","signatures":[{"sig":"MEUCIQCgks6xrRXdRlqCiZl4oPfxogsfakO6ovcBI7QTu9J4IQIgH0nRMqYyTaEdstUpUy0FpDHOAchnxlV+HEjDGK0FqLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":859815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXVCRA9TVsSAnZWagAAO1wP/RDTL7/uFXw45q0xrdSL\nGHswVCJ1wIuCUvQt2o66LB2QfNuxkzpplU9izPUe5qvbdoouH0i8wbJxuHAA\nmBt44Phiuun4WXo7DHfR8KSryl7gDWpaV1XKyQJAxfB+BzDCF0etMzM9st2v\nuLkAoxSWfY9cLySvwgGAiN4DXlA9Gc9mtutcFD2/x3LOFd+rQ9HZEDQ42Alq\nhn/pr78mfd5JUI1liVlyECimjZpguwMy0V03JsSRTmnsfB4s+5LAjaupsfzK\nWsouQgCbuvEUQsEyHotPIJuLOyKYy83HsaPnnqWO8fHyDe0W3XXGe2ucXODm\n/Gt+czCu+8gjGVz4Tco6LF8IIBV52lmxh0du6HHXSL57TC2QiKqmuE8y2eiv\ncBR53kKnzT0l3xTOOV/934Dp5m0IWyNe8Ei0gYpzFl9FxLnhJp1wHmxxifsb\njwSuL8J9RFc8l8zYl3ruuLXncPJKs26nmau/zu32e862+YU/kwjuOu3WSv6L\niggPi82EvmgN5IOCqsMA2tc5MIiVmEsYBGrnkKpVFMhN2Ulo9Ci2+NPLw9Eu\nnRImXOPtAkPg7Ch+Y2ujywL8M10k1jogBTeMTAMa7mfvm83rxTZzwzXYkR5v\n5pheGUCeh0YgOLCjRJ1T2IBu0gs3fdXs6sWcZsSUCLMxAuEoAaMA1XsLTlL3\nYIXy\r\n=0HzW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8707953b6.0","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/shape":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/density":"6.0.0-canary.8707953b6.0","@material/checkbox":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/elevation":"6.0.0-canary.8707953b6.0","@material/typography":"6.0.0-canary.8707953b6.0","@material/touch-target":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.8707953b6.0_1585075667828_0.9675754453593217","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/chips","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a05adbce3210544684ac2600926693b174c9fb5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.10af6cf39.0.tgz","fileCount":83,"integrity":"sha512-UoGckNQJO3P5rq0BrO1c+LWOpDp/rwnCU2DcBFSV+EM7pqhCKotFCnD97Aoh//Ej22hWylCkUBJ5pJLo+pTc/w==","signatures":[{"sig":"MEUCIQC4QIADCp3UbVev3ZncwHQoH+mHr2AoALzb0HOE4GyzKQIgHVQqMZOUEsRnUDWxVzV1vsl9nPRj3Gs8ejfvg/rVq8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":866573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6CPCRA9TVsSAnZWagAA0fsP/0xSkZMIn0X7sRvtI7oI\nkkTfC362c8kObz1aAS5bp+JO/aagirryci/dQ+tQGyW139B9Y3tSkZEev5UE\nt+cXlOrt5rv8qIqAce+4jlxlkx5uN1KIzg9bORD2UAToT+aLU4oCViVV8RsH\nksbuj4rF6J+TJlZYYMWCQ7q2dgP/QhefAllPBT+wXwv1MTMw1TnzP1KEv0w1\nxdwWIRWwZvpcVmEWY2ZBxSc+Gvw4JYLpwEiSQ34mC7f3wG7XlLuiyPS85vsn\nXd5b/BKLtG82guZBr0oeDFSAQQUVROFgjZA78BNwJyjSmdnw6TmOni+xAs0F\nerIq93KrIbCRHYrYvSJzHemFlOXin4VnoXan/6yXLbYCVXisqhv8BMvK3mFG\nxmsBjyzsBFuTQpZnZ+QCdt2nVaX/kwpR8deMabJAL5x3Lua+XVL1BDWnZtBD\nrzH7uFkw6ShFuMfIvkc4YFcOwQB0npL0+JPKpQXqpjvBkqVr2538PUg5NbFV\nZeR5ryKi2/ZrbVH+3Y9C+eRYZOrXpVxTfVRkobS94UNbjx4izZ4d++2KeZ/Y\nkK1K86IEVT3Icx0g8KtbmDWGMqg0OvIVBwDDs+mKaZlCIiRQBpf04uqMKqJ+\nC1b3uaf+nRkY35q3V1TcjOQqndJL8YbNzO3L8osY+48YRQ557SA/QE3avMwV\nx3gw\r\n=IAkT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.10af6cf39.0","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/shape":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/density":"6.0.0-canary.10af6cf39.0","@material/checkbox":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/elevation":"6.0.0-canary.10af6cf39.0","@material/typography":"6.0.0-canary.10af6cf39.0","@material/touch-target":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.10af6cf39.0_1585160334692_0.08915943849154839","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/chips","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcbcc7712e3ff704f41515332cadfac694b6a5ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":83,"integrity":"sha512-dRu3LMygjxfESi83/9f4DzlMdavYk4B4PVmND8LMNADJjbE8+M6gW/orrcAuDbmroYj6DJEe5wop0/Fa7c8M+A==","signatures":[{"sig":"MEYCIQCaeqQwMcw0EAEusj5ZPWZ8ZMOCsmuW7TroHPX6mXsMXAIhAPCBwlGUpRFUmNlesmgNBzW6Pz9ucrITbWRqc2JkY6zy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":866573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBqCRA9TVsSAnZWagAApzcP/i16wKjQLBEcE7/kCUpp\nutC2Q5c5wnCE6jlG3JT4yS03eMbFRjNadYDY5QzscLEFm4R2AZXpx67ElsD5\nufDXsH5gNOe+U6Vw4xpcze4TuHhGmwqRynVo0t8yEF2NaDXD574TvpiX3HVa\nUeIkUegGyBdghEpandfVYP951viiCybj3vQj2M61hti4sFsReMMY1gKgn5xf\na9R2TsICV78BX82f7nPGfXjZAOHuLy9X58xZxVYyP83esin7LQ1E7KxAGGL9\ncgUX67UbvU1ybL4Svp1ENiuRcre6rHOLxci+aiqmlgmL98IhF7uEJ16vh/cE\nJJVl2Z/anJns4Xq2jRGWaLA48s9TJM0RaWdUs7jxMfrWobkbvocdKn/BtUL2\n38T5mIxnvZn2Bio/1ZSqsakXdCkn+Z4q5pU913J21bbB8fw2/kf1w6x8h82Y\n7te1pFm5LX8s0PkLl/WcCvpmevM94Cl/XpZTfVVlyJBpTlAk2qXg1kYfqlbs\nJjIw4JPjVsAa/AH6vTWWyXlepT5Gw3w4h7zRX4f4mPJUj/+vsSa0zzWBH47C\nY1HTnmDwF0mDlH5eQGstgHD4aVwfEHpTMgblu/Ze/itDINFCLhP71B/XcEyg\nv7WYhZOo+taFefnUtutJLerWngiKYzSEYbcj4Vp1azaGOz5p93jNXd9cfxbL\nQyjR\r\n=VPhI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7d8f9c8d7.0","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/shape":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/density":"6.0.0-canary.7d8f9c8d7.0","@material/checkbox":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/elevation":"6.0.0-canary.7d8f9c8d7.0","@material/typography":"6.0.0-canary.7d8f9c8d7.0","@material/touch-target":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.7d8f9c8d7.0_1585332330139_0.7966858328480462","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/chips","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"761eb3293b95c16cc5050a25cdc0cb6f65b0480d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.d6315efe2.0.tgz","fileCount":83,"integrity":"sha512-RtIri8/RkOKERKc+VfL/fJfU84E2DQyTsRSNcTSU1acq2OeFFEBFvRUhB6YL3Ju7sZ5voA/Ok3/7UVC79/Sj9Q==","signatures":[{"sig":"MEQCIFeexwGzHWfg3AL9d3MBoBYU02yQklwPHo+6txLf7mF2AiBgWTvhpMKWGNJdbDAJV6qA9O2/R2oMdIwGsyJnuv4oVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":866573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflqOCRA9TVsSAnZWagAAvBsQAIhr63kjFLHrcQGgVy6+\n07gyAHo5cqd/UwYnp+U90gRd79cJ5veYwkV6VP2MKCJ0hSwQjMXLZtZbE6Yo\n7gRmsf7Ez3gSde9qee+vXYfuRD/cr8c+1av4eotx0lUqlqHNUxxrMVY0dBi4\nx/MLaIAf1B50+OzJLgcbX2Ev0Vk1FMFsA+bjRil9znHLBRnr2zM5hE26D1Zr\nuYKwPCmS3inUFgmDrPTcS5FJrAhCfPdK7MKVKn5mBvhOY30N6nEMaVsRGIXM\nM1ipb4ny0zWrbvz5EV/uWkwmmTw776rP/XM91lkcdI0id6kMYHIDDiexNxdT\nu963z/cWyhsMdjOwS4r56nRrIS8qZs4miHJZHVe3Cfgef1+jjUdKHXbt8mYZ\nffS3gSxiP/g0hdlRsupXUKNvLgUno+caoQ0s1+kjOs0ZGNrrUH4Bf7acfR0J\nACW5H7isszIy0BMJ0CxaohxVwk/zbQXh/ONfjbpY5/pnAS+Lzqi3Uc58iVjG\nV+vxjxHC0OAxSnC2pBIJotByAhUhj1PSWhxoLikHlgIfg7QRORYyjyaQW41i\nhhcsRxhgCgqgkvulhwbNvxlJIWBn5W5IoZF2HgA8M7exUObDz7s34GwWGf1w\nI6MqYQ/ttnW/jCnQX/PwBBOSqSwX+9KkxFXe7Yu6jDytZaSsDwBcHXsfYsHK\nDX7V\r\n=nEbE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6315efe2.0","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/shape":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/density":"6.0.0-canary.d6315efe2.0","@material/checkbox":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/elevation":"6.0.0-canary.d6315efe2.0","@material/typography":"6.0.0-canary.d6315efe2.0","@material/touch-target":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.d6315efe2.0_1585339022116_0.3436126795917682","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/chips","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.a3016368d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfc197a552a3a25f113ce853eb6e9f4b0fe60abe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.a3016368d.0.tgz","fileCount":83,"integrity":"sha512-MhaeK0nWOZm4+4c2QFB+XsFp8PsadzDOBQMpWSNKOSx/65fii/c8d/Jr7UnCa4eTu/t30YHLgUdaiAeneb891w==","signatures":[{"sig":"MEYCIQCDIqnokiixj7pz18n70cBPIWzgDyc2GE1Wrux9tpisCAIhAM9ATRcO+P9tq1I+WZEZ23xEI58VaAQLuFTBtkvQKfKL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":866573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm4ECRA9TVsSAnZWagAAQggP/1RPLdDHJpahPxLLXZId\nSafk0ubJG6aHbEAxCkGUtegRzubKmIMJVmuwgs00hJ6MWxsf9jFgpqq4H48B\n7aOiY+tfv0Di7woKBkH8abAv+NvGUQzDNw+KZ7Rdqf5Sp2O+0iDYM+yBTNS6\nUFNR5PeoqQwmEWY2BYSVyN07Bh84SieOi2D/deCeM/rQvuR7ZCdieeURB45p\nwJwi+WxxJjqKM2+ORPlvCWpuVC05MkZzyHptH1WQE7plNVlc1BMV+/8q2+nW\nMTgtTZR60dii7vMlE0652exRDI+xzSe78t/jZEJqTx8iSdKiYg1tPenCZVGE\n8BtfufsD4NleusCaBEe5GwLGzMGm1aQzwrYPG2n4i+vTeaJhVd3y5tsKh9Hs\nY4kOIcaNEIGRULpmje9aa/2DxDkPgfXoNvTcE+vrApnnRCjrCsSlsn2ZG2Es\n/ChZ/iPOFAxLFLFOJ0wN0WZ+jHKH2MyRx8p7BpS3m/EoYV9R3iafc/u86i6Q\n8TQOy0SOJnodP3xAD7yrxFrIq0ONO6wPmOvhvtFEKHxJ/ADMb+rQlhJ2KW0B\nR/k7i1QB+L6ImdzTHzJ1GpSfKczqyaiGkgf2cbbrHuUMlNdFK7hOJ2SDIY1M\n8OaGty2PW9w6Dcu9IRUtdDztc8Estq0PnPsvdEI6lINJHkXR40wDFybMdF35\nshr7\r\n=PHWa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a3016368d.0","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/shape":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/density":"6.0.0-canary.a3016368d.0","@material/checkbox":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/elevation":"6.0.0-canary.a3016368d.0","@material/typography":"6.0.0-canary.a3016368d.0","@material/touch-target":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.a3016368d.0_1585344004418_0.45071569941681444","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/chips","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09be6989fd218a13dedf4e6520408b30c9845473","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.4b45b6620.0.tgz","fileCount":83,"integrity":"sha512-pcDRY2YM/dhdSAmYc+GGJL7VeMqTw+g/8fEf04cYeLKbJlcaiZ9hZEB5cJ+aXSM1EXgnnTb86XtvLIfxZP4JEQ==","signatures":[{"sig":"MEQCIFyz3VdiejJyMpKNmu+AKXy0mJXFt5SyY4YG6W+ZpNOdAiBjLWur/XfnlF/LS8gMWZbNk+riupYYntUyyiJ7nUG7LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":866573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2hFCRA9TVsSAnZWagAA/dUQAKLBUGOWyKjGHdF3MmuE\n0P8TK9wRQH6rBIukx8IaYUObn9whfSkzXnApVQ+VjnUY8EjMJpbNjwvSJK/i\nzWm7z3r+LSfa1wG1plkkJcpuuuDHXAC8yLrvgYesRw6srZ0+ILta3h/wzRhp\nbptLj5KzRcDcpXQu1U8s/ARkJRlXQOXA9rJQY55edv3QYSjUaQRLWk//2ZZH\nB9EfyzGuLfxQl8AMRaFQ+Fclcg86xA5dGSs29Ra1D2TQ/OEqrdRNjTRHVNjk\nHGqarB/6Q5daHG6gh+NWZ0mcEOvToOCV3Gg6HUsdDTCsq8fdpETpJVqDEcb2\n8kjNAfhCkGvgRF+5IyZYKKiqm6L6SadYk5/ec1TVpqLD8N31GB3fmIPXMEQt\nvtCoz/r8zn8621dHSlfnOJa/hovgftZZlo85Q6Q50+y5galu0jkHAGwXgoLe\nlG4sEZdbkoUIt03ffi8vTvejQMVKJ3BOmsZUCU4VkPtLH4dY/5QmiLNBaAcD\n2Uu237uePCR/5zl4Qy01f3qcTC+C/6HoqrMxvhbHbTrjhM4mMSa9smQvKIiz\nijZCMy7TgNQFdW1O1Udcw/9je1wz73Ib7sA4k2cE3QbpeSR38SQfq3hS4SZB\n/SGLdJFl684ANrSPHpX/WwGJG0Q7NSNMgiTtHx9FY/xxKhnIRPvrbHbrYGdL\nqbd0\r\n=nDLi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b45b6620.0","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/shape":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/density":"6.0.0-canary.4b45b6620.0","@material/checkbox":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/elevation":"6.0.0-canary.4b45b6620.0","@material/typography":"6.0.0-canary.4b45b6620.0","@material/touch-target":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.4b45b6620.0_1585670212534_0.18066234244521406","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/chips","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddf78e919d2a8a34efa4cdc27578089dbc780b42","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.e84b9c8.0.tgz","fileCount":83,"integrity":"sha512-Is+DleACZAg7TH5Fl/wZrW6VVMavYk7gNVhVyWJWGXWgQ9yYYN1W7/9ScObDqDHWf2vTaG0zVu0jq/8z81WisQ==","signatures":[{"sig":"MEUCIQDkWJB5G9fXGOorizP3eR6b2yc7qSIOppwGcsuGbN/ABwIgSOMX+2+Qcfc63XJDK/ft4hJcx2lUUQ0byhdZzi4e+v0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":865636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMfECRA9TVsSAnZWagAAAGkP/jp1B6wXjU2baah8sUne\nRz+u+H/87FXIcXFAEk89JyuhWrUOU1RUlyo1rMKBn+WwFYuMMI4W9V15NGup\nPdHjdVojLMxS87xVWvILe048/vFDtVs/IlYgeT8Nk7ihWBFJ857nSdnhmnJn\nNfNnYsBYlR1MrsXP0dsL4USBdwZd8UTC0KpmraOq/m06CmBK6+pPjkOZzRF5\ncm71sdUkjyOEL4BgDltpD/jUXwGXZX5YGdQSgciuiOiGZK0kowNJ8vV2ZvJk\na8gLCJhY+Q/naZAJnJb0dnKBUORRraqeMPUiZI4qk/lBaFr1MiXBBNWJVobN\nMvwU3r4l3Ey8p6m5GRHObwIwA3HQlQoaR+xZvlmkxZ2xt/wg0rnP3GibX+uz\n7KWcLplb+NJHSiP9Mw8kAj0U08VtvKbnclR3IpX+igSjYzwl9XE72vXmBorH\nRBhzh5a0CFptb25vGzamT5v3LGYmaO6VgmruNK+yqb45EFo5rpoLm+BCGfVA\n8QeoSqO3T+W4LdLy+6WRChg+4BPSCyKieQNJ8DgjOgbP7uYdYAlVrijhF4fA\nz7q8yEiJg6EK7loiUYPWlqf0SjimoV4kN4hij4gpNAcdhBGMxKxhfBgy8Ore\nVLdw3RQ0s3/MlkTlssCY95WqHw8BS08Iv5OxrFAZ8KPHe5HvjFKssuI6jFyW\nADrT\r\n=1TJx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e84b9c8.0","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/shape":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/density":"6.0.0-canary.e84b9c8.0","@material/checkbox":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/elevation":"6.0.0-canary.e84b9c8.0","@material/typography":"6.0.0-canary.e84b9c8.0","@material/touch-target":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.e84b9c8.0_1585760196359_0.5820980906355409","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/chips","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.e33c49e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2212b4ecaad1e6becbd774437b9433bdabcd0c64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.e33c49e.0.tgz","fileCount":83,"integrity":"sha512-rquIw52lCkFJdJk83wyIwYiPp/ftFifZ1lDjg9jOX8h7edMmASKC5/kO8Zvz4DWGpzz1MK9Q6DpV5AV0a7gaww==","signatures":[{"sig":"MEYCIQD/6pAtqLnWlsjdRP7bE1VdAsWScJIYiE7lx3OkIH9AYAIhAJzpZ9QOsyxtI3/Xdc3/wwXI0QTRvyRBqHD2FO9NtgR4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":865575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1fCRA9TVsSAnZWagAAGFQP/jaHJ/pI4qz9yqWXUYvx\nBCgkeBPimd5YtAr430racula8N+5trcii0dMgMzvkBsTIov4Z5UwDwprgmLA\nZW3YaKG46uEPNou2kUF7v0XKq53UMUNMTq4dt8Q9TxOgjgdxoptAli8EhH1V\nrBHuPYjKpd1zLBVTOdfuz/pV7gsVAT0CFPY2eWtaEILXgWypyIohzExtgaiq\nPoC6bZJB0/pA0gybdn5+z35Fd4fzIILojqCfHInbwalMVcH/B7qWcOcZAB+A\nForMXJiIxdOBUKiBEOtWtxLwmoyIoRIrebCTKKYTUPonx+CP5HTjAMgBHVSB\n33EEiZief5yPks7POdxiFcTqWcEW5cV2OljW4mVlGEW1hLSwpFYSe3gB9Wo4\nD9z+cI2vESus5cABpqZ2IjK2dcxeLD/1smNPk3As6u64UbrfOHdJPPr0t0RW\nWoi++xEqwmES3TqzutGTr/Pmqc0JRs9EfoxPMsTThcvvfpMfBZAg9wOgCvKL\n5roGre+FaQJ/AHqtlqCkM2DFdlntNYXYryY9QH4rbKXZ0oOrfG8b/GU1CkwF\nHxLrdmnkNZOR3ugCTogts+vVGBdEac9qSB1MT2xTiiR5hxsuqzCrFb0Hrto+\nWsSkf+dvg7zXfFQVwqwjLmz15VXwjgZSHSfsz9ad2kJkd1miJlYUtlfoFZms\n7v+A\r\n=SObR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e33c49e.0","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/shape":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/density":"6.0.0-canary.e33c49e.0","@material/checkbox":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/elevation":"6.0.0-canary.e33c49e.0","@material/typography":"6.0.0-canary.e33c49e.0","@material/touch-target":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.e33c49e.0_1585786206419_0.11266248400450296","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/chips","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b81f2ccda245ef6feea2c163b56bb944cd6c4893","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.f1f8e60.0.tgz","fileCount":83,"integrity":"sha512-8lLSPILiNZYPPTbFLF+97iuoyqdYhHxNcesnRaFgvtGwHFD5S2KBZDdWH7t743C6M51QuOeE7yHgo/PAWtMLSg==","signatures":[{"sig":"MEUCIQCQ1bm4cJegR4ERlwb7KKBFlKHffc5HUxBZ/DzdE1nCfwIgIV74KLvgEY5RfrDcV1RqyREEfkajROIUSTXTsQQ48EQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":865413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjmcCRA9TVsSAnZWagAAlasQAKGq1T7GX0ZgawvmbU3k\nUQXrXCFJJUrRwtUjqv3QbrxkO44dCp9dObWzDYcdywkQM2+7Rn6HuBcGIM/l\nhN3v43ICavdWouKWtEKz93WihgAxPP1E38o6AjpXyd88LvKYvGqPg7yn6uFI\n6hwOPPIDL+cAbs5X9bPpXDzf6tYFTTphW9ueuQ56KBs2tMhc8RFEmcoSj8Is\ndoFenaedpklSmbmHP9kFZ8o/pWA9WJmh53Lmhz0zSjm5Xr5J0mnJs5S2iTAm\niXBIDZuHZuT08wXM/vW/gEHm0fAaqvcHzaMnP1hOr+z8sii6hHS4bgqmyfY0\n+lzI2gwGEBh42u/TrW+uSlLBCaMpXB9fxH2lgMc6cWyAmpnNHqLsIN3G2Jca\nn/k5WGa6uwljboR+zLvlitLwOv7PXjUFqeJGJlqxj8vbQBvP03LM3PrVsUqB\njWiSwkoixJhbphYNSxD8SmOaaswFhV8x6I3INb7XnKONMVA3q0Net6RSb+1H\ngoz7SeZ+9iBuHuddst+IWNaL5IFnHbgaF3C/AfHtWY8S7z2/EESQm/n9/THm\nz38WjP9ei3beMAD7thOSJXsG2hGPnyT5srRcWApMVagpk/XjvetjP8Aw2ZkY\nSxk2r+oujqbTtiN8T1ma71BTwQRyT2rfOBsaOvQ1fnbfb5otO7QWWy2fqXzr\ns1Vn\r\n=g7M6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f1f8e60.0","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/shape":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/density":"6.0.0-canary.f1f8e60.0","@material/checkbox":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/elevation":"6.0.0-canary.f1f8e60.0","@material/typography":"6.0.0-canary.f1f8e60.0","@material/touch-target":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.f1f8e60.0_1585854876065_0.8646685000695256","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/chips","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba13b3ffe84344737807cf8440c0ee9cf9f2b45f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.1e17c49b3.0.tgz","fileCount":83,"integrity":"sha512-lL2BOI8dok2ML63xQyr7g7f8hu9O3nNwNaZ7tk/171THXzYqbZbUnZo3nCjkXXQTR27yx+EPPEn/GgqDCbwBTA==","signatures":[{"sig":"MEQCIE6axBThGVy85XaGATlXtNA2SkNAUiLDa5w863JtVvahAiAci1yaDabHaLcZeaD+87mEd7HAp/zyAryBImLhf9j+sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":866573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3q6CRA9TVsSAnZWagAAQlAP+QDGlJO7gHPDADSMlfET\nknuV/AFcE5BU+xa0uSein+Iu9GpkeInOs5mxgQP1yHTO9yRoSOFEk+7vr6oO\nLE0rLbPcLr7YfIcECesgQY7uduo9tP7u1HQM8vCwM9q0fvz8vhfm/XmRxgPY\ntXosWhyz/4pn0RyFOsqXbYaBXG7Gyg9dpSn+EWTRts6KtVNo2s9vrGbeX4/t\nlVoER7vZU4qbksn5EYBEpdhL5ehBnyMfPE0G3iqWppUi3eiYlXH9BD18SvyS\nyKGdI8dS681S2N0gH8Zq+oBwUCkbsTE9eOcHO0T/nA/HwufA6Uy499lJu9dJ\n6WfVjeKR91tmQa+GlF8rBrK1Xi+SWGVVpFV5fhzJ4ADBqTkuoS8CG3HC2MbJ\n54G34iSofCBwKWIpjps/uYXUXioE5J9crmso+eFSvGLezmmBGHbAN/q7/UCb\n3M1fcWZwySYHPTZYBp7ES6hCjymMIRNJ2ZHoW7bWtPFuADx175KzUgO0rE1p\nb4sb1HXKxwBseH6fQokdpY4/HaT2F+8tX8+pKDlejoiR3K5Vifq03Rx7AF9t\nwoseLRO3ZZAAnVzLj7XlsdMVzII1i1speQezZFk2tVokWh/lvGxiSMkGrA5O\nklJcBCfY+ktdFm0MWnbZRWBJ25oauWygQOV81k7nrZyFKHXMI6s9vVi/frKN\nnjQK\r\n=st6A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1e17c49b3.0","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/shape":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/density":"6.0.0-canary.1e17c49b3.0","@material/checkbox":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/elevation":"6.0.0-canary.1e17c49b3.0","@material/typography":"6.0.0-canary.1e17c49b3.0","@material/touch-target":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.1e17c49b3.0_1585937081748_0.6905314281151524","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/chips","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6c277d8c06b80776def09241d9262fc46ec4678","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.6a40ef217.0.tgz","fileCount":83,"integrity":"sha512-W3OCHEYMHxJNaeMo8EpEgz/yYiu9mLtzTmIos0H9facM/p9ioFfplE2N8T4/9fZsPikcEM4quv+Crh0lsMQ4ig==","signatures":[{"sig":"MEQCIGVDO6hMuFxrLnYrghzFxP6QInCp7+7XehNp+jCvem6PAiAKC0/T9H3aBvFRWNZOUbPfNDTPiudGjiA8q4TPIETZ9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":866573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42cCRA9TVsSAnZWagAAJIkP/1KLBkb4lPkNZOOEuB/6\nObLY0MaVCFgnlhPZn5tw+ksVenqB/UkKrTJArvra+8R3UdKxlfyj55fsKLbi\nt3gdtLwQLaLXJgM0D3GOc2pZPh0jR9RFs9Y2jdi1TOw5JpnpLT0DTiRytX7d\nvvVd9CauZdOqw9/5w4IwgOWYlwGFSdF62Rhvhj5kbnECbFzzIqD3aYV1Zevd\nNQSxe4no8FgjPirrmn2JL9YFd/IahsUWdUoL5qcN0sCbDSWWK30PkiLpcFBb\nQ06e38LjttSgII/2TqAZzSRBk+AE5WXiYHuhf+Lcsxy5FxP0l/HRtN7hqbaU\n7Ad6B03or1GPT6QSze234QTEo6we4hWorrMSp7Ahj9yLpl/Wdh+zZgHB90n7\nwm0e8sup0mJ9uMtNlUPJiQai8bHBhy7g75M7IRn2hkELjQvzrmQroiEj12hP\nSCzL1qFySQvthJM6EpPV02l3+9cSxIm7wHZr2CnAk4N88eWr47sx/7+mjOhR\n6qB1YVRHmnxClh16W8BjMOlXxEwYJ09OJb/Gl/BryMQX4XPuoj5abuBnpc0+\nDToPgEDmRS4Xm0UkEBngJGXLk7DdsYrEyoVM3Xy+YWDfj6FVaolKA9zHgRmi\nBwK3ui/sqLNwb5buPo0gASboW+dpVQ7g3jauTiZA3EGRUUrLBHGrjgIMHA27\nZbva\r\n=E2s1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a40ef217.0","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/shape":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/density":"6.0.0-canary.6a40ef217.0","@material/checkbox":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/elevation":"6.0.0-canary.6a40ef217.0","@material/typography":"6.0.0-canary.6a40ef217.0","@material/touch-target":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.6a40ef217.0_1585941916282_0.16312588454856303","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/chips","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c082435341bd4559805f0835fd299e1b560aadc9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.5f24faacb.0.tgz","fileCount":83,"integrity":"sha512-glAiz1PgnZvgymMtThk2tKLdqUbHp//nWivBhYsdtn5PTf5lOeNNnAFuqp9QfGMlcy5bJdYYERjrBmL+pH3WJg==","signatures":[{"sig":"MEYCIQDz6sDmbQ3dXmMfJlyoBolkfuK+L6giSo8jN+EW/gKruwIhAIiO2aMhXE/oOt8usq5I7vsUEGZiKGBVMTavSL/Sly3W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":866573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje+vCRA9TVsSAnZWagAANyQP/1PA50HozTTEp6OgRyAj\ntTRO8dwaO4nIFN1nYRdTveRO83NQCYAejK4Teq+jT89mN0rww+N8RCuWq9B/\nm4rX5KwXmdVSktI6LD4h6CgNzFQwjsOH/ngm0Jz9FVTlAkn9s0LteyVpZ4dO\nPc1OKBibV6t6gr/rAgi1KVk3Q6qibJyxlC6vXUQPk8Fn1vV9+FhYt9gvv0Eo\n8E6p5G6id91WzIVvuYNODnuRRbw+pMAzPRpfpjAntd1HUzqVp/OOUOi4mFWu\nXrRE5+trqTUR2FWb0N4Xr/LeamT816Cl3tnmgKCMQVFIy7l0P+G3EnR/xtnr\naLQZ/yiH+hs67uplYCkQXOzSQVse5btLmQSNNkwf5leR4U9U7hStMWmQlMyn\nyg2gnuekcDscxZRIaQZbtbcJcoeasIw2lc7Ixg2eNffa9iQk90tpZuhggKyu\nf6SrAiEbwuF/fTlrkjQymZviNHBiTWVSrhd7PMj5Ef0QjuSpIXC++T/eewxq\nEHZ5FfeJvLwVy/xuzijFr+AO7rZpVRjqvhWihXSyYVgKNBu3Nw31PSpNyx8h\n1wS2/e42WTkNajwE0nXqijzeCpyGVvVALs+TC0/LyNPeF9SrbP5xsFMRccwB\n+6JpAMhcGlud5H3S7K3UH2+s28dSM+TzgYiX7IgGrKlZLKg9GG8YPfK/Bv5V\njaMV\r\n=X+xd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5f24faacb.0","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/shape":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/density":"6.0.0-canary.5f24faacb.0","@material/checkbox":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/elevation":"6.0.0-canary.5f24faacb.0","@material/typography":"6.0.0-canary.5f24faacb.0","@material/touch-target":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.5f24faacb.0_1586360239250_0.8621083014306261","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/chips","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df61856beff4842f1cccd1abb923b949ee1bcb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.82fa986b9.0.tgz","fileCount":83,"integrity":"sha512-iKPxMW8UlD52pVCJdkkEUJHE6o8bWpN3AyXcVzSDaw4TCoomf705Tg3oSWRE81YjRnvku9q7S0pzd58gdllsOg==","signatures":[{"sig":"MEUCIBPxvSr5zS+v8j8YvU0u0yI250FDXddktA6/2iJ87blFAiEAz2EQE7DQGe9NGih3Rnvo04tkqeGjudKExfk6moM8As8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":877135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDcCRA9TVsSAnZWagAA+YcP+wTPHKSvpL0vH8WmHuqH\ntMvw0FAI9vGb84VfwKWxQnxhNSBdUfxmEcKSSvqLnbYb5xrKivsf0HVhHU0i\nqFQpt38RZkjauvKLCNKKIu1GoklwD/Ak2Nz+EPBjgzVNDtCCUNyJVZQj82rb\n50jrtPgMAubKn9y28tzp0X3Ws3veWOzczLF5stlENdYVCAfVUSqpQMqp/z+L\nnGd+9azKAmydbQdYtuoSRBRQwNycy7r/QNgnEMsrZxv7t3nG0PEVF3m1II/L\n1GnmgusgMJAkmFatkpBID/ts+Q60t/l7RQddje8/VjGpkvLjAVnUWqFM0dQa\nOroMKEBIYKUdaz9kE46A530xDcNLLGRf+6gaJSfYageiKNFPFMnRmC3whgB9\nIvdCaHV+ANnxtKsInVdUyElgHjL9UIr5HfNhoW4jh20dgGUjaBD2t4PpfHD7\nn5456rOfbv6AVuQLiN3JRC019svH53QnokGmLNo6lSvyOrrupPBQcQ2RLLL4\njS0LiJgXk9U6XaY7ZnM9VKvvOfjJgLFZBNQ9Cs7Wj1WVModhsY/CQNFrPE8+\naZod1ddyOi2OBuIf3OFPXc6Mm+g2EhwV/bxNHXX/Qd+k6pI9YNuxt4Bh1NIR\n11rAfRk+AtM3OEmEKLO+3is1eXnkjVlbPUzwZt800DHfOer8cJg+81oHkIld\nZ4h5\r\n=kb1s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.82fa986b9.0","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/shape":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/density":"6.0.0-canary.82fa986b9.0","@material/checkbox":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/elevation":"6.0.0-canary.82fa986b9.0","@material/typography":"6.0.0-canary.82fa986b9.0","@material/touch-target":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.82fa986b9.0_1586360539478_0.4524408378412257","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/chips","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2bdd112887f477f72383c4d7ed77f8f7dd4f4b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.9930d9cc5.0.tgz","fileCount":83,"integrity":"sha512-c23t91XubCPOzUhL3+nnXrGw85IB2Kmkvp5fCWXabI0cQz50d9mYat5xc8xY+qHMQMXz5mfVP5vfSGo/EYxpWg==","signatures":[{"sig":"MEYCIQCammaMYI5ubrUoK7FHB9s4BvYPX3upKdF1oJJeVpAJ5gIhAOxCzwVlTZ7walFuV9fPBNW4pNt2oeG7IJ8T9K/IDsfb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":877135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibwCRA9TVsSAnZWagAA+2YP/0MvPGyA+1A8jHpxHyXi\n4WvVJZLogr1Qv9ji3O5+aoiEs3lNqeKwr21Qz/z2c5CNv0lakUxLkDAIhuUW\nEHBrWiaOcoU/7ERQwVuUGxQjD03JHZAQYAXZrNWy2eUAjUUas1EMNf5pMx5i\nxWtDGSVY8N1yv7T3VlIIDV7WUKEKJ5373d5Erbg9f5dAR3vsN1QjWez0d4Vo\nHbfArxhc2vWfsMOW2WFlakS0QNCywhjc10Em6g8OhXl17M2qvNoqevyiN28X\nZ5bSbuKSU+NmLTyMpFXIJ+IkybVgysqADSquc/Ly9DoKvZKPouyF9OstbEi3\nlX3tWBHsdNfmq2UOyVMeh2AzL/fLHQZkc2Lu1XUZgbDqND2m3b3KHrKz+q5j\nbrHMVQ4n6Tm7Bh8klffn2069IXghU/Mp62RXZSSsTZko1nR2f3DgL0Bbswas\nLkPli1q1NX+i8FPhyHeWPGA2vVVzPd7M+eaz+27i4UClsMoN/kC1LKxvon+R\nE0WQJ9WtgJHtkBocSSRs5n+2KN0mfPSZsnsc1OWNlh5HWnt16RZILTgCgrW9\n9Mxpbku4rDtp4D/xt7Qgs7U2j69lMoGnYdsrIpBI/2diZcpyQ4QbSYRoNzLP\nngT6it3W/cxYPy+kAdytSzk5UywGneZXocHkPZm5PM9hzoNm9gBDyhCYYzeM\npN8U\r\n=bp9u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9930d9cc5.0","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/shape":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/density":"6.0.0-canary.9930d9cc5.0","@material/checkbox":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/elevation":"6.0.0-canary.9930d9cc5.0","@material/typography":"6.0.0-canary.9930d9cc5.0","@material/touch-target":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.9930d9cc5.0_1586374384292_0.938954897317225","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/chips","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.6601d24af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9d703c8abf019977889f495fbe343470187fdea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.6601d24af.0.tgz","fileCount":83,"integrity":"sha512-xRwBBXlttdc1wBJsudmKeg6AxccC4Fi2VIq7i3Th7UCzn1HgdPwyd4YUZICS88mJixiVA7bzd3SIKASknxUE5Q==","signatures":[{"sig":"MEQCIGlnt0zj/i7pCkdEoifYdOGDOzPcEHU0BNlXnUyx/518AiBhxzuKOdUp1rVWSTGrA/lguOP6PQEXxZVO1J9IiS927g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":877135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmynCRA9TVsSAnZWagAA3fQP/j/9kaKW+M9sQptv2eWZ\ndb+IF6YhnYubA3JEDqmmbOh0frUmHkAARJJx7ZjL/z5nLSLuHJxzWvct5U66\nYH+Eag6ujIVNaBOWRwrr7VxjnF3QbJ6T8B1g6fQmJIqO4kdJPiLGxVfKUBpd\nnEDSgxw0/wYrFkUy087DiEZHZL2M/IA+TcPJ+9VmNNbXshOVR0II4l4ejTRa\nidKTyJVUD0W79HgQiuk3Syexo+9U6gkj3uBphQyl1crHdOEgFSG7/miAHioY\nacRTwAZBOqF+G5Z9LrHrOzqGZtoiX2dqeCGIKa6f0IF4pJYyBOH5bScDKXWV\n6nlOL3YdQMqBVMQt/VNYcQb2ajYkcQOoS8giVVLP3puw08aWBfQx8Bsy82GC\nOVcMSz6IxEzh9QkFNd19lEqbkVKtiPKEGG39c6Ydc4kbMIPMfTD6SBZ43UC3\nlRbt+Rb9LD3py6dSwu5BG4lZ7o1hAUhx4dppBAevS5cAGFb355BLU4laDrZ3\nicv9v3nH8FkIrxwtsa8hgtnDSOEOpKkrIG9l0gVWdQKlF8bPI/VtPrzaDcxp\nsYAhdu3SVh6kHdhFthFTGNOmmyQdGCjpJ6VMQS6ZPfndJMHW8LTmEvQ7filn\nr8FQEBXVldUiXE1Ig6usibC6PtjfIl1O+2XRFNEmNlHcduiUdHdhPm+E8k2L\nJ5ov\r\n=8aab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6601d24af.0","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/shape":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/density":"6.0.0-canary.6601d24af.0","@material/checkbox":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/elevation":"6.0.0-canary.6601d24af.0","@material/typography":"6.0.0-canary.6601d24af.0","@material/touch-target":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.6601d24af.0_1586392230841_0.02996357043954556","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/chips","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c9e7cbb3465134eec8ac1260a79771d028c63af","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.05f5e1583.0.tgz","fileCount":83,"integrity":"sha512-4yTmbPmRFAi2rMvIc99PohE4BbAMefC9ECa09t/H+GPU5nxh+PXkxkV69FrykJUKRVJbztc+WnU7IzORrNRieA==","signatures":[{"sig":"MEUCIQCcR/71BA9IuWuF6b6yelZPXgI28lOdyaRG0rqHSJjCKAIgaLymztkXIYmJdVs43xYFCCqspsdQ+2PcT7BTW9y8VkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnC6CRA9TVsSAnZWagAA/EAQAI3cimfP0ehggmZvLxv3\nP+A67dC1xwFDuh3wIAcyD9L7i4cXdnM/7eIFIYtmdZ8LLMvG+SxcBxDHLhfz\nkOXTgzO7J5zUZNW589polDslYd4WkJKojgSbkNIP/vSeK3oE+c1k0p3igVFM\nVUVG+jySoa7n7yCPASoZXAah+GzRrmfIozcCvNCbPdu4fN0D2zFyQBiI/6Tr\n43MWIntO+aJsShmFEPkTd++ecIgP3cij2SWPMeYCyaT56KKyoZshd91zYIy+\nUMJlOw8CML2CqfuWmLChKZd78az5Qgp0B9a+odGofe2UmTboO7+WDCfK70Ei\ntX3kVUZFSLKn7MyjMJ5tKHKWlDNfrAsLhbTliOLvkocSZCdxh43ImkRN0TFl\ntMRz0uWq1guQh3bjrY4rMLOpeX/mQIkynbzo/aeD64fTHedQ+/FPun1R009m\nbcFRVDxyl0Elr1nfkLQ7fuJw12Hkt+Hdj6ID4GwUtgZlC5kWBztPFMq3SDz0\nYP+EC5xVAOsqPT9LwTT0Zq2vpUSPrxkTali68KpEsQOUtt7pei5heLkkF75D\nfXILEP9UOCUWBxTqJY29N5sUPuw5CCUguqi3tAY+8YRuvAH52DXbgVTU84AT\ne1uOYC7uCYFRyDZKd/GlpFg0l3stV7AlN8M5arIByY1JnoatFJhzFdFFgeqk\n2j6j\r\n=dfcP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.05f5e1583.0","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/shape":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/density":"6.0.0-canary.05f5e1583.0","@material/checkbox":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/elevation":"6.0.0-canary.05f5e1583.0","@material/typography":"6.0.0-canary.05f5e1583.0","@material/touch-target":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.05f5e1583.0_1586393273985_0.2262303013536402","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/chips","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.bce00e186.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f3b2e8661fbf03dd9ccc2d96f21764dbb079cfc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.bce00e186.0.tgz","fileCount":83,"integrity":"sha512-8ZyLeDxhOvhne0PNhuCCQCnnqrJM3wMXpFsJKahDaF5a/5kNUAxlD61xG8fqeMFNFeykS+Ltc5YY1Bbivpx5lw==","signatures":[{"sig":"MEUCIQCSCDRLuB6hTzVP0GIp4Wpuo9LQr4EqvutBVysZ04l+NAIgK0yEBjus4BhQ4qWDo0yV4O8nDEu3HV6VPk4bmepL04I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3/CRA9TVsSAnZWagAAcekP/26YiLTqKWWg2joP7Too\nHOIB+JTcGru2iOYvirUb5YXk4gQGQVpuAonF9L/Yz7IWVgjO6I423PNHXSP5\nMg9HJFx5dPA1LS7gjXyfXDggCVfssC6VnsXsI61eOtjwBKoP5yn/KJOHczg5\nT5vxg9y1h4Pkkn9M1l09mERJ2cegaZafdlgbIMCrF8YJ1ivIO6Fl1xo7IUEk\nsodP6w22LGoUN3ElF6hnKZfTTsv+HzJ8W1PF+j3RJrop7oPi+GU2kBRiYSa3\ntxwfKkbRXU4PFVuZNdYHwhuEshCOejaYZ4ZfwAGAlxxFGKgtcgiC0n/mon5+\nbZ7qZ2c264swFpnzCy81XAeT2N0YtttqfvbeE8EmDdRKR8gT1bg6M/7M4Bxn\nppdcYbbdURgGsISLrsdbp35rq2gbK2u5pzMmZg3/wR22SYN0xqSFlGySZz17\nUsXWmeDk7JERKuEgJTjb5lObfRTDdzLBeKt9RShlstUvAesGyGSqQBSypXms\nbfIbFNOWpQ9MsQk2rrwvbpM58GzxFuynTUDbbvEfK+JiUroC9a66Lt8q1vmq\noSTCxhXV9cBPhMK5FrwWh3rppouxOoh5HwJtPRcUGYXhs/ca3z2jgnlWVgi5\nHJ/sBXKRdb9eEWzXHbITbi7QnxTjxrCRp9U8lSzojpz9uYgFXVdAUTIdvXVb\nsOK3\r\n=RGOX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bce00e186.0","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/shape":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/density":"6.0.0-canary.bce00e186.0","@material/checkbox":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/elevation":"6.0.0-canary.bce00e186.0","@material/typography":"6.0.0-canary.bce00e186.0","@material/touch-target":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.bce00e186.0_1586445823100_0.37170823190653235","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/chips","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.927fa902c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c472677bc95eba72bfe6a0b4fcd2b496b7492940","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.927fa902c.0.tgz","fileCount":83,"integrity":"sha512-33v/qon6fa9oQ7Hwfh1s9CkaZfFmv6ptaiK1p4eZXLU9fPnONpp/6RygrzX0VdM6TZMVQIpSOHCqzetiGiZCNQ==","signatures":[{"sig":"MEYCIQDZUBmZyswmDvXDEiA44CYkefe/DmCs5k8iQxP89tU7MAIhAKubrXdj6W1PDUdYZRRRIQT98+jYLvAMuMCgB4SjJbCY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22qCRA9TVsSAnZWagAAcUMP/A6QwMGiISO7+O5Y/2md\nmfNgBohjZkUhYLacvAtyW+D27h1vNRsqBFnFppDM7JsVUoLh/DWNJ7mDcewH\nxlly/uEUrXG26j/3rajhEgsT4Zf+KYEcGdzlTNEDTnod2Aazaezm/ZRFOY2h\nSiAzMlk53dLCXNe8EAlGtcgkbvIhpyluruTtakLG/FksWnB6mrOJiwb0ltAW\nQYUfsveDy6hn5tl6GL8dasSKAU5rz6AD1I9yLf6xjNNujuk9sKxPdsmjgZv7\nAvN0ftXUovMBHC/PkINNL/2VX4CAR0BUdeSR4DT5veNIYt33J+m3PCCS6JtR\nVbDgnZ+Oa4NqfSuMKMgKA7lZBQScOnL363RJpG0I2hxjFg0wzI97PzHxHPqH\n2tEha3zHZUFg7QedT45SJJrFeiRd1ZGFEy8fkarL0KX4rOeW1HApq/PA0+F0\n2dXLAbx+s6nfG8SUT/W5XNMTX4BxVSeYXt9pNx3ZuZVz/W11GZ0XgTQz0ap2\nS/OwhI3/dJZhLTfABBnvcm4B7tyQzDwWHL+TE6EDt3MkZ8opFBkZ3JcUPaJB\nNrtkFHLQTdYDUb6Idfj/mmmrLF/pnntCH45LTPK0KLRvATR0oJRkZmIuWivZ\nbw7VeiPXRYWr79Bu/TyvUsL1NBnF/Gx15UuXSvm1tLEra2WtMa7hoIpDLOKk\neTw0\r\n=J+Aj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.927fa902c.0","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/shape":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/density":"6.0.0-canary.927fa902c.0","@material/checkbox":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/elevation":"6.0.0-canary.927fa902c.0","@material/typography":"6.0.0-canary.927fa902c.0","@material/touch-target":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.927fa902c.0_1586458025701_0.5259387933234465","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/chips","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77d7c96131a6fe7dca7368f542af158c0fafc0b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":83,"integrity":"sha512-SK2GE1mPLOc8y9rxMtU6CKCmADsqKvJyM6yTawGcU9fg0wjxuPOWTplUcTFWU68i/BmJ43Nw3BChNsY2Tgw5Xw==","signatures":[{"sig":"MEYCIQDQUFjZmXquAGOYE2nihJoilc4EQNaWc5p6VWMBA/cUDQIhAPMbs2Xusfw5t2AiIeEozAlMbDcoLQY9mNt84YTx8YM2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMmhCRA9TVsSAnZWagAAF6cP/i90XuOW+5TaQU27VMOb\n9UXt2BZwIe6ThDoUdPbspo9n5VVd96D6SF/Esp3RUNmglu+R5aFQV3lND2Qx\nZPnT36aLFCGzJsyM9WLbTHEYttkX1Vwc/6H2En2wWZSz259/uFIgrfSRNJDG\nhCZFluay2OUhCZeu4u44XC4bUnVCtPcRNNzlKh2OZCkKu9uqR/T3E7b23fyf\nuLTdMl2IddtGpOHgKyP6vSX6vfPusbxkKVuYPu8dr2OKPcOoSxdXdrTj7BKK\nG7UOxdx2UlHN5di4WyEg29zlaARZ3TLRQ98liK2wiKRX0fEibuoINJ9Bpl5s\neGwEdfvuJ2hzTsBLPf2pJCb5csa/+TtadpyY9yu72luXlfG3DYMa9vMoNBoY\n38GZ/4Z1b6fwYiBgMvXKrTzC4hLQ50gQBdoxzKVRl5lZhiljMrUq/89vtGRp\nJdZYol5xfJQFprhzKtbtiTo5kIaf6DBbIRVc2NFTy01ba80oGzps/N7jOfS7\n2PM5wtm1wcglzWy1i6GRFcXJmLVtICSNV70e7K4mhU5r3+tkyGX3CdhLZUo/\n7QLveaAfhJXVWtsNhEERnl8CybIk3mZwVirlnuGoBM4tJH4RXhswJoaCg9zG\n8xDZ/ijnMoJbS5fCR7K3A1m6DcfhSAhgz+aYAD97WEmqsiQ03qbedU9MgHWk\nZtBV\r\n=4I3l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.eb28b6ecc.0","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/shape":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/density":"6.0.0-canary.eb28b6ecc.0","@material/checkbox":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/elevation":"6.0.0-canary.eb28b6ecc.0","@material/typography":"6.0.0-canary.eb28b6ecc.0","@material/touch-target":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.eb28b6ecc.0_1586547105411_0.5366736993728196","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/chips","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.816a43b42.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee6b3125728902917ad79a8613a7312a855b31b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.816a43b42.0.tgz","fileCount":83,"integrity":"sha512-p/hSb7wemAhGHYnsp8VkRVdBSaBt0sCo/R57X2ltc1PWeEXSO94ssFBjNTgamqgzMHpgHbTCm7+LaaX1CYShSA==","signatures":[{"sig":"MEUCIQCtZ9dspd676qZJrp6hRltVB9kXbTNvVhuScqjN6xKoQgIgGEoZm3CgY0U+t0J+e3v4uTJkWfuTVoyp9et0w4aesxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNy/CRA9TVsSAnZWagAAN4UQAIVSjHyZBS6Vrrz8sFVb\n3LocHztPASyVuISZaCGTSE/f5qIHqP6SQq42FcIb1V9Fb+pAFGl+SH173bQm\nLFFZMFpWVS2CI60T7nbNm0bKEC73A1xTcbA6IT/aiioPUU/67i0WcfFYW56H\nAJOT7cdQ0LKjiU+1l8kGu1wsJEujiJCXf8aZfK5cKixdTMvojYm5veQapTXs\n4GI36xjqSTHbUjb6MA3mm7fYukP2nf5RinHpYpWyFfCmlh2eBvv3QU0e9eRO\nmtVWXguJhL8dLb+onUbsxzTfdH0ZKdpD+UJ1OfTg4Awa4UOhPpWgqLimdLUj\nyAFLuHL2KcB2Kb85gsLm+mHVznavQWvdguK/355GPlu9GXodzYORoOU+uoI0\n9hS3zufodzmhlP+i+BfHsrbhVITputCNDExksqE8MeqKeg+SFKdGjGB1VI0F\nQkU5pFURLx4o4Kq9q/BayO14jLgWunnxrGmOcOXUO3BjVyUbtt+u/PhXdJkq\ncE8PbCze0RzVHVAA1id+96yDth0iYcbt7UPtUG4hX+7rj5TDQKuEPTmRpDrs\nCkyfXKSA7wrpnxeQglEEwSujtcH93vpNXPY8ebdu699QT1sd6G2JC5JxYoxg\nPf9WroTtfW3iU8Hvv2ctG1u1GGdtaYFBGyk25Y1pbwcnHri3xqhm3oTlQT4e\n37pE\r\n=sYH5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.816a43b42.0","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/shape":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/density":"6.0.0-canary.816a43b42.0","@material/checkbox":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/elevation":"6.0.0-canary.816a43b42.0","@material/typography":"6.0.0-canary.816a43b42.0","@material/touch-target":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.816a43b42.0_1586551999411_0.002196247409459673","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/chips","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.008c4d319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a416e06a2725c5c9bc13a56b43f45e328ecaf462","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.008c4d319.0.tgz","fileCount":83,"integrity":"sha512-fpAHkY8VLA867+UXFk4qbQX/qqbO28b6YXGE3vchowhRfa8w/v72z09VffJj+w09sK16dtgavljrujrgE22Jvw==","signatures":[{"sig":"MEUCIQDpaqR/77C3ggQsIq4Dt4qUNhznCHE1Q+tmZSHdZnhJzwIgIaMnMXtxibs0EBniL4w5x22ZTttIWH4NCAx5UeJz9mw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJSiCRA9TVsSAnZWagAA7/UQAIu7vD80eFpkZb7es4Es\n6KGvU2cHPIjRGP+FoJElwWGaOEjgRyVPtVZ381zOfcF+kuQo9uMCRNhv8WQ/\nmQHxhRQqF5yd5ZWH4BIp2A1LBymj5pTBqcZPR7VhWfU+3O4+RYWUeWPPV1i0\nulQhtl1hg3rcwxT7yj4sTXjodvTfrR0qtKsoiFLgW8xF3BVmul1Kqst/q8gF\nG88ksFYCXF8jG6/iHhajmSryuIRljDBmIbZmj+jhp25NMZxrXJ7eJwJTb0ag\neER9jJFq7CsphkIjW72W4Ksja+X2bEPUjuKt2RPszE9xT4UoKn9F/sT0YOiS\nbsY50pC8p4YHcCrcf+0BMnzVrWJkEPyfra8u/vSht7zSNIHTwW8cvRlBgsC4\ndQN+YaxqLS1v38wmyHRE0UIMKp9Kq/YGhkI89FCBCr7wCnBIrL5E8eq2kYs8\nl6UV41n7IDf+CEbKUL+AX0z06qMoJHqAnof/+PnOSbQYmFPfBfVrDw5nekDt\nEXC93a9ov5RoC9fg25BUBibdqqVcZHbfy5HeSMWBQJUu7JTZCV5DLl4sY5SH\n7P6FHZdzozNxn9KXkinWLvIed2pdNMls6XyBbrLvRSRTyX9JaE11KwAIXq6q\nlyTcUjPd7MM9WFoPbZjeE0B78vSeQfirz/Ow9SZG7pKFxHHP7V5/Q3Doy+e3\ngA6E\r\n=al8V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.008c4d319.0","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/shape":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/density":"6.0.0-canary.008c4d319.0","@material/checkbox":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/elevation":"6.0.0-canary.008c4d319.0","@material/typography":"6.0.0-canary.008c4d319.0","@material/touch-target":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.008c4d319.0_1586795681865_0.18565544458477845","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/chips","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"768a1c5704c2df8410628510a258d63e173280b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":83,"integrity":"sha512-sv7RSBVHGLX//2qegCULuFnTQvdPqlOrW4MiH1JtobAgVXxLlVrRZ5pavXWMntcYO8BFHpL/9rXKGX4NBR4QxQ==","signatures":[{"sig":"MEYCIQDjSqp4iEML/ZLho8ONN5LkK6MqBzoxzRIpY8xa3NY5ogIhAIlUJM0hLLXsMngzKPCoZiyQjxokGq3oIwM9nmHW0o5K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTdCRA9TVsSAnZWagAAUHkP/i8//75chx/SdJrDP5ji\nuvRFBNe0Yg9DigbPy6/Oa1LXGrM3QbPmDudBCLJE7HxiHR3lRQpBF7X+fOIp\nUnumjzZW1IAsTs3qXlnqTSLq90Vwb4ZAc96hnJDlaFIhiTCGnywPpVC8+MiV\n4uxHPr6urSRU4jvRc1WJ1M++072VXO92ckh1kr/wBYw0ywsqdKCfE8vDUcur\nTfwFLZQDUXfD9XEL2JY6zru9FsbFfXgn1i3+aS8/K+95lCoqC7ZgH2U1f9p+\n1AIA3P88/dQvjg7LW1yg2HSGK9YduEw8hBpLJtojFLiTgcDiiwBk5Hzdpdj7\nY3Xer02YryeNe9PbyD/I1V9VEmyMpztkr3wEq9q3rL/hxe9oth8MOjt8YK1m\nmOmtWIUzQ1KcK0hhpMhPFnvgJ9MtPN9Ql3r8prLCFILx4TmqAdy/iuGKKNws\nksAWGjMyM9sQRYHhR1MyfhLuqdmJIWM9lfsAi48Pco0M9V6I+o2PYJqYbGqm\nyYUhdMxY1JQfF3pOIMSfGr63TZa+dH4u9fi8MjKe08CvORZsQ86IBChTofqr\nZYmlYGA3QqpN1hXYGWIU4iwF/EXuM/IMgmZlGifnSS2V32TXM2iFeFUOnziD\nSRKrb0uiSn3oH9kLMofpUhl+/foJ9QBXqyysFECtD16YensIAusIu26t/1n2\nYn4K\r\n=NUho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cbb3f28ca.0","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/shape":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/density":"6.0.0-canary.cbb3f28ca.0","@material/checkbox":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/elevation":"6.0.0-canary.cbb3f28ca.0","@material/typography":"6.0.0-canary.cbb3f28ca.0","@material/touch-target":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.cbb3f28ca.0_1586840796434_0.2059822718835067","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/chips","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce5dddf4ffdd91f6308dac9d82f1a588f59a88a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.f172b0f90.0.tgz","fileCount":83,"integrity":"sha512-+pLHuaXtlvhPvaNKd9D3CoQaqtVbWU4yZ+DlinRFVLQQxGyHn8QwV6diRMq9ehLs0Dmnt9/zhIOfQrwBO1HSGQ==","signatures":[{"sig":"MEUCIQDga1lnCe9dwGm2qhySW7SSYvaHPgaIEJSGfbODnbRPegIgX28GxcUolHTtKC1pJrnDeeF8ioUcqFzpHMVc33cwjD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkMBCRA9TVsSAnZWagAA9tYP/ReffaAq0YQzEK3f4Tpv\nnjZsY/aH+7S0A5L1HQBy7KqOM19GoHMasHl2enylN38n6keLI3NlpFTM9Vis\nVTVNsawNUm01425kWLTjB/3igGfR09zoPuqgCRW5/9cUV8UcmUCw6ZvVMlUx\nMXdVd47yPuy2d++BCu5rRbBsdkBp3b+Mqc443NF7bgzkLwrBwGSFYGW/LIgA\nEpcvvqs9kMiO5Mp9T+M8TgmoG/knc4GdFkLlIR8JcDXS3frh18FyeQByEsu7\nZWXkTQbWXPYHUdmZ6jAc8kECEPpSmCh/xJAYz5Wdz4vGWOZ3QBrNqqQmTGDv\nYd//uLF9Mf+5EEDjfC98ZqA/dVquEUgj/c6xmJVE/RSFxs9T5zP/z2hmPDuW\ngEo8IqOC3PSkrYPYUrxtSsWxh0WSX+tG8bOGA6dGJXRccowFqHYM06U8sMrU\n2lpyFCv3M86sZ36p/qhkxPta7oeJEh4rj/dEWf3hlbXdv6tQsRhvcSlf6yh5\ntsCtHuDqcdF43w4HFWpYfPAEe3SUs/fvjzL+heRJ58OLkL8sH/6cTmFzZOhL\nrtaj1OLc9igRQZjBw4nnxCldKdEly+hVXu4FqPoe43X0jMoajKSqo6r3cIAM\nCyp1FSkI66DJvLxkDyvngNDEA5v3W/dw79g13eFOVb7s/+PyQJBNeKm0SSvJ\nW1h7\r\n=4XXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f172b0f90.0","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/shape":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/density":"6.0.0-canary.f172b0f90.0","@material/checkbox":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/elevation":"6.0.0-canary.f172b0f90.0","@material/typography":"6.0.0-canary.f172b0f90.0","@material/touch-target":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.f172b0f90.0_1586905857158_0.6427312984928866","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/chips","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.c02642273.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"270a410ef2fdcc5715b306ab1c83aebe18023272","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.c02642273.0.tgz","fileCount":83,"integrity":"sha512-gfy9HxuzHP1ywMteRBHo2nAvDGOXhcZEg5YswkmT9DWXX7OVcM8x8nxPuFfggdiktYdCIjKifcVO0HXcp1XijQ==","signatures":[{"sig":"MEUCIQC9slpMsnTwAUz4GHSclyB5viZ4YFqO5iAaN6SdVFs/FwIgXPIjct1ukoaDqE8d9rtfdMuOe7HxzkJ0VQifvyNzfVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzO9CRA9TVsSAnZWagAATsEP/RZ0nUrplT8fRvs+xAJG\nW5TfDu+wQMCVe+0Z8QBKx2rrB3G1pPCZLHDKwpG0b2SZdjB5T57OYC2S9eG3\npGUe0+230HJ0HSToEuFq8L5k9L7co+obTvBVgqC7v2oCHnPuyGAEAjYwYNf3\nYOOwiXDMeoARoLs6+qolkjyAHECuJFwy6AOPhN52Xaq4ohidJN59HXd6kSWC\nbqQ6NfFdqIlpUE0XObOPno+P4AVp1EmJPUKWjR/cirfOCwI3afOKNhxCERrI\njKgnVCiq88jc+hCs/anm/xTlNklL7VLmqPtBJ1WDmoL8HIcDTt3bCw5m81Eo\n0EE5j7nSF8lOQIzZhpQyc0jRjeSBdUf+8sbJDIuRqshBPVHlsF3m+n4DXdkM\nw1jqhC/SxTFxdjXxZnnrjgLu8KjLTlhcz2ZsdV0uBnwtN/xJbdQNY4dExrl3\n7Xjrys3B655M/WmOXdcqKDwE0bme4bEHevM71fggQ8AKCTDmjKi/knl89FTm\nYxVNec/y/TBJfMSQuXZpYj75Q6lKd7RKpxX6vnKKT2qnm6JtzJgT2NQOV7L+\ngg54LfyMLXpbIgyNv0bui7vSf5DpidPBXCfkGtVz2buMgxkhhPyEo0R7X+r3\nSJoGX9Au8Z7cMQNbfGVqe7Uh993CxE43I8KBCHt1raO4a/FWPnhWwPAt7vBl\nS+O1\r\n=Zuc7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c02642273.0","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/shape":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/density":"6.0.0-canary.c02642273.0","@material/checkbox":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/elevation":"6.0.0-canary.c02642273.0","@material/typography":"6.0.0-canary.c02642273.0","@material/touch-target":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.c02642273.0_1586967485356_0.7589447964199243","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/chips","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.8a299b568.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0207e45b950c30f2732fd5dc2bce17f11f97afc7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.8a299b568.0.tgz","fileCount":83,"integrity":"sha512-G6ApQ9myNfk0jsVU6J5YRir0eLwUY335y29TRT799FcxMy5WKkkSwgP3rSgOVZLxdpC5xw76c1qPA6qbvDiQDg==","signatures":[{"sig":"MEUCIA5/0dpQDpyh1JGXSLBvMW1nLmCpdHN74IYlDf0Sst4oAiEAoGfRFUsGZ0BiUMUFjwj1KptQLVI0au6bPnmO/8ShvaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44pCRA9TVsSAnZWagAAeY8P/jU21uM/IUHWoOfFtHHF\n+mkJezXrOlC4ncJuZ86LQJs/vMm7dGhc3pBMwAlpEnplWy0dAHvm1CcbDKpr\nJxNt5h0RQOoul4M+SWx54rp6PRIbbthvOme1eq6MlLgry//ORgmWjposW/Dl\n8Lle9XaM0umShWWCWhlRx0/2ku9dFEqpyq2UyvJgxRN7QO892o91xk8yjR3n\nQXVVJ44docc39vh7JMAYsDaGinPidOmMqymBeH1gKkWp5ldiEKs4Tj/eHfWd\nhzIX4XJP/KaJ2TNu3Xz+uSabl2Ao6FUKEM3+tCZ1dmGYT/ZB16DBzdIr6FFN\nqRpJjVREqMSi6w08ofW+s0JxSEV+2wU/Gyzj4bW2RtKrH1SzV1UwqU6s2IOj\ni16i6gVEKn68QNZmY/vK9JtB8uumDxpnWJvKsyebLfAj9Z5Lvbm7J6eUtDf7\nubspTxPu31WOe+1BnCAqSn9+nxZGrjwV2K2Z6+liVoHY4XH29dc+mYAxYCx4\nTUQD4SQc5ZURaDTymDkZuPgLvyBhlbKXEjJVQBoqV2OtOYJYO0S/tA6mAl0t\nfcjjcIw3n3klUSK5p8tCekLR8H0bd3u02TkW7PwCgp1USsTDsSl1wAOWmu7b\nkNyYUQtOppyeJMchxJtdLE/EkZGlMQZ+YUQRwSF92BozlJZE9RF/5BR2iLKy\nvrzf\r\n=mo1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8a299b568.0","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/shape":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/density":"6.0.0-canary.8a299b568.0","@material/checkbox":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/elevation":"6.0.0-canary.8a299b568.0","@material/typography":"6.0.0-canary.8a299b568.0","@material/touch-target":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.8a299b568.0_1586990633176_0.5994442488995038","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/chips","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a8f5b6260b6bf26065ee9e6ef98bcbdebf13465","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.490fbdc09.0.tgz","fileCount":83,"integrity":"sha512-my+zx4uDjdw6rDFqFQ1qliBwYvcK6h006VsHDllQ/z/ANmNgFkARpr/fwBGXz3Na8YFGjkUA9wL0csmI15zz9A==","signatures":[{"sig":"MEYCIQCxOlZnicuh+a18iGUxFVptMEmFRE6zI3hzqsRlp+RojwIhAKVXdoywH3aS8MHRy2XT8e7SS/aSL9uRuh5fxCzYhfiK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/R0CRA9TVsSAnZWagAA9JoP/joiNk97yx5Kiwgs2GmO\nGCPOQghagAiVRljVg5zLHqhUv8Pkm0xK66VCLc2BD8MfnvW+mGGxPYX7xh0j\nfVCq8vBOTKIc/2nm6emdB3JhiF7by2rTX67s70cpL41RZzOCUnpRY5LifWdV\n5cwH0qr1gIkRq88oEcKS8eGo0gxFrgeggkikIMu4y/53d+Xq4NzAdT/P4QxX\nReWeRMwJbyIxrDmB9Ker0wSiyywbHYvNAEsqlVI4pgTeVYP97yovYJ50TG8M\n2sjN4AMr9t+4vmIKfC68Wkz9cn5Qa3mFum99a/1Wa+KtFAMX1RBspQakBzHE\njlIR7jgJWNclrEkvv7QGAPug8ZU+BtjQWEMygWycdhfnxz/2i8OzxA9PgP0w\ndsg1ksTyRxBI9DP2bi4nPYZZBEcz1vz5+3pFq4MoULJRgFs2hoykOH6C+IlK\nZ7VQvWcAPNXQX+0tSRQ452A8IWhZOPJpvjcDFQ57t6XK56vcNqX8EAxZrV7r\nWMjF+A2Jx8lfS7pLf0cOP4ZXTUe+8XCJs79RBnfztgiKCDf3297y1ssI9jZh\n/GZ66fKpcf4/hVTrIg8TpnBpn+8YekF6IkQUY3G4UQMutcJIeeNPXa9oLzOg\nJC+bRMO9XX8Y92LxLz3xgQob+mxF01q8OvjuAaK4GsfFm6duorLDhhn1o1yC\nDZem\r\n=Q4S5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.490fbdc09.0","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/shape":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/density":"6.0.0-canary.490fbdc09.0","@material/checkbox":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/elevation":"6.0.0-canary.490fbdc09.0","@material/typography":"6.0.0-canary.490fbdc09.0","@material/touch-target":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.490fbdc09.0_1587016820203_0.0771543974702864","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/chips","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e9853ff8922408ec688d16e4955f4847bf791ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.f838c6e55.0.tgz","fileCount":83,"integrity":"sha512-l7h45kWSL5I831MiE8KrSHLwHx+YXiuxDDELrfU2cl5B7f+UYZZlPEzaRJjevLeDDnDkFI3rqvqSipH4vh4K8A==","signatures":[{"sig":"MEUCIQDHn+b/MSbT+tH1xzvwZKhz2RZoMjazogjeEWbbKJ2VywIgd+zovc/r6hM2Ne/aE0HFBrfaApKe0jj+qqYt9BKv+1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGtPCRA9TVsSAnZWagAA1fEP/A1CwDDvASQrrxnVRhj9\n+VzbyfUpzo037if/1XgdavsglRmPyIqOclbp2cdWH/FM87n6MpifAo5q3T9t\nF6GgZvqoP5f92iJgP4LKNhk9MtBOuaU1jgWBriYmFSMeruzIUuNiHIXIyHo8\nhExQMWEi5XkqundAG2d6nczRvxYBvU5VNNAtF71S1taFV5L7dJSk16HCWFsC\nb0Dquw6O2e2UxFyGmdYZJvj+NPAIds/Ng0SvEYNmhE2bPZNk7NnirCyob8HY\nNnFQo+as0IBJAzh6V3HuSVIfDxXKyR7qbp7knCAsCmiTYJxUafM8x1KoGl5o\nTssQspSI4gxMr36InkS9njFcE6S2R5Aa9mteb5eHHcXv9npqHtXclH/fgsHm\nUBdlH4pUfcktyRu4CGkwPZxA1Y70VfCLsZjFx9OFJcqjd+yBfHWDRqvRPTPJ\n1bs18yvwD1VVZ0RXq4/0eRUkbwLOqt+d9Leotr9gFo3Sm06JaMm3NlQ3Slr/\nCx1hjk/Xot0qxPLNLKhQJDpt45hxw4/kaGL79/6MjITQsCv861wxgjnYu2Aa\nooR5QVrJI5XsJuJdouj+txlKu8KlUnT+SAAP2EpOM3sWzv2whyXsmsiIjBHS\n5LLXch/VVGWUpGLmLj9KTqkTshQ6Pf9IQCBDWgmL/10HOzp9ulc1CmWP/Pgk\nPZy7\r\n=YWmT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f838c6e55.0","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/shape":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/density":"6.0.0-canary.f838c6e55.0","@material/checkbox":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/elevation":"6.0.0-canary.f838c6e55.0","@material/typography":"6.0.0-canary.f838c6e55.0","@material/touch-target":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.f838c6e55.0_1587047247066_0.4416070295775263","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/chips","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da1481f355494f4d385d7ef5fa522fb05bd26047","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.ce6cb7024.0.tgz","fileCount":83,"integrity":"sha512-3VYGSc7CKWX3tfv0eu2dI3K26/O1ZiwmbtoQyp7eaP5iaLiTotvtPJblnoajOf4BPVQhfce7hZ0xlc7R86byrw==","signatures":[{"sig":"MEYCIQDGBx6lmCr0Fv8R70GfrcFhIORF40sk55Lc6VMow3kc8QIhALyAE7QjnCYT8Qluw6HBYmGlj8lCfNrY6fhUxaZovXr/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJO1CRA9TVsSAnZWagAAHb4P/1C+fHkX+Z4atpV2tR7k\nwpOObm6XftEfOj4SoP7++gG0XSvW9G1YgdIr4H6RCXpwGg8iPkoktns83jVC\nNSu/GURwWfKGSnEECAdwaYDmbMJDWZv/czMaidbcyE0bC3tbOjHHPNN85wcf\n46bYNSxGONG/FkhMDXM3EOzqD9s3C8GQatK8gu/gzZ2AppmCfCvhuT8mNLoz\nTDNd7y++HBhlmf1kJubw7BS/ZxhJYnMWiQSqS4GWOZRBNcRS3Bsx0ptXqRKT\nWys0Um2qFgEfGEUCkHUw3GCISTvaYEHK03zpTNqZ93z4y+ncvw/eHK4HOgty\nryETzY0smRJDdnBVn0/kUW+YbopBdMrgaMxQU5mhL4+fw2eVHiJFjDwESpo9\nAVeOrM//5JUt2dQG2570tx2goTSt7wmBl9qRU5huEwuHzQ9UncHVScUwgRpE\nlwhTP9D51iaWBR3HbZtJRS+K3zLOip494qsY/Vcj+Ai2Vf5LH2saKKMYmuvI\nuziGxTtr8m/ha29aU5Suk/YJAhfeXWnYMJ281Zcub+vXko398mCZpFqFYDeS\nLlF1uRjit8nVboy+rKnmvJBhLu3KO63r3pt2YS6EiVNp6jfjgocCGxSr8L3s\nIz4jjf18O8MQqyTjRPVX+iTs5AWVjgJcqge/Rvh2/6xCTgFxbmPzesDYIvYp\nPeuv\r\n=E/wJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ce6cb7024.0","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/shape":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/density":"6.0.0-canary.ce6cb7024.0","@material/checkbox":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/elevation":"6.0.0-canary.ce6cb7024.0","@material/typography":"6.0.0-canary.ce6cb7024.0","@material/touch-target":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.ce6cb7024.0_1587057588758_0.42382662979862373","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/chips","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f40653c3ac20714b107e0a36d49b9788ad17443e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.0ab62a65b.0.tgz","fileCount":83,"integrity":"sha512-m/LFJfTpe8mk+XFh/K7q0dFnNMszgH5aezV0DskX7KaLLPWdmmzhhvtQWnxnFR3omtDWVtjZJhHIX28eagImZA==","signatures":[{"sig":"MEUCIC4Vp6H63maFEILOrgB3qn9LBsKqg7IFMf8QZddUP8nIAiEArYy9AloCrPdpNQFFgrfEfjemTxu3pDtmCFX7JK/ArUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKoNCRA9TVsSAnZWagAAtOMP/26U/pflqnmorBcfV8CA\nfCB+sW4EJOsXCecOZH8cMddfZaIERjcEPBeSjycHdBWoc66AHZ4yFCXIuovE\nX6P928HYMzPljPOZxol8N9/QGYdThKN5VIp7l9RZvQM/EIu1oIbDEWn6m0ZK\n2t4pcCC0UtmahGlkTTMfzq75kLuFF7k/WPyMzNTyc1ilyVd+icV8GaEjqjh5\nzckS7v8el+jeBCgZWnz/uk6o7NnXW28oAT+lhq9sbg1yXDo0Ks568XdVKt8m\niSh14h4agn4dcefWX7RgVFqkDLRsiP8woIgx6JvYZMLm68eKpwaolP1Pe5TA\nhDkF7xyVzJLDvx+SMssRQ9dK7dfkE5jGzCd137alvZXtvC5R2btETliP+lOB\nFhvsaWJVenatiS2+lzHEOnZUtUuUmvvfbfxOPDUJWfSXgVKT8rf2Ky4Fuak2\ny4xcfGF8P0pV7rdWCD+FR99c3z66OqGOPshkjyfg3Tzq03V+mPrFl84+Gbik\nspNDUMocXIdDbnIVfIodR5ycYwfF03yy91zemoh5vyGm/sI+TkR1hjeQEHnu\n2H77d0Vj+hJghCLbobpKj8FvYoSud+uMFKTPkdu0k/xoOKldaRMl1tYgT1uD\nVBH7bQesp0EVMPASOOBb8ryTTPAFs6isB5xGMOn9sIpO78AO2liSi2JrzTzS\nNTtZ\r\n=Cbzh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.0ab62a65b.0","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/shape":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/density":"6.0.0-canary.0ab62a65b.0","@material/checkbox":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/elevation":"6.0.0-canary.0ab62a65b.0","@material/typography":"6.0.0-canary.0ab62a65b.0","@material/touch-target":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.0ab62a65b.0_1587063308753_0.49778091381518097","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/chips","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d56ace3194668880515614593173249dd032ace1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.ca61b656f.0.tgz","fileCount":83,"integrity":"sha512-4rBCu/Jl5h3mSjiqICO22TFF8xsshWxHtSJpkByvrSOLWQQrwSRdpcFkCrObQ08z6xkrQxpOYkHA+lfnoRgISA==","signatures":[{"sig":"MEQCIFQbSuXhPMTLTVObAhDnfHkWvFMvFSq1N02Poqwv/+DSAiAPxOVStU8SFBgoQSY8A+tHbGUD+gffvXsQuZDkoTXf7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlrCRA9TVsSAnZWagAAgrcP/Rg5jnRsgjPIS55eBvAe\n6j8c6UmzNZjxP7TwU23FbwYtwExe03EkXw/FYbO/25wwxITSaa9Q7rGWBSQm\nGC2vE065XR/YLgtiqC/+vO5z+C/k+m5w5tRLL9cMfvUjXu1uiX7YJ3/rfD3k\nQIPcHbLMPL/g0Jr5SvLoezigjF5HKs4WbQ1IJGIMi7eEDK9UpdHyPzjmioxj\nlfy5ehU9Ht8u/Ww7sZG1rTKPpgUrUo1YWX0aSRm/a4/IGjzsVNvt5Fz9JvMx\ntscChyID8UIsCe5AdBpRVf3ylOVdioSLIHz3ebxYBrGUgvkySFB3k/rTPbn2\nyscyB532FQaHxCAA+F16CvhEXcE5Y5OKFRjo0zB6EODhnZdtFIC6eJGdKQQf\nFv1l9v2uFdZXouE4kjWdOCdw72fHLQHpHkBWuJCA+7cBUj4wG24eSzljlR59\nakxOeeXCyszGBuXNw5iqtlAq/YJyVYT915ZWGDKM/bis5EuMsUox1hhMQZyz\n4zBstn23rSvaSxIIoDnXo+IRpVQQv3HUwiu6ye5svV66E7Laj1BN+4DQANeN\npUSCd4XPTLyKSXHnYQ1q0bd4UzAMlzS4hB55pt8K2hpcOKtmp0W1iTWm2AC3\n8rXZ2tcXoqc7dNoczW9UZlGf8JW2eZx0kucgWRCOhqs7vzzRfJyvchlNB9DL\nPv3r\r\n=QYOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ca61b656f.0","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/shape":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/density":"6.0.0-canary.ca61b656f.0","@material/checkbox":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/elevation":"6.0.0-canary.ca61b656f.0","@material/typography":"6.0.0-canary.ca61b656f.0","@material/touch-target":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.ca61b656f.0_1587067243038_0.48736881895034023","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/chips","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cbcf69ad5f375d1be5a80f504f3e855e93719b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.45a6615e3.0.tgz","fileCount":83,"integrity":"sha512-wqTAuoUVl+B7R48lLzOkGVkHKe+hfMnxqPYehsV7lIV0pdt/5VNLGigWoUl0KfOUKEySyaLAOTv/w7qfiFo25A==","signatures":[{"sig":"MEUCIQDJs7zlK1yb1EyB5fWuV83tLWnKETF8qUkY0eEUs7lLxAIgHdmp+PXt8Rw3HJQgpq/GcUt6DzRU6rRSYXxriu5rUcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEcCRA9TVsSAnZWagAAJnUP/03TL3k4FGj7Tp12U22L\nYi/rJucm/9vMh9SCexrTOTndEMQ3FNhvOWbjv+bdf6XIrUgnQzWhltsWQg31\nZynqzaGV3CZC7K1Y3Erbk8RHS9uCRHMi2zAO2LGvzmjL2xbZuYl64Q3b2tVV\nNTFjGLPuRr/bVJHcjSnFg4ZnQXp9c4/j7BYpxcWBOF882hiTIRyGG/qMkM4t\nAugSxwKo/ar0cs+yOPhrPOk6AuE5dZ+IA4I+fovea6oTQQDZau0+Ob9GRBCe\nw2oKWoFKHChRXjfA9B4PiGR3cURY8JJGftCabXDik1rgmvqKaG728NyGIQ9H\n+pGSKoW409V8zTl0KCkiI2RlHBAPbWveiQ/t3Zy/zseoDxUeG8bsZ7tfCA+N\nQn7DqdvJHuvQc4cIi0d4vNbLm0KSbrNetcvRtPQCoMY/p7KpUOCVFu1LwK3b\n9NZAdpOY+EN0E/DX3Z9NyeqsSQxlGaIfAzfxTseXPPC37MpX8w/zfCCLt7L6\nvAGy5KlaPPN8elwj/Z9ZqRw61P2PFKEkilHz/jwp7HgSoe+zcQ3marI2ogBH\nAd3qmPcB1m4Oq5WMnZBd/hRxUWaZlMyjRXEdYJtsCYVQeMU36uH3FPcmsUFL\nKirCGBSJGIEsEw8RpDPj9M5YGHQWO1fukXH9CDvVw6t/fYlV4A+QLAFy0AuN\n4rAY\r\n=iPb9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.45a6615e3.0","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/shape":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/density":"6.0.0-canary.45a6615e3.0","@material/checkbox":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/elevation":"6.0.0-canary.45a6615e3.0","@material/typography":"6.0.0-canary.45a6615e3.0","@material/touch-target":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.45a6615e3.0_1587069212012_0.9918384167447931","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/chips","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2ebf6b6536317f3dcfa196e820910495e57eeb7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":83,"integrity":"sha512-ik5JCP7jrjVLMU9LmYpw2TLEJgK8J4WRzHWtj+HgPze1OEFiZ1n7aeiR9v0061XpUXafRF2SBu2R4T+p2qCaGQ==","signatures":[{"sig":"MEYCIQD10yh7mWAYbM6T6GkyPuxhcChEwSYeIRDZUDMjyeg27QIhAKERt2s9Q6FfjebhF/r/+IGbmkG8pgy1iMapEzl8Y6k2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemepnCRA9TVsSAnZWagAAcB4P/AqY/Do2wwar9sERIy4N\nXOT2Ir1E7q3DjuU36yw6359JdOZW3OoGFyQU3zKGa36HfwuGqX/Sdym34jiC\nhgLMqGaoEtj6uVDj7htpD7bYirbUK6WKHXoxRV+dStZt6Nob7U7OL7u+n4v/\nH6a3qsMNnNmCHNSK8yAyIzMsNpE1mGmSvnawxSzcOJS0uicgILqkRtUTYKMg\naO9/eyflcf6ekVOeDfPGzl+wKNWgfCOnDpuWLDRlyb3eUQd9bzUf7f6vE5te\nuNTYXg/AhPom6fqqvbuuobisXLGc2rLb445sALr8tVcgVTcN9fwCqOKcCxtT\nhIBjrTHhf4gG4olt0PX3TuS7aMgMjZYLXoMx8UFXdTyON/Y/EZoUuUcEDLfB\nxEbR2KPCcXxfv70Phbb/rrR+f47eiepRoZgYY0X9XlXnmFA0bvZlC2LVPtkT\nZNuApE0ZBgnE2reOVZY/Hci1z+zaRA54j/KiSC34I9hQVgXUTDVUD/6WCIQf\nwmgiFPdH/n3fBllP/dNrHGSx0ehFaps77Unmoy58F+UXlbY5wMPM72rqAdyo\no8uUEtB3hk/6FrlwJnj5WnYj6pe4XA838SB8cLF7nQeCqMEPOHlRm3rkHfab\nvTtbVHpuxYWuYFK7M4lILZl64zRqyDW09qjSAjMILP61VEbDZXj0uCaJkwvT\n1dXF\r\n=gvRk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b04cdb0f.0","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/shape":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/density":"6.0.0-canary.4b04cdb0f.0","@material/checkbox":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/elevation":"6.0.0-canary.4b04cdb0f.0","@material/typography":"6.0.0-canary.4b04cdb0f.0","@material/touch-target":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.4b04cdb0f.0_1587145319015_0.6016465073819259","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/chips","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.b273afa93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dbd142c3d4dd895ff147f6e25b1bd5467d78605","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.b273afa93.0.tgz","fileCount":83,"integrity":"sha512-4QktQaot2X9v9Nz05QOivv9fg8bXzKKopwc2+O7AQp0v7A1Gl2wPM+Otu2I+cqqbJ/L/yLLq8BzZ0M7ThzLA0A==","signatures":[{"sig":"MEQCICqVWboJiHrAvYTqiruzZY7xGMXK/PqLFXtIgsQPb1VUAiBv+gkXelG0ClhLTpsxBdMHjbM2Ga91cc4nx4njp7sVgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjXECRA9TVsSAnZWagAAWPEP/jut/3l2Zrpla+c6yblU\nNWMtPsfMyskkxtbxN46xz7VnPjs9WyKqwVfbm/sGyKDD4H32c6ifof2iTD+t\nakzWdshqZ46GQDvEumkDZWM38efjC7a+KQt3arkblCYb6i4PD/OIkdcjAAO3\nxYlN5G7TezQBNbiW65u2YqHFKbtah9lLJ3BY11yxS5A1+TOdpNYcqsLkj/va\n9US2q4849B+xpoRg9kCIKhRWKfdlDzGmxOT9/KF9shRUQ8ofxpBE4oVZonG6\nzbqRuRFS98YY6xY6fltjtplGsIWIhiIOWpWxorDc2cl/eM7VHdy3/+DivItJ\n+yQmAN+dJu8H7Hljog+mQ82HtbyLAh74qY7XMU53YP35OeifmOBPo2dcNzV5\nfu/WIslCGismzoWdu56TooAohsW6GXVJ3lCJ/JAY5t2apsd8ELebObuJxWfI\nmfQwqrskJep8Vk+3SANYBAmN5CF8uMHZ0ENj774SCeUxhg00QdQiBfITlZsv\n4fa9OCpYLSc/WfMB+zhRy3pvYK2fMvQXvd4xNq2Wnqy3qo88tnqjtEiyUbsH\n6SazCcP1BUQzWbc8Lzjr2sy73YXA6zdKzIgqA0Rh1SN1yob6US8ezfAgzX+U\n1v5Ij2o2+vo0QboQojpKnXrKMmDSoN9kTA6yWU9shVujb3VcyN/xvhTItd4+\nbA+N\r\n=WmIL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b273afa93.0","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/shape":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/density":"6.0.0-canary.b273afa93.0","@material/checkbox":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/elevation":"6.0.0-canary.b273afa93.0","@material/typography":"6.0.0-canary.b273afa93.0","@material/touch-target":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.b273afa93.0_1587164612472_0.25129113832890426","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/chips","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd0a1e4d09651dcadc1f4d12b88722bf2605d96f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.b70bc601e.0.tgz","fileCount":83,"integrity":"sha512-RIhcyXJc5osaU8GQFuBm2Iz5/WeiQoFQwHzwuJZvenc7kDz4K7xd6Gc34drZErmqGnEA8nmmeq7uGUTwsiuXgw==","signatures":[{"sig":"MEQCIC8ZGLYL5drrC+BH4S2juBDfq5XzTwDRAp710ctaNbk8AiAgjVelQtG/2wDD5/J+a2eAkPbCL16Lw47K5ud0dBzdQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjoeCRA9TVsSAnZWagAA4EQP/jhvmCbu9RWPwabg4e0x\nrsW4V01IHl1wkdONguU4d5YwL71tYV+gmO0EhzqmU5l0qhRP1dS29dwAUJIX\n35RHqekmdV6rOw2lAsUd5qfY8oomL/6OdxEmYpz86u0jBfrjR3IouqQanoZK\nK/ofCeVdJ12mKXGNuJGQacYmuMYkklSPZ9jPXY3Xrx2JvkyZj9c+u+C7hgXJ\n9xTdVkrhjJGQhJxDMV6JZIRT+hwk2ckGxpQnssuOUoq8AAkepKPcLQk08r3Y\nODEHSsA09Whz/SSEDH20jbiYV/HLCz4shSZCzdiid80AEm2vuuJVGDhq+pnM\nmimoObFYbiZ1vcUkO3I7sLEUDm4qZGcFDtqwcIt38qZYy7BbIBiV6DjgoJS/\n1ef+q2drkcmDZg73wrcE+FdubMP35/U0d5hFyKO7uusLQBEQhj7Bn2zBvsfM\n4LIo+6ZzvIw7xhmf4Ww0Hm+p1hwMXEX15bXQAMVDJZGwrgPo8kPuP0prE07f\npLxCDIE/Fo1kqKaNyjVt7FDi37hnAxBP3+aCdBbfeDKNAY1X7pTtgm2jROBa\nJAXGjFL+PQ6GBH6Rz0vpN5DffQPz/A//IaRUQqkAv/SLo1v0HuWZrzFB98ex\nfXPXW6yfWhi4s6VFruZc6ufIPk+o0f6CrXnfOUqXnt4/TI1jdz6iUDKfLH/o\nji8c\r\n=rmli\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b70bc601e.0","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/shape":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/density":"6.0.0-canary.b70bc601e.0","@material/checkbox":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/elevation":"6.0.0-canary.b70bc601e.0","@material/typography":"6.0.0-canary.b70bc601e.0","@material/touch-target":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.b70bc601e.0_1587165726368_0.69403454564242","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/chips","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd369d63a58c769064d93d3df0475baa0d4d46c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.c4b4bba96.0.tgz","fileCount":83,"integrity":"sha512-6mGY73UhqXwQ6hs7SkeEwgGH4Ca/SaaowtIp+xoSlsPIgsryT52FvGH63q7pg/mZuR7kxl890X2MI3WpZwtUSw==","signatures":[{"sig":"MEQCIBUNLwTKCqzzACOTs+KuOqnq6jGH4bUNiAs5rIflxQoSAiBywi8UqbvuxzCgIIOmxz07QeT9+Gbul+XgGvLS7vZckg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkddCRA9TVsSAnZWagAAxB4P/3GmnD4o5lfx/ExF+6AS\nC5OrHE0BHmW7URLM2Ihtq3napNkW/7CgrbjOEdFiSNZ4aar6Q56WEk0hzPUT\nQC6YvgklUfuRZdJ9glAB9FDa98LsRT4gcR32nz/QBRaSvRF+UfxoZdrRo6uf\nReRDdTXCxZkENr39LNB1rXsjaGefpC5lF0YtXuZ9KO033cBK7vs8NoT/Bwin\nbgvPfDFHfFXF1xjO6d+nOokj7vEJpkTeHTayxn5trEv+ybfE3IAG7lEREHnG\n1BS8m5vLBxcjebrf2b02utdpTAxLxSEItUDjWJAbjDk2esP9N2jSQEZcXm+X\ngpCiu9eHlSq1u0FwqKybC301a263Ir/P38j1EJHCf/F5VGRyys2jmPozIqvk\nN/cNXDaSkfS16AucLMLhmgDPgxsM1L7dHRr3hYA9JsK6idsEi4liyztY29dn\no7xd0TW+dH4S/7QdqQ8Mh9dYd8nhXlowZw0v4oxowLJH7n8rgQKcswKTssPk\nWQ/TRI+FrY6bZwetfrzgVZaZv8VJ6rqq0fnxOxmH9JVNKfwVtiRand6cbl7s\n+0C2CPRQ65DzKji+PtnD/jZxuy5HqeOUYyIQmXy3uxLd2yg1l6I7mosxsAW5\n2LsIjR5yk87HPIeFBz6ZD+ttNmYCitXPuA7OTCl+zRl+1q/ni8bMneXX04T9\nAc9t\r\n=TrNp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c4b4bba96.0","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/shape":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/density":"6.0.0-canary.c4b4bba96.0","@material/checkbox":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/elevation":"6.0.0-canary.c4b4bba96.0","@material/typography":"6.0.0-canary.c4b4bba96.0","@material/touch-target":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.c4b4bba96.0_1587169117255_0.896210512569632","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/chips","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"236fcb8b88516947befb66c4329901fadb479927","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.6c1ebc721.0.tgz","fileCount":83,"integrity":"sha512-xOrFOGVOsPrumVxfI8bdS6+YCPQpZHQ+6HaPFck6jSnPpAbF7J2mLYZ4RtNguFTlBJfSKPiLZCqwYH7zfgnwHw==","signatures":[{"sig":"MEQCIHNLZexSCol6QcMXMNqmY7TV0vRv+xwrkninpCCRRh2WAiBLEGML2eKg18ezKcvQq2ovwnnmUiQc3QR+awjsJy7yXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf8JCRA9TVsSAnZWagAAWAAP/jaNCHlM8ddkHsyscg2B\nUYprCBJaOhEYqmDSH788Dp1p8WB/mrbrL4dAmryfVK2+8HOLC78wo/tS3yWo\nWu+N0IKsD5cF723N0IDT3/O9sLTNY4EMGieoTNBWK8/pWDVzZpRy/nfSo+mG\nIwqp5RmASvT0fsnu+lE9WjMyykNfGh3RhxHb8Gold4zzoQbsnTJPWN3dJ6x6\nyTVL3NhxrygbMYxg518Yofs3bUToaPHqexX0E0/CMkiFFO48h57TCcT2sDgH\n2cpzmwOIhM07BBme4T6Pc8JX7PMCGrHvHzFNXxKwdiBiCvPvU64ID5K4PTYV\nDTYmF2N0nUU0+/wrQ8JWNInr4M41mTCI0rFeEESV6Etd7pL8BEJqjo/WDyfj\n5SJeVwvIX7M9IivhnJOu4ANVelZczHqAtnljexQbWE4KsHvXnlH/Wef0og38\nKl4o9bZvJ2ZIzqRCY79XKCmAglvLVoKUEhVvbH0X6D3ipW9shpxR/0tJAW/Q\n10D26GfRdPGfzHNh4yMdmoy0cqU5KjqjoB+Qi/cjxgtEbmo/WEC+5LLfMSQj\nA/S4HZKLAY6J/hTFOECx8hlu2yhLu8hWcxB8aIn5odwGJhF419PN6Az4Tc6/\n49aKDobmuk9RRLIQWWz5TFUFC3lS8SdDnexBq01tqOZJgqbiHP92C7V5iGln\nOIJ3\r\n=SYI9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6c1ebc721.0","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/shape":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/density":"6.0.0-canary.6c1ebc721.0","@material/checkbox":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/elevation":"6.0.0-canary.6c1ebc721.0","@material/typography":"6.0.0-canary.6c1ebc721.0","@material/touch-target":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.6c1ebc721.0_1587412744478_0.3262714071542292","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/chips","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c17837ef27924cf316402fca95a31adcde216da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.9cff4318f.0.tgz","fileCount":83,"integrity":"sha512-DL8pk94rKwrYoFaK0kEwm59IL0LLisN66qAnb6Tox/v5dUm48E50ArrVO5RCWKFRp3spUlZ2+VHx49QbG17+/Q==","signatures":[{"sig":"MEQCIBlO4UMk1ewjdvPGootNPbMJ22FHrjZKCkpedwsf3+riAiALSUJOtP6/o/r6coOvjBdF3Ul9DfiGrGsLNx2qfVVr6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengyLCRA9TVsSAnZWagAAmwAP/Ay23RBsU8Wnn88vVI5a\n9fo8Mnhmh21neaGlhq+vZbXoyb7OWSHflwHl0wmMbWAbNpF77nWsMl3c61F0\nUnQhJ01kIXcF+ohUrgs3c8AkqS+XbP7RIW3Q3aP0QVMDhQ1N6HexeR4mUKBz\nSJaVArxVz82BEcg2mkmIQIwK2bajUtNoCLxlMosaV4KCatLnesous2Vkj+uZ\n+kresnfLRxvbj+x/72VYiD3AWtx7FUT1XVzPNp49cVCKF8IeOYWqv3LdQMSL\nUF5zaEr/wc39TBXxPML7RP+fio7xIRKeMsRCP0hKxZDW9U3OvvHRGb0+IZPq\nxv/dNTfVyAm8rrhjY5DyvBdzQwo3otD4M2y1DjFj1fjjokpIJPNV5BMeTlhV\nk/iwE7ndJ+Cl+0sE5ndOq6K3kj/xqFOL7Crzz/ZG8OABAtACSW68Lbzxa7cS\nBNICCNgqEMA0nX2vCeODptoXuyAKLXQMAEYLHHJK6OK8mO6uhZIorfA5VJgN\nux0BdeppihuA25EDL2PLyZ760+rqEVUooj7Eyyl4yyggZ0mCZufX1xLFEA0K\nC8sx+DozF0lJN6nTYs6pIR9M0Seri4Au1H4Qx0boEKPqj/DSmWwmDRk1fowP\nCjN92GDzhMn1Wwo3pAN2WyO8urvkJMcHKv6AFXi6blMV3vAh9I+lWZhuEeea\nQRjT\r\n=rgdn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cff4318f.0","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/shape":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/density":"6.0.0-canary.9cff4318f.0","@material/checkbox":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/elevation":"6.0.0-canary.9cff4318f.0","@material/typography":"6.0.0-canary.9cff4318f.0","@material/touch-target":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.9cff4318f.0_1587416203371_0.7097044022699412","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/chips","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.7b4482402.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea764722bc12b9d8fcdb7028ee8dea06f4592026","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.7b4482402.0.tgz","fileCount":83,"integrity":"sha512-Wmd+1cgdnH0qQPenn1Y2WY4cmDVeDoSAKhZlLOpWqU3kuT2AloUFqb9vXwJ+3bnvDLsYJkojnAQEjRN3v97nsw==","signatures":[{"sig":"MEUCIAkPpLRp4QrJyfOcaE1D0bySN7PHQxEatei7EJ/SVWHqAiEAwahWxG14Liqw7UNuYDKsCm90MTTbK5W7wMGdIyiLAU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniBLCRA9TVsSAnZWagAAKLYP/2o56ucGwztidybZUhH6\njPjArS/Lc9nXfGTeq9DvQ4d/SSIoRKt35hYX6/77oGvywphihALZNfUK4rH6\nXQ3aBSug45PEzX51FULI3z2c4ZS+OLDEUZO+NQQKyuocA8nbKnzvHsD6Q0iE\nuZx2nemdjoG1hpWWqtiYGLQ1Bf/fiHSFLJnjKprjn7ZMjIpPd4fzD2BQeRhK\nvSAsA2Y2lxXdwYeUVJAw2ZOQnLkx+76ASMInQq5JYxSoUcb8U/qf/wxL8p8F\nhpGWROHWkiW+ds17piHv5udYqTMC9OEbGImiuSwk9m46XPUi4HSS+c6hARak\nBe1CPRcWN44XtWUysyt2dhBblCMF2miWjgUxsjqvTo09dORpkazzFMa6ZVOe\n+op69NQcp7i9/MrrVgOe4a7CYBmzbemlRozvTF3rdUwLa6s40dy7035P5tVj\npTVec9bc9sl3cNIKqsXFQA0/vvyAmpUIFEPYzEVR/8BqDOZ5482KISlJspFg\nfgSbpQBuVNuJyG7rDvmq5IYyha5t1VbDl6d//vp7CjqqJ4tspaSjMYmiuczX\nPBvu2DvK8GwiX/n4qF+g3vPGCsLJ5zBOGZ0PrRpYB44T6trQ4y8oeQj6fUMk\nmRwjGaNUm9RuBDQ9xuNKYxf5h3qOnpoT0GePjOExEdNVhRcaGpLFM1uakcUN\nAcKL\r\n=Z2c2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7b4482402.0","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/shape":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/density":"6.0.0-canary.7b4482402.0","@material/checkbox":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/elevation":"6.0.0-canary.7b4482402.0","@material/typography":"6.0.0-canary.7b4482402.0","@material/touch-target":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.7b4482402.0_1587421258983_0.13877082949216457","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/chips","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e408d52566cfe23f43ca42204913156a287b3528","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.deda86d8c.0.tgz","fileCount":83,"integrity":"sha512-6KDVEIQzG7QvQCdb7lkY4TkvVeo9Hx9aK4WWvRDTTErzF7xQkGFtMM0OAuqFmJl1nadma5Ln+j65t9afqzWvtA==","signatures":[{"sig":"MEQCIC+3XPsXa3pUESrio8pzr6rjk50ysox68hihlrtSi7nDAiBGy9QPG8hLFQeghUdmYpm7pXMzzRigFwOBgMC8k6no7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkk3CRA9TVsSAnZWagAAvlwP/jvEKNfJZjl91e2BBOx9\nXLb/qYMnPK9phqA6NKO7Vp9bstyKY4N5h/TAUJpeCR6gIHl2KVoqTKZggWXH\n3nA/qDh8oMz385TR7841zKexRXDeCOUa3mevomNwOspKeRJjQ/ii0Btl2q1e\njTiXB+K7olAOKCi/nq79FThlSA7i11GeUgJLizBa0K2CXevmr8FtpCiP2Sb0\nm73Dg+TY9ghN54gMR8cpQ3vh6kJKM7OvvA/U5l9x2QmDzS7Pik94gJzjWIT0\nEMN00IlKxPeXFBUfPbS5UhXTkv0sCa5qbcoEFn7TfQatDz5jX/s/S2+2F60E\nFPOzDJEEoS413KUgW2RSjLI6o/wGtzMax+uFUY8Cbxd2f02jhBSKaGNOa08h\n8tpWBZVMLyFOh5ffi5Zr8TQ5S44Yc78LgINkWyYvyfjgsK40yQLfZW05efvH\nVfpjHlzpJ0n14cr4jCS0w8rJ3IxFIP9/8R6ujTi0MYd1J4LLedspCt73QC0D\nSkTEpjX5NGa2n1T937Qe80r7W8BueKJJiN7iUh7LwEri9oQ4ayhvel0jguQy\nLCUlkXndnk+iz/Nd4RRZ9hAbhJFsykDc8x5WufkLkkq+PlYxjDEQ6xpR1hm4\nQaxvX6ymR0EcFeVZtDN3Fa/vXGl/ZMhE/UVMKWWSOUH008BbLjtp2Qb4bf3W\n4lLb\r\n=N0TK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.deda86d8c.0","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/shape":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/density":"6.0.0-canary.deda86d8c.0","@material/checkbox":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/elevation":"6.0.0-canary.deda86d8c.0","@material/typography":"6.0.0-canary.deda86d8c.0","@material/touch-target":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.deda86d8c.0_1587431735232_0.6550479194999792","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/chips","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6bc6786480746c4a0f0b645b3f83aa07439d297","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.d10412cb2.0.tgz","fileCount":83,"integrity":"sha512-DhEBn7UAiIsvT6VyCyDEI7JvYlX4TKj0LfFXMsxYwwH5NWyaLnxPNGAGAuy3sYSLib9uj2G/s0O/2i/o1CAKpA==","signatures":[{"sig":"MEQCIEnyMJeeCpUhi1okH2ypYDq1jFVgMKm3t1s38w961QgIAiAeMXNVNyhB4PT9X1wLqFzQkg8MhrlfPtGTLyXFUeqZ9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzkeCRA9TVsSAnZWagAAAiQP/jVs6FzYo9D5SuCzQno5\nto9wbWOX+Wze+3XHBF7ovfhG4XcFgBHs8Tpi8YWeBM8QpFQLHz61gp+G6G0l\nXEqrjl/kHa5WCnHtl88UCOJpilJMzWtZnmwISkLw/EwX0SkI+r4hqthEMgRS\nFcUF6fkYNhz4Io9prgnc/8WBuhFm4w7TKEua+p83DNan+MUeTbKXnMu6cwY4\nQYwjTV135ILYu0anCOXjVHQc+dEB0ZTGADg5P7PqHpL3ihqZ53+TPtPqNghO\nb3+Krzx/II6NL1KKjo8+FC6C0dErlunuv4Q88v4ja+OoJVrghA0gkGRre01y\nkhGIc1bwu55l4BYiAlFIXABLQYelKm9yZHokOQlSFSr6QfW/B6LQJ7ZbN9AZ\naBwdexd5UGXe+8ISs2zRYIj4vp6CSCLozmpnGifD6nyMgVEE0pXyqbwcX34G\ncfQd/Etk3LO22joFBWTMO7FdlBHQznEmulweoJxuNv41VO4fCDIrjjFmDxJB\nVfXdJ3vYMFPc301xP2ik0WbffYHDcwFCPTD6glkWZwcl+DPNjXOzJZN4EWMP\n76xPiD1Cy/nS1+z6F62akGF/yaEZUqHIAQC6Ke6k0UYnTNm6vAYhBuIDb70d\nwPcOErhgXjv60FipxZevRjXLboiUvRpTlXi78X7x7DfFwmhpT8jYCQkNrVoE\nSfZS\r\n=lQ0P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d10412cb2.0","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/shape":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/density":"6.0.0-canary.d10412cb2.0","@material/checkbox":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/elevation":"6.0.0-canary.d10412cb2.0","@material/typography":"6.0.0-canary.d10412cb2.0","@material/touch-target":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.d10412cb2.0_1587493149646_0.3571392927533841","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/chips","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.c141801d5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7a5bef4360b5c1926ccd829a5e88b7458c43b0c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.c141801d5.0.tgz","fileCount":83,"integrity":"sha512-cmMgMGhKIBCOPQQEFxqmPInNxxtFeWE09gvDs9wrJwx0t1vyKqz8HW6RcEnSksvjPYcRRGzOu6mzV2qs32+zDg==","signatures":[{"sig":"MEYCIQCdvoAJotTY6LzfsrjugENgce/ihI77NoOZojeQz42yJgIhAIBP7f/8Lguq7pWGaGtOcSOU0wsUJbTMNexd2FZpe02C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0y2CRA9TVsSAnZWagAAs1QP/2dsHuTIqCnG2u4S3c4H\nQg1hpk2M/yCq7jlY57FCpylxENk9cgErH+0qlBCwKyD69r+Jtq+WaFAp+UIb\nqsQRG+kO2SXidZJxGFh0JBq/nXNhOrxQp2+8qvBbDsC+Tm3mibcicvYIn79N\n/fQmJfGiSjVH4JNL0TvOjaxVGQI5FDsPrPzg6wj+gEVlFvS6mbwXw4PdGZIP\nm+hg4vUo3zj/kt1d72viStZQQEITHmfxoiqgpGEuzgMypZPTYh75fZ2xEI1e\nNPqHNYxidUHrEo4yZY2doimhghcOkl7aTgOt3JunEaj/mkguW2M5pHF8y1vD\nmBM//txKjDMHKOe814BvEQnrE1qPmA/RgvNIqvSpRb/pR4zOM6Jev/DkAABo\nS8DCjjWJw2htZlbZCsNcNutf1jwPJQ5R7GiwvQGzlB9cqezKm47UK9jWWCoU\nP8lvprpBO512zCt2qSUSqvgLQ5ZCXWwNf2FyJVGOnAEtmdJ3TXhgmmUuNBHh\niOWX39zA8YviaTsL80V8RdwX/kJpmYlI+CNm2VrmUy1SFZ6c5nFbfbTi9lud\nC2QyU3tt9V0+Z+rE8Pznwj89P/ep1e9Xn3e6XZ+K+HgYXJH9hZlXV7sTI7qh\nwPYK1qnbQKlF+bkhDdVZVeUf0TJaSVvE+QzU4wCf9wk08Q1xxJxGAVd1kUat\nu+VI\r\n=eUWZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c141801d5.0","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/shape":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/density":"6.0.0-canary.c141801d5.0","@material/checkbox":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/elevation":"6.0.0-canary.c141801d5.0","@material/typography":"6.0.0-canary.c141801d5.0","@material/touch-target":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.c141801d5.0_1587498165659_0.24828330404170895","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/chips","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aa2fa7df8b71bea2b8234d7f6d27d265f824abe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0-canary.28d10a96e.0.tgz","fileCount":83,"integrity":"sha512-3c8GnvyZGdV1owNRw4GLDGD1lvBWN0He/gKjIOPQiUJ5McODhvNEKMQAD6K96PXNMl7o1l/1TqBpmgisLOsE6A==","signatures":[{"sig":"MEYCIQD2IijQ7pzIWzNKVi4J8tAyA4PPjN6ywc+2jslJ5Mhu+wIhALo4ACJV1zM0bA2BgP2TGkmELS4mzGoS3W7AGN2kYHQB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMBACRA9TVsSAnZWagAALlkP/3CDswiaJJEoRB9dC5Vw\nGt5GLqRCKUc50Ngk41Ebc1ADqclppgFCJLXPQoZ5I33swFmayBObadjrK9W4\nO/DSxal+J4wWrXUY8bB9u3AJ9UkN7B+laOe84xn5pMvF5nEfBR9/rknd8FS4\nO94ORYQ5k2mHYOS0hGu/7e2N7xg2hwkL6T66gsJ+dhWOxUvXixSrW/SjCcbP\nWMdLVvEoX8mMOZA0ZFpKK3TNcaU+UspeIAg+nfjtpXD4uFS8SCLAY0i0MXaD\nJrDjnaHItaZKN443NmurFkdSyfOuWP6+WmQFmNl+3e+E+uwwccHyHkp6BrEF\nEdfnHFE6Nw1FRkEIlhTxxDZs7txLOMz5qLqrZRXJhNQsFWUUWaG4hyNpYnaD\nDP0VwgrCjAhTsyCseYItxnk+MSePPs770+LEuJziYdlHft0C7r/aq8dY5mY9\nOkC+w6QhITN1iiN2pG7JQBoGe8Bn6y9jg8szwCvsfMgfZwzfjbrfPEIiGlJe\nvrSh7NUyX85iaOO1WaRq0zLj/wJMlZnoG5N88+4TiVWmG5z6bdtR8vvKYJto\nuJw+fxbt6p0ICZHi1BdTMOCL3AcD3uDdrfUKyexteUNhU4LpTUsineB+rIrJ\ns7vcCdnrX03AJLM7kGK3VfLjOVffJ/b5Z7eDg0+LFhnG/WC/g5sAnTPp1Ntj\nHsYm\r\n=FEhA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.28d10a96e.0","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/shape":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/density":"6.0.0-canary.28d10a96e.0","@material/checkbox":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/elevation":"6.0.0-canary.28d10a96e.0","@material/typography":"6.0.0-canary.28d10a96e.0","@material/touch-target":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.28d10a96e.0_1587593279537_0.752672023190412","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/chips","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8540808be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83dbead5f26ca88b85494137d33a0f2daac3c3d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8540808be.0.tgz","fileCount":83,"integrity":"sha512-05LGUxfFSEvj1lTecFiWrcre8uhkDg1uQth4k1ZImXa9tWaXae0MxVxxu3abcSzy0I2ApZFEETd6ZPzShfnrGQ==","signatures":[{"sig":"MEUCIQDebD8TglgKc+3WExuGVXtbamozU54yeXf044RFvVXMXQIgC0zGANyCRDzPh7UeKq2XWFQrow/yhe7ckZ8+RNb3bmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":881013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/XCRA9TVsSAnZWagAAuhgP/jjmoZ8e+by5KAVUvZy9\nvOdpFhf4LJ3HE/pdpZj1b9BBUjC79ghddiZ7CZG58cbRdCK8PbQNE6zwVZEA\nmJkIMrnAQmfNxDwefQXHoeeIe6m0n+0SRpnbDGHg8/kIsFOp7pIw5D+n5E2F\nyiNkqsCidNIg4gCrB6hGdKIhIseAs5DLpm54nc1RApb4Ml7F6n5w8I/dkntm\nlOUTCIBPEgRerboOb/spXddlLbaV0roL+LL0jXZ+t4/Hnaehv/R3CYFXlbJ6\nV943oyeMfolLr8K4CBH0T0DQsVfLpdx9sg1WBUCq3K5+5qpK1k5XJRR7dBRm\nb08Dm4yJbaQJSldg/fms5bsEgfL47RKjDEY6+nvvQTWcCLRPAqFc1bOvRPPP\nluwU7LYG0ypaBLZUfrOeY6k0R8vCVZrfg7xuBs6TNm/DYnDFx8MbHF1RT6cu\n1ZHeHNMmVrwY5q0lI0AemZbE1EQfB7zXfhkson8r8CggVD7cVAN07CS6tZme\nLikDQqMncKWhQ+QYzgAlXQDvUvpwGdqV6Y+Czo7pWJ2GzVOSdaxM92s7C+zl\nBL1LahaOAtFtjm4QCTmVRRc+1HrDIn5h8gy/sBAgZbcnFE3SIUIfFNM55ivZ\nsPEClCOZC12h/lWGlZqMK0Y61E5Vkvt9sPU6kgWYOp9P0Hz0j0nu0cPWO3+9\nDTOt\r\n=h7b+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8540808be.0","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/shape":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/density":"7.0.0-canary.8540808be.0","@material/checkbox":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/elevation":"7.0.0-canary.8540808be.0","@material/typography":"7.0.0-canary.8540808be.0","@material/touch-target":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8540808be.0_1587662807066_0.6331171619564089","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/chips","version":"6.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@6.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b60a0d5767ca34bf8529883e47da8f76aeef44fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-6.0.0.tgz","fileCount":82,"integrity":"sha512-6R5ZG3hNGvBN+YeVdB1KB1M1Axb5n2051g0QDWNWTnIeZw6+vONMnCx2Wn2WwLyvIXNaFZgBi5mhk5GO+eOd4w==","signatures":[{"sig":"MEUCICWddcYNAXdCpPoBZ+siFzFkuful075Fo5DaH+lODlo+AiEAzsYvlrAtHsWUOzh9QQhyvltusNSXtBSJlVjNH/NT8MA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/5CRA9TVsSAnZWagAAjNEP/1NW+Khx18VWup/i6w0z\nxsCCXuTHbQp93eRNpVWC0CjidksKE7fphNbLHLCPzHUHuEezwRuLD9uV3YXu\n5mEhpfjpMEaylp8Fg0SwOvIPhR5rCDu5XjalmgYPbdXz+bLzzi89LcrbLDWl\nKDaqU6E78XP7/vdC6kB+A5PgMZzt5jgr9aG3OqP0JVBAx/jKKcRUJWZAAQp5\nXtMf+oLIJLbvN+5sRsWDW6lB4MQGdJBfIFZDrcFzmb+nKTvD5qRGrDKT2nKC\nsxOInNjGqBM/txc8PPlLlYSm12wojH7Mk+8Woo8KLT4MHjN5+uE6Hn5r/OwJ\nP/l3Bl125KrCrTKtnB6t5sAxx3IrFlbxxw1e02wSR7g8yRsy6OMkN4VhxxTm\nEBSFnPsRmKGmahBRgdG7np6pPlJ1TcCxNoPjlMr1rNh+Dg0jeiei0iseHerq\nmq1K5cPaYC3QEgwTD9ZC1TjvFPXWl4vKQVQiTZaLrEEFrgKI44RrsXpsY+8k\nmFO+0wLM3CYTSdSJ3tj8TJH1wON2ocJID5ReuvKGHf49HwLs0QszGOu4C6mD\ngcq7VvBM8BCQMBZewnijvV5hTCK9pVsTkpFBTf/XRYtkh6S1R7ofua4tAK2n\n/NmJJI7qROxWdACv83VbtlWx9LRDvOjTVZoLLA3goo7OE7BfLClJ/w3WeVH+\na/V3\r\n=H13s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^6.0.0","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/shape":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/density":"^6.0.0","@material/checkbox":"^6.0.0","@material/animation":"^6.0.0","@material/elevation":"^6.0.0","@material/typography":"^6.0.0","@material/touch-target":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0_1587662841162_0.09639170449672085","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/chips","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.2673adb74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53553350b3cf90d7663fc96cd02eee66e7afaf82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.2673adb74.0.tgz","fileCount":83,"integrity":"sha512-3QoVv11FHA55qsNzLOoQBJOI82gPwBe2h+AxvtgHPYCM0yeI0G5cQx8Z0HfwuFEml599EuyZdthsJGqoEuK34w==","signatures":[{"sig":"MEQCICjPgzliaBpo4D1Q0TvYO0PQ4GmOiKK+ivEyWBWzfz5bAiB1wp7cXSgPYhY/043V7ZX81WHV4jHHBWAyPM6zTKH3Aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohq/CRA9TVsSAnZWagAAHJcP/jmlXhYjnfBlyIwqo1Xc\nGKO701RgPD4wmD8SyT3P5ylr8D9ay+XJn3Csfw9AIJLtQujAhIoDlDFkbmTQ\njyfMseSwLM9Z5HT7DvYD7eSHJ0RL4V1lycSlGAXCRisoX1tHl90mZvaDMbPN\nKBGF5YRr2uSxdWhDUc+zNAi3NjmY6kRNBAmcPiT5bfDVCnC3EVhB8uX1o5qY\nJqrhBOLIgex0gHlo9YrW+Nxe2Kjr7tWh2PYHDkj3dSIjZ3xCyFDd9PIQbLbN\nsV5+KZ09h5BS9OAJFiUFeYHilAvxRTJSrmFFxKD4ISEbgSFC8G5WZG6RGi6B\n6/DESsm3WJxgIcSf62uCccwfuC/5Rz1uqN68yBsvrRr/GLVHwYFUJD419vYP\nIecyV4uJj/hWC4chjBHJepRR7D3O08d/aLDm4F1YKALAeoNo2htm4+ZRVavd\nYq3doLCkc8TnHKnqEbaNguVDW1F1ujv2FZWSSA6W4jOXtzSjG1wXqQ3/ftWC\nzSrkw5W/wK+1eaqo2Tv0KKcz+qFk0uvX/LhQ/4AMG167WTrIuSSyVbeKZ623\n48ssEZZf5Ildx0c8yIk0D8116lTO3UF/QC2A+QWNeSCyx+R4cvuf4moCg6s6\nWYqwfuxDDBPbByypRI6O9S1aLsLVAKJYrNVuG/KZKwdvtVv3xuXn9H3/llV4\ncXgs\r\n=UrpI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2673adb74.0","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/shape":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/density":"7.0.0-canary.2673adb74.0","@material/checkbox":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/elevation":"7.0.0-canary.2673adb74.0","@material/typography":"7.0.0-canary.2673adb74.0","@material/touch-target":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.2673adb74.0_1587681982583_0.7016793833363644","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/chips","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3cc653febc1b8427c2f5c6fa650fb7e03278916","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":83,"integrity":"sha512-hRTQFKfovd/y/26TnCqgWzg1SiO30unUovufKpCIupguXXgCMmTk5H0uKdaPwvzeXw/8PhZ7nbQpCLI9mlsxOw==","signatures":[{"sig":"MEUCIAeLLE8SGt5+4QrhNO7Bq8VYf79fM2Ki8q0vIGQOKGNdAiEAsbLYLyQVSbXxZEV2cI5X50fhbCj/83n+L/4ny0HGNng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojEdCRA9TVsSAnZWagAAm7IP/ijFcby+Wka40S5r1XNE\nVRdolhwauNzGCLAP7w/PRFO+iW6pNU4t/Kewjp19enMumQyxwuv10McoklBl\neY02UyfOj12cFKPRnLIWEh+ojNTRBDngwAdr/NUhmUJY97mUxAWmr1bo8YV6\nQ1Ks2DST2iTExgi1HsNM8voEvvPCFLRmtvZLwkLpd/eYbQKs2DqJD0R1aYn5\nY/8G5GvoVzPNUMRCvXDWpEAd1Pg65AgpfXyFC0wHzL13HbG1tVnxJz/X/Eq0\nPnX9GGlW9R71rF7VfEb1vhedYUkkJZa3Ki4HBbKTII0aLhxgvqAF0VCmtGbI\nzkeRxQxvYpj7YO391RJuyT+C7upkabndOytHQp477B8WdwibFHIcm3JjgY01\n7K0sQYnCiqbb9qB/az29aLvhoTjw0fJZf9B27tEgV/M9JRu7Z/VTZDi5jA/1\nyPo8ygSMxtyRxxtpBZdexr5eWpAOLvaXQx21JdNBgUBhK/mCJrk8bt18rZew\npXJ1ScxMIEQXWlDd4yB9gbo3YtM35gXiXNLr92VvPZG3nUiYYXYaKQB1l1u/\nBnn6je374jX2yrHduziJB2ExRkubYVDSKwXEn+OoReGxNfxjfQ5Q6UZOQOlf\n8uzsGV1/6UdX3JYagCZhKmCdOyPre9jQScxQHQKo94Eh77A3aWx95O3F1tJ5\nLff8\r\n=rn1t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b10d0d7f1.0","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/shape":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/density":"7.0.0-canary.b10d0d7f1.0","@material/checkbox":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/elevation":"7.0.0-canary.b10d0d7f1.0","@material/typography":"7.0.0-canary.b10d0d7f1.0","@material/touch-target":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.b10d0d7f1.0_1587687708985_0.5420586778805796","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/chips","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"898d79f25147e8b8c688632ac6518ea5b7d9dde0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":83,"integrity":"sha512-IEsjd5peQ2/9AFhsnMhxzKw55dLxCQtAZivUZcP6K7hCnLtNekogFWr3oYfis+HknH3wk6+i96LC1RQgRD/o7g==","signatures":[{"sig":"MEYCIQDElxvxL/0SGZ4Pn5c78QFP1fnl7kdKwzv/a2+TY3aX5QIhAPMfFPh6YJVk7CHjHGiORUIb7ll+Ql5qKquxvXR6A/AS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TgCRA9TVsSAnZWagAAiv4P+QGp7aEbYOJuLpbpFSYF\nYXFg/zw4wsGcRZBkLzhaquGDdDk9k+tSg2kmIisbDnqCVhYqT9TcC2Ye+wOI\nPDdlMM5OW84mVmebGy8JCCUIZJlTYhNDAthxV72TlQsvySrfgXQcGGDDQ9px\nHO0mySEcaKEhZ9CFrpsvSESv/xIOAcrHcIwi/ioSXprcDQF/piJbjwxIyXKo\ne8FJiMQHigERGGDeGoxc/kacu6eUaS36dN1qIUhunRI4f6w7VgiyWeOotmIA\nEhkB8HSOWU01dr8oYrQVSFngb7uMexoR6VeH4ZbPkKtirs4ixX5xPrZuQdV7\ndMmim8QK8xCe9rOnpqFd5OVLNNn/c51o3LsF9usdOadLo0qUqr8BQsP5gkLT\n91bVHCYrUsgTP9nQiZGkPXbzjcSQtrBCPauwFWlgYo1p8KfIlxkB4moFUWLP\nft9l5nQ00jpd2ilJroxdzXmYul0H79BXkXsQ1eisRKausWzSeFu+Dz0wgFee\nXgCtyNGuzYlAQsm0A+o2wpXqg+ch0NjRftpUOEDcPZqYGQZ+nrIB6cnbDH2Q\nJuM8MMaKa3LqxZlDlvZ7QRgUwncg5KPfk9qNy7M/mUxWcRn/Qz+860rHZ30M\n3QLCJBv4jauq1jxR5mqy298ioO1eSw5+3mARTHU+r23kyC+WQf/SngFrdMo3\nLNvu\r\n=YjK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3bd8c1bac.0","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/shape":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/density":"7.0.0-canary.3bd8c1bac.0","@material/checkbox":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/elevation":"7.0.0-canary.3bd8c1bac.0","@material/typography":"7.0.0-canary.3bd8c1bac.0","@material/touch-target":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.3bd8c1bac.0_1587762399490_0.5588673356098344","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/chips","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcd58885e37fc3a4c85a95c43c7b5ca878c85e77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.b83c8dc22.0.tgz","fileCount":83,"integrity":"sha512-QiO1FOdAfQWVrst/QjiwGiP1LFDvS5XJidG5QIu+KvKuUhSz5gf8BfMN5oGVPEle51pyz8lDI4xBBS5obhZ+Xg==","signatures":[{"sig":"MEUCIG24RaEhFyRtxnO+G1djPvqUDLwWzNi/5juLl5uH63HiAiEA0JLqoji5qZOvHjJz6ZwsnXlWy/uBpLg8DnbjEMmOWGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1ffCRA9TVsSAnZWagAA6PwP/0vv5cZF3a0DsK8rNlgZ\nStD9/SsbbPozeb4tT8Z5KNB+n96nA/NoIGj/Vc1m4eMbcvP2oCfV7CAhXNic\nx2C4WZK/dmJYjuqpAe9/HXJzsC05r275jS5K64QSPRVw3Gxqcel+gnDgqAVt\nsud2gVxHqgKuNozaPpImZEdSCB4F9FaENv5Ivjgirl369UPtCkoxxlphVSOU\n7Du4xwaT9FbfTdHZHDquimXEffS8auGfLsFnSLrOlbcwVcRjOFEdF6IlZMN8\nPXeFka34L/J9DHG7vjQEYevn1oOQZ8Hn2/8/QSJru56h+E3f0N5W2gCsiGdI\nCa1bAT6ZVwNWs2X9GhJ1nAba6mGsrSLb39V0JkDG0rlDlt6O6e1TQ9tntrm6\n4OKPh9SV9Zi0lQNSMi+ESci1xrj/qqjA2ZcpSnJd3LiprLr5X9tYqz18h5CC\nT8dM67sVkwUJCFiJ8gqe3XjRqqenTYiain+vjTLVvanGm4ToGr8nwrH8h1rU\n0r6jnGYhZOt1BU8Kj5MzBhyhvFpCZtcQEzns5QsxQ6bh3IPNhFu1UT/3x7ln\n36oAWPVvAgAKZrILFHea98fVDGYoa/ASMJmCmHSezgqxszQybE3WKZD22bSl\nEJOQ/P54HdrQ5ErKVr1eg6om1pugq6OyizyrbSqdXZTUJH+E55m3XwfVl+Qx\nUHuu\r\n=4vJO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83c8dc22.0","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/shape":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/density":"7.0.0-canary.b83c8dc22.0","@material/checkbox":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/elevation":"7.0.0-canary.b83c8dc22.0","@material/typography":"7.0.0-canary.b83c8dc22.0","@material/touch-target":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.b83c8dc22.0_1587763167291_0.9445886035680691","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/chips","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3458c588542e10e801720ce877c2a5ff11d3db1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.1b3dd846d.0.tgz","fileCount":83,"integrity":"sha512-o+lH0X2wR98YbBJTI+d6CM2BNQF//ZG4m5RMG59VlSGRL+/Lt604Dt31L+cseGTJJKHjlGxg9UN5oOYjpuouJQ==","signatures":[{"sig":"MEUCIQCoExM71zAUK9UvkXwoNwyBcRQHJybgGqLHz0X1DQp7oQIgNzfC3b8hAKU4JP08m5lIO0gKHB2T5liiDu301LcGzyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fxCRA9TVsSAnZWagAAICgQAJYIrvhLgAtYmTlCpflH\nVB7ZqQO/yt9MnOzhfVJ19nCbQjh2HRd8EQWdQYkartD8WQYbZ8Xbu1DM/muf\n7LkY6Rs8nya+bBUH1O3S9LIlIAhUNsbDOCRoGnqOMp4ax32hxHDJrVB4jEd5\nwYi4ALvMqDAQaK5uxdKzEX8EPFh6Vs6rfeyJXDF/0S/3tLUpowSZEwp3Y3YL\nMtQQAop8cTgHrwxH6DQqDJ6yC3JXk5R4L3mZbZYQV2A8zFSoq2WqG/Wxe5M2\nqYKjKTm6k6CkHOzYip42k6cvCejKPZGhAjEtCu46eHejH+OGQffPd3EEG0mR\naFK/X4jwfOQkbjzntLgqHSAh9R5ttZS2JN4mzJ6tirNeV0wdy/TDQdeWCW0U\ndCvnx42dP6XhVwIM7kesej9WTN+c2jUq6ygEL+WgfQ5umbNzRhEvLeTXIy/O\nGpxQoBvDHLV+BFluKmjxWlBdpAV5ID0ZuwPtrR+k6ZK5B5IR7bEq7x52YOJb\n9a5YWCPmEdt60gUHXjKNsu11sSYmp06IxTiEP5YZwkTmeEAuaE9yGSl82sb+\n1v+CMlU0pD7/AxcAOLJ3y4/Z4UcmQlyf9NiqAxxN4z05uhfHLQBLQK/hI9y2\nzlraN08xfP1vxiRPUfUn4L5y3HTaVLzTnpaDtEEhkEtKlHyWdkWbcnUULbjN\nec0g\r\n=d9Ve\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1b3dd846d.0","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/shape":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/density":"7.0.0-canary.1b3dd846d.0","@material/checkbox":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/elevation":"7.0.0-canary.1b3dd846d.0","@material/typography":"7.0.0-canary.1b3dd846d.0","@material/touch-target":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.1b3dd846d.0_1587775472771_0.2319353514253817","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/chips","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.29debfea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcbd4a809aa9067c9008ba8bde1347e2c81e2672","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.29debfea7.0.tgz","fileCount":83,"integrity":"sha512-iLuXCk1xjBHSC7VrwwJdf25TzX9Ynf2ga1Er5JgUIEbkpb29u7mEjO4i7G+Ihl3dKgiTY6eIvmUTwvbDViKaSQ==","signatures":[{"sig":"MEQCIEswI4iTaTdfvm7roz4e92AWnfX+Rl0OnsqfzBtCHJ/3AiAd0lTCtYmIlxRHYJGY/bt3MXMnnZ0CxSTkbj20yjPUXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptD7CRA9TVsSAnZWagAAefgQAIJm0awDovFQmcR8G07n\njth/9oPMUTePnwcRgK9yLgLIiHTmp92S7o9T4yCS7/Kp3q0QOMuHpPcJX2OE\nxTnUHUz6vEZ87VT/cZrZlO8GOD19AP0lcozyi4VMy6ebdXLCeFEH1A/s32W0\nd5r8XDz3zGGQNkucnFb6/EfJPx7hZfgiArNlL1Ybnxgzoy1dzV9mYPFo2hOE\nhZau1ED0mLbhAWEQHNjq9Ygo12axYqRaZuc7MDb8dtmqSiKwJ8h4u+61T3ZW\n+SZlcQ4K695y1E3jmmMLvnrXU25k3b1C3ZCHo4wF1CCrMZpZuu8KAkS0U91u\n2XXKyd7a2Juy7gTiENWCaaVZdG3ovP/V2pNJkLN5OnRyKuqN88vlTLYeR+0/\nrGHWHZAJPhDpM7zW1yam/OK0QDBWJwDeDLNxqPeue/0CcYvFPHA4+kCJ/bXh\nD19/2hMmIBXmeJ/HOfWII6ZREU1+t8M7CKXNSnuSnDGfbdEYngfu9yjI3T7A\nrZGuQ7Ubw9F6Omdu/Rdm6byNwE/GQbShAie4ET3YDgjh+7eSUKSg5CrM0cup\n0HiX54tnDlI9+bdH4WTfGjSR1TZnakPiHDc6QE/qr3f8mp+yqkOMsFa505bL\nkhWg/xpE3eqFZ0BAxHTUdQRuKIF296EnBkYnfW3IpoHu32itOcbdHg2naGeY\n64pD\r\n=siMb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.29debfea7.0","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/shape":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/density":"7.0.0-canary.29debfea7.0","@material/checkbox":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/elevation":"7.0.0-canary.29debfea7.0","@material/typography":"7.0.0-canary.29debfea7.0","@material/touch-target":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.29debfea7.0_1587990778659_0.7454422550416584","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/chips","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42a007ecf37bd2e63fc6382f145af2307bdbf406","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.28d32f8e0.0.tgz","fileCount":83,"integrity":"sha512-TWearx0FN3AHvKmOMNglb2vPumCO5Z1Quw756TjSsGY0OM/6DYUzJLdgnm1szY6uoYMKIwJZFfNkeJOPSRH0gg==","signatures":[{"sig":"MEUCIQD8xjn+CT9InvVHcjbwrS0Fq/rVcNPMTYGdrUgWEtgGWgIgatMODqOOKYQoP4dZ+BleHaTrDF68beoLSpUyWMI6364=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepuc/CRA9TVsSAnZWagAAZdAP/iMF3iKXqGTMqywsqa4T\nlXFr1npVU3U3cz8Lj5fJTDGszyhh7uoc2jaH4n7IfRDOgTe+7M3bLeXYqSXP\nvSlMR9yzhs/2sCErGlvBvwaULCUanS/7hQaY4ESUriLlCQoXbFCOZNTvDlvw\nsUdyXApePK9X1VJOp5Marb5p/st5HDzSwUcvE0BQGnihfLUMjETcsUo0LzGV\n6NW6A2c/Swj7sQtoQ8salFFz3enQaWmWXOT7oLQBhaq+GXCofJ53pGvZHNG1\n7rP/7G3zLOMq3sYortFQdL46k2cAoU4yYs93qdD/lCxd2V1uH5bvbxp51Aru\n/KxqEtGh/xnmhuerT49obRhia9cPxmwTDZQZYuBlTjOlLKZK1zDLI0Ldo/No\nfSeTRGFf6cgCLQC8ToiNEZwSDiRkwjm4y9FabhrxWWdEASgtoNgfNX+jvMVJ\nWyG2V9Cl62go6dN7SzHJZUmYLYDSVFDgSqsNbHn64/FnudTrdGXeA10leobL\nNHqIfly8dski4bGuN/4Hq6/LD+FptkH2Bg0YGkCE4ak5kFMCqdzpWJjR/+Aj\n4MnbfG4pCpLbslTfXheP+/KuB4FKrymLaulW73RV34q/9D4Q/wlOT+xRN8nK\nIge8qTnKLIo/7v5ArYJ74dzrbcsrujKbbZGFlWTNo0FTpT3WdzdPOoNRVR8H\nAp2G\r\n=xXLj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.28d32f8e0.0","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/shape":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/density":"7.0.0-canary.28d32f8e0.0","@material/checkbox":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/elevation":"7.0.0-canary.28d32f8e0.0","@material/typography":"7.0.0-canary.28d32f8e0.0","@material/touch-target":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.28d32f8e0.0_1587996478601_0.15121100728031145","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/chips","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"041cd29cd2498ae9aa2c479dba3fb89756f56245","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.af71cfdd6.0.tgz","fileCount":83,"integrity":"sha512-Q9hR3cSHRUDFrcxmshz3T2Z/UW/6IP6VJBu3xKSysjQqAQDlskjG6i7751FG2NrLWynHx5ZAFGRNcasg2Hkh+Q==","signatures":[{"sig":"MEYCIQDe2ZdomKrewKqZBaMk5LLE+eTNYUJ34nSC+ZKA9PNs0QIhAIegKBPeTpXzUGBt6SsoESGYyaKGXu2/K4aDRxtIN53I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmsCRA9TVsSAnZWagAAE8kQAI52LUKXLAefzkl7Vj2F\niactv9MtGkK+SYc9Kx7Li062mHD3iM85RbnMh1f0FxTZ8qs+WQWsQb10+deD\nun8SS4sV22R5GL0s6gNksfC0rcEmhMbxobgeGSBtZxIxsIzsjOhE27oa5AT8\nJgMB3xqTkuZhpWJQB48T1j+Wg6OX+nUOCtAENbX/ejIaiBciqRtZRqQzVzRD\niAWcVoo/e69oSI2YM6Z6EcbVeCA8ykf4y8CI7NlILbutir0OdlOnAx/A25zu\nxvE3JPJPCtKyoqJYF0oJyLlrdEXNZTxUu3D8syzVVTOUkNuVJ59gBDprp+Er\nio5ZIevHq2aFTlWDttM+yoCFn5RjYEJodSh16p0qgUClJHL+8tHPD81deh6o\nRBlcBSnlwF3VNcKwh7y1DI822L4iKCi+bSQK3jbPsDbUJNq0mHCZAFO5jAIR\nTGKckTKn/hLn6uQNbosjIoWHc0EVvMbXIVL68xEBvkG3ZtR0h7uyA8i6/UER\nTtE2qjOVQOK+p5WfiO92FYLdt+gKDoUSOKpbWpuS8pde97qwJ8aZSrkjxQCB\n1/UEIp5rCY3SYtzSyZ0zKHqzHxpohh/y5KAjcrsKRg4ITtoWwdojqFgxFE6B\nCKb9i3nsEzfep7P67g0L5pXaVaTmnADKo0vDNi6y5kWQcGZgz3Et7uYCUe8G\n4ERI\r\n=oPwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.af71cfdd6.0","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/shape":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/density":"7.0.0-canary.af71cfdd6.0","@material/checkbox":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/elevation":"7.0.0-canary.af71cfdd6.0","@material/typography":"7.0.0-canary.af71cfdd6.0","@material/touch-target":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.af71cfdd6.0_1588115884021_0.4894867540227468","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/chips","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba8c22ab78580b67e0002176a242d2734b2f9287","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.99d2fc961.0.tgz","fileCount":83,"integrity":"sha512-70y1fqJyOFBmlxHvixNAiEs4G997hk7YiokM4c34cy2Dh2diyQV3t2y5GshCPyDITX/rUI7KxdJmwxwSi4OO2Q==","signatures":[{"sig":"MEUCIQDH4QJGcmq8VspA6cbm7PyakT+3RM3YYlNXuyRiWvzNEQIgSZQjUrZXCOfraWKJCeA+Bp658IbmlzMYfhGcMJtaIwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqbCRA9TVsSAnZWagAAH90P/2bowHMrPBqnI9zJdG/S\nVCnaXenLTr7UJ127WN2MjkzEZuC9UoY6oufgpVtcH0OQGiglwx4OrhkxR/fl\nwmoDh4x70y+81ATmkqpAg99bYdUKSNf8Xl6Zgc5G8RumFJ1/L20sg8HPWLiO\nTXgfnMt20/F7neNGOEzr4VxvdRMbHP5mbg+HHmZCeY45CSaEuAB5bDAXALj3\nA4KfO82aqa3hxpbsbPa86HmwdXdQ+lQS8HL5jBJgW9xmzHBW77rQIIRYcUJp\nQClhsyyAElFhZu3DZECa4c+SeODqAwExyQrbWCsJr9asTUHjY+CaJQy7uqBn\njdhB5XG9ydeYlJi8dYklVZwDwUlstdY0pF/Vf/rxpM2rcIcWYVBvjWxaXYX+\nBQkPSurRLc61SmGtajGcPtqay95mSIC5rgcljhLnYVTAbwG+82xUCcaithqW\ntiyJDWbh8BfpQ+C5dlUwLt5Zxgvai7o5YJ7sN3wBjZkeOXWfdEVJ/nq1utRe\nyB+XIIBiEodf4wqW4pTZ5sfB91MCZCywigtEMcehlrhs4JPoDg+H8d4tQaaI\nTP+4NLx8b6ECnGxWwerDQ5e4eFNn5NnTtTvyngtUstRSE2+/xNruCfCtKyCe\nF/jbaoZif8eJsnJL+6smIyBMjwmJSjyy8KGRP0eVbiqbbRm6+PkZeFJ/6HSz\ncpgY\r\n=v4gr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.99d2fc961.0","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/shape":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/density":"7.0.0-canary.99d2fc961.0","@material/checkbox":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/elevation":"7.0.0-canary.99d2fc961.0","@material/typography":"7.0.0-canary.99d2fc961.0","@material/touch-target":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.99d2fc961.0_1588157082639_0.18445033310964964","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/chips","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63d848dfbd811103ca6fe409b1bc7fb22f31f7aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.0e052b24f.0.tgz","fileCount":83,"integrity":"sha512-b0Qgy/C7hOv7xQBmvg+KwwYD0PMQDYetbislwjyYiQ3xgUP7lhYz0o/cVvMA/bXO58n81/WNZGiYdF1GbWQlvw==","signatures":[{"sig":"MEUCIGbW2/c5mducKFYFunTt+zgt4N8nLBf3IzhFLmFjLscxAiEAhY8Nl1hwcJqtF4xzC0vVXUZPEGhSAIyqTq4P2SRlF/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqiorCRA9TVsSAnZWagAAXzkP/AxZbxLZbCC/oZLNHE/f\nTQGVOFkgNcX6tA15y1RM2jZ85dMnc+yIvOAUHbUtHdu2bGplznIxsAnIcgPA\nfwCvSSMb/Z7ESrBRSnWx7Vk38K6EKuuK7P1Z7yoDNJ9TE66MwyyJm+clLMi9\ntIMueIckRW9x2OI35Koq5LXWhH5eBwP+3jX2Zho2cWgZc0LvJANjcpTjgArq\nIoUcPjJtbGIAJ7HB5rWsPHpTuS37HuhGiB8dwON/LgQqvOxZrg8Yoa2AM16+\nUbMf65IE8Z3d7PYByJayGBVc+Ixsox9CIE3sYcUEbuY3XqVgbFf3VitLbzWU\nG2YzS65enMUp7WeT0XdgFAFUUK0xwr2+RNPj+QGDgvyWHF7eyHzspA4xCuYE\nbI4rd81HbBmvOlbhsCTZHNGtzXfjMmBgAbJxC6XsEyLQXTyQHa7X9yhlNvZ9\noqKDj8kQEvlIeJejylXcDx3l8sofuT2gitGjSKEkWafKJ5glBFvu5Colxvag\nY/zcM7NwtnXqIEjt61GHKY6QqGiTVqsJddZuW/elPNgZAjHf765qzP8kolSv\n6hhugInciMmdfmToCxJJH8NYTjKPi0x84TsZVYrMqSYSqwzZZeOew2i6+rQm\nLMbLR7KuZGZSU2RJbjb7F2Z1DBWLLPuvvoDfo0a6CNM6JL0QgpuuAjuKXemN\nzqdk\r\n=X+uK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0e052b24f.0","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/shape":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/density":"7.0.0-canary.0e052b24f.0","@material/checkbox":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/elevation":"7.0.0-canary.0e052b24f.0","@material/typography":"7.0.0-canary.0e052b24f.0","@material/touch-target":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.0e052b24f.0_1588210218721_0.9819016017025606","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/chips","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"591618bedf5493b89b2e4c2b5063eacc4f69785b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.ff4bc632a.0.tgz","fileCount":83,"integrity":"sha512-fAJNdTkOqfpZ9WU6O5Lp2IiP1EJbtUZK8+9YJd9t3qsvICgilJ81QNlas+KwrIhTZnRJEl9tUQbWYwAhWnCwjg==","signatures":[{"sig":"MEUCIGkr5AlgIYDcCx9XYA9SJj/n+J9YMHy41cZilq2PlGTDAiEA4HyZ96nmaMXvUOyUYAwGX0ilLvWT1sVP5V+ZMaF28p8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowuCRA9TVsSAnZWagAAlqQP/iPwAa+Q7sUa/zJdOeEH\nxomcf2SANDh+n1t1ZvhzKswBSop/LUzpTVv0YWHBxS+cJ9hcZ4NUAxZvXQ8Q\nxYzMEuP+XHvTj++j4lOOEHklWhgH8DfbyeBZWgOLnBPPSw9ScTXxLZxEOmo0\nF8IxH67J/BSGhvHD3p+wxYUlcsho9ihGhzWnaAJ6lUSLHkp+837fgRgadjGc\nHeedfwkSeU5v8gmHcilYynEiFlt4lxCkvfPNmtLKMdB+JKcwkvkSamm0NOft\nUZ43XogR98eQZO8D97B2ale/hsHVOn5oMswp9OoIN3oXbvKPXEmxJTYUJffd\n9ITko0f3F1CFr1owZX3+1sVSgnCB0t7NmFgvTNCyjkQBXcOZ7rfSDpAEBq6v\nxa4BD5+87YIKUJPZS38wQ3m2LQu+US8Dqkd4hnJ/VUFxZaq6HsyDMqXbZu+z\nRNkAjzuDjz1m0GzHJG9uI4sWAYmHOmYKE20t/V7+pdFzHzjmLT9IETU0XG4Y\n2Xv1FqP7E2l03iSi1PXqY0LlzEXLhhixlJW3DSfJP4+bbndd17btfGDBjQaa\nlBKlstkr33HpYKLJPSzgI3em6pAUXgPS6h01kfiVIXwi0iQv+OLK9jTIjdzG\nZQuIwNZpXd4l3C0HyViOXM35Z2HrUh8KpEuZc3ZQp5no3atbbUn3W/x3uT94\nPyp/\r\n=Uxl/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff4bc632a.0","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/shape":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/density":"7.0.0-canary.ff4bc632a.0","@material/checkbox":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/elevation":"7.0.0-canary.ff4bc632a.0","@material/typography":"7.0.0-canary.ff4bc632a.0","@material/touch-target":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.ff4bc632a.0_1588235309800_0.15737678721167359","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/chips","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e16c83d474e6e981698f408d9c4f1be3be6b1a58","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":83,"integrity":"sha512-WcPPAy/zb5bCI44ul88k5XGWgoU1jMgDTvfXLxDPOBsh+IF+rFropum7OmTclHs1l4itnFuoBLcJWc+X2gg5gw==","signatures":[{"sig":"MEYCIQC34mU5PavcgMBqGP3p/HO2C/3WwfFi0DRb2oBoiX/fbwIhAM3T7LnpoBZOhL6Li2g7iHtB7PKf7bNPETkQdvD5O0BG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequHACRA9TVsSAnZWagAA+J0P/iN5YoKsVfzEQuzI9GlQ\nq/6YhuAceU+akbYFO1agX0mKfw5umIzPmhz3ZMczqfwTuNPnEXxKx1YinkCz\n7dnveSgj5NdhgOP9sg6P0zAjgBIx57xYWAyd0OT2EXHKKL+4ocq5cs3EWBqn\nPU8xf8XlMVYZ67Pax79MwgzQCid5b1Bf7sid0yBBKxDIBZzaCZrg8/jGFFZ8\nvQcPZbP/zd7pwHmafdM/DS0naDq8rvf7UwXRK0k+xow0z6tE1l1lj6NOt7an\ndJvvDXLoB49KfGmK6er3jPHdtAGe4CDmHwK1tp2UjmzzOhCXeJeJsZk5qb+3\n/pwWrcpobBfeyZ2Ixwit+KzTRO+gR+LW9Ha0oQrb/y4xtb0MxN7MbAlMfbBl\noD1cL7DN4qI/tW+yOn4N8RSvhM2pLS7WKwaYvXSzdRmd1nmwAbQs+ChXebiD\nDY7uQnzTaYnZAkW6Sf5Hevy1CBTFAmfBpUwKxd4EDMoNzu8uwi4rA3dDY8Vp\nUvuMYGe+7JUOaQQSy24NCkZ14Yejbiwp9XpLW+ohlMtYMULrcwiHEYzAnxBd\nr1WnLyADBMmzzTGXTN0fWW6RwYQsPKOrsoKKZu2ruZMf65ZJ0f8zdUozCG6N\nanaBWyld26j0kLjcrTWIMohieV4hl87IWP7+GQDhq0tGEWWrkRJcx0st4Lqt\nRE3t\r\n=9/ey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0f83d2fd.0","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/shape":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/density":"7.0.0-canary.b0f83d2fd.0","@material/checkbox":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/elevation":"7.0.0-canary.b0f83d2fd.0","@material/typography":"7.0.0-canary.b0f83d2fd.0","@material/touch-target":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.b0f83d2fd.0_1588257215839_0.2570750216507136","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/chips","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.e59906a57.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5811c92f255e0b8fe178e408940b0f8db14e9ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.e59906a57.0.tgz","fileCount":83,"integrity":"sha512-1QRZZppiI10f8ivRMLsklxNwnJDNEzMwI6z2qiRDwX7aO9uJ0vl4O+t0pgZ3irx6+3zxbX6p5y5ML3M40+qhsg==","signatures":[{"sig":"MEUCIQDqK2GFMET9Qwrie/7Tvmp3N0PATu+YfYCPl9Fi4fx1zQIgbDOJgoK/hehYdvTMKtQgEVHeODMlb+2ekrCgjnRix/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEONCRA9TVsSAnZWagAAVl0QAKQf0FG/VAuQBGKqSqil\njXugwtV1IrEFWhnkDuZpbv6MbfLlSCz+ucFTV+OCTCpc4rwjYkJRrkLpDrpV\nK2HnVRWHu2F2iULT9zOUBwYhDD6YXksvui9ZQcZ4WqIXNQ5FOgwm2wpu4ySh\n3YvtTo4adFyIGGZAhRxqce8U7+EWjm42SLuc88AiNeOsClrq0zRX4n53K1g7\ngkmg2asTFXxj6yc9xzLpRzJl3c7je1EGtBterHd/NO73qJLXZ1GTHQR8eIxv\nWU1aaTAaNEDckJS7zQTGjISKJ+ZpwHljUBnjsomaAjrZUBbR28jULxBX8aTs\nsHPwFjNDveuFvDbk+GVEw62vWKkzJHH+Yxhjd2PYT3g4TdxYaFOEeThNlsw3\nypdnnstpUVYRkMva473B2DhhZhHByipl4I6Cb8ZWAn7l5lqUJBa8+mEc6ftz\nTrfOVSXpe4Gg3zIERue23E3Hc+FWxCp/Mw67xZWTbnioCLkWwuBY8cKSm74G\ntEjpBkkMBsMMS6Tb7K4JE1etnP1YlkP6jHZezNc1W6lOaH4uKjMV+mHxoOSA\nOCBLxws31aGo1dswrMfea3U/R3gOkh8NNE4jPAjE93yagTFJPxA65eK9SK9x\nKZSUrkGMsI5rVM5N4my4ceZfbciUWMC2mGmkatyK7QIbKeK7PsqJmbqTav+0\nVaeN\r\n=JlOM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e59906a57.0","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/shape":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/density":"7.0.0-canary.e59906a57.0","@material/checkbox":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/elevation":"7.0.0-canary.e59906a57.0","@material/typography":"7.0.0-canary.e59906a57.0","@material/touch-target":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.e59906a57.0_1588347789086_0.008069620004988343","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/chips","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.c02712b59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2d0e58033d100df5bab805b378393985a073b30","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.c02712b59.0.tgz","fileCount":83,"integrity":"sha512-Um8SAvx1ek60431rmi88joZxaHxTbAB6t+cf/pGjzxH2soA6SQPWwswdpqBCefDDUE+ih1n0TptZN8B7HNnlVw==","signatures":[{"sig":"MEYCIQDOdCAN71okLFvCa2IJtLMCeH+6MnVVKwXWgpVZowGAewIhANqfmZBojeuTsFDRPUyRFhYPRZZjcXOlClGhSxjHgiF1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGnVCRA9TVsSAnZWagAALKkP/1mQ6XR9p4YyEuZR/BAm\nyMWQywKx58LAuTmADYjbJDyriynhNJIZ5qIsgJGwYtbIgYydrWW9OQxlZnka\nsAc2wTEQhkwXMQmgsnEc+yR/7+1qLeBq6eNDdxHsTMIg+AE0chGaQcOmspNe\niyD5ZmGxS2tum1CYUwPvUDvpia811UvXNkRY1wW+0bO7TEG0Xd7yZ1OOYzfa\nG6znjoylwCKnYYFn5dj/JNiBzgyM6/Xb+1ngHZZ0DfKgg7bcfBlKoZZWYKQa\nN14I6K3JszeD0UEFBBMsykzSuDLXm4YkMqtgdSSdMSvhNE9rgChz9E2VG5FZ\nR00Fm9kSDQ7qf02rYo/wD23UkbpEvZHlU+6y95UalRJ5H0Xhv96ufi5bXRIm\nDkyvOJV+e5qYZAgkEIc5MX8QpYPl5Yg6JGxSuHy8+JtLPCtwgLyjd4JA9RrP\nQ3nHFL674NXNdzJ7KMOoeK5wUbkclwzC6ijQZY3B/n3wi4iyq7ot4PlP1viu\n3Hb7gPYeHH6eu25R7bj7lhw9XRG9kLPG6Gw4VZZyyMLtpDvht0Emwz2TTdOU\nZ+uiRqDdy/DNJwgKiWP+BRkcVC8/3kdI3mOVAj83aJrNZdV8QMZTmOVm0f5h\nnP8zMZg6DSnFA0hI+JguwVEA5FBji4twx9kpIHDCMHVnJIDrN3g1Kb/LlVK4\nyZ8a\r\n=Tjex\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c02712b59.0","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/shape":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/density":"7.0.0-canary.c02712b59.0","@material/checkbox":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/elevation":"7.0.0-canary.c02712b59.0","@material/typography":"7.0.0-canary.c02712b59.0","@material/touch-target":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.c02712b59.0_1588357588285_0.741393035216755","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/chips","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.15d65448e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2831b60ab454a719b9949bdb25c93775dc71331","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.15d65448e.0.tgz","fileCount":83,"integrity":"sha512-ycaxWYoiCNW6pPpGO/WJjJjJEwhUKFjBcaxUvu0pL0wZQS/OKRhEZryKneMGAvH8pXS8tU08BO59JG1sgVaycA==","signatures":[{"sig":"MEQCIFecRsVEbyCcYH3Oe+nbGPZxQvsmY70Bo9IUNiJHFN5rAiAGUYRBwfUoe949mAn8BfUZIJMkvr2ufiEuboXknGCRog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHcpCRA9TVsSAnZWagAAwGUP+QDYptNga+/yraK+v1gc\n2KqzyeachGcEEvLIaX76j7IFFiWH1ihtD8KsWeXAseVWoIpsHO4r9BpP0DUc\n9b1Og439tQPhY0az3OaFod19kRmSfcMqk/X+cH3OBq0O5+4zGwoVTemtKPY2\nZrhAvCCtH0rCjgcT5ZMUeJqkXq4Bf6o7dRqC0eMWaW2hHJ/gdhdy+RPOQFcf\n3WfJrUqxvVuMv2YmhO1BUdLnyfP71AtCWP+qphpWtA1orUBHXGDg9XF6zQvw\ng+eu16i1u1xfxiDqzRVgD/MqUwBjgxNziO++EPljlL4eqPyvcdVuo+HUxsPH\ne0i15aSS5X5jc0rRDVWKDfKJgnHIddwG0nNkTfjBS2aBZeguHM8cvoBvC9Zs\nVq+StsCBhf/nIx5kF3TssVnT1k9Ybjblkk4DNYDjHBGxg3IE0JFmXNHbMrPU\nrRyZ/oYG2T6xRe0dcn0BJC/zP8iMEJq+oTfQoQlVfhoB+Rw2BQn7kaF8h4fA\nBoOFIbAv1XsWWvgptjpbS0CNU/RG9MDeU9REpoha6XccX4VQEpYs6oAlpPhO\nEisu8t/mZ22vpyMFkjNYmG2wjtZb+1WKOGgwO4gATo+/c6uAJYrp6mZSWocv\neUYiOGIjGO2nSQZy5BmIuC0S3thDJL7hUOzurx/XwKTLOIY3EV0+ZDvkmGUf\nZSBA\r\n=xiWg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.15d65448e.0","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/shape":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/density":"7.0.0-canary.15d65448e.0","@material/checkbox":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/elevation":"7.0.0-canary.15d65448e.0","@material/typography":"7.0.0-canary.15d65448e.0","@material/touch-target":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.15d65448e.0_1588361001400_0.44613254780069034","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/chips","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.142b1549e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d82843a890fd35d9259034c48cdc598016611a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.142b1549e.0.tgz","fileCount":83,"integrity":"sha512-9ROUmHPkvtB6PxNcku8Hfdkr9mByvvHRAWcGU3C+vfua9T1d5qc2a+WQD18e5UdiK0GT77Q5LT4jcuysS6rszw==","signatures":[{"sig":"MEYCIQD9BIk155dRIL9FT4Pyjmyw3vn8UvZe1MVE7VWVcISHVgIhANyhy8z3CzW5sb/Py29LPz1Rz7Oj1OwzIFaTuEngW19W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRsCRA9TVsSAnZWagAAGJgP/35DHpjjmHGtYRXWxFpt\nzWYKSqxNX1Z3vMgFe1QtxS0vxnOVJbvjehb3fNO5TElL4hxsHeZNgNyLKahL\nSoeQ+RGBTZOSIMXLGOjowQXNgFQf85Cv/2brYwUEKUm1zoLk0NlWe/87fju2\nf+lPouYVFbCEZ223oeGHFogD4WzDz9r1kBs/Zjg1mkER3qkXWsiN69+R66l+\nPCNH2QoiylMSX3QMVj0WbKNsI2YVgDgGJoHGWsaCTGdnkuogOaF9JgcAlIEo\nW3a+V7pXW0iGk0bjh0Ga9LgKVc0jouB9Qmf7jjfprjiL5J7fd+Bjs6PeNgye\nf76C83p7iaWa3cKDihgiiAgsQNHoo4tAbQMGNrqXc8fExIge6BmDIsP+K1xV\n5Gv4+JTrZQRgbAVEg5JqSUDGDH3blg7xz7a191ncyxT8QXBEH8dX613FcCwY\nFfL4EjKteP9hk7bVmZ7jZCC4jb4P7F78bJnNoWRpp/oPKfe3GdoEA18mAEFm\nfJYvYvHM8zNiPtGB0CGsWCH6l7MZ0QKDVoavprZnq93ZZYnLEmMQVv8+uKD2\nIFk1AuDBhvjTvL3BfM20Fde/VqlMYqeneYOCO4GKha/DLyemLSpKgXB0lD9k\nhyxhrCJtuBV7VSp+j3jaWQHAVFOMkyGiY+hbAPBhJW/Cvqaf6TfoWrTDYIbm\nc2Su\r\n=q37I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.142b1549e.0","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/shape":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/density":"7.0.0-canary.142b1549e.0","@material/checkbox":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/elevation":"7.0.0-canary.142b1549e.0","@material/typography":"7.0.0-canary.142b1549e.0","@material/touch-target":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.142b1549e.0_1588372588135_0.7844140058641023","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/chips","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.524b7b812.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eacb1ce9e5a05c4427eceb6198561660cb533ce4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.524b7b812.0.tgz","fileCount":83,"integrity":"sha512-xv3Z0JDKKBSq0vDxmTQ/cHniLu6AQ8Tz2fLIKTQHE+PQQbgTc2HsJRCQ3ahmSCYgRl3w/5AI/jDVA6Gh+djaLg==","signatures":[{"sig":"MEQCIDacJ/sRysODo+7THUFaguPCTMTUnYxkb17YRqIq6HghAiBST1TsV0NdLDddRYGyZnk2LzIeJNqwOENzK98cNwUiiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery4KCRA9TVsSAnZWagAAt8UP/0zGmkv7Zwyo8DTwRAy1\nWwYvhaAzqSZ2cQKVA/aysQKM+3w7e/AwmXVEWxIY3bRbVGW3pgNSfkPcIqec\nRJhVK7+e9ZxBJ3W/zddgXnffPqwyh0loTKKPJoKyh/aoQWN1Aed0kI+svFlb\nS9cEJ72MX2jlGAiGwe+YAb81C1ITbR7L6Fq+Oart6z3LSbdMkluMod+9wwxx\n9G/fM7nR6RIGxty40VQU9akTf+PE+dQ1KGPpQ32xcF9nAw/a22ff5PPrxkGl\nDfmJZAOO+rhoEpG+DmNhjjSb23W8MVyFACzf6RRgXgr/cT+0Wndt1gNW7QMS\ncU9V6c14ryKcd615LcpIlm373CJtZ5QUSCkxi3TXCEZBh4gsf7Z69LNiCQJ8\nqu9iX5yr8AFt+C+zkwtifdmcmA0Q84fixEEcSBuzxorXISrphtxUbA256/0H\nkS8m7o8Xtl79bSRs8F0YZ1wFktQcFRvOCruKimc+Jjji/LHpuEuqD7UHxSdy\nGlQ1aOKdGW0TRn1iWPKH3sT+/Fw4hcSukA7JTBVV7Bx0UNHeWC+8+LWltbUG\nZ/wAdhhenLZgt2wygPc25EMWpeGWJuJ+FQdYf9/Hd/wwJsJNhgbnFtyWXPhc\nT3KAuKvaBcVyOQiqhVeQEi9PSjT3Q0jBwQ/AL2aO3MT4xBfvFWb11bipP+5F\nqAbm\r\n=JC1A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.524b7b812.0","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/shape":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/density":"7.0.0-canary.524b7b812.0","@material/checkbox":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/elevation":"7.0.0-canary.524b7b812.0","@material/typography":"7.0.0-canary.524b7b812.0","@material/touch-target":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.524b7b812.0_1588538890412_0.7382132673088937","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/chips","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d06ac04e5c94eeda154e8511ca5a9ff8d176b712","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.bd8ca9678.0.tgz","fileCount":83,"integrity":"sha512-MtyOLWyvw7s+IliihlbidJf7xB5/qILzbR+MNiA3iV/5BYH6vijpd4oRYnqgOjTvnOP/pQk1Cbbk8JqmTvHZrg==","signatures":[{"sig":"MEUCIQCEQnjI7J19frHWVwaVGZr8XbwpgBa/To+p7lv6NVxv0gIgK0/7HRp4A5Vo4zDab/6Wj5NagMunnZJxkuimskLwQek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6xCRA9TVsSAnZWagAAWA0P/ihFyRsM7BZrjZ9k0Fy7\nkNmwxEgNXjLqFYllGyfpkBZqj4NI6CZQEL7taE6ZFDDDG9RKAjqLw9rljxMt\nP74ymzHXemCWjXj2OVTpPgpqoBT08wgz1TzHsgRbnoaMxbZ3xkf/dKGptoJc\nq5y9ZRnikBtSoGQDdh0JvTczKoMNueYqnYUteXTty9ZG72QpLCNUqavygllE\nUU1Zs4vOca2bq65nD1xdN9etqWGAqOZwSv3YHk3GgzfwWu2vpIb90FaTAD8X\nO6QDrojckxfQ1tyijOuHxp5RD4M6lMaqODgJbmKjKpcsZceEPM8BrKgL2F4o\nm39hKtv53pLCjNpgwD+lpICQOAJ54eA4tpoNpbMxJ76QuoDTPR9+S84Js2Ex\n+txonilb4vUhShwCN8xvq3aO7xyCPtPYhKhr01mywp8B2FgJP768IjQU4ODz\nd3AUACs5oj7FmjPsq41ffsgermxmAXRCGhCtpdvlDwrNuo4scJ6RxRu4Esnm\nqiQYJM4E0TtjWZgqudCfXjk9fDkXSaZ5ofkZmnugU17P2o2HlvV9gCILFKmK\nOnCpDPFo+K3NBsI0tHBcGiygqoGOpYtshfvN9mrMjQcxHooFirHVBVZ5//pU\nLVKOR2C66toCFfIdYUkb7QoGG6hffMCxTJNDiosSwfvTZkrfEYK0juoRYNWx\nhCuD\r\n=b6tK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8ca9678.0","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/shape":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/density":"7.0.0-canary.bd8ca9678.0","@material/checkbox":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/elevation":"7.0.0-canary.bd8ca9678.0","@material/typography":"7.0.0-canary.bd8ca9678.0","@material/touch-target":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.bd8ca9678.0_1588612784906_0.5369659554636141","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/chips","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a1b211004825ef188f62a52901223b8b0672868","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.2553e86fe.0.tgz","fileCount":83,"integrity":"sha512-FgGmZ8vQosxdB4+YxDC4FgOQ1wuvyNIg0i1MTC+O/O1G/b6NjayX5uI5nAAeW5/7ilX+xP5ZXulmTCK+O5EXwg==","signatures":[{"sig":"MEUCIDBGwpOvCrbK8K79+jR+Ci4lUNrPnYwX/++dxYi+him3AiEA1Y8RTK4x//QKKnCk4i+PdjjUkkl/ymb69dwWMRZwcIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFGOCRA9TVsSAnZWagAA5O8P/iyAJo9IW1PzIR3i1gEp\nQD/HWB9mN+7Z7q7X5DEqA75wiQ8IMCAV8a3ViwePI680WBB+m24E5APUYbMb\nlGj05kfikJLOhddGprsQ/l0YUAg5Gu+l5Mka74iDsu0w2dU5HlqpSEXAnPP/\n9PFq2KflLXmbA7NvcmhiObHiZO6YAFQ8vrT9AcSLzLm+retZLF6sBmJ9krBj\n2qvuPQBXr+3YmTFNpaI8JBLvD9c5d2sLYXoRTg77Dh/TmXt5SLQdeiBjsOta\naqjStQfNUVbnSA0F4ajlwLrzOx1MuIy32nC9CQvnKdJ6/myJe+BCm5IdDwES\nuL1/LcCtXgXjs8EKQ17cvmZZqPAqfFw8H6T38eI+HXJvtsKUy9E/WiVdhrLK\n/3wC8+1QVibLZScrQSQwKfR50Vuf62EqrjNVzTv3XMpXMLsEf1V4rquq/2Be\nRq3aw1oq2zITu6JrRhqjfe32P73VJX6A1nB8Thh7fkYTNSO3X8zdQcyBdwAo\nbH8wibjg/Cer1cuuRNWAPZJDy8guLa4GrhAOL4LEUJaIHKKd1dhLiBZ7u60J\naqcfbR0V4/oTAI0MCqWSkOnVaZYQ3hDV8HS6Qd/DA3vuKPgi3JlwOZPCRTkG\no7h+J5Apg289iaqn2ilDP5jOy6HWrIYDQb/KRbSZUYjLs/92GUfE3axACNG2\n7J6w\r\n=7ZF7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2553e86fe.0","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/shape":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/density":"7.0.0-canary.2553e86fe.0","@material/checkbox":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/elevation":"7.0.0-canary.2553e86fe.0","@material/typography":"7.0.0-canary.2553e86fe.0","@material/touch-target":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.2553e86fe.0_1588613517689_0.542779076793122","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/chips","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.03dec929e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73b0eb396ae6f5bd271b438238820dd8ba79996e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.03dec929e.0.tgz","fileCount":83,"integrity":"sha512-HPRJrXgiVOQhcPz2ho0Q7mCkXxE9xG3ZvcJPbNS5g+W/EwrvDhHbIizhLxvhPkIinKea0yI7vhy7qduuIqmSiQ==","signatures":[{"sig":"MEYCIQCk/hCMitrHavewCzLBbHg5tkkkE/PCTUYiWcGUCjlXiwIhAIJJydxF1oXB5+Fs8zSKT2lJWYVEguseIvrN2D8365Bz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKaUCRA9TVsSAnZWagAAPVIP/jzirGyq5NCw7CT74hul\nvnhiP8n4BJMIDGya0IT3KgnqzDGsBEYEora1EID9nDK5qWbk9E7AKvzw1KH2\nNwXLPpQ0pqQKCyVrThdvQ3TYxwAdnx/nXlX8sJXQK8xjbgxF7E3RmS+HKjEG\nR0gvfTdajZiwrRZUdNTbLWp/l9RYfm2ilHt3bgEs2SCjnFriA7sHQ4bSBY9c\nSVqgwfPvp/I9nuTatrCR97Hv4OmCFj7o6ESTQ9nSsmQCbw0uY4/CwIXLxPAV\nxPReB+7vSpa9o7mI1k1XANzqVZWMauZOD4UMzvipCJ/IM50Zigcbp8zDTDWB\nVk2z32b4jlrC/TToSvzw/mlvlCYP2OlmMqfowfomstt2PcFmT4wTiC2/LBwD\n3GGmU8SR6vJTHi+bkST28KysZAKj0vwCjUUICWtKDpxVTlFzYhLVejbeJnR+\n+f51gPuytsKkZ9f7w1KWqBakz9gi6fJ87vgw0EuJ6RrWKXXOIBY4mhL/jmNv\n8yqdWsPP1+PtIjzD5vKU8ObFQMoh2KFb5mpLm4MC8dnJNETijA6BEr4CuHFW\niwm6wOMEjhXpa9B4XIiHbjYaA4y7FVH6fHFLK1bkbVj2o0F2Yql/JjlOQ6+w\na8i8BV7X0XeCUt8pvbdGcZ4ciT8ETOdsR47dV+nqy7BEbzXz5CMSAg8aGFcb\n+n69\r\n=6muR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.03dec929e.0","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/shape":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/density":"7.0.0-canary.03dec929e.0","@material/checkbox":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/elevation":"7.0.0-canary.03dec929e.0","@material/typography":"7.0.0-canary.03dec929e.0","@material/touch-target":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.03dec929e.0_1588635284379_0.14200666908861215","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/chips","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c96849885e32b61c0486e9f5259aeb1ea1e3f851","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.d92d8c93e.0.tgz","fileCount":83,"integrity":"sha512-W0jUAYQyZwzowgWDCkTPGOpLAhiFyD6GgMMnBv7oHMF8nWKTVrdU6deTbTjMXQtgBtNCyXaISmOFyoiU8+bixw==","signatures":[{"sig":"MEYCIQCDALYrTWwZCcBsm9YGSQwwLZY9QthH61J63nzkhm9EKQIhANOb3jDC7K6ho6bAGp02oRA3NyyxoZaXXRjW5tQoX37h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZuNCRA9TVsSAnZWagAAhDsP/RAy+SLhdUnha86S5B7F\nRbrgUAaJvzYbUJ9/V25oLpuq2o6mi/1Hai9my5/TGncBP45nPbDHcw4JBpeT\naHgY9B2P+yonNClm+brxc2vpN7n0N+ZB0BwKA1eEkLDQbKU8HljvxEPvkp8C\n3JU9mVs5qPq//8Z5V0frUOAjPzQ30Aax8LaQg4A4cpqmNuzt33hNhKKeaRN+\nw8+4WFLV5+nyGNovDVopMXKLlRlJrD0yJc30Zt9EDyjBuEN2euKbA8ZIIFkg\naUnjCgRCVp6zGqEDiDX8r8YQLvObbCB1CMeqR5BS9Vk/lcfZbILxwSpnIzon\nqgUzs+2XinjGZA+v6MRWho6UPBeY1hhSsqhslZiJ/fn8M9K9o59Uf4skB6QS\nuXQCKKc+jlAHk9byciAw0+4VjfFnpfH73t03ZNGzn95WMwvcDS8DgvMw5q8o\nkZyGMtqF0zSs03iNTeOSaoHKRALuewc+O0tqj5hxRasVdYmWvREjNgUmC0mr\nQSxB9l5EHoUTE+vcZ/Cx5UYQcbNhkTp+Qqmm7JTDajeyn6Qfhs/K5zSDM1LU\ndcz2dvajjOLnyQnGw1a0WABN4LHEusFQADsCSADqnRFHQB1RHeVYLpHkaZQA\nY242+k3vZP4yWn1PcDVh2g8M3VlUzRHcus77pRNfW0okSK/qZvZa2RSB5tE5\nSrB2\r\n=8A1n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d92d8c93e.0","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/shape":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/density":"7.0.0-canary.d92d8c93e.0","@material/checkbox":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/elevation":"7.0.0-canary.d92d8c93e.0","@material/typography":"7.0.0-canary.d92d8c93e.0","@material/touch-target":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.d92d8c93e.0_1588697996911_0.16580104930317696","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/chips","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.09f591967.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"202c5002282d386226cbe4dc7f97ef924b53d4f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.09f591967.0.tgz","fileCount":83,"integrity":"sha512-r54u7dnxEcLiPBhVgG+Nykz2Si/Kuxzdd4+7KBxqxblaESf2KVEMMykRKDfPMLRwfLMO0X0j0W1GZ34CSCujuQ==","signatures":[{"sig":"MEUCIBi24dXiJZQ/LRHnKhUpI8xL0kAi/RhkUxQADTyro66FAiEAkPsLMmmQrMcWG5lU8ZhI8QYgtxQD6EE/+/7Tiux2/wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdUECRA9TVsSAnZWagAAmUIQAIDM0fPYfLyfnrqALcUY\nMnaJX2NfF+GrWb34nrJplZ5IlH2OSKfmnVq6l9+eEZiZ88Rgd8sO/Y+1KLDE\nwA3qMOEtnJ8LladS2aIy/oqQfYMksc4G5o0y+7JopngnbngQpXcqYq+xf8Wo\nyGIphV4OuJ7PST7oDm/D15oJ9WPRMHdZXG8mZuAQ8OP19hJSoNsg1ufPb91w\ni9ba7q8rMMDfKvXzeDl1tXhlhWSJh++cbUvvztqpfC0ZezEBH+YDzCKJREoJ\nras/pa08FW6nh5aAiV+N8TXvrljYYj7VaYtaZZwE8UCnl8YX6ShTkUCHhH54\nC8M2g+2JCaHGRHmFwmMue7q7bBKjmuergMnG2gbFrTh8s/EW9oAlfWDXjevS\n9DvIHosJKFPwA7PrijvjDb3CPXA88ANIel9tK8a0aYmMX3ZiF/U2jp2DDOaJ\nk9Kd0opFK2ubmIGMO2gQKmXlxZXopl5lDskOr9OMqjobWT0/X4vAi1s8Etub\ndL2jQsj8ay1kgP4A4SOMsk9MoSGfVuNHOh4kSAJPMe2UqUUrUIlH2ZrabJXS\nzkdHEFP4OD7wWOKIJPK/NdKcfk+RQeGxpGH5WRhSH0mLqRBb54gEL04smSdB\nQgLE/IZ6nnO4Tn51Ngy1wk3RASfv2Rk8pdAn/MohJXCCrZ41xxek83wtuU/B\nFkqN\r\n=O/pq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.09f591967.0","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/shape":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/density":"7.0.0-canary.09f591967.0","@material/checkbox":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/elevation":"7.0.0-canary.09f591967.0","@material/typography":"7.0.0-canary.09f591967.0","@material/touch-target":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.09f591967.0_1588712708145_0.8336960891903789","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/chips","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.3846ce311.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"052de713303f44a7a2db3de0d4ef4de455ee4205","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.3846ce311.0.tgz","fileCount":83,"integrity":"sha512-nCtj5WJ0hxz7kgV7e45oFWp/rHH/GsbTXR62pB/bY+vS0JNP2www9fujkgqsKboHbVAdCNrHUPUuFHaN+3ZUFw==","signatures":[{"sig":"MEUCIQD2mbxvTLmVdaZbLmmQ+hvbuuBmpHO42mCFqalQyJTifQIgeniGgBxEV9wvQ1Hzw6CjkU/uJ4Is3QVmgmGid4oU0Pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessVGCRA9TVsSAnZWagAASzkQAKBwpHsaTtXuuLtQwQxY\ncY0Gh8AHhbZzL/5a42B/VzQA+n78tFZe5g4SSombdjJ//R9JkNp5Z2ttNgLC\nDlwNQUhVbfcGYdgZhrPpnHuau9LiICMbvmNm4TodJf2I8KmmwMVqVbfKZdrF\nckfiHbAel+/67QCsan+KPV6n+qgEYhgqi6tLqExgZRE6NWeiIEIHU49mvnQC\nH4dE69tiVWw67U6C9HvL3YCZU9JnCSUT+zrsGfdU0rMRwkhw54CfGer3IpSB\nDtCttTv7HwKjOk8rML4f7oHJJWGx0fHe3hFJWEQYXcNlOacLUblwFySJQ8BJ\nZf8ZxhycqwPGtye/FQc5zBIE09UKqqoLxekNQFny1prQcB1mLuyf9eUWt8Sx\n/tKNYSMC06voeY82maTxovNzm8jANHvQ2b5SnHE5A1vqS0NvI9059TNFL+yS\n/7oiWYi1h6LCB9Ond4fYAaqI9rb5t/tVcrvWY+KWy1fPr6x3jf8va1Oe4pX8\nmqoyjxGnIvVEJsN9lOwhdh7mBzNddY9FYtHSz53RA0AZHQ8ZyE5FjiyT49rP\noLRlPPKfIzT+DHCxOkKRQCHuDSXBItXaDHtjoZqHRN9+fVR1xpmFHF4tf6qY\ny6ojuKUWMNXtWVQONC2HPpTMociajrA7oVs/axZXbLCX2sxoO+oIB8gY40PS\n1YII\r\n=y99b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3846ce311.0","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/shape":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/density":"7.0.0-canary.3846ce311.0","@material/checkbox":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/elevation":"7.0.0-canary.3846ce311.0","@material/typography":"7.0.0-canary.3846ce311.0","@material/touch-target":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.3846ce311.0_1588774213911_0.8075683683370685","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/chips","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"157a6399736ce94562dd3c56300e7f0a5a4288ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.ed7f32463.0.tgz","fileCount":83,"integrity":"sha512-mPpk2ArFK0djF4K1hUSnoDKK/zeP0ud+owNBIAHUKFWUtB4gFhh8rSi+Ycv0TbvoSOKTScV84irHG3jFsgu82g==","signatures":[{"sig":"MEYCIQDjjgPGsn9scUvSXhXJRggAxjnQBYWnr31+mvD1bPr0NAIhAO1JTSTo5ovL238BugD47jUiRrlpz2ZsAL4JCiLJJ2y7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuD/CRA9TVsSAnZWagAAPAEP/R7izZuawtUp3dq7gZkq\nlWY6ZQjuDOvS673LFVPVruQWmO8f1fyfy9DejmBW0nRJZBke4rqL6BS7rzJA\nLfv+0UTiW0GdY7R0fxqclgqvYzA5/iN6o21w+B7Bh+baIz2fkcshPpn6u9ry\nVc83sbQ3mEwfkUpMNw72O+OeZWkpEh+OMaAZ2UVvP1tknat00EIBeD3KMWYJ\nFD+NvygfhxPHabzUZCeg/s/UsuFPm/tXvxmPeItzcL1/+KT/F8P0WZk83a0u\nmdZKAKZM/n5NjZGNvKKXYzuVmSvJo9OzIWp6nzDWWyyQ/95cdk2MPqnkfUjx\negOoW5KoMtGCuJNybKVGicDHFWzwtPPzPrMlNpqO4UN0rdC8KCUdXp70+YC8\nfBlA7wCOU9aK/GdEI5HD7oxi8vFor8omTiuY2wcLruH8SaxB75VCFCPcEvL5\nZBuHF7omc0qLOX+pyTFnSWzHQiZHv99/guCBXFK1Jms20lM9poU1piUkVAo9\nHcHWSitM48GvsTjvdU282GlmRlq6jEYYGqjH5pXRqPl24eLl7UIA6/GM91Py\nW1/rYdbrg+ClBkEy7Poq62mj9hYuIvML0/UQr93MUee0GxN0blpc6GdwTO/0\nhV9wzDQskM7JRBFgZBL6IImJ/EqQjKeJOYKIRNe2ghX5lfn2M23C9feMfZQz\n0ccF\r\n=wub1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed7f32463.0","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/shape":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/density":"7.0.0-canary.ed7f32463.0","@material/checkbox":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/elevation":"7.0.0-canary.ed7f32463.0","@material/typography":"7.0.0-canary.ed7f32463.0","@material/touch-target":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.ed7f32463.0_1588781311301_0.03009367916655048","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/chips","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8135cc085.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28d96391d0dba292ae9b3ccbc96117d7d87db9d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8135cc085.0.tgz","fileCount":83,"integrity":"sha512-T8IZwF6hwUEHgIOIFV2wov3P+RhFR8j/n2SoOoLMQc95TyN2zg2BFLI0dUEeOTOdi+pN8K2kw3HWMOrcs825oA==","signatures":[{"sig":"MEQCIDNI8HFcEdWbwsmZAmHa2GIAzz8fYEXrCxgCb7w40kfLAiAlx1sLf0sZKSOVfIyvX9vbqWidHB6p2dryphzsTokA+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":880973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxZCCRA9TVsSAnZWagAAGx8P/0onPAV+BBquNBbzBUUL\nRZywJJNBGqFgQq8o/Ark3WUJiKKdTRV+QEgovAEgrgCLR0mIaBBTuM8OOMaV\nncmJXj91NgvisabPksp7MsKTt8k+cTvYCNUN3HFiEUtTaXRk2zGg/dm9WMhG\nTGgBh0wBzVoPhQXu3BsbwUlIwu1UW1nfkopZzSgcKO+EeNiwEI2JTvFWSOE8\n4NSXfpPVtLViAlN1eKLLDMW8Ax7nDXclugyf+fmEStBQU3JdxIFYL23vGoYM\nIH7r7h/a/9Koj7XEkZ2XV8gIbe/V4rOIXlnPMk/1+4YmjlrmMz4E05ZFA3eA\nkXylxczqmsumOwLPJglOIcVvaYID0ht4rw/OcfhkcXTmq9zyjGswPhAhAt2Z\n5T46s6YKnBR/vD9jeX4ZgwMG2cgOZf5XKvz+HL/kQDDm21+yR7TsJ1HcIm3S\nG3t9DoS2Fj7Z9zGuNGoX9FbMUabMhK/N9rnUvPxHrszJTK8Bi0N2QrpU6RK4\n4m2y1ZfSRdMaJgECcNb52wEqK7Qu0Fzfvf8Z22JHz70/Q/8ISJx91GVj+Miu\nY2xSiVRbqYNI+4VtHuCE4o2eINIMo33ZAn/VnuVPUWAiGpyRxXqyJ+jjAxl5\nmOFFqS13Qky5AfsdqOocypLCdQ/y9qV8QSy401dVf9D+INL6P34L2OZTOn7S\nd02F\r\n=uyNM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8135cc085.0","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/shape":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/density":"7.0.0-canary.8135cc085.0","@material/checkbox":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/elevation":"7.0.0-canary.8135cc085.0","@material/typography":"7.0.0-canary.8135cc085.0","@material/touch-target":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8135cc085.0_1588794946125_0.3563854545276619","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/chips","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.deb212de4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96ca6d1e11c0c17d65e4ebfce429c790ce96bfa9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.deb212de4.0.tgz","fileCount":83,"integrity":"sha512-atJ3+bwCehcqqAOjQDrIVBTYqI0VejFOK3i774Kjg9ndv4T2u6K0vqkKot5hL2xuacVFwkr80AoCOOTLMopomg==","signatures":[{"sig":"MEYCIQDLmrH+wdFxSnJyE1nDRY5Wrfcm6c9P/3sIs513W+PoeAIhAKU3IbhfdLVBkFHwjpuyAqWNaZIWM/tSzizcA5y8LQ3K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfrCRA9TVsSAnZWagAAGekP/1qZwQYv4aOvVKOkVp3G\nlCbaYabV3FL/pbsD/uPv6rRiGZVX4kHxuPZ/ISmG6C9zwumpojHW+TgepnbX\n4XH/tp/ntVPbQWrXdpZPjG+4kq90ntu2LUUqr4/kgujQ0XZHnjTiH9p2Tg9B\nqCdaTUDpG9SGLhH+aGnIIh3plC98iiqWM96jszRSZU56JaMQ7oI4oS2r3qKm\nmMhxQCqP9A3TKugT51Ql09vHnBbytitQv04GgYtaQ27VFyaErHXtUz5WvaTy\n7ohwrYl4Q6XUQHWaX1D3GBQcB9k1IiMS6ta6CHZibghOpx+mnl8r090L6WsD\n2RRElI1XBAxjMLP9AVsqjCKgm2/ck/X9hUhXx6GxTAzTIa/GTtnHwTkj3BFE\nhvBlRlAGas+h+HE5aR3fH4kiX/UdM0jyHwAMJmMVC7XF+9imgsPJm1LJWuIx\nuRplYUMhvQW7ownKuDPjs3dwRGq+mk46a+9Q/aL6QumVYE0jkkx5GB2YO9gD\nSDuxWW7pQ5TRuGVvcXz+JPh7ebv1aL9ALR/eT8Y35xdGhxx9797dCtZQB5cE\nunq8ZuQ2QsQPXF5pA7M5ekCIg76vbUU9Z2ETi1CMxducegQ8w3FVO/Dy9pZk\nSYe/Hu4ykcn5iu+LEVA66s/a/xVGfTZuSdiC/4xnY+/VrW1Qp9pHBMAI4Otv\ndpvi\r\n=IunE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.deb212de4.0","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/shape":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/density":"7.0.0-canary.deb212de4.0","@material/checkbox":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/elevation":"7.0.0-canary.deb212de4.0","@material/typography":"7.0.0-canary.deb212de4.0","@material/touch-target":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.deb212de4.0_1588803562512_0.5507200000318033","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/chips","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.f83e00898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b4401e0bcb3e5f49039cbdc835c0fffdfdbe717","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.f83e00898.0.tgz","fileCount":83,"integrity":"sha512-mKaJG9DrcUb//1JbmjRAYYgWwr/NiZ4MXn5KVetlXdStGjhI0C6MhVspsq5ZSQTE1hX0rHCGEZJBdC4gdtO4Qg==","signatures":[{"sig":"MEYCIQC/Xj11coYQZeVg6ZJL9nuaX/ppf/0jc+4kFzHUkw5LPgIhAMHPgD5QQsueDlz7d3sTvKNhnDVtqpJT7SWbV5b/fgwg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDw+CRA9TVsSAnZWagAAmVEP/jBIDLTwIA3/6dksjFOu\nHnm+eIjVLxDcITjxk/3ZBp09TmaJ2zaxIYNzsuGdpr7iUWNleDYnwMYMFunG\n+zZjM7L4xTvkye2j9UiSS3z18VDhP2TNVUTqnrAf5hfAZPp2iwsx/ZFP8DTN\nXZJD6rNDQuO4mXfs71JlJCr5Vjo4D42pDol2YxQu4v8pDbtfdCNfdHsdiFDP\ngfZtDOcFLRH+lhpiEy5wLK8jPfGrMA6tknYqfqCjQdz9H/tfzJWqjR73zvTC\nWtHSchkBfrIupztq9Wo7GDd9Ehz3gFY0yrBR4+Ol28muVlqC/oh90UaVX+nj\nlQ9XhBsc1brvSwsYZmSadr+fyriUa9XzlPR4hAqONwaYCyzIO/UpL3p6HH1M\nhygnDGcBLIVaLMtwAVlmWrtTrOs06MSm2XFluDODROfnN47SsUndVooRnaDY\ndBE5lh2/+aZUQFoA2Bzqf1W0XmcMD2sPsXbDy+gZZjBfshiaCk4axSyH8Qj3\n6HEfYaXakEQ9V8UtHHU5guW+ahD2ss3o2AQlZMxQkxBXcoYN1a7WS7AIeU5F\nrXuyAlg6FsoEijpCdi+sMGsDuvJY5uTgY6FK8ePUNvDYqIzR9xdd1tqf1XKG\n0up8v/xG/ToBssykJAMRr0N4JgAD6k4Ra6P9sze6g5Ko8VfBxYyAXhqc/Lb+\nxSg8\r\n=Io9C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f83e00898.0","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/shape":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/density":"7.0.0-canary.f83e00898.0","@material/checkbox":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/elevation":"7.0.0-canary.f83e00898.0","@material/typography":"7.0.0-canary.f83e00898.0","@material/touch-target":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.f83e00898.0_1588870205874_0.65353448702414","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/chips","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.047e6b337.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70cec9a83a2b2127ffabaec390df48f50591b6ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.047e6b337.0.tgz","fileCount":83,"integrity":"sha512-5P9/Ez0UN8q3HWMFMujqx+GuaSPRMM53kO8kGoXq8DRWfGXKy/pknRsTk5+ZzNPAjJe46geh5piQPyufumFnrg==","signatures":[{"sig":"MEUCIQDTaQoNSHBcFgGR0wzntDVrMnUiUCA9ucFhQ7RTLR/gegIgNzqmLF/YFhlwTthp8nxAh4S2Di+FffIszvaJMVLO308=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetadJCRA9TVsSAnZWagAANjIQAJhwDG56oVkDvYu3gSIx\nQtV7ez3gAkMtqqTilHfRI41kc5Y11s3C2OOUPhIVlF5jBEZOhkKW6sLc/nJv\nJ/alIk+Sy++NlX82aEMuN+azn6Sr7JAUQpiUgOzO01b6afd49kRrG8qJOQSA\ngoNY8prDdek2mxjvBuSPHFonxWmtEzoQbZVDF0wytFmoBKyphQrQZUORis/x\nBK87djC7N8NHBTLHc4W3Q/X5fK1nzU/O7EYM5WXtzDqrGWPxjx9glS3mTSQ6\nNjGFLOQujnpdkYLkVDAwl9B6z8Aafnjv4I40dUMlIibATpe/o3jtXAoA1b9a\n7+VyJpPM6qgZSlCRGSdPyq9ModPW2RYDSfFADqXc9tDO03KioLmEpn/38s9h\neBXN7sNXtp3v/urFJLkPVjuyFzD1zgrPA7yxeRdia/12uP0xlBWP6F9MYqQv\nSde9fiUBXV9LCCyd8hz00RzDsRo7uYKGjvnQTQ3VDtBYU4+0WxkZb4vrdZLG\nRMH3Ydr4h+sLa/2iwQN4hBoPPGD4uNQSL2RyggQBt+eN+rT+UDV7AzxPuoiW\nK4ITGpMngbUrjZNwGhJimubJ2/dQaK7ZzEerDx/94RlVQPUZ5u5EYii+B4rl\n0M8O22YV+k4ztxqqpmY0ykpm+SIxDjJEuJBR0kPkZH9TsUbhGYPcqJxEue4O\nlc4L\r\n=iiIJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.047e6b337.0","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/shape":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/density":"7.0.0-canary.047e6b337.0","@material/checkbox":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/elevation":"7.0.0-canary.047e6b337.0","@material/typography":"7.0.0-canary.047e6b337.0","@material/touch-target":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.047e6b337.0_1588963144577_0.3094052776070373","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/chips","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.119e21426.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fed38a34233a4abc39563c61587385950f2e194","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.119e21426.0.tgz","fileCount":83,"integrity":"sha512-gmmeXjDp3clJU3KfIzOm6Vw9tB7/cnZakznQkXAyRC5K1uH7+OGdbNmetLKi1ixd3BxsmMxUpGRX0oALEQgXCQ==","signatures":[{"sig":"MEUCIB4oYv1fdqOAho4RWt1owbXnLAkYdkqx4Qp4VrfWIYt8AiEA+/nOcdmI3TOWcNyt9nsV7J1YHllkQ07W3SVrIYwDCrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+2CRA9TVsSAnZWagAATicP/2gN9NtuBTopK2iyzsvL\nZPHWv0MPSfzplXyQmswx/caZhy5q56+J0xBYG4imWE/IY69N5ZpHbYM0tPFg\nH/ZLZxQzew5b6RU9SAvnPTvy9kw57pAX/3jwR32XCnN/x/soPBh8wyDMCDJW\nyDNJ11RtahZVgTXDZ8d2iA/yIvftnOizG4nC5wy8q7lr75ld4e7wYx1s7IxW\n6vA9ZO2SW7ji9IrUlOlCgf7bzJAphTifpH9xiV06IDPUQk/qw4bSBewiV0iL\nYtFW0FRblUR0FMVHuHivEZBcS85APwHGq+v1CFETFo5c97ReQGjJAcA4Y0i6\nzAGUq/7YnljaeN4N1qy/88CgeUVsOOqBjrU2QNCUOcjjCLPi60pZvy2pl/Jx\nO9nlD8JhSNKzMhaZi58jiRdUBPPuxD8koc/j8bJvayHK4JGQ4zgPJt2nuV8x\ncUp/02DQEu+UlsyOy5Tp+4hUEzAc8A7jWy8RBWTAv7kkOp0NEOAcg+n4/VtO\nBZln9NeZVexKZ148HMO4By0S8gHYfrVvnLMSCfLzHEexWi8jaQ5ov1j6EnmP\n5oLV0OHHBXxoGp+AXln1/ncS+gdSopvvLW998217h6+S+2rwnRKcy2yJcxrQ\n42X6blE+fYoqgf28dmBpe07YbU6Y3bxS8AV6RwfUftlIgzqznXKRyIzglMQ+\nIFiV\r\n=l5vp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.119e21426.0","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/shape":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/density":"7.0.0-canary.119e21426.0","@material/checkbox":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/elevation":"7.0.0-canary.119e21426.0","@material/typography":"7.0.0-canary.119e21426.0","@material/touch-target":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.119e21426.0_1588969397827_0.7598343484986638","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/chips","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.2f052d824.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05114ae53f3a8c1bc2ef6ff256fd204a5fd3cec3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.2f052d824.0.tgz","fileCount":83,"integrity":"sha512-PETB9ndnx0xfsL1ETmRe/oGLttKsI5R9gqec3popfbwBtlPEsqLGyJWqa9YAMl5hd1tbSzTStDlJatml98jj5g==","signatures":[{"sig":"MEQCIHchFpu1EqpyWsZ/WCmOP39d6Sn5EIrCxDyjw/MmQ3FMAiAx8LSfVRpAjug9FYdCeLZEddlDUWLGFgg1luVDc+cUdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetco5CRA9TVsSAnZWagAAsP8QAJzLEilBprBrYEGLj897\ntZMa6w0qj3clUTYj19tXlxEByNBoKpfLPg/mJ7u3wDnrfGuIjkSzUAxc6Z9U\nnG8tczynyl1Y3CHZaKkdebx7uaO2j4GW4Wlwpwuih3Oa2le4d6br0MBkdOXD\nUGTamQ1r1047fsAReYhhbBBKf1Yvv04RQMI3P6FRhf+gDaMEFEUX+siNbj8j\npq6o04YPztWpGKkqjby6rjwLCThZqqE6tX6hoiZd8pSYJX5dpAoBjpru5c5G\nsFNR4uS1eYYWE0gioXLnDmIB6Rs1OhnjNXLH0KqZJ+JguWVjEnxs/3t7ZeEA\n0Lh5rh/6X5tJxlbGe0b+Q9juhHHVmRxMnceHzwmMBCfG7Npnvkm0pNXeq+gW\nAqX8wJNOKPUvXGunIj+kCKmzoVD1DR2wJHHdaQu30mFV7v/FPFl74xLn1CAT\n9rNor3JXihKfSF047ziYHBYuTn7CKjdQ4TczvMgulzhHHbtgUnwhXcHkBpxX\nuREhzHCkqzvDRD/DJm95BtWC6e7czcbFWhc1cHGkY/4fNByww7pfM4uFTbMS\nNl8poIcRhEET1JAg7VpBwFtUYcJugAC1m/FLFn2ZMx2rWbVcRThgWJfZ/M92\nWLug3HfbTfTf4tk41sCu0h1s01jEMol8KLqeZ+Bz7I4PnpetVNlK54EQNmZD\nJsOC\r\n=XXrX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2f052d824.0","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/shape":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/density":"7.0.0-canary.2f052d824.0","@material/checkbox":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/typography":"7.0.0-canary.2f052d824.0","@material/touch-target":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.2f052d824.0_1588972088938_0.9767633332400139","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/chips","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.e84444387.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2114c40e58480c36758069c326ac7940e83bdb7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.e84444387.0.tgz","fileCount":83,"integrity":"sha512-jm99jrkzteyLdCcyhlujpt2rPyN58cFFNZaxxB9YLoq4v/8n43XDV9v4GscnTyNWMaleeLl4KbJVD/GeY94DFA==","signatures":[{"sig":"MEYCIQCp25EjL1ZbFeTZKakttfmK/DF2JlGbaWgEvqSO9JyVpwIhAJxiFjkWTxJPu7cw1tm0FknKfgKSvZFRqCwSwNhDeRp9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/cCRA9TVsSAnZWagAAB1oQAImLnfw6wZUqAPGGFk8w\noWk1QhPRU4/oFimY2Lfp8ltknwR5Q8alp0kusmp+WMTrFh000pomwLWN3E4T\n6VHD58wM1aRf4riCXsn+wihtIFB16sFzw74MdP19u8hvuP1JhyL7LJIZG9hs\n1AjjMFtgj+2oU/j+33qpa4dPiejVGM5dm30Hg1CYBB/we9Tj9XvW96nGvSc0\n0p3oBlPkhvpakPzvpFKlbg3BuJHQs0h8ks6QyqSJjtiCw8t1OVfue7pHzKoA\nagPeY/AoczS4pYg6Sn0+IEG47DwcohXfknqVgtvsVUjOMIkekdsv/4UsL4qh\n+Z89Kv4hF1RuGmLqqOfzN+R56BjWN4vTPndO5NXsL0jqsA8VeRFR6eH06Tv3\nOE9eovj/ZTHuiSn9gMFjHihT3sQhf1R6ZldKDmgrvC14tWHVyIxWVE/sn1o2\n4CPS+Su10W3CkZhtUfIAox9NSSNPbstLHGi7dGeXA1d+f4Qm9SZp5BzSagwL\nwS5Jr/O1mY1BqskOYk618L3pe18V7/uOPSFhzrBVj0iZhGCpiXCAFCs2TyHl\nvF3FsLp5eM217SVBuvlDiXoyzEOHAnJGCjhVFa9pgxiA6TFpL2pDYYYgcYjM\nfe9G4187hV1+ykr2iKI5qeoDPZF7K+TRlhSt7qbutj+bax4htsk+1o8EXUT3\nxukv\r\n=2mjb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e84444387.0","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/shape":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/density":"7.0.0-canary.e84444387.0","@material/checkbox":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/elevation":"7.0.0-canary.e84444387.0","@material/typography":"7.0.0-canary.e84444387.0","@material/touch-target":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.e84444387.0_1588973532155_0.1025213780883123","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/chips","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.893eb1876.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcd995155945900e0d7548c267bac98af6bdecea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.893eb1876.0.tgz","fileCount":83,"integrity":"sha512-W5ijwGoozznbxHEmbD1kQPRjG4MC++nUP9a5Og13olTMvd47ftXR08L6OdKzLBXlhxUaY+P77CWqxYUgZ+5lcg==","signatures":[{"sig":"MEYCIQC0RwBD0+/EXfMOivU6r3gD03ez12wO6k3USISreQmnYwIhAOJz9EXnDTTnIKZcCd/nEsTJL2iLns2RZqj3EbPXlnAE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV2gCRA9TVsSAnZWagAAwDMP/AyVsXTpp2Jzs3Q/mB8Z\nnbL2RCZJd5a+UemU8Qjl7CHhpjhkMVe/rS3sDrBqtxqaw2L0HUn/7kmYPrAb\nGOss02V5Z1PiDmg6IGCgMdNLiSEiSHstA0bY2BlB7Ka7tOwrfQDcql02ZMo5\n7++M/U54kSxCkASnLXiS31kiZnj1r/feBHdkUWJ1Hi+I+x87TW9FvHNxS7Kf\nSvvrV61R15cp0b0a0j6OciWPBmhlyCZixSNpbxX8IzmgyHUdHsAl7+SHE3zs\nR04UAwTtf7NvJbYdYgMKoPbM/iAErtTprC7Z5HEmKFsmN+S/gFv/uC1zu4+1\nkciYc9vM39JdxXRZ8TfXg7Pmme1xpDjWwnWzze0Q+rpNYt8cEfub5AQF+o8v\nq48ibq4ZWD8k9wYeXdQSUMN965c6ZaTgwQAvTgLs1kR1luZMbAHCAd1q4OP9\nQUFhVH6eplZiuNph+PCgBin+ZbsskVu1CeUspccRe6gBf2x2nZ33rE6HlHps\ndbdI2c1zHHECmmtcZ6VVtFVXGcCvN1Bxfp+WGV+o9p7URkOL72VUDgpsd126\nR1LzNxN/QXV7zU8l+Ok1UNLntzHXCqg095z+aOEbZB25hlFcdR+B5pfUodMG\nR+sOGpyA+nANvnbXIqov4sKc5JQ2U3woW2ylUNOE7JBTN92YYKvn/GopjRtq\nxIY+\r\n=8PNM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.893eb1876.0","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/shape":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/density":"7.0.0-canary.893eb1876.0","@material/checkbox":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/elevation":"7.0.0-canary.893eb1876.0","@material/typography":"7.0.0-canary.893eb1876.0","@material/touch-target":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.893eb1876.0_1589206432509_0.7628815169457057","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/chips","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbdaf8f28f24a597c675474ba49662254c7fd969","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.a5aeb3001.0.tgz","fileCount":83,"integrity":"sha512-4IuriyxUniKHK/mNDK5IfzdDHgJLI//NzPUxjV5hyI4KXz9ySAaMj4cj17//y3UOtQGVdG6EUzmGz2yo/3yuXQ==","signatures":[{"sig":"MEQCIEyT5wY4WCSVXzOBjvXlfpTPSXDWiD0+16SbWJ97fnoQAiB1OEDR+HCOM7aFDRvkH8v2807UNtufcGR4/rWxx5lUVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWFsCRA9TVsSAnZWagAAVN0P/11p3XUntgYEw3BUa6QE\nMo3q+4/PpeDBaBQOyDWrRgldaUdmFbCVsfo6Uw16o0pEoUYXE2qzDIpxResH\naw+rOTGQCwETNKMrcOoylRfaL2/9GIMiNxZUZ5ARfjotOYqRD7ahNX0iUTiM\nLsy902vSNwlDfgRJcKn0nG6UF5lykaQUHl6F7kHF8X5tliQBoV9QGMQVlQKp\nXRaa45sIMKyLPfL+wmGehLHac8dAb/0CUo4jEXKDcol3cMc1H8hSGUKYaz2S\nQ219joqJQw32Ew7F0dZzANvAHnBTu2Y6LtWVrtYcGVVwLzFkQp2+/vqxL5aj\nW8t/iIMuLi/nl/9tjPIQoU7Hxb5Z+l+AZYtjpJsMsxKBBjKmctYsjSj6uoFv\nUxnfNOQ9Mialw7ccWK1a5tEhVuBa4WCIq85R5B4jwht7LwyDC0bh+ZDF34Fe\n5k0aH3VNU+7yqS7NmTYE5uWkMwp71O5vlp8oNNZBMuN9fqoXPIm4cUftrk79\n4Kbzent3B0PRUYC5E/Ff/IIfREuYwUHD5MQ4C2yXOUrJVkfmP8QojSJBi3xG\n4BU7C4u4mE/LCzDdmJqhgy1UsHrVI3rFzF47krolu5ZwUQjV5PkWIA563P4A\nxMy78W4n6bgc/FzkLXJ/Op1S3k0lHVZKj4aiHntOIyeCLe5QZCh5wgFeSG/R\nDCUe\r\n=090+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a5aeb3001.0","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/shape":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/density":"7.0.0-canary.a5aeb3001.0","@material/checkbox":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/elevation":"7.0.0-canary.a5aeb3001.0","@material/typography":"7.0.0-canary.a5aeb3001.0","@material/touch-target":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.a5aeb3001.0_1589207404162_0.8388100837839532","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/chips","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.610c68d97.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6ac4ca96764e6297fcabdc683118c0bcb6bcdd7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.610c68d97.0.tgz","fileCount":83,"integrity":"sha512-683wab1fxuVdzzSCZ4Z6N9ZiPUAzeOu0YclXT198r/EkATGSuPgW1w8RzbPCytQRP7flZ4BLM0GvL9QX24P3ng==","signatures":[{"sig":"MEUCIQDCxnvbBIF/6Uks///Bcp7Luy9iKj8ALedYRhW/zqEfZAIgRSMhqAJpF8Rn/HqMg71lw/L1s+4quxUlc9dh7qtG0y8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaiACRA9TVsSAnZWagAAJ6cQAIMLTv6IM7T103ljJlcB\n2monAVvbUfAK86YQi811ffIhqYMcpv1vP06gfSllIvedV0Z3jcwhG49Dca27\nJuIhNEtKazf//25oE0imVbUjO51Zsc5Nd6+pP2zvYYhZvyCcgzRAqIt5xXtK\n1ormAldvI5rY3WpyWdMPbcTxshOTmnRTdOR/nljz4QXnnzVR5VQmNnfqaTj4\nDrKPdvm8XX47DIizthoCnorFfpBXmsJQQcQBwYcB/PVkiSUOw9tU5fDz83l8\naGz7tOtr+z2w7zec2PmJg5OY0xrtbWIbuYNbDDpY8D4D2LvAs48RRxB8WJNZ\nWoD9D8/LaObWcWXsB2P06pm0Wkgy0JgdkaiVdxvZIa6ryFfGKhhaXHNVW1px\n18xj89fmHkuVRIYLb0tkCxfMs4XgWOv64HFs+5Xi4BZ5B3S2c4zAVQwFfcwN\n0bBivVIbbnoRZZhj+SrZBnNV3NMtcPMstAXtLn8SUQPmEm/vdIH5NCRI/B3n\njwNX2o7IUvb1a6+yaLDXYvOK4ImHvCDRwEVp3fvpgHltIY35/FQMz8ytxRf9\nNuvg5x8O9NP1npdxc23TQ+sq8bKa9mdnqWtnUZyPo/ifPoW74AAMX2fP+UhX\n74CvEO0twBWxlW3BK4Y6JcHHI99xfWYjHlT4QYA/flQj5Kj1bCS66L8pKcEE\nf467\r\n=1Jzy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.610c68d97.0","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/shape":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/density":"7.0.0-canary.610c68d97.0","@material/checkbox":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/elevation":"7.0.0-canary.610c68d97.0","@material/typography":"7.0.0-canary.610c68d97.0","@material/touch-target":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.610c68d97.0_1589225600152_0.9472461245179884","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/chips","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.ed52af767.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44768ddaa42586a4c11b1d529625f55785555fe3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.ed52af767.0.tgz","fileCount":83,"integrity":"sha512-ZuHOTPvU5YOyn2U90CpLLj06xurnsH2U+12yh+boeqDhMsK4UGNMnOu+mxETk16e7jXECVrrGjYCgqd8cqhh8Q==","signatures":[{"sig":"MEUCIQCYMKzbZu8yh3VhPUjyM2w2hpU39hp8MDFxkq1q7LvF1AIgZ6jYl7dFTz36mtVtLtO6Buo0Uk3NTYg923Pba7YNuUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":884960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubVNCRA9TVsSAnZWagAAPn0QAIkiytIy3O0tUIJNnwxN\nDnyIUC1h7s/c1viR1KGye3hAd9OMYaD2D3+LIWfHR1cln7k0r88JO5wZYwLS\nvHIDad+idQF9e9VwH6ck+7/Z4wRquUqzIwV/dvoUkmb7OvY4V0PGI5gwdHf0\nWVKjPOG1Sf6XKziaJGQP0x2oBgrv/wZ0NYjE1iV/2fjXwWfRlPQhZ69QEB0q\n5Er82mIA8qkvM2hZQpNkgsnetxPAD2zF6mMrhRhewAg79obct0RnTioYX1IV\nL2luOBaByWLbj9HZs4aCDzlFQU5TebAtfjcy60liFBU4bVxOafRBWCSkEWGV\nCDY7Ti85kNlfhXSgD04uRdR6ukZ098wGuJBSutDJ+RAFQrRDxzMlakSV28i3\nRK+og3Qc6SciPz7KMOayZudKn8jWfUUYBoo7N5vzAJhv5AtrV9bihdZKF07V\nnpbIwS2qkNFIxgoyafmyU7eYvFUhvgcs5rWgiMGwHzoJQ78+aQPA8HnMHaq4\nRrdu0nG3GkMdByqqKnleaLeocxSbGUL11RC/C7yxiKeeRMyExJEWBCDjYwHw\n9Q7DODkYoxN/YqaukOGWDWsyMY8iVx5gQN4RJjI2dieJoMdH4eub1slHYWpZ\nztjCISBCOr/WtvPVDCQ9kye+fCZSSJBa5PYTtJtiXXGD3ZFZFbmTO4vTtHi7\npI8R\r\n=EOAn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed52af767.0","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/shape":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/density":"7.0.0-canary.ed52af767.0","@material/checkbox":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/elevation":"7.0.0-canary.ed52af767.0","@material/typography":"7.0.0-canary.ed52af767.0","@material/touch-target":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.ed52af767.0_1589228876787_0.3697299053378684","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/chips","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7be36944516824d76a9fb123cffbba5a626127d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.058cfd23c.0.tgz","fileCount":83,"integrity":"sha512-PVjzer7XBMR02vqW+4ylyixKjE2+IYiYLjlRzZ5D5EPRBMs/bmrrZOtomOMOPiGOsU4pSC4+pzolcsBLJDN2Zg==","signatures":[{"sig":"MEYCIQCR3bAAbSytmrNKl8ubhcJm2oIZDOojKZL9YmesB+DoMwIhAP40QPlJLme86IWQ0mFaMwxg4HKAXK1xgz7ojZTOVEvz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucLXCRA9TVsSAnZWagAABxcP/ikNyRhrwbMQzor0BHdz\nSIZ3Bt4J/F6Td6Z7RyO2CASBG9NJhBsio6xSmuF4whxfWOdSCGLuxikbAStK\nlriHRLJyic/StjooRsUKjXWGlPF1iAHC2fWBGSWKsqUQCmS7FLX0/NRYY7fX\nfqrosmOQ6Xqv8QckbbT70YYZbCyBcNoTKNHLtexUJQ4zRSpT6iCeyDz5+AJ9\niNNBDHBKmEodbcslocvmiC7qFjvdaF/Uxq2cLvpj3wN0Z1K6AryasXkhKsh4\nSciaZI9s0tiwWmcNky6HE8/ZekeVelg2j0h0VqKDOAn1OxUGaWwEFnRl2FDx\nAg7RCHeyXtvP/LM8nApkwUdhFUE7qUISXH/G8HnQT9/i4rf2x5gewY524qX/\nuzbpuLGZTJ/xgOZLte1CcOYD8nmDPZlDi/XyZr1QFoh9vabXeMZNwTFCHEyi\nXBvcRQ+BPBk4sxNmrT2I+KqM//TTHrGAvfkzGT0Wo3XwjgB7wcmexoUn65hz\nlNmfKLOVWDJFfqjicTVxQHcRWCMpsHmwKkFsc+Yt+keBEYXvh36mvhmVcpTf\npuxFSxnkP4pbCAHNMGy+wdO+hRPSkvd8thgo2F1/f2fR9W6YH+2OdUpDBI68\nyjaxwQ40UN0/AXgkE1wi72Gkwd/g+IDSIqSDO++9N1wxMARRJxsaGsHzNK24\n8D4v\r\n=/1r+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.058cfd23c.0","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/shape":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/density":"7.0.0-canary.058cfd23c.0","@material/checkbox":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/elevation":"7.0.0-canary.058cfd23c.0","@material/typography":"7.0.0-canary.058cfd23c.0","@material/touch-target":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.058cfd23c.0_1589232343424_0.5572920214411512","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/chips","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea32c86604d0aa86377cdd7fbc659d45617b27b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.0a371b4fe.0.tgz","fileCount":83,"integrity":"sha512-drXpA4JdEoGMfxW+veKYB9pp8WyXkjCacLXJpOX5LfmQVCs8YRVmA9NFzUmL5PY8MpytEqKCxBXC0+bgzRuYsw==","signatures":[{"sig":"MEUCIQCvMDT1XF67iRrKH0torkihKBziywnC5Jfacx/9lJMYtAIgdblktBWeFrHJtoqUVzO40EMhqCLTMzmEe0q9BTyF1dE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy7hCRA9TVsSAnZWagAAmuQP/2/3ci5vFySyZxit0N0h\nOLiB0W9tlSIyKIo3dC+1V8aQGOtYWHETC2TIMqmIzshqqoD8pFgu+kfbrL+/\nXuyMshUZtrK/8Kbj+jG2DXw5oW8WrRR5+XaDcu81Pqrv8/oUHs6qRyYkpuNV\nwtGepvBj3TVVjdrOkZI5pQTSgT3LCIPke3oDxJX8FVq7wSf/eNlesFd/PlGQ\nXQGdfd9dHpmbQ0ypqb2gKqNVaS1bje8J/GOEOhmVg9657fJQKwv3DO2E8amV\noqbknWpsGQvd6mQWChRm40teR+dzaAmuhbIGS2mdz51L/EFAFtnJKo5zKeTm\nfvHBGEPcajFOOqfdiuqxrDrUZ2gXhFzMPbKy9oFTptfgSgX8vNSis1i6abmz\n+JsP9ML+DTsF0XC+B+kdq0+62czbYZxKVa1qKto6r1h+3kjQkyf2D56snXZd\nj6SO/YANC7UJdrA8ANb/GsH5hLSvi/EAZPsKkcdW+dtNQxlgwBm5PQUKMtfR\nQc7W7AiIkzTJCorT0+e0CRCKdDaIAEbqDEnl/MUX380CYpC3pp1JIv4QEMqU\nXJnMuXk6tTtWCrpsAhQyxGXidkyx9g7m03b3jM1Ak3Ym/Krxb6pwORlCGtoG\nHOH9r/AQ2rwhBGjVqX9gesGBMn6b+xGMR9Y3KQwmWLoRqnEdZFppskwhRyNa\nL1oI\r\n=2Un3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a371b4fe.0","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/shape":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/density":"7.0.0-canary.0a371b4fe.0","@material/checkbox":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/elevation":"7.0.0-canary.0a371b4fe.0","@material/typography":"7.0.0-canary.0a371b4fe.0","@material/touch-target":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.0a371b4fe.0_1589325537417_0.4534500151859182","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/chips","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.2139200b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f637e498c4e9f5025c122ca078e2b16aa4e5d127","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.2139200b3.0.tgz","fileCount":83,"integrity":"sha512-mAlIpOhvh0MO6F2V3tHQhfx7nei4gO3vGYq8cOU0DR4ryUFknWAedlYrPmyhwIuTnf8ybOhqR9dDUj1Q1w8V3w==","signatures":[{"sig":"MEUCIQCdGFzHi8Y8DWK5BqZ6xOp3Vi6idhrLuWmTqB1FLsQCWAIgPjHsiw4X/OSgLMVzyx9j0wdsWOMmZhhGv11fDFnQcl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAijCRA9TVsSAnZWagAABSMP/jZo++XFgEHEtQHcFP6S\nso8Mey6vU+pTVYwDq8n+igYwfHBwYLRI1tDlUpwf4iC55c75a4kG4HsVjSSg\nP6/oJfU1R//5WzF/5aSh0nABdx7UbE6qJ/AU/xdUjpPc7E9f6qLdqbphvnnO\n4fS6q7wfXhb8yWyToVBo0SHiUWdm5LX5nAxuxccC88wCy86VQ83Mi2Ya1n/y\n/+SgWZt1F8frDV9NEch2nk3ZZU6WZ/swNwAFPZUYlWK96gDYcKopKsO0duk6\nu/w1oK1QfqBtgmgMGDT5hV13Jy7EjJpgThs9XcBLB7IgIaW2gXG/zzBrYlxs\nXGWBI4fOROcjnKlwxokN1tZejWG/ez3ThyBN2f7V9CvX+mEZvKFlQGeLRYJj\nkWyZL/vhIYGdT1AaitYmTDg7PLcMrqwRA+M3kAD1RFode7tWdE5BhqsyORVJ\njPu++ir8A+DuVijtWHwUEVWaQiqpYY6eekzlAmYrQGsFJ7ufAy+ihN7W8B+0\nplXHIhH0tMTbVbQ3sIIaOfNx/XvFIkrrwDdUrHrwGPCfq0LWEsXnySZUbxEy\nsmaxH325t2u+VEZ7LHoGOmKDAPVfdjtqFN+46YEN8gWh8DBiOST/FD64/TMK\nl8qTQa5MHCHRZiaQXcypuK5oodOs1prwyqnT8Gw0c4yypw8GKsp6iR3tjPzj\n7Uwr\r\n=JanJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2139200b3.0","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/shape":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/density":"7.0.0-canary.2139200b3.0","@material/checkbox":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/elevation":"7.0.0-canary.2139200b3.0","@material/typography":"7.0.0-canary.2139200b3.0","@material/touch-target":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.2139200b3.0_1589381282842_0.11172214206335185","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/chips","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.744d751a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"007a1f8f55c42bc3b1f802e6e6f64691d0ac45f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.744d751a0.0.tgz","fileCount":83,"integrity":"sha512-+HDQRdUwuprLgAsZyN4wrkox4QlUAfDhFv7O1qCQT3RQTX2sYzJQe7/kldm3cs8QCle8a6QP5Vg84kRByvducg==","signatures":[{"sig":"MEUCIQCBgA6MyeBdlInMXFe16SqV8OMftxzvhDPhaedEagK8EAIgS2jCu2SPF89PlmQycJ3P59u9QFXqnD+9dY64jBQD168=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxvCRA9TVsSAnZWagAA+ZcP/1uHlKTdWz4ehSUEcCLJ\nLkjY4QZNWX579WmvYFlTgntTPB2CRgg6cDf2NMiPBHyQdNABZn6fKBTjmqoX\nIVYp+DELGf+oyPN2dScw3qKL42ZL0jbSIaoa39bBniakDtblr51jmqONNHjU\n27da3cZ54aqI9Q6UQUS2lvr//RBY6+9LD/3m3V2eGpZoe8AGpTPiZJo8UqWg\nNuKG/MsLy1BIg7vjSed/Md01SwSbd5EpntgOUVvR01iN48cXT6coMAdvnZfO\nK2/aSmAWJWR845sH/OEFoAfse4xbvvL11o6niWW6X9joTFK+iZfGybU7tybX\nlme6uuED5RJwrMfO/87QhrIprUK4Hma2dvfgeoJCxH1ELg5atga1BBRaUabd\n4q91nHutOwxOtm/ssKqT7Hvi1FLoXidO8OVOEw2/ctiKib/vlr+Ab+Upsd8i\nv43EHU6NavBp5PJzFEqwe+xs58WHNIpppEr59kOgCf8v+jZwZPtVHvW1NRlk\n1MQtyTdaPYqxwwa4XV/POLWHwf0eDylW5pFew56PxSEWO0Lh2pqsYO3pq5tm\nQW5LHRHyh9N8tYJZEaohbtpuLGcu9FnGMZ+HLtfXMs5IOvdbHUwbMFivibjw\n9HqByAbI2JfOrAt42lHVnIO+4xdpOb/Brjc5SCdeZ2jDESfeDoLKbKgjRmXv\nZLHV\r\n=yidV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.744d751a0.0","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/shape":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/density":"7.0.0-canary.744d751a0.0","@material/checkbox":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/elevation":"7.0.0-canary.744d751a0.0","@material/typography":"7.0.0-canary.744d751a0.0","@material/touch-target":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.744d751a0.0_1589431406989_0.7865713030434389","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/chips","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fbb0f6b19ce3f339730213b78652dd2566efed0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.ad0c0c103.0.tgz","fileCount":83,"integrity":"sha512-VABXc7sacTwAjyuFfyNZBH08f8bzrZTwTmOLi14iw64DgRPP/tvfOmfyZzVaP0oWO1abQ96I2KgsIR+sEpo12w==","signatures":[{"sig":"MEUCIC7E5+s3I3WLVnhq6N3pyIkyg9fKBcgBLaru8iH+0a+tAiEAjSFQM8vgEkYD38jnX4ceHOoMdDXueRXF0UZkcGUU7ck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVsXCRA9TVsSAnZWagAAM84P/0NQBYCityYNMjov7UQi\nnTGuRU4v+feMImvMODenNxm2PlCumTgSQd5wYCN+asPKR1YVYEClMRI1vbxm\n+NOup90oHs3nJWSmRzu8tHWcQKyboRyX/7a8TvMiyi3RQtz5lszckJtZjLZr\nXASue4eY+UqcVapU/f1YF6X18dDCThEU7kgjS/vs7w/FpRG35y6w9HpbBjZ7\ndqva52U8qpoznFrNbcgSAtkA/7tb2DcESdfB6qjI57iPUV0M4ABxg6siSU1E\nEikTj/pD32P9TfcuHL9NKQskxSjGIuq7sPP1/QS5l2hoznvk95Ww2TcwTflK\nAV6t7jXGXzCNkgpMUHontlWbngO9p+Ul3dGhtevnzimTUXrty78OaBrsMIQt\nZ9RGRD9ifuwbbnhpVd0VyCm/vLIGlxdLsR+Jb9dcNYX18h9R9TDJmqHRMlE2\n/b0M0qISe7NES8qcCBaUWIdV8Z5GmvCT9/ZGxNmEkN8tjUJ8+Jc7yq+nVkBc\nUzEcMs4ftTqg/MjkKgg0RSdAyN9T53fHf74TafRtCZ1EZperCkcM2vsSu4w7\nTzCLKsJtESntBcLnob2aURx5dmbUjdR1ttQVeloyl14M1L4nHVt7wGezHZgX\n1mTlYP54U6p/pqNHNpI+veF9KvRgP6z5DHccndpBKHt6NU4ansjnfVTJtuKM\n/3fH\r\n=gzin\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ad0c0c103.0","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/shape":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/density":"7.0.0-canary.ad0c0c103.0","@material/checkbox":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/elevation":"7.0.0-canary.ad0c0c103.0","@material/typography":"7.0.0-canary.ad0c0c103.0","@material/touch-target":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.ad0c0c103.0_1589467927506_0.18091232737950103","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/chips","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"826e80271562c230874704bad1fdb2c8828b1598","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":83,"integrity":"sha512-LZYMse7GNScyy7ATNsHpVM0NB3ckZ+3wtEVzZPM3vT7y96S2+3RWOyyOe5LdM0kg51Vc5v+POYtS8f04hmS0Hg==","signatures":[{"sig":"MEUCIBPkmIc4cMPxSem4GbaVGIQd362Mj7MpfajN5BWT3ZaUAiEAh4PD1X5EpKH5+fOOz6HqIN5sUm3KDtTEUcMq4OVeRHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsvJCRA9TVsSAnZWagAA4JIQAJiu8y0bJucrwizc/Xsa\n+mtLN7dBbF8EzepDib8lskUXbYWuptSsKfKsnyihJ3N2bI0EKEEH1DGklliG\nzuRP1AAjXn0ZfFqaZ5KEssotCmWe5uO5scC7sox3RYhW+f3dYycC4rFEyIKE\nJZEfhxd8D8dIOnsofK1+RL7UEAO+kMFO//Zuj2JDhth3w6f7Y4NYoWraH19B\nowD+nfZPsD+cINgo+M3te9j+2aYisdhylFNNuOf/nhqTarhbwtTqn83FTAoz\nPbwEkc3fjNhdAc+eRVu6PhkDDIoG4nYEBXKWOqRkticRbdwF5nNQjOIMtI1u\ntprxyrFucCMk1ygK/uhK9XVpKugtylc/A7b45pt2uZzN69yDsKn1GJk/yM4s\nGwp11m0LaGAbei6COyVD0efaCPtmYASqwAPH74ZRoTBrGW8rZT0BcwW9jAdR\nBBcmHdb1I1SYeAGfqAXm8QKuSPjNSNGMXjCCAGAObI0Cm5GaYdeuh+jaEZhx\nyp8URTt2I38qp02NZH/sQXHM+BKpOxsHvl1oSXq/9zhYDS14smyG+bU8vDZz\nr3+v1sT8JlOVPnAIkszxOCra6QXuFdrsx1/uoFRGubxEOVub6RrMA4EcEWPJ\nnyW7zMp1OCCwu+iZzj3S3vVF96wQtTBzh3H+QM+vScSzn5SI0E3CR161E9PL\nwYQc\r\n=9BnV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.fd8f8f2b7.0","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/shape":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/density":"7.0.0-canary.fd8f8f2b7.0","@material/checkbox":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/elevation":"7.0.0-canary.fd8f8f2b7.0","@material/typography":"7.0.0-canary.fd8f8f2b7.0","@material/touch-target":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.fd8f8f2b7.0_1589824457429_0.1844745465799249","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/chips","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.730920fbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f62553b5a85eee02f81575d2b663f3c1cf5b791","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.730920fbb.0.tgz","fileCount":83,"integrity":"sha512-NI6ljDepsh2e1av4GxPRR/LKXTGZo7ank0UE1TfR/sDjjBYBE5AjD9z35LzZCcWBFiJqIj33NVLG00oxnfbghA==","signatures":[{"sig":"MEUCIFRqYVT2EvHbjeEKh6RLC2z1BOJVHOJ0DQH+oPU/1wdcAiEAqNP0JVTiRtm0Z8SEVhGDPA13ivSY4uglvXHKR77wbO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWwCRA9TVsSAnZWagAAREsQAJ/kXNtLD/bgIUWs040P\nzXYg00PxkxQfeY5RD21AB8rxhCieXHCqYIVlVHUmRLp3BDFzKu4RjzAhanaz\nq7tPVC7rb8lauymOjtxHh/HZ9iBh/ROi834ru2g77RphW6wR4GeKCgmhPHTp\n8us8owj42HYGiJAZ6hPoLKijBCmMp3LQcxRBTv2niE3ZZMnvuolwWD2hRI3s\nX+go4ledwcSmz0xVOEDitEL4Pn8pZVK8QhcxrY5UCnkfiFN6pGMbFAGD5DBZ\nT92kzjVw8egN5wEIFXK+fA2nv3A3BANS+L1eD56MKcFtIGq/oNyRJzf0U0+M\nuWmrTzwg0aFrwXO/20THMFm/OUktRTHZaFwNvgRHTLBkQOqH/yWwp8BzgSR5\nyKVZfNQKw/6hTa1bz1brkLT1X0svUXWjhMk/2COjcVCexOH7nGLxTeNGzd4M\nq+hpuTLi5Mpt/fmQIpgkvOZ6Jb+GBF5S84oOaiyZkTlIlb1Fzv/8FQplFnH7\nt6WDZA8RTBGnMHG0QtbnJrM+zgYQmU9zEJ5VHXwBPuDrgYPm9Lgk0Z7zPDwo\nHtF0RPbsuVLqlrwcS9LxNA9kErlt4yFT0hhb+y1OtTrjt2bT4Dk3ELv3Te4w\nxtGwvfYAYfzrapGJV930jh7/JV+cABEjijv4TSiIFCPWDRRUrB2nnYlNTOcE\nVIcY\r\n=3JyH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.730920fbb.0","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/shape":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/density":"7.0.0-canary.730920fbb.0","@material/checkbox":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/elevation":"7.0.0-canary.730920fbb.0","@material/typography":"7.0.0-canary.730920fbb.0","@material/touch-target":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.730920fbb.0_1589831088478_0.617150858970209","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/chips","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d475f6552914b70e1a83268c8b70358375c2653","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.bcdad99bb.0.tgz","fileCount":83,"integrity":"sha512-YwMXcl+T4lE5qNBjglvHtNr5vQOqOIYNJ6W2CPEsKHKqhp3SrFP50+zOyj4Lzsb0Qmn726gJGm72LgWn6fJqJQ==","signatures":[{"sig":"MEUCIQCc5TtuepX1vKF987KHQ8ZMt9QxXu8EfBMuxxgwKAc46gIgYEiAoMc+TC5AxXf9fHN9J3Ki3PCpruxHFqg/vTBkR48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1AQCRA9TVsSAnZWagAAvMwP/jBWBC/Z/It+RbpFEHKV\n3QRK1IpBSaRsanqXdr6GKE0wdnI+uuk3BHblnF/gtrRdf3ueamjVgOpIRqPh\nqcaatvAn1Ck2voOnWcwLD0wtUTWcyA7ZFM1gPX4CXaeSGB3JwRZcXl/6B/7F\nqwSt2XGNwPwyZ3xahrmdnC5xrXGUCFQCuIQU3HSxtguxOvbDhnMm4VHmkPtk\n0U+O8u4XuylraPLjhox0Q0XQ9OiVVFKxBtSzZ3bMTJaNdNyE9J3K/aSZ6T80\nU5eBK0cJsM+y+g77jEGyQMwLunv2FhJluPyAaFoc8qGA5cmnPEvGlZSucICG\n1M2uQGSus1lP/h6foDRlaTZln5zC6tUgEGFNhzcLN4jUfiGady1DK59AQFJQ\nKww11kMAmiotCy7Bdat683t7rCKMru12yvURRl7Yc2e+tiqq0xFFWMhhlPfE\nP7X4IHz512XCVI8WqvS1ae2GmdvmPuWVjEfIJl4kFZ7HrOLb3r3YwSdwI/Ry\n4KvYSwR+AaHRp+pHjVotY/o/T4ERm1FXLb48DHdoV6tv0pnDuN+X8JanuYVl\n0kh2OztTDOLrjcFEiwGaGZwS6z1nZk35/aBzck0oP3BFef8nqjuSyF3sKwVm\nWOJ9mpuVrDgZIrWODTIqa7Qef38NWmJLhLIgX2/HL/uNjdfoCXvoROC/GQ+c\n+J3K\r\n=eGEs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bcdad99bb.0","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/shape":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/density":"7.0.0-canary.bcdad99bb.0","@material/checkbox":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/elevation":"7.0.0-canary.bcdad99bb.0","@material/typography":"7.0.0-canary.bcdad99bb.0","@material/touch-target":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.bcdad99bb.0_1589858320279_0.9648426820497542","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/chips","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"549508e346bb552abb71b9e2bb912164776877c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.4497b86ed.0.tgz","fileCount":83,"integrity":"sha512-sjUjwrvnnC1CQUv8INr2iDcB6l6I5pjeKYk0l3ztlDMeG9a1SSJ9Ab++Pj2rcPoTLOh1+a/p3E1MMdW+VOdMUQ==","signatures":[{"sig":"MEYCIQDmrfKpK/VLw61wN8NKDg4AqcG22kDasxiUVJ94VBXg2wIhAKvGHiGV5hKLFhM+MqZUQyrZRjlY+4XrSPaI8dWjeB4C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1e9CRA9TVsSAnZWagAAyPkP/RPhyC/Ij+e+xvJX0tJz\n2w7JLtt4YJgPqHj/XXqmd4EfCKwS9mz1yqoeT0MHPwM+GahzeX6FgQZ7+1Ak\n0yUMKrJCWIhdHf2dja1haD61Pd8xd/cFf0YvsYV0C/P8o0MiyPc63WRQTub0\nkS8ZK08IUO7rW4YS6NCHGL9Vy95Sngv7y7UKYjdoX0jEL41Pa62Y2gqbvici\npxJ7kX1CtFipdY/0OfDris7wMQtK1ApTgWF9b5sY3D/6XiXty67ud+PE2hIL\n4qxeUgW2JUVujB+Q1BapthLP3d9tPl4mO3YTA5BhmUwFxv6yu2HVBL0MjCja\n0vPdXLL7GfuTZ36Dlu4lryTBOFar4QFzS/Oh2wngoQGoB255BADhtkmmEGD/\nBIs6HJ0s9QIaPKKfDDg3jVgUaiGg3zTRzyKtTK0QqW5YvVBIyDTQPhUX1Pej\nQsicPV6obkCdUyLJRFTg9FofWuQJ2VYSAYSTojB6M3a/u8mU+UOEQbe7pxRL\nw6gsJdEeWo6X15EhO4rkiKzN3GuZdRVPuH57VsfIRn60UXxn9vaj+vLpmrje\nI7Q1aayoQOeEhIA3OqLa9SWiQjs8kpQpyY6LIHQOm2OsLM9t08DTVDnMTwKn\nsrAOVpFIr9IbUsUvhuOVTVTOVynH7GBrDTaQ4mwlE5hdVIYVIAqZ7L45SJek\nwc8s\r\n=R8J2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4497b86ed.0","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/shape":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/density":"7.0.0-canary.4497b86ed.0","@material/checkbox":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/elevation":"7.0.0-canary.4497b86ed.0","@material/typography":"7.0.0-canary.4497b86ed.0","@material/touch-target":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.4497b86ed.0_1589860284648_0.6997411548797285","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/chips","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.2e60575da.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"684cd4199b6fbbcc7edbe05313ed77d8e0055b92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.2e60575da.0.tgz","fileCount":83,"integrity":"sha512-gqhIexwoiTKbgJgF5Qh1iHHFmq3w4WtJSaNsGfhKaMJYHG2UT1XIdWYyTxL9PVWc1rXg4khbYaIdU67GYVfQmw==","signatures":[{"sig":"MEUCIHpIMdoJ7E3QacRBOpxLiImY3evhTNeR+yrcl9iMuvvsAiEAw7Z/iV3EZDyCQAclpVrL1Wg5vN2JZxCBRhTUrGsd2ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexATcCRA9TVsSAnZWagAAyWQP/2oh4hlyhYq6nwsZMp8P\nxfrxTo9+aLlf/TVQdf0WUrkEGDbPY49kv51k/VokYyN2TEicX3NZbxYcXP2p\nwUGUGtGklSp1M5dE49q2TpEtBUX0HD6KeU968UBvEMTppCVUklC2BhMbPM5a\n+3U18t5xCYcdjj8XsmIJjlS6GNtkaB1cObK/Tln7sTIMjCbWnLBtQWqF4D2d\nG6Ui6xiIslIpufGmP58tA3wyBUH3BZ0nTDyOA15UlfZxwlRJQrpi+tW/fHKn\n1eJFDY9CxQeNAc6u4KFJiMXqDR45A6x8Qgsh4TlOT261/hfz8KkVrdIBV3TL\nvuvMbLJCWdQ9Z7r3o+mjTET5J1tzbfPjXIL+nfN4/xOiwvx0yd4NGUHvQp/R\nlGI1FbNAo3FMIgO1UrcfRpmlTgVTHAttM3ZtItNpxjJ5XCEO79HFzhYEkAoo\nPdR+3FhsmIuUGYlRxsTt6QJDA1fYMn9/By1pcmwrw1Xr9WYRzlNr3l/4+9im\neOgYi7BzlOohuJqvk9FUv5bPxK+1TWtjVacyYsASnh6h6nAEluOLkpt9gf8T\nm2X8a+qMT2QzfOXRDWO870Mmc1G+RmASZfe0VpV2QRjE3JxTAmmn5Z/O7E4z\nUnve7qM6OePuLBDPIE/zz5J4opxKSiPx0/uAHjxoOqrLIHWPnI95AXLqXnAd\nE01f\r\n=tv+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e60575da.0","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/shape":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/density":"7.0.0-canary.2e60575da.0","@material/checkbox":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/elevation":"7.0.0-canary.2e60575da.0","@material/typography":"7.0.0-canary.2e60575da.0","@material/touch-target":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.2e60575da.0_1589904603486_0.5476338330089052","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/chips","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64c91092616b84843d218e137cbabe641ef87f0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.e3eacefcc.0.tgz","fileCount":83,"integrity":"sha512-3+GOz62OtO07BMWr0XVXrCQo5LePa9fAknUtK/VL18HcoYQDgKAWBfYI8My2lDhiSllSwZIzmp+2/kDiJ34EMA==","signatures":[{"sig":"MEUCIQDFfn3acScutgKhWyiOyL2eN2gqgLPk9MbkEHadoaZRfwIgQkMNmwy4o6ED8pFZ4F5jpb8la3K6y3zZemgbTOJhzyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmtCRA9TVsSAnZWagAAWR0P/R12MkXe5Yg2cgDKBSO1\n3d3Uvzj6NzaI4FbuV2JRww7bQtMr6AWvOMP2GyehZR9o1GReo4WyhXMzHxbK\ndfeLD/MjgKrltNNNX5aAzhgXSmfhzvhz/YZ7CoImA6zTYn5uDQVerdKfn17r\nfp0mTnsFvDEg8XdBxTR1h1xXXpAvfZZoUi+JueQm76Q+OFE/TAlIah+8z+B8\nunNn/ns2Ftoo1M1dosF69IWg/ifkAPDWa/jkrmpaFNE0AGMW6RfEOBwq1YZ0\ntljDzHFkCEjgEU2nPSLYFhR34bYr1HhKPMUS9u5G5Zz2TTotoxG5vjMdMcmZ\nAvF2Zjf27F+rBaWcloBqdbI/alespNqKWZdem/K87FcQhKGwtJGWXEHo0yYh\nygawQxExqNvokF/uSSs2ar9SkBIXgZdNWPfQ3AtZ2oHjPAnGvADbYmPQ+DJ0\nGJotZXplyeb/PUfH9OFcSFptlsZpMdJQYlmZtJydvuOgL8XdU4sVCcK63KkU\nnIKewecVdtarAukD511SOhapNaMQuuOLqvGRgKNm13bbB9vtDNmQZIcl4xey\nHHlbCoRu2H3b2qOT5allY/LVQcd5zitQNHnH3orWPjknvo3S3NyBTuOTEzlm\n4cAKTuaFIj9NxakCfcU/TjN7GwmyfKA1vxlFr/qBqxIazHPZ8arooOL/bF/c\nObQD\r\n=DNYB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e3eacefcc.0","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/shape":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/density":"7.0.0-canary.e3eacefcc.0","@material/checkbox":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/elevation":"7.0.0-canary.e3eacefcc.0","@material/typography":"7.0.0-canary.e3eacefcc.0","@material/touch-target":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.e3eacefcc.0_1589909932882_0.7590447952985764","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/chips","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd7744e00afb49fccfedf61c82a6cb2304af76cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.b065a4d2b.0.tgz","fileCount":83,"integrity":"sha512-n+wZ/PoTcxmfP54YIZoFHNx9RNFIqWqe/d8rIp+gwJneAitADWmObau+WpftfyAfLeApqoOYLqs6kGdLE/n8Cw==","signatures":[{"sig":"MEYCIQCfNim93nUnMR30F3BzXiwYoMG1ZwrL5ySNR73Pdl2ujAIhAKDwUL/Ox1UXszV1qdArGS9D5HnGqouXrbBLBomgj2gl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUCxCRA9TVsSAnZWagAAzU8P+gJQ80JO5VgDmYxzzHFs\nzlpZsXOlhBbn1ch1vzmxlwTQywf73b1DfdUfwaHmbT5DjxGT6TSzt6x+P1oX\nM1EYH5SpYj032TyT0LRf5FXSylzlLnDM5LbX2h+U4VGRXTvHFEZ4pRAz5Au7\nYDecJi1WqEx4Qo9qqC02UgY+xvK3TXrrHL6UW34RTu0cDUpcOdBgSRaO/KfC\nV9rJRFOMrbvX03vLh7HMQcr8j9oc+h4JkwBTarHDQcq8Z7ekPr/OCFs0mALS\nt8JJnjkBdBoKQOTwfdmFvhh72WZfUoXWqz3Ct2tUjQBx4b67D5a6yvrdJRQy\n96eBs0oMwYVE1t3a/HTcQarV/Mv29DHm3fKvksCKQXLEFO76GoK8GtoUL8Zq\nLpWKDWER0yVuk2s7VgrIH7V1NO1GBdZ9ELivFUAn6RSIq4b0a7g4aiZlKwqH\n73DvmqQeeearCPT/oaXLP3eQBPM5eOTxzB+xP4uLcC/vBpI2taugpDpNmvFw\nj6QfAuguEHqWNifQpscvifl9irY5v6UPe0RCWqhK+SJWHQauACesJsMYFZS0\nH7a6b26lO00MWqRWbdklXgz+63rvtnWNjTNmiJaLfWs/Q4BnulwC1rZJRBnY\nfl3bzIGVFH1ms1uICGboec4ILwhjdTIYdmUewDawsYQccw0AOxuftL2WjhI6\n4QAX\r\n=HerY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b065a4d2b.0","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/shape":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/density":"7.0.0-canary.b065a4d2b.0","@material/checkbox":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/elevation":"7.0.0-canary.b065a4d2b.0","@material/typography":"7.0.0-canary.b065a4d2b.0","@material/touch-target":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.b065a4d2b.0_1589985456623_0.6360760481900332","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/chips","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c0f4a98c14255ad9bae04dbe3e7c0f912b84772","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.4ebce8d78.0.tgz","fileCount":83,"integrity":"sha512-h84sPDHXFS096cqC49u79UeCDsdb4rekRC0ZrwIJAVnLbLfCVVLDSSPYEpBgw/ZfO7qTo/k+FKwM7pn/dD3ZjA==","signatures":[{"sig":"MEUCIHGtLLcc8GeUcZLtNLNuC/tGomXzfkrsgBSe8D7GLfA9AiEA0f1MkYA4RYGAmyxRb99p/Rv0oDcuji2Hlh0LwarIg68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZhCCRA9TVsSAnZWagAAfpQP/R1S6zrIkhWqVUrqkzBk\n5q8oiuhXTGQJfZVpc+zpdnw02nKvw0VPBBNcKlwWwocoO2RXDm/nSsbAFag9\npNiaXH1lbbFDgM20a0TEodQbFamE+XsGc92iSsKjLEM6iLv4Q1aUn+rQ4GkG\nDaKZsuhJZ86uoJ9iWfEuhlcvmmPYdbKOz5kxwdkBS3kgivcBwMw/fl70UETY\no5ZWgGgbPmPYpVAO7xs9mUt5KgPzRjcnzHbtVAlpn7UBfshBlnRsEwQu9Aum\nkZrPe4YIg5HqFgOqIeTAG4lKH4IVCa5W5amPO5RIXlv00rm4G54MS+oMXuc7\nr3qn10M/M02ogAFG8z19UT50QGI2B3RgpPJWKkJU/uhLF+ueoW7kg1YJOXl2\njpqgrg9TvZy5icwMdvgj3qCPgTv0Ugk4h34APg+GlBPG7NKQbikpzppdWq0A\nbCpQsiuSBJ5Bzw564Qbzg4rD+Gs0LYnpN3o+s5/9dvWcimB6+1psXoRDYPv5\naUlIG8avjYr0OoTRaR2WuRlRu1dl89UBcces7xQrJ4Je31/2ZgV6F1N1LA4i\nCdEiZBFml00NRHxfog45rRENHFRqnsjg6N2xmOfLsEwwEcuTPGkHjKLRsGax\nbTkLblZeZ1f4UbDpizKlK2cqfj0ranXi4w4PNzRM5BZ5Yrei1PYKuNR96F5O\nqfAZ\r\n=gyOq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ebce8d78.0","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/shape":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/density":"7.0.0-canary.4ebce8d78.0","@material/checkbox":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/elevation":"7.0.0-canary.4ebce8d78.0","@material/typography":"7.0.0-canary.4ebce8d78.0","@material/touch-target":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.4ebce8d78.0_1590007874216_0.5737300880982741","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/chips","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5223b79578f686b7939793d02f2737198cd0791","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.b0fdca492.0.tgz","fileCount":83,"integrity":"sha512-WvMsMztfPhaPVCzO5MhSKmxrLQyTay3BJRdnSk3gCdi1ln1BtUWdQ1jLIK78M5MWH7TBYEtMWmAQbHM/zwhDJQ==","signatures":[{"sig":"MEQCIFWlRQjtKsyb0wgKGm6jwhJvLMRASy9tyRb8OobI6yp0AiAOuhU7m15u9i8g1LwjenQhPy/4O6uifvaonDSXlM+x3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbc9CRA9TVsSAnZWagAAElAP/1AjDKg2+QyZxv1yB6iR\nu7gj0qvopzQpRuMi7PrYFsj6pW2Gwj0AFpW0TH/5tXxpEG9N2qvctaaZq9Ze\nn2GlVg0yppHR1dcdZ2z4LeA9gDQB9/31nG5REIdf/3CtF8EPA9JtJkiG9Naa\nbt+6fXLLW0/DTSqF1YmFgStiI8K8hEa/KQDIHDBGsH1rQmRwfY+N4kuMRwTq\nfPOytB2hRdGmfYhe7/P08g/3zdf6N4xtJzbdZ70iOTVFvCptpE3biRysRrhl\nMwsdpgaAhYOCDEm71jhJBLYGRFIlaGMuwKAc2PEx540KjrXTgdwOm+2VwqvO\n7tu3Cew9Npaov/3eqjrfpa9gcq8R6hTf8JttLKqPKRu+ZsiNiwqMnp2LbtmZ\n/WxcPnQmrjnMWb4F/g3DCl3/dvZ4g0PRiuNWG9NKEHxE2K1TneR90nULxj5/\nI74hbItFiipXTJHGVbVlC3H/+8Xq4KFQnfcfqXAWucmL8NnsINqbL9KrgPr6\n5M1KATtZfwDKbsmYge6PyRByVrRWrGWA+gbhwShxgFNjhOUGjjG9iuFNtlIv\nZXq2Cxu9gvNTKyHrq7tS+s6BrqKtUdCzqVGNhtt5ki8Qu+CoFeeRvr2PtTkG\n6Ee7ddepQ71xAICqLNXnawH/pFR2yhDNyTpzv8jU6GfloCS+AsraHYrdrlDH\n8vKe\r\n=LHKr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0fdca492.0","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/shape":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/density":"7.0.0-canary.b0fdca492.0","@material/checkbox":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/elevation":"7.0.0-canary.b0fdca492.0","@material/typography":"7.0.0-canary.b0fdca492.0","@material/touch-target":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.b0fdca492.0_1590015804934_0.1726249840965044","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/chips","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"654872ef7fc890fbebd86e97c8b84d86ebc5db1d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.c67667e8e.0.tgz","fileCount":83,"integrity":"sha512-UxuJAhYmrjj1GvqrEOHS3m5Lecyh748n1uUdm4PHXRjx5fYT1YZYyc+7Taeqdv4my+NvUu2r1tR2Q1EAosJA8A==","signatures":[{"sig":"MEYCIQCpQ4n/Z+Q0aZg6KEjn1uw5K83wKqdzJf4taKM/8h9H5QIhAILLd6IcII3p2pCPVU348YtuiNOnNx8qrZGCf0Wyazln","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":889350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoyICRA9TVsSAnZWagAA4SwP/1hSKV1rxcI1NCb/Nrem\nqvmAxL5bVuDzOuI8vhNaYj9G8G2FVgRbPbQFyD6yhVt8Ap5ASAJ7yxsv2HPe\nQhYEid35ZqQVPkD7Y4si1dMQCRMTzD9eC26PmGZSISypVXVT6a29R2G+uNyc\nWGWRXNNjkT5YU5g2fqijhhOH+uCAxSmTO95OpQiiNfxXyYYnO0ckEiRLayYF\nk8YYnEu7ueSz2XIqA59IF50Hyl03e/NQLyb67atZ5kZj11TTO69Jf9jHnnK0\n/9Zdk7ePbmAcWMbTmL9Z6J2PYeUH+BBn5zjsVCqCdrb7GXNVVbS3DD31/1Zk\nY98MTtglDj/kqElb6X7ivbIUK+AxN5DEAsSuX0WjGe+gCp9OC8avdnpm9Yfs\nKkknbYsVEYJP/9iMqs61jaytGL8wQqaHPhGiErOQgJl9BwgO1H0MhHPbg9m/\njQ9Z/o7x/jxxcQtXZtthVYP8Ank8cQ99+IM2Hwovv+v3MTqbGK3Puhv6/5qt\n4pwEDB3t2qZ7kuAF/A0s7Y3lhZnMK4OQeP4l/7ZyyQ+XUT4XafUBNIzJussG\nGpNZ4Fo3KmfKQ5/gROkcybyYeb7AacKaaY1e3WLmOBVwPg6G0EabtUqc6A2c\nf1VvjaiVyP0Eihb+3lOxj+rmUarOi052f9wfEDej4J6F9ovVnTPYsEIm6kiU\nEa0v\r\n=5NJx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c67667e8e.0","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/shape":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/density":"7.0.0-canary.c67667e8e.0","@material/checkbox":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/elevation":"7.0.0-canary.c67667e8e.0","@material/typography":"7.0.0-canary.c67667e8e.0","@material/touch-target":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.c67667e8e.0_1590070407501_0.4933967169051894","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/chips","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"172408b905c5418a8f31171a09474807e97ae88b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.62b5f37db.0.tgz","fileCount":83,"integrity":"sha512-qZidKiDK20DO19/tn/iA7ihVA9wNOa89GmHSxZWYGcEhDGxMxi1ATbDBn3mVLGsNwtHfLsdw12G6GkbO8Cuexw==","signatures":[{"sig":"MEYCIQDNIrkHrpPdCNPZ5XrkX6tofIbQTA74QHDUoOGGs7qJMgIhAOJWrQVdwyo3m+z9df71PRRs3IyVlZYQmdfbiZxQD4Y3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq9LCRA9TVsSAnZWagAAaGYQAKFipBZej8Fu03iFY2iE\n/ZaDKziEtrxzgdcjMGw/zEMcdvlde16gWmo0b5zmSoxXeFQpSqr6KilcVB7L\nkc79inGnJO21jd9swYN+FOzQnCnZ1DLAy9cwzNidhATpwzgNJWit0nwwWh8q\nXeVSLegivfimEloR8Lx7NZQOdgFKw6iVHoma8ijOpBBW8zkCOn5ijKbxaEIP\n0e7QFSSIaqp+XvSAa7cjqkkdMqexs5Kab8q4Gg9mW3g+cMSf3FvPjv0Tklex\nRaHgemG6TdjOJFAxeYP/0UardOMnqWPHCkqSnB0uREK+UBCcTR/yyyfz8fNh\nxcfN1JtHCOX/iHwfjBLWV0joG3j2/0/RMKvtjqVWABmxo+QDKmKi5OsuKeeu\nPDeb5+tH3F07oVXbOPu1J28wgwvV3uuJYIiDy0zacNs3tLM+vh6NeRR77zrG\nu1cRGWWM/tb4bxJ+eLs/HDQP6NruvV6QYJdcTnjfQMQYprsuKyS308wAy3/G\n+wxNE1wRidz1b2u+/vcTYnmEfpt01yxsO1liN6nFEmqcyLGN1hFD2WDHvqKF\ncAk+nwUgXc8n7gPXcV6UoYGtejfY/1OA8V2ISoRkT5YBlAJHb+n8PxnUuJNg\n7x4qqqs2WZ5uXgz3ssGVcB72bcRcCg8o0PpM6Q7PMc4W5djrGkRNXnAtHXqH\nZtua\r\n=yZXp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62b5f37db.0","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/shape":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/density":"7.0.0-canary.62b5f37db.0","@material/checkbox":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/elevation":"7.0.0-canary.62b5f37db.0","@material/typography":"7.0.0-canary.62b5f37db.0","@material/touch-target":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.62b5f37db.0_1590079306579_0.5179042135786893","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/chips","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edf4d23943d189c37115f2a9d351bf8f7b95f8a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.2e218dbf8.0.tgz","fileCount":83,"integrity":"sha512-AbknZWscaxAr71l3TUYEx9QA22jjUO8xuI+Xhoh1LnGU35uHwPtnGbK+hdLwhogDSSfFOpHBxD6ME8KtuftJHg==","signatures":[{"sig":"MEYCIQCLXFeDUEKMXJPSKqfGc5HFuCz5deHJAcs0mi4CVRUH6QIhANUzP6MbWdIPNrYL+JxIr2ZMxaq+oXljz/YDdWCRj3dw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQ3CRA9TVsSAnZWagAASgIP/3FHlBZt6WxmfdbzX/uJ\nk3kWkdBF/hlHuc0umHavtZnNw3su172rnB7llUBIH/pq793KUdCreLDLmM6N\nH1vksjcZYNX4dMPix7mBrH4aJhfVhO3zw6x6w5EtFCQX/B7weFKe8AH83JBc\noHmkMhvuZB/MKkunJv1UOkvb6DQqH/prfjA7xhEoka6d/PnrGnpAM/XhFoQz\n1PETXKFC43nxwHnjT2lm4DBO/akt6iYD1xgRvDkFtBGmCLcLZH+QprQVtuW6\n0PWvEQ0BI/j9fSfoWtnF0BNezJDBa4bgesndsynSHGWBB0qsKnfr6dyvLzRb\nL2iJpybdMOb8eT7ErZS34iB15TL7u44lUMweS1T1vxKv8zoGx0EhRd8rp/Rl\nVPuM10EVpXPbGhGP4TJ0aSrisdoK11mbu7negQXPnj0tp6c04B8FnkI/JcO0\n4nDFgNub+/C6lXE8gbppMl7qfUnwGe1uHgeGvUenu7D9iCtVvQ3/HVykyUyo\nTZwzyx7fJtq9HrtrdcvxZ8403QB+7dNRRIahh38N9tqF0y/A6q9OyBgtdUfM\nePxi891xaAKfgE74yDvdICGMJtVQjWXDLpZ0OXUhB6sPX0CN1TdycJkcy5tm\nZm6t5LLJ+yVkm2aME/4RxeM1UzB5LmKbLuD8tjqs2M0MUuV8SyyZd4z7oRDx\n7mhJ\r\n=4fsc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e218dbf8.0","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/shape":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/density":"7.0.0-canary.2e218dbf8.0","@material/checkbox":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/elevation":"7.0.0-canary.2e218dbf8.0","@material/typography":"7.0.0-canary.2e218dbf8.0","@material/touch-target":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.2e218dbf8.0_1590080566687_0.6143933214181492","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/chips","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a27dd7cbdff621a1ff18e4726e2594071c80bd84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.7fd792bb9.0.tgz","fileCount":83,"integrity":"sha512-wPNtlr4M3UZomPf5fc45D2nRNQ3NwUwgD3BOC6D5ReOylACk3yI26PPcWrLVmbOCjaWWz3+Ch9oo9aTBBT1AXw==","signatures":[{"sig":"MEQCIErhOZc1PWvHkDODX2Vxi2vRKI/8LmzlQaEBLoH6e9PFAiAc1sGnIdBCUqJ6FFphZTYDctoaUzTGc/wq0h/Ipxk4Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrc2CRA9TVsSAnZWagAAU88P/jXtpGXd2C2MJRRDOQE1\n5Ti/JwnAOLPosAtMbdnYD3bnff1DDxwDy/0OB8sx0SilUkJ02rlPkVl/YJLT\nHX/gr0HTJkkQaozWehI2ii+b9OSyeR3ZbgtRuUcoZfOG8a/mC7Al/DiYC8gl\nGxdCV59d5EFCe1YhZSjLREwD7YISl9ld32BfvEGJGXEaZW8/93pZzLsufCIo\nE9AHf3rHkbDI4VdZkrcQQ1bQKef0VuxwTq9CCM5NvwrjPRKWJMzH3hUKIDUg\naDOODZl5Q9yPSLdaE5iHjAxThkYZ6CZl1mnx6wqWZ3jrx+O/TA9HXzBx52dv\n6nQb7YS+MqIEMlctWu51kYYw0YBz98bvY7jEE7YW2cIm3EdEE8zUF5WUhwjO\niiBCbAT98nEzUfPlR1NLZvnzi3W5FAumQxfkP/cDLPLGCxFeRxruL7PFWVXy\n0fl8EiS2no6t57Hrk2aojiX+57nH6KsIuUa0rd4pO2PtvGr46cHaAh8DdvFB\nbLLy2BW2B8qEIV37uy4YZaTa5Wc5CnkVHqofZFbYiaKuEHTXVQhZedEB+6Pm\nHE7MutkNSytaUOnygLhJmRxUK4KrZC/+m5Ze/lHFcBcZrzvRVD2/rHGvyjgk\nNCH9AIisE6d4XWBXRV1h07MYei6PjLrxyx/LbD58n+lSNN4YJLVB6RCZwug5\nMsGP\r\n=NLhd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7fd792bb9.0","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/shape":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/density":"7.0.0-canary.7fd792bb9.0","@material/checkbox":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/elevation":"7.0.0-canary.7fd792bb9.0","@material/typography":"7.0.0-canary.7fd792bb9.0","@material/touch-target":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.7fd792bb9.0_1590081333972_0.03266779306077772","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/chips","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0c0e8a796bf08bd75f8ce6392c518054354095c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.a66493cd8.0.tgz","fileCount":83,"integrity":"sha512-LhCoVnGbQpcUNort2MM39sjlNGEJZH1km6CYHBTR0Lf2iBURFgygQrMNZTxwD9huAlBZVtwFYD+2BBIQ50Yw6Q==","signatures":[{"sig":"MEUCIBiR5ifFryZc4A8E2dlsZp5x3ZgE6UBbTjXOZerPpvaYAiEAypnuihHJbAXqpb+voq0g3mfN44h9TOEYbBYEt/KoBGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrf6CRA9TVsSAnZWagAAOrAQAI7nDqdLBimU3tvCU61H\n61xuZQBBbFF590O2s6bitg+O/TG7N6rVoplUL+PIt5YdR9VPUqdCYhFzeWMb\ny37bdOH8gSDP4/Zfu+PmO0n3LD2/qIFIe2DQb7RKnqQRaH8uIz7Ra5bdTU6K\nR+NXYAFOpHp7/CknPAc2qnf3Sxd0p85ZtYdA/eyPLye3hiCRq0Dt2byW5/JD\n1SPuBba6watcEqCVSvd/Ogh5Y38QzNepbK/Yux8pVpdjkw/2sE+elghxG7nm\nQnBsOO8qDYCd9rZTp7JdPrRgd8Z5AYhtcbsqBbF55r9/kIkag6NR4y/kRzzd\nHBfaDI0+jZErsCoNgT+hLT18azC+QIE2ch1yU0J8yfKm6pNlGl1ual6Xg+QN\n0zmwtYuQqb9vBEYJ6Pt4PVamVn6QQMTQy30bvHv/7QuFlyIIZhSF/6LPr9gV\n5cOZ8YGzxkehafbrZ8ZmCL0T0VZ+Bcs8xC6l4Ew6kjkgpk1lRJUSjO6Wiucd\nGgAwFLszPg0u+FS0SHJIPFQ2ULYKE9ZKeeUYC+88ovt+ZG1yyjObwhpRfv6X\nx1ZM6aDa5LLrcOSFFb6twPr6KvtYYLQntW4jSsNqDv96ta+1JRvfF0W6xj3d\nrfApHWAJKTR44cISy4jB/TxgIgbv+ZUO59f8DJO4QH9m04qPs/bbuNhNmTE4\nhETy\r\n=yu1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a66493cd8.0","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/shape":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/density":"7.0.0-canary.a66493cd8.0","@material/checkbox":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/elevation":"7.0.0-canary.a66493cd8.0","@material/typography":"7.0.0-canary.a66493cd8.0","@material/touch-target":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.a66493cd8.0_1590081529582_0.8397963859714357","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/chips","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd160b769129f0d1d0291fd9d99f02ae58616218","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.da05f66e1.0.tgz","fileCount":83,"integrity":"sha512-na3SR3WWA1uCVyBfsR8xnV+d96NfndlveeWkhvNOtyZMXXm1pkoQeRxIqmK/cNRzNN7eAWTjiaPpQSHff4BgEA==","signatures":[{"sig":"MEYCIQD/UJgublvQMXViS4CB/Od5paim/wlgke8IRRfDWt+dTgIhAO995A7pUHzdqeXDqMPK2MFLJPLXbWPLNis+PgXla7Np","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhvCRA9TVsSAnZWagAACRwP/ic2OCx5TVX2RrOejxr4\nKVn61AJO7IkhR4RKv2yDXAFEsIX9ySDcmen5ucAth+uMiC+e/OM4FVe7gcMI\n6OAnDQGyYufX2kUbYrvcFD8cAEezEKSyTjD5G3+bHXIp30nI9QDSPV/HMLgo\nvWB729gcqpfg9IhnAP7Ep8SUGjxxhv+iit0EW7eWYwuodAN6YiCdso30/rIC\nJ9XKN7b5U/BVeD076Tagvv3bJr7oChP9wZkHusJ7WvMMmCR1uri/hypIsdIo\nBBecmTUgKK1EYvjW2Vz6OAN4btVJpiNDgKNGXxUv/yRn2A2y340xr4g/jvcV\nU65AAz+/2x0ZC9tGBaHaV1rQqbF1788niq+Bg4vBmZJvNpHFDo8XAYy62gBW\nwvQlsOxzYXhZQ1YZBPd4MzZ6kFZKVYVaDSwwDrTMc8bQE6buamGMQPUjBWVa\nvP7XmOvSZKndoRmp/0k+LdyIkV3FzTMeR6j3/gZg5NKO60OQDoKORn3SoYTR\noFFlqdKwWcAl8ZtgScb0bnCUOrXICLllGUu5fXVHVUACAvZQkHYa6mxoUGuX\nZWPgmMA0AMBGEzrg4z4j40A2IW9mExcJBlYvVlNMUoLyLr0+mVJmrp5+3wlr\nffbPVvKpJILuzDr1kcwB5adSL7VpCELm4idTQ9WfW0ymj2ybV6shZDUMejmP\nJT/v\r\n=+45P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.da05f66e1.0","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/shape":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/density":"7.0.0-canary.da05f66e1.0","@material/checkbox":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/elevation":"7.0.0-canary.da05f66e1.0","@material/typography":"7.0.0-canary.da05f66e1.0","@material/touch-target":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.da05f66e1.0_1590081646571_0.35119537188293726","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/chips","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.740860e78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39ea5a950104436995e66d8da42781bff5d5cdc9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.740860e78.0.tgz","fileCount":83,"integrity":"sha512-BvGBRnkMzDXlpK+j+AEPoBDj7mXZGVbTxTRKSnk/xETONvdOk9r/tHCfTbhyv+RD4kELvBo6bU8r/SfEN7Ie1A==","signatures":[{"sig":"MEUCIAFAgev7TL4e7WoMIEq8V17fRwLNfDp9lh/a7qm33/FOAiEAlEvTw3NQtwTQ0M3GIEJ4hDvRVTkclYg/fJxS3IMgNCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrn2CRA9TVsSAnZWagAAhFgP/ReiqkN+Oii6qvV1ZCxf\nWo2OpQVfndQeM7xacX0fMYSLVhOYA7TmiKgCyxlvE6tGBIbZWwxNP2qtAg7i\n/fmNXin9vyGFrLNo3rT3WBBbWMP0dM1bQG2mGvrZo/vTd3Vr5D8mXUfWFJ93\nmoxABl/Ky99Bf2yOWE6mQsZDed6iLh1pmYH5kVcAww8//f+s7X1HCkQ+I1wB\nnZDoF7gsQMnUAthgODyX56fERkgcN6X8bXP/SrWREoCyolSB4L1p+bPF5d7w\nnB+Omlo469l1TGJAXnJa25cJNnUO1ptcktpZ7E7bk9yN0Qw+1TTGKmi/Th9r\nTXss0bIs/1fF4uLgFyPfkNrYxQvCKgewIgVZjnib6QXTF0N4L0iU9tJT12+r\nDUJXhGw/LHKTgc/0HiEsVPyp655zrZaQadHA7UfmnvJmQbgEBAPHawJj25cd\nTb4sPZ3dXvhUfTzYRvqGmQD/sGN7aW3jhG0xYdxbaGQipQEdmgiE2UcFMeD5\n8LYBI2J/VXqC0ufG/eo7I0czMM4a8TzuE0/IGLQNjS4hpv35sg9r6PnCRn5z\nNbW1Cpuv5eg3t+QqRAi63DX5TLMg8ond9uMOmlXwZcgWDqBTrUfIlO/QBiJE\nQvBWnu/f7GLtA7huAJnxdA7r93Ihpp6NJe+X1wp7+Fo9SBhrGYXI92x8y5S1\n4Y8m\r\n=2quY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.740860e78.0","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/shape":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/density":"7.0.0-canary.740860e78.0","@material/checkbox":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/elevation":"7.0.0-canary.740860e78.0","@material/typography":"7.0.0-canary.740860e78.0","@material/touch-target":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.740860e78.0_1590082038028_0.8532883891660006","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/chips","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26820329aee70f153f9aa49270e479f98e7c6e5d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.5cea2610f.0.tgz","fileCount":83,"integrity":"sha512-207ImgXqR1GMxC4FYyg/oECqjdW+4V2nrGR2zW6NSjKxivOzVLpPXORD7MyhQtH967effebuYqcc/CnaD8ZnAQ==","signatures":[{"sig":"MEUCIQDXmb5eTOCk47FraPISp0xQNMI7kzGlHZ2jx1l8WC2mQQIgZa/9Lp3WqdUIV76+Plx11jfYSy3ONLMq8ooY85qnzzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrp1CRA9TVsSAnZWagAADsEP/2bPW+M0F8SbN6DbJ6f3\n628FpFQ0IvZ3KjRoR7bevsbpwk07Rz0ejWZneDEI3u83wEh3qvaKwxxzQQg6\nTKDjhiuyP45xvmAuFlKP4byUd66YLouJE3i+VFR5aj6L+vNnohSlXf409SJX\naKDuX3+07PFrX5g91VNGPaV/gpgsATUo3vwad+vwE+C0s7LlxF+HTs+RIZlw\niF3PleH+2q8aolVRLAj9KRk3egDBcriY/FeD/CJNmxnCcO626Rw6sbM2QhYK\nSkIl0bEyeWaVXGTM0K1Ry34DpwNIsCj05IaqXmV5Na7aMYR3JTp/JVM4qZiq\n8I6bY8Z1HDjQL/Ed6AKoIffuj4F7DL7KVjGhkJcmqiPmjuJtqW5DW/l+hJnx\niBqVbNl5onx8CEqioO/H5ib2FsruRpC+5t/oo9H0mMP/df7EjiNR40Odcgme\n7XdumH+8+7PDw9z3HKJzljz2aLHcXiFw+cppgDf1IuZHumNII/JMQ9jP9inZ\n1cRsVblOx9qgyHTOKAGaiEMzSpxCHkUgkSZVZJ+JfliXlo2WEF+JOGDPgjsG\nHv0TGu8r/jay3bERHavM4Af2zSdzws8RI9m19zTzkttQ6puZICcuQTd+wjoC\n9ub0iAKd8jfFRPn1OGJ6AuZROaNsHpYk58JSLGqNVD/rV0dgH12aSjkcTpkn\nfeme\r\n=ohtG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5cea2610f.0","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/shape":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/density":"7.0.0-canary.5cea2610f.0","@material/checkbox":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/elevation":"7.0.0-canary.5cea2610f.0","@material/typography":"7.0.0-canary.5cea2610f.0","@material/touch-target":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.5cea2610f.0_1590082164900_0.03776474826696763","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/chips","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88ed73364fb3173b19360134c85aef5ddf7b9d6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.cf7747ef7.0.tgz","fileCount":83,"integrity":"sha512-8Cqw64icbiRB8bl/JL/LegXQnTKBtFRQPa/FOHRj65u4R4e+9Wp8tx6kJWi682l+flkw3RCvU4OireFY9BJ4EA==","signatures":[{"sig":"MEQCIAbcv6Z4oGMqsdH56iuCcbYX20g9q4eAg85cGt2YE++cAiAps3DHJSca8lXECMLErhlp8ppIFTxb0DqOHHuZyu0Tag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqOCRA9TVsSAnZWagAApvsP/iWSvy7PWVYyUYtyPY3S\nDiTBAuOeUFi+JPFlXZhIpYYylCrn3+cgJEumxGQOTVEqcrG+a+3pYHigOcGV\nWXlq5llLLXTvn0T6DvW9gXOwj5KZ5vmiHVDgKImdG3PF7jHAk1fFOjhxmDIh\n2pouddk9VA76Zr0QDhVPIB2z+63wz+LlYqaReyh5xMLl39zfknB6Isucb4An\nZj0Z50qDOdju8o734Rwtiuhc3uu7NeDo86OL/TLmP21zLOy9ibfqm/Fi8btG\nEEIdjDEZqkqe7jC+DSNoR4wEjl2k5IoUE+wYCLZ12542eaIR/wd8fNbdB/4A\n+woPcSFo8gEZ+1G3QxYCkVOQ3pTIyepCN3Jkqw+cGrF/zo8mDmlDJ34nXeyY\nhSde0qF4g8iNrTZ/UFdaO35MNfeN3dJ6rx56BhsOyTJLecgdInK2q/x5em7A\nCiiBGRQK8Ps3XKEWrXYjPl8j/Jp5CQ4euYrx7vKZng+dGryUaut1PCuYFzRL\nG7DbKQ/qa14dfxnEsMWWGIYV6CetPS3w3HkyVeZNLFjPUtNLpuUgY6mw2Ksb\nLY8wG6hY0MYJxYXQ6X89lUiCW3tPyo5lrxU5buEinLUqoXPMZuMyJFgwc7NG\nBSpmDWN6wn7ZybnX9v+wd6oxThkm2OrnHFfDInR73pu9t2HuO8E+xEmEwge+\nKQVj\r\n=TXeJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf7747ef7.0","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/shape":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/density":"7.0.0-canary.cf7747ef7.0","@material/checkbox":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/elevation":"7.0.0-canary.cf7747ef7.0","@material/typography":"7.0.0-canary.cf7747ef7.0","@material/touch-target":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.cf7747ef7.0_1590082189681_0.3598671002064562","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/chips","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dac5f4af9bcda13b9615b3c01d67498bbef1fa1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.862d0d7bc.0.tgz","fileCount":83,"integrity":"sha512-hIKkoY/aEM42V3bi7prLNvI6c9mPiceYXAuV/S+OKg9JESApb8H668c+LQl8Kb27txw+KhqzdjGrW7/22DfY/g==","signatures":[{"sig":"MEQCIBcn40FO3A4CA7BXkhJQRsAS9J19HhZtm+xzwohMvjx/AiBWGnfA0DzQU8/QXxbFFDlivlgLX5Y3Q6eUyPjkB+sKvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrspCRA9TVsSAnZWagAAF6kQAJSeNsLdKVfEJD5CCSSH\na31aue16OfyTwAxOfpOwpv1f+EZccG47Szz6RFwSCS3HoqmOs7F5mgSO5DOJ\n6sMH7ZOBQqs39n65kgxgqIhFWxyzq1LvwyTRLOK6NB1ZiYkQ3tW0Jy/+A+P0\nskFfX25hUvJMVwOd0CTPMOv4B0BbevnXaXICYWPfnLojdPyEDqaK2n0MmKiO\n0li6EG/hI35kJNm0p/Bx2sq3lm6Z4DEkW9LToM4Y97Xzv64nQT5L6wn7k+sp\n5oEWDzymGvYTbjYosyMP7y9QSdu6IfE17TLy37ch3Cp2xNElDfVV2WrnU7vq\n5f7ijJFBZFF02dxgIXmaSWbbGiaYjmkLx4ZhY9MnLW48HLDrBEpXWvfYzhpE\nK2ssF/jB/ILwY7+DWBBSwCaOkXZ1r6yYYa8aRZhElwWt2qukpQjya+jfACxe\nDzIHYzJ8HLNBtTBqXyHSfYOrKOe1mkK8INjKK/fkR6/VQfbELVR4ehlRw7jP\n+7D7+rBsUyoQoRPXlcoobfApRrv/1n8agvBiz7acCw5lpyvLO0EVPU/QMzsA\nD0O6KLU3OFlYRGY0HwpMFeItOwRK4lN6YMwiRNxbc4EjN+Rou8ewB7fiawlx\nWE6xTi6fpqjklXU/ZjOugyRCaeBjBWHZPV4O2Vr1CTBFLMYMbQyR4kurZaUP\nLn1c\r\n=mXFb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.862d0d7bc.0","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/shape":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/density":"7.0.0-canary.862d0d7bc.0","@material/checkbox":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/elevation":"7.0.0-canary.862d0d7bc.0","@material/typography":"7.0.0-canary.862d0d7bc.0","@material/touch-target":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.862d0d7bc.0_1590082345219_0.7079240718164828","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/chips","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeb448fb4d355d8b3462a046e666d57ed8cdb12a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.0008c8a91.0.tgz","fileCount":83,"integrity":"sha512-jFWWVwzymKeLF4UGawcol1GRQK5heCdKQk8QtWQVP4tfCHLRE/EufqOII+gMsxk8il2yZUVww0fS6S0qelTgkA==","signatures":[{"sig":"MEYCIQC9o7fFySaXOQrODUIecSDU0AwtIUTEtXJEOesSAl5z7QIhALlxASg4FUvKNfqn7Ii2pfZZOWCZePCrWCiqap1sj1Zf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexteYCRA9TVsSAnZWagAAKQsQAIQ18V6egwjCcNWJr7uz\n3CI46Nf8KalidpLvAyvJfI6yL1LbWrGDmdx++x8rWAt/fYZcO9uHJTmhkb7s\nL3AdttYtzHhcUrlmYGxj0nA5K0E9r1NaLjxshx+pIInjwhRoNkcRLzYasASF\nHAZ3RjdUKhrZQbvvsXMRBNOjsprTdvsNH2M+MSi+K3dMzL0TkKVjT3MFwJEM\nqYiYafdlU+Jk3Apl8Ey1i/frBNINLJ/awXBBEwcIH0hRezwLRxJz6zN/6uw0\nO6QVIUv/G7VNxcmnJcdV0rLxBW5LhQ6A4FGL+o8I1Kr2HEcOxb6zVRSHTWKP\nfOrLwB23HdHjcI/m7+35P5AKSRgfsK4mCYOvbS5OMEGJtEksd835YbpCTzJz\n/HLkwvGq/XDrmA18WYBumXNJAZJF1ftX5h6dgUbJ+4TKOWLWSfedi55+4wXk\nCbuxDTJXM5EZ3c20InwIPb3ko/zNw/GzksrgEqVqjqJupMWziJ+NoRw8uUqv\nau0q9sAFBT6ZBH5ajHiQUgtmAi3UiEzZkEhvD2wj0DFoX0CvR5ZCZ2RELp2N\ntbCigETbtnPloyhJHcSjt5RJHvdZwig7QYDr64osXxH2rKKDB5pm7Ph3b6oQ\ngkVUiUcvJuysj6ZQeMc/ZH3TlC5wvWfmwZ3vOyih1TIXJVsq6kV7XAYskltR\nV3mY\r\n=lDSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0008c8a91.0","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/shape":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/density":"7.0.0-canary.0008c8a91.0","@material/checkbox":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/elevation":"7.0.0-canary.0008c8a91.0","@material/typography":"7.0.0-canary.0008c8a91.0","@material/touch-target":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.0008c8a91.0_1590089624340_0.37874088677342765","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/chips","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.541638fa2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edec0f08b77893d5a32780086a2a7af8ad5effa2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.541638fa2.0.tgz","fileCount":83,"integrity":"sha512-NEwtHbyCD6C89P57Wa3PfldpfKXWmuo42MxfP8l3mfcT4xZkSCiQuuoLyIJhNUZ2UCoZYCi7sYouuX2P0S/DDg==","signatures":[{"sig":"MEUCIAixfokX9shaaWYPda2/Euk+MCRZTyh0DG4koV25U3SAAiEA2hOnuZzHbVy15kdEes2saXK6N0PVC3AUL3ockc4WkoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextsdCRA9TVsSAnZWagAAsikP/RPy8aigT+Q+eLmshYgy\nOnGEMrbIotRppWsc4EQQQlCVK87YO1m2lTcYkudqViuR+Dsahb5PkEZ6OEky\n6fGPFMKrwjPkxAY0r0/uswy6OTpCumugMA2N6cS1zOZZT94blM70LvmScmtV\nRh441ARGiEZQrdcg8xjut24+UoNEf6idF5XOmHbUxSoZBfV+LZlSMlc5kHps\nS7eSfg890UbhPAkTM+Zmc+tnL9S/jDzom7C1ph+cWQZUatR6he4PAfo5Hicy\n3tZpYAfElHsguJyFZl4vAFYPf+70Z5aw4lBpps3404paE8Ojbzr3R02tcyxH\nJ7bUPsRanLgmWpWwUO5KtpzgbIyrXRveA03z+TNLVPlYtrlsx+faQPKKwDPX\nWRJWdpDXD9RDElboA/zg2wyLsWKjmJzR9B4sPX8XwBCLch+kUNpxSDqf72jE\nbDKG2QTec02ioEb9ca+wpDDE9R2MF/d42PYlz/ChS89SwIpFBd5torNmn87i\n9VqONpgHkWIzd8CFczMz7zhsQSdhAaIMnSfIdoKNyag0PL70Y6YjTBv/+rsW\nhxDorvaYUoyy8+ycF+tfG426KQyWFFVJzC9bmKJylK3W7YZLoepLAYFIpwRV\n+OVKtHeGUY1QqC1R5sUnbmNHXDhzf9lFwi9EHwq3jDdgXxde6ySEjo2xRmiE\nIlL1\r\n=2XfG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.541638fa2.0","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/shape":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/density":"7.0.0-canary.541638fa2.0","@material/checkbox":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/elevation":"7.0.0-canary.541638fa2.0","@material/typography":"7.0.0-canary.541638fa2.0","@material/touch-target":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.541638fa2.0_1590090524601_0.6758220765580045","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/chips","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.6167cd075.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a08e3741a47a44202d34a587023cb4cfface0291","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.6167cd075.0.tgz","fileCount":83,"integrity":"sha512-Lndr+/vO8Pd59GqqcfoGnGg/IZOaNbh3mWOqZgZWiPSCNjJ4vJd7peCeDL8tZZj1DR6HZ2BzxeFJdiQikM9hhQ==","signatures":[{"sig":"MEUCIBXiO+XXc5VfU7ecnufNrpH/pD9onuXGDduKe+8aLP9sAiEA5HN9CmgcB1kBlBOOfp+TMglz5nYm9ntTUPBHHKl+KOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuLaCRA9TVsSAnZWagAA59UQAJ56PSmFXN9e7bhPSCnA\n8gkR510ga9cibq4DbgM9Z5odut66AZMSbodA31oVI9CoBbx4ICzYm/qkqFzE\nllzwMK9oC7M8AEtfXhBNTLcpoWrins+HzWCjppMkC7bbuRFKg2ZRvl8o7KQC\nWSipLY0VfsPD2ESJRC6HpzdABggnci3T8Q48MZLEOVAiw6bH0wLCXJV3IYCS\n6VmszCUGYJeIE72ZCrd7l6q/wsxkvj5GxnNE65giJumJfgtFZxhgk9l8GEna\nUAPBUEPEFHpOJHdDY/mlMbP112W7S3nS8Ye9qd3+2mja/Q7tCnWIh4dhnEJg\nZqRNpf9/ulv/4iKcNx+f228J4XurJDuTEDxAYC1cDZkjO4JusZKKp9ucIXuk\n/drhxk+PNZk7phSAaYHvkIdEpoQS+wrv8WMhGSkQaloBi5e3QjQBLYcuQ/hX\n/aq02cB34qavODfp3UqMO7CH5jgYL7KX1yrbJzp5761BVbd3HP8DiJJvVyUW\nE64gwsZRXF5y+69LCNIQCKAG95IApTg3laciugEtRbpPyrruUebLUQHa0Ija\nGlcbjKeScIxvXkWPOETiMlFBIfkw559mG5QDq6cF0rQKQ3VoFS6UE3C5YDhe\nttE06wqO8EG0OUj2G+30HSzZYGoSYeDnhwFm5ryNVAYz71iPTQ15XCI18SpW\nIZ+8\r\n=vGn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6167cd075.0","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/shape":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/density":"7.0.0-canary.6167cd075.0","@material/checkbox":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/elevation":"7.0.0-canary.6167cd075.0","@material/typography":"7.0.0-canary.6167cd075.0","@material/touch-target":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.6167cd075.0_1590092505820_0.30450925846280885","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/chips","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a50203edc3f3d3d5a5ca32eaeb1d9801c785d66e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.863ac1b0f.0.tgz","fileCount":83,"integrity":"sha512-KYq+zaytcasWhZ/IDps/IyihF1XPjx8Q/rMsETtGSwINXAjk5yQRXeo/6bwbACWGQCcTIaznahtTkeSKUZsFlw==","signatures":[{"sig":"MEYCIQC3C800lSFX3y5JfJXSWPlNeQtF6WHRRKx8j6htHfPekgIhAOFGhD04QSkmAgYIl1EFJueNNaJs9YsWv2V/vgIBwPMH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuv1CRA9TVsSAnZWagAA64AP/0uQIbk/zcPVG7lZ6YGc\naSOVP+qolgAUiUD2FfCHwoRY9+UwDHyIwGQfI/QaZUpyjGnN11PM8SQy5KZa\nII8KhmWQ9wHh5TreCI0+ngiV5TxzqBEDljAZYQ2dKjQ7IcvllTHX5czV5JKi\ngjYIk2QRpl+moSNPVgGMwupgJiwuAuxPQ/gQ20UQNUBmbfQ6dpTlmHTwp5J1\nrmgPcy0yO6sguVXqlb9kWMoeeJw+Vdw1PdGB/o/Cgax5xGhrnl7nQJDnriaO\nssHm9e1Pq9bHLRkV/+zPpC/ge16YylWu7WNrAhB+RrORTzAJ9hHy8wJ7RUjk\nSzVhw8UjDKNjRg5u+qnsXu+w4KQB943bjXnQv4TEyQ3/bHZM89NuO1NIxYrE\nNyqd2f0VRclG0KmRX/QCo4VdWqNQY/bsgeYFoa6KOcMgGTHfaIkGc9scweVW\n38Q+7TFk8dAge+IoKvWieJcsNEZVGccNMYsUKzRdkifzFtqQLiRxMfFFTLwy\nJsD/hV39TP7i4awMyJvv4tei0XgWZzhPBW2KchKSYU9+QpY97kYHG0YF25NB\nqgmwI9HVt6cVv7R4Aomq01jcLE0obC8z4yF5++Wn0Od18QJq9mXXLAeV0f8G\ncV2fyXjnKgRJGjvKK7d+z6Rc3AldGadSZWLFP3TUtyUb8lLDl0KdHzquXhJD\ntoAA\r\n=lDun\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.863ac1b0f.0","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/shape":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/density":"7.0.0-canary.863ac1b0f.0","@material/checkbox":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/elevation":"7.0.0-canary.863ac1b0f.0","@material/typography":"7.0.0-canary.863ac1b0f.0","@material/touch-target":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.863ac1b0f.0_1590094836806_0.04475986560177492","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/chips","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d53b8bd6a67ab5146abdca39e1dff352340a7fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.d30a214ac.0.tgz","fileCount":83,"integrity":"sha512-a14GSmblZSBTNk0YyPsW/F4iA77c9gFRdiG+IHgaIJCkDwTtX/WW2YGP6DJCQJwmGETbPQVXcx1ambhkkoDueg==","signatures":[{"sig":"MEUCIAVwmqITEuBzZW/C7a3QWAVMI+Fp9VyUAgEA8Md14jmfAiEAijmyg4eR9ANTO8EGyaxTVqbLtrJ433ZvFszCQbtyGQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzmCRA9TVsSAnZWagAAOOgQAImoLFe62evS6eRH1lgb\n+4tqqEmq71l6MJJLpl8TUGpwxBThz2HAXvkXccsdfpr+mIWEtvBPgUyGUeFL\nf1TzgOzpzoLoeafy5H9t5mAjsnAfClhxsk1hX4Ah6jkNyyrHCHNAJ7GXU3Ke\nQXOOya3JrmWLBalHqCNOXc2e6RevGLgh+99+RGPlH87w+QTbr8u4UJO9FTuQ\nGOHRQc/cbJMgfnUj6kUkPf1AAvAd+M74ofTP56wsf4S1YnmwIMyNBwoiZEog\nvxs1eXFQEI7tvFvbdIXDNUZ7dER+Zy8PmFp2cc/N4ntuJYufcccpZ7lpDBpJ\nZYWih83iA4U7cWEMlPmMpcBD+2JayoL7CC6CL2BjbD1YFQSPSAUcsxfLmm1C\nTfHlB6z0tHE6mHdNxYJRFsFs8N+IQDVLa8narUA7YqqdlxuVyMW0d/3PdGO5\n3JliNqL7MGyeRrjtc8fu5R7A/ttqMoaGf9O3uwsipXJbOpViSGSw81dxukFe\nMfs9FodDgpsdvnZNujgQ0xa3aEVY1UU55oetuVrJLjyKCUKR5iBurJqhTpVo\nRLR6cV3N+9mDfrtC3+uGtKXW8xMXjN8fGcsWE+LxTAXUihdLGbacyT70/QcX\nZiQlytQEPgUnscviqWIbhNGrxOpP/coEQvdvExbESIkBOwRrUL+tJRyGTWBV\nlGa8\r\n=ID+K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d30a214ac.0","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/shape":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/density":"7.0.0-canary.d30a214ac.0","@material/checkbox":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/elevation":"7.0.0-canary.d30a214ac.0","@material/typography":"7.0.0-canary.d30a214ac.0","@material/touch-target":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.d30a214ac.0_1590095078396_0.03588827104362191","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/chips","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"834ba09b88feed4c6b9ce1d3ab41dec49c7d1b7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.62abbc8d7.0.tgz","fileCount":83,"integrity":"sha512-UOekqZkMywj8LmIAP3T8QpCSM0fq9O/LhBtEe0Dk+pNiAx/9+q26AHvIpZrMyVMBJEDOSSPxlY/PI1zBSnQRtQ==","signatures":[{"sig":"MEQCIDen+f1Vi+1LTRPbjbb9RkuHKpRpnI+4XRwbbCmR2U1MAiA+GPIOQhnyonuvWqTjCdOzzYVLtGJH4u/9cht2L1Pm3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKxCRA9TVsSAnZWagAA/nAP/iRRCRIjVJISo76F/xlU\nbN0IvFmMRbN2lsCJn2tKyotGmZymZFyWW5FbjluqPa0Varq+iUdQ//MGZSQY\nr3rGqXx+q5RRCSQN6IX1/3nf/U4XjlxLVNnHUHhPInsG++V3uCqYz/+9TGoK\nt/IK1LQYOBrGtILwFqZT2UOyVAIBmyqEljdPO3MDW20Wak/JF3n1BFx4SL2J\nwg4w2O/MIh+ccecXbFdhkY3cINKNEI0eTKr6H9d8avEqd2okNTZuX2sPSS3J\n1vVikwN6qiLcHiO9tcs2mTcaqwdysdHMWYtBCE4zcuCbLY5rhitNoiBhDNMZ\nVrK1BilKwaDdtJFrc6/QCCh8wG52HNspviUULs1hxoi9ZRnGddDAVqzBtE+X\ndG3yEbjFTgRc7Z3vpBitZm+gUlzdXkPSFIPM0viwUAzZDttulv2H3zV3WJJ3\nQd6jsNqRlBddBLN2NmIRQ/kfR0oZOH6zPndSyBbeZeJCtHuf/6yTk/XhcwiT\nlM0xAcU03z19WFEf63U/l03IVkAmUzuXHz9e0Vix2wxQ5ZmFSIlxc93GqZ5S\nYj8DnhsbYkNhaQRFJMB78UMRVxxuwRJyO29vlzHNkjgGhus0uZnlRpEqosXo\na4xab00A8iIjtC6jMJGIuoM9ZzcGhjlMTIIPzAcWmvh4DGya2MTADRPOVp2y\nSiwm\r\n=fG4z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62abbc8d7.0","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/shape":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/density":"7.0.0-canary.62abbc8d7.0","@material/checkbox":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/elevation":"7.0.0-canary.62abbc8d7.0","@material/typography":"7.0.0-canary.62abbc8d7.0","@material/touch-target":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.62abbc8d7.0_1590096561199_0.26661746571649814","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/chips","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a41431df8681c2341bf1580665fc345c969b69a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.49bf31d5c.0.tgz","fileCount":83,"integrity":"sha512-nnYeFvxl9+47BSqKKRnRPdZiYM+AZeKCpVOtzCHjFcTZZEmd3cqEVp65l7Pg1I2Vm6qAFS2nyD+C0bHQnYqelg==","signatures":[{"sig":"MEUCIDxV4OGTO9cM5eS/DpGBQhF+/1Syipw8SVDA99hAU8AjAiEAuKFtqKRkUVfRcODw7JxiFCyECTKhuCfNOc2DtqOGzjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvN6CRA9TVsSAnZWagAAlecP/0HHig/vvL4DFkksL7Pw\nh71dq8UrqLlkXNhxGmabO4IFbGKkDGkflxA253i34fwSyFMR72DJrh/fKGw5\nbthi0DiaFeT4JtqkqWoJ5CN7IZkUB7zeHvGsm4S9e5MPQBtsCcD2CyvRC0k8\nNu3aVfPZ55PIUX0v3/A5UYoVwar8D2Kq0m4ZHE7ogOst70IIn2DAEr1xmeSx\nZksou7DbbPXPtpzkwI8AURq9DBEvyKLx8Gxfm3BQD8NFIvgw10qnRLSwDPOK\n3v46QNREY35rCN7Dh5n/CLS4cRSz/dyHrPhxXSQhoYIMHNxCM6Obbty2g2yp\nkvqFRRO856UK2hqzDdh9qsOyBLmaC/GuUMprtUrllMALmZfJ8jxD4p5WP2wM\nubTiBC/RrvM1iSOKRff4yFkKjqNxGoksHK2nCw3LitphsNPZ2NI48j/Ctj53\n8wDUvXzTEz0n3YheW7goSlFlf/g1Rn+ubwLCX8Fklgvyjq3TQlIAldTiWcIi\nk25h62tO0NiKtQBBAtiEfpLt3E0EaNCKkFNAWhOfX/Pl5ib62B8JIi4Gzl1i\nbjvjJsL5P3VP6vslESIZsOujeJkzQJBeV8j1HCu9lpI1DERW5BPhpsr+ld5/\nfvaPHaAaz1jKQjIw2zpUAH5HOw+T6/S/601ASzSlxHEl7xCRJjIoBfMTEBnh\ndndP\r\n=CZG7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.49bf31d5c.0","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/shape":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/density":"7.0.0-canary.49bf31d5c.0","@material/checkbox":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/elevation":"7.0.0-canary.49bf31d5c.0","@material/typography":"7.0.0-canary.49bf31d5c.0","@material/touch-target":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.49bf31d5c.0_1590096761536_0.3143032921355269","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/chips","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ebf71219974ae26512336ee6e702dcbe672413b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8e17857d0.0.tgz","fileCount":83,"integrity":"sha512-qNrWAl7vniJupgIePB5rywDzLroV5Fyv6Lx0mixyBM2COJer0/MazbQ17YvnMk4Y5/VDguWQI+BAwnSfkhPAFg==","signatures":[{"sig":"MEQCIDzJMjx9hwLnmQECUO7wzvmnEaSWTvZbXu2vsUnaFelxAiBeO+H5cIZzFKDM7z/PDebM93v+F02S9KNBDT2fAKy5Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOxCRA9TVsSAnZWagAAUxIP/1XtF0wgRCt+3/H1uKh7\nT4o5qDiN1k/DcjL4jOEJKw0Dm3ZN+hIMaduJ35MEgxfqbPCh3TldSFsxOqHB\nBBWHuecNPGffpmJjTcTXLjsQLFSHz5c+HGuScEm1H8JfnUSxkVPKye6OzwNs\nrezA4BVYhws9Xro/GkvbMA1izutFjhkZbbzXgUUocHq5LzGjtCUiwvQvsUtj\nQk0FaIVIBGvVbK6Fq/0AZazqktQF+NWmKH6tESSvOFqQMzZ0Ulk8vOM6uwca\n3YiHRK8N8YkdU/ee0eCyGFvRpN5D7KEcLqDopXjhIWmgQn6JfcUT6QrzgkNA\n1unzo2mbi8apjl2Ue+VadmHhKFCp5bF5Mgb5o6UEapDObETR6rDYlIUQuZSa\neYWpHgU59OjdWws1cOP674+wLM03m7x+DMBDRgDqxQxFcD6Je1kyzCHY8R8i\n8xna3hs29eXwZmTLcafVfd7AmnrUaksFZH25KGOjHH/y6Qh9Ib6rqrnYyJi8\nNDkyofy5oTf/2CDJiBv4VOfQ/nKzEiP8tbmbQxx46qA1xz96SgATV1pGiqY/\njcUufurxNiryWwv3frs9LljLmszSH3B3Cj10ee+t9vJQEX19jexuxK1+u0od\nnhboa2qKj0nNbqwQWihnWsbBTYq5xF7eHFZkvIxPtMZoGBCznAFryacZKvx3\n596d\r\n=V6gH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8e17857d0.0","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/shape":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/density":"7.0.0-canary.8e17857d0.0","@material/checkbox":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/elevation":"7.0.0-canary.8e17857d0.0","@material/typography":"7.0.0-canary.8e17857d0.0","@material/touch-target":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8e17857d0.0_1590096816830_0.8743565126789896","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/chips","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.c113fc942.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89b9b123c4975e34a349dde2eb1d47b5ba5b86fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.c113fc942.0.tgz","fileCount":83,"integrity":"sha512-/lMVrL44Lw7k24bYBKJpHOJF4d2bi+OR/uK827FCV+qwTgS3VGXX24/yVAn0tjbA/LYhQI5QvuRB8bQzx5fknw==","signatures":[{"sig":"MEUCIDlHlUiPndAKATiIjLiNaU9rLwroA/L7tSthW2Dn8jSXAiEAvK7HakXFRRZGMwP0U1LLMkOf9fGFYvTcPhUROzEfzZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwTxCRA9TVsSAnZWagAA1sQP/ikYGdAHaGUdLrVy+TZt\n6OD+itPTMl8m/nUnMGZWIRwCkaH6f7z2rrfHct8Z76BCJJ7oVGsgDZoxqQRI\nWTpQ0gEzvZwxL2Y/O755LfxM5LGo/WoCw0Np+O4oRe+eNEglPLML+x4Rmjga\neMw0I3Q3TCXw/xWGsdEXTULjUqjMYjlGBzu902/TnPjWgGgCqWcqbVlPjMix\nfWMWBx9vBzMD0BZmRdfd1C6C35GP9O1dDXbYVUBWlYoFByk+1mUEWs36HS0v\nrbejgjkPJcd2YKPr98HgzZsE8Tnml1vp4DczrCn+Vj9zjyoY1xT6jog8hLZ/\nnqrQCq4CDRfRXwJFSmz/wzumeeh/FU0ID1AgdNLpTH3cw1atfNOyfVTyGzST\nxR/IHS6quxf4sD/yudzTKbQDpvZGmcmd16Sqh9yWZoV2vDKHIuViB8hBAdKO\n/mcZrKDwu66+Xqxc8FyI5iacFE8i1gMYUuQ8UrfTUUUYq7a12ojq09KVNNdQ\nH+VGDiCggunxxDM8SXN556+BII1wAati/y5Pq2aWybvQif86z41CbWmnSNCi\nD7k5Jeyb/Y54UrCpAph2JlT0XjR33rb+Jk+QZcRXMPzOZAwkb19XLTyrANPM\nE85R1EwsF5sih8VC/aTWm6sFffo8j+ZiTmQI9/U/lKl+KHbdm7JH5On5o0es\nGRIs\r\n=6Gz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c113fc942.0","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/shape":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/density":"7.0.0-canary.c113fc942.0","@material/checkbox":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/elevation":"7.0.0-canary.c113fc942.0","@material/typography":"7.0.0-canary.c113fc942.0","@material/touch-target":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.c113fc942.0_1590101232884_0.9651625960688566","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/chips","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.912d9021d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39a05c618c5e4cc3490474674cc22dc2de4e9efb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.912d9021d.0.tgz","fileCount":83,"integrity":"sha512-6HFk6RIKqaMOp2nbCJ5SjjHpxoKYVbndf9nRvcx4JL3BPENUjXUqcFrdlw55dAdmlG05Viusr4KDwZvOCiOwtw==","signatures":[{"sig":"MEUCIQCPdMP5UEZe3kl/ynubs7XPunEoAkU122dYTqFJABopYwIgNpK9wHGVqij1qxL657T8IwYV8j+cSNLOPw11tmXNCgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWPsCRA9TVsSAnZWagAAEhsP/14unCrpyl+a9WEyIRfd\nBSCyJWz7i6nmrQYjacEjN0lZwNzJH0yBYrkotZQi9D4z7WuYxC2GS2+r8aHv\nY+gpgdXXJbOX1Tn4e50VVQ1ZvWXPjWITGIFcmaM/QlMC0eWQs4BjlBJYFSPV\nCQMXv//aiT1VET77mUv81629/6Wzbpa3JQf/HHME/twZWQ2KXUYVrCpcvum9\nGlihNH1lGvI4UIZla+jYS6y0CjH3yXtXOX2DGQICLK2Vu101qQ0Bkl+nItyJ\nD5+P6AZYU7/4gjeexysM9jMvqIJgzO9kNEfq5LDPGMNcnNacuJuRDisYG3pA\n3+uE4Acgt+t1K4/mHFefnTfai4qsm5552XZgPZbo/UouAqw94+aCJpyyj7vp\nLRJ+WXpdDcSX1V9Qd8UyvoC4Irn3smUD9uqX3uh/9yMSVkC9H++MWZszMS0Z\nnof5bV38NzNldNM4H3sb7j8AO61+IcuNl1WH8G+9UKICdi3vLfC9ttKLeOyF\nlhmWAdIy628IKphXOSopBwqVvT3ElUIaTe6yY4wPPsYYryFQTF7V47n+ut+v\ndeOQ/Rc0JQFypQLv9a67PBTAJSFdOzJVuXaDCIuhpg3zerEISkE8PL+inRzJ\n05VoiOzvvJVX17FMu4vfB9Yrto4l+OaF1zugcNBn4EvE082Py/n1EE8HkaUf\n2fTS\r\n=JnoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.912d9021d.0","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/shape":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/density":"7.0.0-canary.912d9021d.0","@material/checkbox":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/elevation":"7.0.0-canary.912d9021d.0","@material/typography":"7.0.0-canary.912d9021d.0","@material/touch-target":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.912d9021d.0_1590518763662_0.14414054336093707","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/chips","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.68a2af131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb275a5a42529d3ce49ecb70e9b8dc1c7eec0e6b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.68a2af131.0.tgz","fileCount":83,"integrity":"sha512-73crz8G/6SHQBT6Wu/+o2Ar4mi1FqdPYMwS3oAONwnZiAsKZ2SBNalVI4c+ZReZ+HnoF2yONuWSy1oGP8ByncQ==","signatures":[{"sig":"MEYCIQCVFuxtU/x2ZHpHR3jYkIUY7NFU/xpewJX53lCCkuyTDAIhANoj95Jjo0nX8s9TsDeDVYAX20ZNmnjiNZhXQjJmkh+V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWkcCRA9TVsSAnZWagAAid0QAJiFOVZ1vsJ3sgb+LBZt\n0KtFS0owL1Ah5nJlAQzNByfEMTRuWBYmuN5PBi2IH0KtkgEA6SsAUWGZzS+y\niXzxBarHYTfnNBoAVRo7A8IeiPejA+UbiwwDcjiwp5P41HcBpmSzWdRa0Qh8\nH5cU1Vl0GilvRFrUfds4JzkYkSWIVn+5r/GlZc94YbYUbgd4RjNuRmoakPp2\nWgfROyCgnq4XwlQhZQceq7+ZMYbuHQZWHU/TPFDOTrG9jxFJAjfCgb9+sy0R\ngQ5ynuVAUqXZFrSuxIiG2/UyJrpGr3FtCL01X8lZjdhjOHjAqMFoJlF4sxOb\nfAz3OKKv0amXA24wTb7tOGzZ0CFE5V9b6bRpm5mlJ+G3wqwHVK7wwbZ7CIBy\n0unneBaaY9GuIQU18/db/bOTRDPx/eNpqYRGA8UG9RQ9CthBe1YMPn2NmCiQ\nGvIBvroMeH4fAAOv4ltXM6rh4cgqGF5tplLs2NFqmKXuNp/WaYIGcITb8lqF\nzUzbqX0zHlN00ol8Z2e+rwfy7nDAL6gz4zTaZyHzVxg9+UREtOcFyJ9a/f1c\n9B9aF0qXCmJvQIN0uZMXFi1AM0f7hoQcGu3tOB2O6IqeYugP+snAbARsgGVO\nnc+GEz6ugcTbVZNfEHsPhbQlhw6Ky5R3GUWBwvFpUvJYulGyux7bPrS3BftP\nyJKT\r\n=G8YC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.68a2af131.0","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/shape":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/density":"7.0.0-canary.68a2af131.0","@material/checkbox":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/elevation":"7.0.0-canary.68a2af131.0","@material/typography":"7.0.0-canary.68a2af131.0","@material/touch-target":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.68a2af131.0_1590520091936_0.5799904361625112","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/chips","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.01de07011.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc6a7fa028158be5b5b8b05a5da4620b07b67b5f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.01de07011.0.tgz","fileCount":83,"integrity":"sha512-mVXAW3aCz832uJ6iCISP5eUkgmJjOqbqQfIjoLP6PzllpVLNE4Lr8d0mg9sQCrK6tPQwmRZse2Zt2vKd2CsIyQ==","signatures":[{"sig":"MEUCIQCpUsoB9xjZq++ke2/s5Kx5CQJy7WgfkN9LeP1RWw/A0wIgIEnN8vTw+dISNimT/64T4p1c3D7yFMshkWN+izp3u70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOpCRA9TVsSAnZWagAAPecP/i0Gl58bl/Mpvz0WX7CW\n0ps1QcnQSstIZ58e6R2KiT0XX+fj0Rg5NHiyU3U5B75CCWgVjySEHr7tlX5M\nYkEC77hGCbKywv9Ei/0VucPldIpFXEhioeFDxpnFRW2+Q5S/7BTkP+FBlXLP\nTHbpn2WNzESSvjpSctzx8GmOFzpTTbGPp/4tcpxI92KOE4NxuYPlrP13SvHn\nP1+JoGeo+MTc49PdtJqyzhYn985aIYXKLwdpb2XUu7mB/JQC26vSOuxY6uwI\nCW6fnSA3LZL83dInP25tzA1WFJlWm5wZEElJhl6swV85QE8JXfTZT+wgCWVQ\n/wgXw/vs+oYA1qczkXJDAFfKbGX8RcuUHH+ixguNiro4A31L5p2VpuV+njfz\nUcV5LmqSq0v931tgiXEZlaC5Q9dvWweBAuqJnPN+JHH2e4wxj/mCGO8RYPWe\nJBxVXPhVsfnYoIxEQndo1I/aNJjODn2MydXHzWBJFwYjuwutZVJNzSDUUq7s\neSuXg+JBbILtLCEyZs+RcCSqrY4uhhfo72dZR9K9OzXoYvp14XK3EgXcxyMp\ns5aIuhQvVXJ47PhcjmH+xDXmpKXSNBpRR6d2pigvdGSrGSdZ/O5fwT2EwXiE\n+2t+46vKPN/A3z5HlOM+WIHe8VHb6KDVai62unVWDTlsdUMJ4NGVg1kolDOq\nBCIC\r\n=Kzq4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.01de07011.0","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/shape":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/density":"7.0.0-canary.01de07011.0","@material/checkbox":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/elevation":"7.0.0-canary.01de07011.0","@material/typography":"7.0.0-canary.01de07011.0","@material/touch-target":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.01de07011.0_1590522793083_0.5086011627565836","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/chips","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c494ce7e12c11a8e48194ce8e80045cf2ca3336f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.51d4535fe.0.tgz","fileCount":83,"integrity":"sha512-tpS1S39sv4S8T3T6tHaJwKEQN/WtgHQSLZiP5xioNOBLFG1l7ph4kV6zrZHWJe9HrHhrcYIKSG5ZIx87ghWJlw==","signatures":[{"sig":"MEQCIElA/+8hpRnE0AkAH+hlM211cIxEiAX7qKmi4qKVQdCqAiBImxYSVsQIp8wnz6xp7VcXUAqcb6H3IvzU47So688XtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":890547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYu+CRA9TVsSAnZWagAAh78QAJbMbwT0lFA7YPwtk4ib\nOHMcmTBf5HRVm/sbEwjZH72fjXEccEfH7IzTTvYT+IEPtonoyVBXcYRzRfjB\ng0vwnPzGwtD0slKnk175q4xyVqQXpljLh9XzOS0X4zJs/UBasXG8w4MCNkSh\ndeVER5zU4FC8uSJIhWFvJn/isxoW8hOOIPGt6QNe07wocTZLzeh+tpOqydtl\nILtL13P8gyhDt+s7zZAhhfOQ4W5xHI2b09vF7oA5F181bjQ13eUO8/bKpsRW\np+AyVjEYHomvc77AVaRdluInSjMO3syKDFfu+PsEQDPMOOKNbdMQFB7qhybo\nidVKqU0+uYKQXigsHW8ZbMWFkSNWw3oLz3Mfe3iGU4kJoAC0yVHXC4Id7Yn/\nlEevvbL4jxGzt5xmXr7vEno+gZS5Es6QTLe+PaG80q6yLbtfdlf2adAHf6tN\nRU7A4L/QVeZhfzu1R4Cza8XWdC2D+m3FLV7NykcO4RIQ97DKFyIOFtkjMO7P\naf8NxLYrnJQN30piS5MOECAJdOpzLb+mplVhJ16q1/sA1PLee5ERJPdAUHKX\nYpJctSrN/9T1ilsDMJNNd+BmX4ZMjyQNTJbTj01Xz0hInQbWfaBs/ICHiK1R\nQHD4WlwgMn/5cgEJL8rU6UGBDrF8ZKp8RaVWQikHDx6XtTqd2d/W/5zfrJlI\ntPiz\r\n=DeQI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51d4535fe.0","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/shape":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/density":"7.0.0-canary.51d4535fe.0","@material/checkbox":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/elevation":"7.0.0-canary.51d4535fe.0","@material/typography":"7.0.0-canary.51d4535fe.0","@material/touch-target":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.51d4535fe.0_1590528957486_0.07286328277100118","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/chips","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a2668fd5b14507f4b82391f8105bbdbb2c07651","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.b86d826b7.0.tgz","fileCount":83,"integrity":"sha512-M8FjN3To22SxWXIXoLw0ShdQG8AyojtQ/1XkAiaw84KjnqM5KydAPvfw8gNKuix+PSV++UWRhQce2Dt0epA6XQ==","signatures":[{"sig":"MEYCIQDp/Je+aSEpLr2C6beWOGD/Ug+DuHQ0yHDea3BQPS1yWAIhAKDmB1CiA8tr1fqeZdaZlEV7tnM7LP6oRiLLZkXXpxQZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":890547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZS7CRA9TVsSAnZWagAAQZgQAIbsM29PotH0ZJxMI/8v\nU6/zCsNH/ryuvvS4xAs7MHFF+9/FgmO4x0Nw8zXAmLjS/GxGAQimTvQ8UigZ\nVWgscUt6zOSVlx08N0YiEdUFAIb1iOkDIH3sSMXC5F3qaSeMfIY3egFdhBKT\nb2uL0LgLn4EZw5GidrFpn4IMMC/YUL/d4Kx1WaPfQXNZECfVKom3V7f601vx\nZlh8+VltUlPsIzAP6aJ4moHHn1rFu9b8wD2KQp+kmJw5z6HLFZsk1NeRvd5s\ncHi5zQTAqpCV3mhh0XYzhS9H26QpIVC1qSmymKyr3Bbh8hn2KQjDp34bAwj2\n3UQJnMGjndpIy5hFYY3CrwZtCOxEsyxrp0PcWwasRQ0u3fACepP84OpRvw3g\nrv4CHvwwBtVCrGlmXuwZYmf4MOiyj2zB2nPfJOoUwqaVB53WbgHEpizFbDl0\nRMyUkSoMeVxDXRwDPBHWSAudtjNNAbIYmm5I788tzWCR1adZmEeyW/XsxJMA\neefydZU7wNukav6lEStKV9F0uvH4O/vg/NQyZCV2tT0d8BijmZKy26iEtHs1\nJjP/8AXp2l/pA/8EspokCIIUl5T8y0id6P/d7RnOdsoZRj8DaqCVCkk0aMTS\npXXXWKEbZfsxIGcRHyixuLZmU174wRmpc6r2NooTBwBTJ8O2wZEULu0S7w/z\n46QG\r\n=1reC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b86d826b7.0","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/shape":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/density":"7.0.0-canary.b86d826b7.0","@material/checkbox":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/elevation":"7.0.0-canary.b86d826b7.0","@material/typography":"7.0.0-canary.b86d826b7.0","@material/touch-target":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.b86d826b7.0_1590531259193_0.009367134650014819","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/chips","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"324e50112ec26ba19c9d28502b098fa46396af84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.d91794c7e.0.tgz","fileCount":83,"integrity":"sha512-VuzLzVHwWQYXHpWYQYDbITmBx6MYIEQl71pG+BvNNnjajOcREIsnPRCLJRUe2PHliTT2cZZJxOxab9jcF6oqZg==","signatures":[{"sig":"MEUCIQDVcznaVvoZ/F6QZraBQAYzTT3aO7Se/VVWqcgj+eeBOQIgX9kof/8VF7EDpgH5FzG++6LAf8BEAffH0946AoZroPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":890547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxxCRA9TVsSAnZWagAAuS0P/1JgTTKAT9TpclwzOHUp\nRpO//BbRraNcHwG2BM3H4foZWUAQbwosxUWfF2CHzA2XwmpVjO/6i3JZEH5l\nLIla+w73l7VK9Ov707bxKmHsbhr02AK3/1HeZTnMzTTUFmCcU+0DGezi9VWq\nOOMjbM8DQ4+QlF5xjQRHJmLtiiZxug1wn2GvL15p1SqNJMA0zaho77A8kk/D\nl7SRn1b0Wbk2J8rDQEx38HWi3u4o1AlhG7IhImOm9hlRoKsMofqdUw3whROU\nb/9C3QskibEcYcq91S7lkutYPG1lxPPzUIQRrbsMejsZwLeu5msMtC+L5HEL\nHMxZyX/zNKcrVa8O2pD7UR+mI7DfgLr5RmOTd72BicqoMoV/iijvt+9DA03N\n0bS/JnhaPSCicSUF8M97WyaThP/RhWNcE+oNelRu9Fr1N/94OuGgjCl5XYth\nty8WnKZ11UFn8cDtaIxUuNrcdAMzUsJyOZKs4EAWLxCFdjsLWwV55mR++mXb\nRSFVCclNEi90QfLTlQwcH4bxjHlKCseILjGh/opjVVPQudQqXtibqPIWl+8F\n8fN5Y3S33DPH9YfEDuqV9P/D8dmcxUNK+MkKdXl5YeU76fMb7p3WdphaqaXo\nWzd4lKUFFKCseWL8hvBGmylE0L2Hul9NfyHOpFGBL/pSsNW//ockBBqPaCOb\nTg1x\r\n=AFYX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d91794c7e.0","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/shape":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/density":"7.0.0-canary.d91794c7e.0","@material/checkbox":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/elevation":"7.0.0-canary.d91794c7e.0","@material/typography":"7.0.0-canary.d91794c7e.0","@material/touch-target":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.d91794c7e.0_1590537328778_0.20212436924121802","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/chips","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cdaf63864d39bc95034de955a18671c0ce34cb8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8c6d7e076.0.tgz","fileCount":83,"integrity":"sha512-ye1uQkk1X5DTerC+ZJGfFcHslnpPPu63iDdGy24NynsxM3OTbhc4J4ZikmPqvSbySVteiAsJMfEZgvEZVsaALQ==","signatures":[{"sig":"MEUCIHyPZjHELEQA8Vcs630V8sEM3fWmdUKe/2IsNziOfPmFAiEA8cw0nwkEY12eNS8zvNBmvmJXaOyRys1SPan382h6iB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":889649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezri6CRA9TVsSAnZWagAAhq8P/3MM51kfSG+imn1yKUe8\nr8zGIcCB2W7xdBPruDQRbp+GFrpPE5oezOG7fnVvhAqtlZf6hdymWqaKGlyh\nsIFcG4xClxodXMxuk3VT7w2Df5ztFR4m22cUeDYgNKSmi4yIL3eLM83j+N5F\nb//gipPHllf4MPghqCBzq1Y/7n4vhQoQKLwGXeB835L+61QBv3jrZW4KEWIN\nt/Lw393dojie0CoR3A8SHAWeE2ubYFpeSJyrzx/dz6MPL3yWZ9IFEYoMuNlV\nj7FDnZU5ucIlksg0w47EpkmVhZWWSOjITGW+o0vMFvUctQt4WKfWgYAf2vsT\n2h9gB3Ljxa9987RIxS+RQZ7Yp36Vjzn3edz7adgYAscEifmrKc1dl4e80P1h\nQ69sxJclDF3QR343Q6kpqC+5LTPeJ7M4wOQDqWCi6esvA+Mp8pS9+s2KEtcz\n2vAhfgKJjg3Yzg4z9r6FShCSJF2i0no3kzuQ5DJhv7fwOb8wRoUHUZo5+mH5\nb+SN4Ws/KIZ1Bo4GiNHog02tikqQrGVN1J2HixL+ExiKx45GPaSE8XKskbEN\nCCY2G8IWMr0fAZc9jIRdoeMU6fGtkMDNnhKqAec0npz7LA455NlffMzcPrs5\nHem8O4EtM1nK/JmqaDTvXF3Ure7RCtl4G7wOvorU4x3rS5a9+8a4bdQA/evm\nudfO\r\n=uQC5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8c6d7e076.0","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/shape":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/density":"7.0.0-canary.8c6d7e076.0","@material/checkbox":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/elevation":"7.0.0-canary.8c6d7e076.0","@material/typography":"7.0.0-canary.8c6d7e076.0","@material/touch-target":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8c6d7e076.0_1590606010077_0.23054155911043317","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/chips","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"662eba6ff515ef52f9d2c03ca356d901bf268373","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.5b5f62f93.0.tgz","fileCount":83,"integrity":"sha512-Q2w+BHHvg5Wb/JhJJMvN1XjyA9MozD6cAhJeGjdXKJBzT3xdZWznI57Ly2a2iEFcEfHkjxLaTYPiOrAkyGwVZw==","signatures":[{"sig":"MEQCIA4KctuEvnDvwj3PL82EOQtZhlI11Ahe9FXqaUUXxdX/AiBoOM46sl9jabnjzs3useCHacPl0WdlJDV2qDaauqJLVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":889381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrzDCRA9TVsSAnZWagAAozYP+wbcgp7Pe+eViMuftZHl\nTumSf8rgXHAUPsrTrg9HlZ1cZDugCkNoRjc5VaYdKjazbFJahzzrN/AFTcEx\nQ4i0T6rPPdKwiwfch1MCQdpHvW5G5qSShF1GAkYUah+HFMIGvMW8J+QXAemr\nA0KyJ3zTTosu7wMjmXKGp6GEXTpJ/xyMyz9rvvkx25LWMaYNVpESOO3/byOq\nAtmXpFFRayD0Y8RV/SmzYXIsE7E3m65AWH7Ftlp+QyMnNCRESP2pxn6tMGMk\n9Sfu8Hk4y0QgmFljqK7VwouTCV/aAjnsnFqBXaE2gDOg4aOK83HhRGn4KAVG\nPTejLmeLiOeelKMAqoIp+ZmOW0Pelj+qkSpVgKX1byzadNnQ6y44COkNiMY5\nxcHhIPxt1odLs2KjnDgj9GHU00srWfZB5s0Bb1AcMXHPYD4zsEK9TJ9oDm7n\ni0bySXPel/bNjIh6HBKOma0MNkpGT0isE4+afh3MF4mHAW8xZmb3imX8nXgJ\nMxU+TXXheo1FRugOx0dKEM66r4ylgN2o9Ptl5k/o4MXCxwuFFVG43+9XzJC3\n370EtzBikb9dkzntIw87qLcTeYMbeJ+Zk8/eMAGz1MuCCQLzVurOYbdYKGPi\nqX8PqJ1g51tQczVThXpFZX8Z5/RGZ/LCWjIY8Dg9yH4x3RdQfZNyljP0doQH\nbI9h\r\n=KBLY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5b5f62f93.0","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/shape":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/density":"7.0.0-canary.5b5f62f93.0","@material/checkbox":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/elevation":"7.0.0-canary.5b5f62f93.0","@material/typography":"7.0.0-canary.5b5f62f93.0","@material/touch-target":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.5b5f62f93.0_1590607042782_0.2015899559958756","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/chips","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad65a8f4e4e01d3afe2e3ec1eb82e3b9ea322fc8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.d9972abb1.0.tgz","fileCount":83,"integrity":"sha512-H9ERGjs2ko8zexNqH5trGf9HsDpy6J8M6/tsGXSD4WEbSjIXcned5XwtJ5Pscx62VXoHWCZQEaj/zb6vjJbBbA==","signatures":[{"sig":"MEQCIDUfSLSBTfVYDzdAik/pedk7R+KZY0IHSfAn675vH7ynAiB2JpzE+K3ZcHLiOWi3UzkuynbsXOWISnFUif8/3jkMng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":889381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsvJCRA9TVsSAnZWagAAZg4P/jzz0gUbp0YyB5DiEE1j\nGvCotCZyw34+7gNise7BbJ58e0W+QPPa0AI1QRn3qTG+tPlj7OJsU/aNsQDz\nEO5efRnIN2HCDX39hRoqWE8O7NLuE0pwzwqc+uO5hDDCvbHCBOmJCon3zS97\nu8GMHU/cV7Kw7g1JPDdikQB+0Tty2z5DxOOOyulGpV4aBufXdOCNxHpj9TBE\nnqTWap1iy2fI4/8sOzdisk7aO3Jg6Yzo+1epS2z2lQ9CUGQSw8KKyG/thmjG\nLmcDzuYdha2aFp3XqLUlKOhLE1EqkPxm88ijjk6wkVWZcyWV0krvZaI36Z54\ngV8uvm0zKZLjzmXQ6++h7qRbnVXlRWr69hYkmvINRdZ6mV2JPzYtZQQhTf+2\nl5Rld8HEJBXYJiH9EZnfC4HjHrS+NOHzky1Pgv89CkKNyfSxEITpmNp7Is/S\nZ2R1Q8dVikDQqKfeh94CqQHYFFs4QqWOsh4BUaYkITpMn4XrIdhQOJBxI+jb\n1WrIqd7LprPyiQLiDZSieIv4bzpX1SaCFCv8SjRYUjooTIM8V7va7rGJ0FZK\nKFcMwYBBJ6oK8vrDxeFYzk2yjvarKWIvBZwSe/gBuUoQ4UKHP4dOtYH/qpIR\nUHpDi9BqaJwTGMYFP7v17CGmM2QlTvbJqEuNRv3SBgQ7v0BU9ANHq91cJxXJ\n76wm\r\n=F9ad\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d9972abb1.0","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/shape":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/density":"7.0.0-canary.d9972abb1.0","@material/checkbox":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/elevation":"7.0.0-canary.d9972abb1.0","@material/typography":"7.0.0-canary.d9972abb1.0","@material/touch-target":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.d9972abb1.0_1590610888895_0.5544883051367762","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/chips","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea3f415346df734ac073978243879f3cf79084e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.6556eda2b.0.tgz","fileCount":83,"integrity":"sha512-MRk2zNIGMxOlnGWyKgpvB2v1U+CDn7kuBUxU8BWH5+eSsqXp8wejlOO9jXXys4F31hHSR/IwpWqo93RtyrBAWA==","signatures":[{"sig":"MEQCIBQRCPYsDcWq20lkAH87GBayl3Pl6hA7poHRH22QAhAYAiBe1K+qQYJ1s/Q7wXp3zx5QGfHOVwSnijWDWGmL7LK4ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs30CRA9TVsSAnZWagAAGNMP/10NITI1h68WNhsUokt4\nZ0QHw6euJtMQNjHlcH4lczxSsXU+gLS9mQ9qRFHnvw/GWfxWcgqkBUiQi/DH\nF9I5dLwlI0ZTQJc12dAciunNWZoYd8htqPFU4kqDJHNY/l1kM+W9GaYHpFbb\ncP2FXHinRKAZlUbv7IAReVW6NsIhuBYAdt9xBCDg3bJpX2qS/aOnUjR1pGZW\nP2Dbi9r5pGTpEGz2uwUMwEO1gj7C1VCqo9vrubQtuhFxvKRgILDhg8c3ZUTz\n9lh6X6xbouCLuE48MtmWOnxh/7LezVqaGkHmWy4TcRP9MHPy8qgaN8jF6QdJ\nmgbvyA49/xP2i9qcQmqbXhdQQl49lIU8HQryUl+Z8qLCsORcgJZT3zohxKAc\nXz+YX1SQq+aPXnzX71hxZGGUf65WBF8/HMxoN74e42mQ4U++YC2KqdbtLKtP\nlDpTGgNyWt2IsmlNi/ibnDMZ1FazlOqanWGtA0uhH43Ajz0SRme0hXmqDJkU\n8deXUIku70NEEuK6+RWyxwE9a5mLzzLHpV0VcvwYljL3DbTOi0khlbShKWPv\nLz6c+BZpb+Lh5SR+EWz1APahNu1y41RYGwaNsW7UyRLZgPU4BdAfVT38ChSf\nVMPzEZ7NLuCDXvFAk+DCT1/pNr2y1Z60ZnFeF6LYRmrYvtmWIwrq8V2DAgW3\nE2dt\r\n=24Yt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6556eda2b.0","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/shape":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/density":"7.0.0-canary.6556eda2b.0","@material/checkbox":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/elevation":"7.0.0-canary.6556eda2b.0","@material/typography":"7.0.0-canary.6556eda2b.0","@material/touch-target":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.6556eda2b.0_1590611444294_0.128438194380748","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/chips","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.32aa23641.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"855cae25a8735293ea82b6c3a28f6c099f675960","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.32aa23641.0.tgz","fileCount":83,"integrity":"sha512-JkUwv8VfHwOC5x35SBKLJS/KnFc98pDNT3ypZK4j53RH0PiLuccgvm8fe+WYYe12XTuKRp8e1xoyYTt8liyZGQ==","signatures":[{"sig":"MEUCIQCZBnFNCXMWGIDmzOoz0P47v3d1yUoytNNmpM6qorT2dgIgXhju52cXMid4gZ8LBxtPCFdyFhflMPZ0uvLSscoB2YI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3yCRA9TVsSAnZWagAA2MkP/37biGnsj3L8iZKbeHGt\nr0Ax5KsZHQ9CDbqCRQiOfoMrgDSXeAUNAdYiiveFYpblGJ4BpgxuluM+wvqP\nVhptAIq6AZG+UY9YkXxWqq7IwJaq61bL6Zyi5mEvowx3qU2yBHriPalObqY0\ncNM7eLSrZlobwIvpIn6N5JHSXMEb1gjq9U6/uUX0538o0ACWH/r1NHPgm9TI\ngRYzbLMYJ7+Ry+0PNrN6l4epyzKGZlK268R8TbskHdRZXpoAJKhaVyIOUm1Q\nd5kdGLqdB+G5tIgrPYxHj6tH0PIM47MOFE5RKIPo/gFQr+JrwJQ7+oVClpMN\nUkQecH5svreT2+PuZUyLnDst+HTFVxvrgzoMyIaGmsPouvVDFbWQ84xMijqS\nnR5blGWrN4DwsPUINNAiw0YAq9Ch4BVb6X01D6zaLoKkrdJaWSdHzknzbV3X\nrcA3JOct5TpjAwybM618nSGHaM7F2GBb05UxtXRQuT48mlIgM0ASXGY5/QUn\nXh7jFevshE4yJwQb+170PWBobPEgEX3L0vxdp4waf6jl5uKdi34miyxL+/eW\nq4pvRdR9XP+RSiYT5utuA+V0F65+678QcjSXT8SZ0NjXZFfEp40Llr/BZrRm\nmRMJadHblpBI8EklN60DF6p02fTB4sndj7wzxsSjlveQeAGuPHNYKQXFPZiJ\nmcf6\r\n=y2wV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.32aa23641.0","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/shape":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/density":"7.0.0-canary.32aa23641.0","@material/checkbox":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/elevation":"7.0.0-canary.32aa23641.0","@material/typography":"7.0.0-canary.32aa23641.0","@material/touch-target":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.32aa23641.0_1590615537577_0.5015872374380306","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/chips","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.654934dfa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"045b18b9e85cb948c3ae3173b5c222834f6fed3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.654934dfa.0.tgz","fileCount":83,"integrity":"sha512-zvQJ4CoLdSTlsFjpfWENQkpTzGB5p771Lcgfvqw7VRUCW+lgPF62RFrdLmxca1rga5W1pD2gMD59L5LDiDWLzQ==","signatures":[{"sig":"MEQCIDWgGLycWKmCGqq42SL3JQqU5fRlARxnUF1X+N4/HHVgAiAR9VLBJWwYNDxb0cE/qmyU5Fblb2nvrkn2BN/3pyScqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwfYCRA9TVsSAnZWagAAkQkP/1gJTvwslAhL+qPEYqd4\no4ZKnPy1kHOp793yFp6zAj8SwU8n7rCwXyGozP8T73WYgzP5Qel95g9tbmqT\ncFBozmi4iuGgFHbtsQqcNJ1uzbFhCyh3QFEPYGFCeMbYEgzoP9aqNVUcFyz/\nbOe8nCXVLLsAc5GMea7WvuhfErKfkkiJTPqidzPz/yq1WMCGNzn+sRq4KkfT\nR6GxLO84xtxfHbEPkXxvHN4eq/xqXvRH1dLAxYJNIqp2WJAT1FFXJW4YiK+T\n2sI0lLDSm74U4LDPlgP76j94VMBoYcUPJxvTEmHGR3sEZAsFeGLfJO1d8sTg\ngJjrgkTVLK62tF6xhwM8dEfbdPu3BPsvVOsupJs8x1W00sEp3/NjmYAumxEu\nYoFqHcIHedTr8sjRmzbISrWxilij8DMGwKNybH7PuPogC1Un7G/v2TPHACLx\n6ePFJhiyGvnj78CPPyUfRspjcAXpXgOgKdrSD7hw0oke7reLfzeW2hrSU4Mg\nzs/h/TCiBUApL1LX6eFmYF+RUbLpJHflzfT7mRhqFyHSMgZUH88FubdRvmQh\nyAikbmNldaGgILIkgLoB1YWnUUbznK2jk36yajhwkRYXsJ+EiWeLR/iKhP3m\nWX4Dxo491SqswOxBZd1vDjOYBuU/GDKhll111pRRbFfc2aAXqH8pjTxZse3W\noTRr\r\n=ws/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.654934dfa.0","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/shape":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/density":"7.0.0-canary.654934dfa.0","@material/checkbox":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/elevation":"7.0.0-canary.654934dfa.0","@material/typography":"7.0.0-canary.654934dfa.0","@material/touch-target":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.654934dfa.0_1590626264408_0.7315827975842044","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/chips","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e986e5e64f70b16e78014ee1f36f360a8980f5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.41910b8b8.0.tgz","fileCount":83,"integrity":"sha512-v/MmYTjO3CoZM2e+RVrp6IsW62E5cvBQBI9GRoyewc3ti1R/HyKq1suI7Vv+D+Xe6dX7S/qgEntHha8vG7zplQ==","signatures":[{"sig":"MEUCIETLFLERtE4hSVscV7vw2stIBLOgk5WVl5GsVh+CgPkzAiEAqWXn6dfXqbeEIgqm53sK9xK9DpFs4opTv2RMG7RI6iQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwspCRA9TVsSAnZWagAAgeIP/ie0feJZ/8p6PXngk47o\nddmTzOB3ETqPQFlAplkEReRxzFlZNA6AXN48J8qCAwHccP+OdL8hGBPW51da\nAJduoxIOa+bj/kvaPflosBjq2tUYxdxajWcoAObxfJlxTNPL1tuwoTlz2Fv+\npBNDmkrr8hOUDZDHSCForsmY0nqs3XQUILTHUeDdADZGmaUnoEEdPmiQNWxu\nhrnh+sqrB6R9NiwlRRvLCf2uzPcs5bOc04K4NBg4Nmyyw8o+GKs5VZqbhwkD\nFeZrbR+UlrC2kptrDbjQkz94L7JzJgW/40OW8vCRam8eT5OkKNg/26ABtAyi\nz+b7Jal0YCj8fqadGVgVbWukPvYT8Xfej9OK+QIuGIeUAhLQquXi09IL7+UF\ncf+Y70UWyNFVVuRKKcO0w9rTDgERFtsiAB7W2LgWOlMyDTW1Uxr8IBiPjgnP\n/L4Pdl8W5nbGtjZtVgIANPwakLf5sEu49TLPNqilQOO83nfHDjTVsaeqQRPE\nDhOXngbsgEIam+BTLK6uLEl9KFy7KELUtl9lRmAyQSJQHBNGaDzszlm6WL+G\nxPCGi3lW56662RrJYNVprTBfwsl921rhVeZ04lPX2a3ehyBiyFEtjQZWRahu\nlot5LXM13kvMhvDe27y33ZCOc6XRZwxP4WnqQczBfwQFv81ChFpGOET4i3DF\nptBi\r\n=vumf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.41910b8b8.0","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/shape":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/density":"7.0.0-canary.41910b8b8.0","@material/checkbox":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/elevation":"7.0.0-canary.41910b8b8.0","@material/typography":"7.0.0-canary.41910b8b8.0","@material/touch-target":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.41910b8b8.0_1590627113122_0.8802231963694429","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/chips","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d16972e9ac3dbc98c908fbc374c1733d2e626b49","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.d66d22bf9.0.tgz","fileCount":83,"integrity":"sha512-xEvB7f7WbOsuwQlHW3DVPnXUiNZMY61SxF4qcswAtvI+wlb/nmkNOdnycnoBH2iczw7QTCpzhMvUaSBTriml3A==","signatures":[{"sig":"MEYCIQCzmyXRDZwTylyWQZuuowXT36LWEWdK8YOunHh/YWGSUQIhAO+iFXSeC0lLdf62yoKv/tUlBl6yq3Oz9oeOVNx81gYo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BdTCRA9TVsSAnZWagAALjwQAIHQFNjZtG1QsOxxUEPS\nKUqp2vhYSojpeM+91fr2ReJC+Fiv5QzB5mTBjhV6Fc3mBzWJdm56b4v6x4MM\niZJfz9ie1m0XxnWxPHY5fRzpZkANudKWUF02qszrJcRY+eZuTFkax2Gt7K1l\nfodv5mAQWK7bgrejZk2DrP/Ju71f9jtbgRzf65B9P6pYYZX/iD+r0VAgLi0+\ncZrVqDZ2I4PUEhxPSKsCWv1aPjmwVkxFrfm4pgqcs84NtaG6+HDft4XT4Y+7\npxYFQet/koxoT3liCmP2MsuWuaIr4F+gx2Vys/CrRYo5Ytkp8OzuHk9wJAaP\nXPz1OVhJvhm2I1vh9NME9t2CY8GD1hhq7cZ1nf63flCOHkN5jbQd1KwJf3Il\nQgd7xL82RO09c0w5EXdR0q9ncMG6RVYNuPcyiXebO254lDBXKx96rwO5cqfh\n7R8fzlKoELhEnWsmj6KvCJS0JIF2XuhflxBp1bN1WGKTj/n1FhwW4wjAWj8E\nBF2s8KVhSTQCIJnf2/NjXLQITyYPbQa0G8/wLkONBwce19i3T2kPbcRHNlDR\n7aWxQs1S2y5hkcV+3y/0hwd6IK0ZBJ7Z0DvLDmtBmqzb4yZKWwYqzrwy9If/\n9nMwLLxIaej6jXZ7agTHo57v77VKfJyeOacy12vZkBwmZd6kvrVENAWX3YLs\ndO59\r\n=tFDA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d66d22bf9.0","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/shape":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/density":"7.0.0-canary.d66d22bf9.0","@material/checkbox":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/elevation":"7.0.0-canary.d66d22bf9.0","@material/typography":"7.0.0-canary.d66d22bf9.0","@material/touch-target":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.d66d22bf9.0_1590695762701_0.4087666779929411","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/chips","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ac8b3434c30b1a0a95986650dbeb545cd94851e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8904f3cbe.0.tgz","fileCount":83,"integrity":"sha512-QDzVxX/a8AlMIk0kVYKVCYzugnDDh0WIH1Gq3Lpz57gsmtEhjZWXNdVJymvat6TF6jk9UTEs6j8wCcwY8c9uRw==","signatures":[{"sig":"MEQCIDmOjwta5sill7X003wiWQXPhvj82PztX84Q3Ef9ZExBAiAzaMnhYBkLMb1hxt1lyeul1vGfCGaaZS4YeTh/2YZJnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":888972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1wCRA9TVsSAnZWagAAP68P/1W2/Xw3YwBATreAxSd1\n9dFT8dYlrYaKPjXQlJ1qA2+qWAAOwGAXChsL6ZHyyasP1stnwQHKJDqXx/nX\nYX8aW0sxA4m+qZ/v8440zbc6JKZusTBSGfps3khsUNvq2/+RtqrlFygm5c/l\nEg9eXVLRx18APIVg6B/lAmlH01yIZBkXHEXLEoPREyEoF4whiMVir0QGvqxR\nPm8o8shZhNNL99c6EOKD1lSBI3ge159q69hvHDCDHS0lyo0AAomGlC+7SNLN\nB444yPmjCyMTTrY1wQzdEBzz2pwAeb7FXTCwav7SWjtn2qu+YEMihLOIQlGv\nQxTwCclpUdUAPxMkw530UMWjdyQxVpu1Ite/7Fiwj3Al6s9H+4gVjY7LLlfw\n4qSLJ7+SRD8+jE/Dm+Hz/qSNflHjBXWN+wbAQmHCje50tOvVBl+pe18kRIxN\nruHC8MxBNMagDa43SGPuBB+cSonANnWHtz7yDsfjrE6OO0w8yjbFb0pSs2fZ\n7mOVKDRcCd+qEKHp48cGTV5CMD0WjwooK2zdodZHvTAgr2SQfThiIYfINAfx\n4SG6N1Gj8Ww45T/9w1DSVvSfKIwgRdFB1vgAkItcoMoZstHXNUs7nCUQhQio\n4fjUv1UPrIqDAMWcEGuhZv90BQ3BEFOPWcH4yJDBxn4uQ+dNzWO4sTgHz4VN\nBN2a\r\n=6Jog\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8904f3cbe.0","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/shape":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/density":"7.0.0-canary.8904f3cbe.0","@material/checkbox":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/elevation":"7.0.0-canary.8904f3cbe.0","@material/typography":"7.0.0-canary.8904f3cbe.0","@material/touch-target":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8904f3cbe.0_1590771056156_0.5088140463900013","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/chips","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17a4c1d9bb78674a22f263c6be7f5e3aed33f5a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.51512a4ac.0.tgz","fileCount":83,"integrity":"sha512-iKTlJYlGiXlWr0/dnntGdpyqJmyWf8WhMOUNedbv00NFcsLqPz6bC/jFaA7kIzgoSn5QyG28A5a1yOJ9W1vDEA==","signatures":[{"sig":"MEYCIQD2XGxkNQZXReCAjPf7KjdfEycMie/3N+Ff05F5bssRnAIhAMAimY1unIREU5OFfntIIN92TrN9+bW4RKvwRPpD72id","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V9nCRA9TVsSAnZWagAAX5gQAIsL4TFn0p92ltvr3rF+\nLx5jh2woRh5ulQYALnVYQx9qtRz0xzV9tsxLJkCIyn9Y53petxbYhfEWYfXt\nY3yZmSdMWitd94Bg7XE9T0NXRFp4uuygA1/qPaNaI930CTRdBHI3LlIZdSkc\nb4Q0i8tpVyStOyTvrv/JmxLHNKJN3GEjWNGWB9Y74a5Pv525lZH96xDKqUpK\nWsh9YxacsLvNB9mHIg74XDwW6CU+z1gFSnhVLiW7+9WLX/u8KFcAk/Ajw8BC\nKD6YhX3/CLkTSfPEs6coHfVm655Xuq30dIf+aqs5MhbwCllxp0PELcih7ibt\nDXjR39wuzPRfwSKIYjQX5lyhkTKAoCEvnzwhGmrDOOWPuMkwL2xAS9aUqJ0/\nLk/kJ9uXI6iuLzpJEfHeNtSyI/Cr3aEXOU1gR3P1eFzAbnOLxMJ5wbk9VAFi\nh3Dq5ooxiyNjkifGRV0geqgUnKwOCpLixcEDzATTbZBGC0GDw4tsG+W/K2LH\nhQBZHdn0rji5eoH63qqnL3JBvf1fwTxlMTHFijoQXB/dSRo6ZkeVIH+Q2YGa\nzEIfP9eV9jJSh8JD0bLBvkCh4kr6dEg05KBSrqv7FWKukkRK0ASV6QfqPDPi\nisZ1wplNYQbbHzw86Wzcqbn8frah8hJZQRFkGanRKouXJB7f0y1XR5DK7fCi\n0zo4\r\n=QqZm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51512a4ac.0","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/shape":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/density":"7.0.0-canary.51512a4ac.0","@material/checkbox":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/elevation":"7.0.0-canary.51512a4ac.0","@material/typography":"7.0.0-canary.51512a4ac.0","@material/touch-target":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.51512a4ac.0_1590779751151_0.7772391085024231","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/chips","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.0743288fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f712c4fd49cc9ebb4aee79ae79ef1f438f130e74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.0743288fb.0.tgz","fileCount":83,"integrity":"sha512-SY3QOQNOZyFDIN/u90nDiYLknyk8X29cSwUDj1oPOGJnDgqNkQn1mWjlei3Ce9LQiLeXII5QzNSI6E9V4MxFmA==","signatures":[{"sig":"MEQCIBmFI0xKqn2Oe887qIXi+7SPpcS98kL1nzVg3wFo3dFIAiA5GaekRxWSG7bxX+Bb2j2gIgWGEa2Ak3v+yuk6SW+HjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WsWCRA9TVsSAnZWagAAN9oQAJ6M1QCt5D8oxtFdJyQm\n1mTe1PvXv6GtvnXiXxBpURq/p6IjxHNFhe4Sj8NqHS1VxKz/i3IQxnmXYPAC\nt8kaKmaZp7ZAKXkKHbx1kICJcOntxr1ysb1xqQ967TqMcdaycWfdcAqssHpa\nBSNauV6/CNU8TEilGJSW7vHyXbTVGbsUt9K4y22v2Ny9JygI3WH4kQcUZmMw\nOOmOc8CB0afJs3iRhTgB5H8IEXKf4BjuQyfNjDWlz85dsRzrQzE4quB19sYZ\nUZrj6+Zl9xAlKbOZYubRN9JjReHRad5i0rGlIrklG+HMVlZz3wX9KcmBDpP/\n6bAUEhCruwOJeOfs4zz+aYqT6+QfJPCKn3IAnMovaNkBbkXf189sjpXLqhKX\n6rHIiRlx/W17goqEWmVxzDS4dJDk7ZPgfSKrqNQrbhOziIYvigAgnvuVk+Vl\niIyqIj/u4xOD8nnd2JFpubvS27UonWpev/CZ9AtbAeV0TVl07dSJviwDu+7O\niPc+/DXoDm+0Rmo7c+XhVTgPQhjto9ESmq8SUxIMghmM/+926R5GmuQNXVEY\nymTZMHBcF0Swbmp0p5j1AQv5Ryhale6fUCpHckG9y5Yg7Fl9XCTdhVeb+l/2\nZKYHNYP2k3Yu9TG15hS+/TEPyibsBK/NYLy0hyvi5QLUnAynauS6ERo+ByK7\n9XKK\r\n=+Hqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0743288fb.0","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/shape":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/density":"7.0.0-canary.0743288fb.0","@material/checkbox":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/elevation":"7.0.0-canary.0743288fb.0","@material/typography":"7.0.0-canary.0743288fb.0","@material/touch-target":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.0743288fb.0_1590782741429_0.8645316367845799","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/chips","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cb869da9f4278398a5dc039834fec87d2186473","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.06ef147b5.0.tgz","fileCount":83,"integrity":"sha512-sBMLtCwN2JvYNXwXv4k6C4OWP1jbDK5pbMEDSP8hk1LWR3COKbsgV+MrtEzjXBbm88Tqz+7U2Nqb1NjVdgJciA==","signatures":[{"sig":"MEUCIQD8DRLjeTU1Bxm4si94UexDlF1NzTQIqwMnIFiEONiUQgIgHh+Vop0aVcFtmUhFuoHtw4Wj1uM0JqQGLTGOBcw8hyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNvCRA9TVsSAnZWagAA76QQAJn4zxyZEbTjYxMzw5tK\n+gLgSbrxIm9EnLwuuRwxhBx25sHwC/DVNn0xftecRRjAK3AkYpLwnNCWw19H\neWGwNOY9REki4X5k3VeYBo4ZJlqrp5xyl98ZIr6rcghqFVz1Z0AL6u78VzRB\ny4K7ed/cLGNhC8npCzD/63AAQhsFA64iWaRXKYu0HypQ9QX/t8bHOXM4dG9i\n8ZIaa8XaSzaKrRLThFT36L2Gu3JSxC8iVmEYDYsq6MV2krHSaA4dUM8pDXbt\ndLyeuXjNFN/F+69tCWC8PXtdZoPA5HbBjy9Ksq4Rjd9d7IeXSSZTGxvZmSgE\nCL5W7LKOw0zQBQYxJohe8F+e4aG0DMQ0Yekxtxf0FFvHpEio40LNQJrKXZ7d\n6N0Ss/cXnFz6SmFz8uPJxPITEF9JRdh5Sb8Urwf7D4brgzKKpNiEZ/VvDCoU\nvNtYkqiqhHtafmwLPuz1DO/Rk2eyQwxSKRmq5a+Z3o1eTzQ1eVdJVu8NoO2V\nIMi3L/hxfc+b/F3NKKC/FrfSsb7fdus3rE2b1crMLRCwNzKEk0cdDkDgUoKK\nRiyxcV99pBndt4nTeuD3s0Um3ORweQ+AMYFozFqJ2+x6Bi/3b5ZQb5dZkvuU\nP/hJR018Ykv4XnU+azu1kxefjtehIiWoDzHiAqI8A/U+aXg5BZ0c0KMPy5Uq\nLd+v\r\n=5Wgg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.06ef147b5.0","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/shape":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/density":"7.0.0-canary.06ef147b5.0","@material/checkbox":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/elevation":"7.0.0-canary.06ef147b5.0","@material/typography":"7.0.0-canary.06ef147b5.0","@material/touch-target":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.06ef147b5.0_1590784879219_0.4944243248079132","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/chips","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39d6f6d6e9d494c66304aefe59c02e0afc5a915e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8073a20a9.0.tgz","fileCount":83,"integrity":"sha512-766urU8ySPg2LfIQ19eAGT6BD7lKfaM4mJ3Yl3fR2xV/ywP+eKFHfwEnZw0jJsENdHJXt6piGckyvN3xIGsLIw==","signatures":[{"sig":"MEUCIQDesxxGQ4obEvZhn+2Vp+2Pd+WasiOIex0qnUF6YUvHfAIgccWSdwNrug7pXYtnVd7/Kdrk3+9azDwe4eULIkcfdno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZoSCRA9TVsSAnZWagAAspQQAI/8qMkOJ0v18fuNg4V3\nVaGuC5jZFQYtiQ5WpZJD7LbZzt+qk4NcXYlujRZFAL5X7FNMrORRJz3BgQc+\nXDdrNK+wdH5SUAo38zhCb4a7Gm4fbiAPF/Hr81gx04+k97XLIBd4quDC9vmu\nKAsD9Bk94M40W2HVHy9+MncfVa3zqNKyuRWQrpy9ow0TJy9OvRKL+s21Yz5Q\nfBH3/m/9w1wCxrgGICo4DmPTLVvGubokIY5jU6j7crlajdYzl9sFaCM/iFeS\nLvx315+43dSN9MwmVTrPPCGpyENaRsqZzI5ntqb1h/5QYOLVxFlvn+PHyZeQ\nZ3vWk+09lr9nk8jM6VLrBJhAVbsEDXwmnAmjSb9xA9LQB7dor3sTlF91+vGq\nIuzW4kyJgse5XbHCwu7EAONCEA/oUAIYg2RsWvMvbDjcs/Wh7eBzFb9P8FTy\nm3+9BYKlpru5ufHv2jWI3lhQuuhX91+LjkzqRiBiz+pwzatPVChIMPy3tIlv\nDayYvR1rdjfWsnm4l6ZwNzEMtoxirBSq1WR9kBFANRvx9OFBsnWHrAOfo09P\ngCelX2aIpI4b9wdFaJmpeyn8lA/IR/XkNQXbzThkBpzcvogBhhYTSumD2ke+\nXV10Gy0XC2wdvma7KsOA+A+zgpAz+GAu8mZ1K7n3NxosFP24f27xcMJJey+T\ntpPk\r\n=d2oy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8073a20a9.0","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/shape":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/density":"7.0.0-canary.8073a20a9.0","@material/checkbox":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/elevation":"7.0.0-canary.8073a20a9.0","@material/typography":"7.0.0-canary.8073a20a9.0","@material/touch-target":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8073a20a9.0_1590794770062_0.9800623846439174","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/chips","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.72ff42330.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"489e23193e028a7001562b5a78b7c3c9a95fea46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.72ff42330.0.tgz","fileCount":83,"integrity":"sha512-MKrWNHw5mnYUEi8WiJMzawrPFo6b19eoFBEnyOPcrHMy3p+KyP3bzCYko6WvIOm1rS/jmzaIKOo63VlAX4K02A==","signatures":[{"sig":"MEYCIQCkxoSqr74EWf/pqgQorfZk0sjS3Ta0wZ/Toxl/22h4WQIhAOewP3tcNX0TT7NyN5If5E1REnp3IojJ9REt+mK3jYa6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TCMCRA9TVsSAnZWagAAzXgP/1gwJb6ISnY7u0S+msZL\ngwRM0VgqjBw0ofqChJ9e/4VfyAEEpaNX5Ppi4izKG2pljxTIz8nOZZis1HoP\nNAZpMtBl4/oQomob7pByyugw1GWcspHenCGK2dUU7gaB2FQALt/oiekMnv01\nCpyCGOEXzgQO3kayX7T+NK3gJ2N0AStbN1JtVdqPhC2k4HMhp960OY0N47Po\nC/fYJ695SKvvtG6Sj4ID4q3asSkDiRIEO/qMBI0KYrlvP9uK0sCs6aVyjtqV\nt4OkDbThkZ1EO3HFuLkhVWhl0GfrQ+7MCdS7a7aRlV3x3HMLU/8nK9U0IbaJ\ncD9tdkI3FM80nWwhsPg4RO8h442SmBFtAqXisirxi0A/4MEIKzanZRL8hVdS\n7JUNsKMtINvmKiZ2a8yF1le53lMSiYPZQQrRgAZ4l5hVFp3VYhgEHyiZgt7d\nP1FchK5dvTJ8Hud1PUKD9cL6EcM0/28TPvavgZ/mfJNdLOcd4v2GXWDxaLcH\nuVtr6gOrwLGKTtt/n+6XGzCTmYfgFsT6VRjtGB7Q7bMrG8fCwHhUMoPC4L5H\n5G0dXDqm8hi1iX2wQuBrTtwcdVSjQml3mrY8PZBs5BYSnyVNMxGJKIuyTFcl\ntd7s3NAYh4qAulJ/P10hxD+ykVvbKkdmjcvQLSqPHb+11UDzeqxCFncg0V0U\neoeH\r\n=5v7b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.72ff42330.0","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/shape":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/density":"7.0.0-canary.72ff42330.0","@material/checkbox":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/elevation":"7.0.0-canary.72ff42330.0","@material/typography":"7.0.0-canary.72ff42330.0","@material/touch-target":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.72ff42330.0_1591029899270_0.7740035210543552","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/chips","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deebda25afcb17c4277c72ce30808834a6968b1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.9ea52070f.0.tgz","fileCount":83,"integrity":"sha512-dHVFUMX/gdTTIdt37XJA8n0oc3ycAtySpObV1fUtHoyWQZNri2NOZc1tNwq5MxdS5yEzv9A9Nu6gMwcfX9xBmQ==","signatures":[{"sig":"MEUCIQD0ecikxTZwFPi8Dn2Dh6GXN4eiVTWSXzsMPX6X6yHPYwIgIB9D90Z/+7Eb8ojc3rL6ijX0ddMQKxrtbz1ShhL+b/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGoCRA9TVsSAnZWagAAo3oP/jYjI76/bPSbjVLbJGvX\n4gcu581pgkX3e9jT0agcjnmBFPwZucx7XPrpVUBY/hb690/tQKWSi19PwwG+\npYzOun+mRiVjesTjskq3DNjL9mxCRigZj70LwBQrPc8lN6L8yKcUk3IzCZp0\nxJXXDlcXrdkPy5Ots/z2YGsvd+5bb5ll3xzgUCgf0TvsXEOF/IiPJQMW1UXu\nRS80vH2dgpB34pYdJ4/faMTwrFQG7OcK+mnrPL6s+zWWUBn87K+MiDfSRiTH\nstyCp3h8vvlO/cAbjwJfO0kJ0N75xUqHQLJquOKMQbByPzHOXIOKjzscCgbY\nwgjreX/Yd4RSjEd0wiij51HVQoM4XqGmwOaYh7GYa1XYD/+qH8vke81GWdyB\ntvm3C7VfAqPO1lldsGFTgc2C1BDNHfzH5d5TGsQ+YRkEztnfFxS4PDhV7vge\nVJwD8cBpcH9dpoJx6f9a06AoaEer4AWGtqSwFuFGu9MEvaVUGVQp39may+b/\nBZk/RMXQ9VyXRUG4PMhlxQzJK8B5Lw2SSqrUolJ7aPk/EUOWHuaxbdpcrScZ\n3T1Paw78M1WNhI5IvOdhXnCStj2Rs/nYyDXjjTmzLS3Si6mfe6EqD97tTdRG\nNdDwfc1wbUO9uhRwWPuX5qj36g8QqKYfEkLOJsxsNOADt5HscN9N29qQ6l7Y\n1WgG\r\n=HhP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9ea52070f.0","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/shape":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/density":"7.0.0-canary.9ea52070f.0","@material/checkbox":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/elevation":"7.0.0-canary.9ea52070f.0","@material/typography":"7.0.0-canary.9ea52070f.0","@material/touch-target":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.9ea52070f.0_1591030184246_0.9396496229311937","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/chips","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33d6ee6e0f11f838a977ed4ac09410a9e6397e08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.d86ad3b60.0.tgz","fileCount":83,"integrity":"sha512-wCxSAe5U5804SmoJylUNS7gwZbWcPeF2sD0GD4GrH3WBonsrH9iOkn48HoHCpvy1EZQ2VtdchMZ3FX0p9wYuXQ==","signatures":[{"sig":"MEQCIDgeGJmM5rJn2PzoZUxaiiAL2CtNfGqOlpAFQ4yOXNO6AiBOoQYkZQiIBKQUh/Qefrja3Vb6RlnO+y90aWjePpxKLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+mCRA9TVsSAnZWagAAOrgP/iIun75CBtgOE71UZ/R1\nNxlYl3VjUREB25YFp/qazOw56e9M2CPOOwdKRjxZ0C4TzvxU8TFaUhuI/KNL\n8evBntmJRotqsj0x48ZYiQPWw8NPgmEanywlqIeOMIshT3vfEw1kfzswzCYY\nPl1U48mvdIjE/CDI/QfbjD+mATQwo9lKo6+8nYnO2tG8q8TLWtNocDvFe1l4\nC2wBH3/aUOer0baIC3qzO+PSpmy9a2xZ5H3mc1AmZS1LYRYzgdZxqqoHFuqG\noy6ZMNdkIO/ZyvxkweXmRJdb+I7SZH0C/bpzD7JejgO2nssDYFhX/kEpMo2i\nvuvNMtME54HjArO41M964TjRK1SKNCDxcUgQHCsHd7vUU2EDHDd4/AVmKU9O\nr/vMkbmaU+rWuBH8GDYVwzStQnk9gsmUYng6l8fFIp9mgpmDX0lKpVnBVthU\nmmwFJ1RDoJMaL8bVzyqtE/I67GdwJfkwk9coHklZ95QiZNhmaKlAUcbHVDtO\nzDwyZywiPTwEBvFYnI7U10klgzydv7V75re0STsfwVv00dip0/R/gCIoxqL5\nRoTed76CjLBIOBqwqMKQunhN9rYZ9j8ykYnr1B/GXiYyc9S9TAZ4q2YjydWy\nAAwOZkaiGEfvkO4XAXB2Ov/rSuJPgHioTtiBaaDlcdXPqyZLFWDnZEaK72PM\nBYsN\r\n=ltHY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d86ad3b60.0","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/shape":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/density":"7.0.0-canary.d86ad3b60.0","@material/checkbox":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/elevation":"7.0.0-canary.d86ad3b60.0","@material/typography":"7.0.0-canary.d86ad3b60.0","@material/touch-target":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.d86ad3b60.0_1591033766400_0.815015655386643","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/chips","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a55f23a4120f1ac6b4f65d2550ef668c5fb02898","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.b9776b1d0.0.tgz","fileCount":83,"integrity":"sha512-rT00SbShM/VwtLhToyX6KDVTnxL6+r0keWhu9J7WWNgz+qiwL+ni2Et5we/UCy9+7nWD5La31aiDkkBtOUbM0g==","signatures":[{"sig":"MEUCIQCWD76Nw/KMloojvTqEeP8u9JoboxJuDIJPEK/Dosd2UQIgf8RUuZ5un8sqrs1D3pIrd3POatrzuByTW5u7+w78HcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UhmCRA9TVsSAnZWagAAmkwP/2BWP92c1GsqjSB89X8D\n1dnlgBqVyeuDOxkN+fZ0/ZdMhGAIuq9sew8v1j8lq5ckXdDHxOqxIe9W5mtc\nyUoHUnWaDTmaOPuCm1AAejuI+vuIpYQlkcxXhe1h95WS41kBc2lw9WKPwrFn\nH24WjIe8LxfX+2RERUCoxXQwevHPunmKL8ihYY/2pCNOURjz8WO4vvF+4S/B\nkdnzXvRNEuZBe9ycisgi8StaRe71DcGTK2GV4JBZMg9Qiunu5yicw0uvly+q\nG4uo+PH3mv3ue7oAVz/nzOx/dy79VH2DgLt86DPRH36P6/2eY/fnf+kvKmYD\nCVG7LSS118q/YgtOhrXDR5weOXp4yX4qJwwD8XTxbmGUNvjsvivk0p4Rml1P\nX1jH0mkvDaBz9ifTthayIt637UF1h82jviJ7oda15/KNgiWBx9GGZXOV9/ap\n1RbhA+zdZjcWvtqrSfJWo54wBv5qEho0IqkcbCYPrzAxeHFsyROBFbXYYoP4\nUFLVnFBRRuw8k2WJNEOuta+j7RTKfnP87Ycq5mWjC7ilMjSwkQ1s68XwQmfw\nk7fgzEOXUpiEDgQ/AkjIvXMQZha827ey43BVzfwMWJaIXvnIEPG2WLdaY4qG\nrhOgo5Knu8OJyLXUk1e7OSkKu7UsUWtpdrpL3fPqsReK+SrEVOjB6SIHOQqD\nloCz\r\n=DXXC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b9776b1d0.0","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/shape":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/density":"7.0.0-canary.b9776b1d0.0","@material/checkbox":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/elevation":"7.0.0-canary.b9776b1d0.0","@material/typography":"7.0.0-canary.b9776b1d0.0","@material/touch-target":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.b9776b1d0.0_1591036005549_0.47346256947747345","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/chips","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"988cfbe4c9fb08605c607532a9f7d4e4689cd63d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.ba6f7c294.0.tgz","fileCount":83,"integrity":"sha512-alafK5CtlPZYqB1/Q0xRu0ErnrSVEWNH1/96AYfg5rL1TsEEd+lmrvD0M7kOKkt1P9Qb3WIUl2PTiadgqaOgoQ==","signatures":[{"sig":"MEYCIQCvirNbpps9Akp/7KO0PNdEpjpa0iXRbwBosw11PQ0tyQIhAKFUeXidKAux/EmLomA22iqLBkqrSAVBuLXIfDOskanK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZaCRA9TVsSAnZWagAAxMwP/AhB+X1gpa3oZhelzRr1\nf3OPPpUAKNaedgwmOUQGRNf3TOBhJGetRGuscr+cj9gM6eqlAzJK956hmoNJ\nLgkxcCgi/mnXxEbRN5sH7HLoq+jgeR7PehGhlUBfo6QQ1EsBEfsVODH2klBV\nbI4ljCUcY6JLQf/vzAZD144FKSJkk5CXnv+fjEvyahI1SxKq4mNgT8EE9wVw\n3/bcMT1MRqk2K7ZxQi+SmJWObASZ9UVahr28WTTP/PPZ1+fKw9VnPQoDYTM8\nkwrTm3VLz1SZcy7VRGP3MmgJKNJTX08pSD3KrmDC/1jqMiA5aniki6++Lh0x\n3Odx9SHj0u76gXMaSiRQ3FOzaZvcLzKckag0/r8Qj5OsauBifL1nOy6qB/Fr\nJip6WK3GfSIBD7g26W7ggLiq/4cz0phvy8miPjTfum/8UnhNS8BxUqFCBA5R\nWHhaaS9wPg+1fI7t3E513xELcKu9QLSx/g1/Irgq866vcZcgJCLJ+vggWkK5\n8QtoL7PMPD6PjKRg6qYKaf+1mIePA38jIcnk8WS7KVXTiE859Ia1aN4V2tjt\nUtlsrJTvgHHhTNVnlwX2qVa7Nz/fAE6OLVPObBcV+03jBmm0776ZeDE9LIZo\n46r+Li9Y/vHFEC4ush/DeIGRBUG63GBKCGfZsGobq9BABvbICUe26hUAl7mr\nnqaE\r\n=mDtq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ba6f7c294.0","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/shape":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/density":"7.0.0-canary.ba6f7c294.0","@material/checkbox":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/elevation":"7.0.0-canary.ba6f7c294.0","@material/typography":"7.0.0-canary.ba6f7c294.0","@material/touch-target":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.ba6f7c294.0_1591117401829_0.8129877902022928","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/chips","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c056282687efa2c2d560b246cb6a2f996a7f57b8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.cf3b664ab.0.tgz","fileCount":83,"integrity":"sha512-h5RrUdSB9aQKfxVABgOsBV2r27kYEBipbMDZSFbd4F8BjZD7mPmGrWSMh/OEZBYb9AriMw4yBUmDjuQWkScNOw==","signatures":[{"sig":"MEUCIFQSPPXBhZ2BxmpXeKIi+zhFb9Wu5P7DvqGHErzNUwzyAiEAlb8guv3DJqvYXCxwBv3fhxJ8nWmqEZMKyMzGAfPEPs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1plLCRA9TVsSAnZWagAAsjgP/2+VZXcP5BKwNPhL8R9X\n8o6jbXyA2YX4oCqC9pYFVTST2vWyNXH3+dv8ExqRguy9xrF6RfSjFbgHQyb+\nQaPH9hyx35fD+N4YMTUyfU7jIawiG2m7QIVSYI6JQ7PZGkOKLV0Tkmx9otZu\nLFE7qleoiS0UvM+HNsY4Rhd9Zs5rvZ5vtxC16pDOxd+5+lEE4QBfahdGMM8b\nlUNJrdYOtTT3f8ITexcanMT02yMTD0roERrnEhTrbuph4qzcUpjCSIkGx1H1\nxeUJ1ASwg4xY/KxX8ZgfzFsmvTHrLPLymUc+arz7HK1X/BfIc5Gfix76gExC\nYStW8lXfoiqszwl1FSTG0J9/8f6Cy+9UoSoeNZqc7lWhH12px0oZzTa/jRiw\n+5kI9mEDuYEDI5c+CmflnvcCoyNYCUTq+y78Jh0i1nrrFupUzGytMolA5/5Y\nVMClPMnZ1g50sifNGPD3kQJ+W0U6kYjmY5LsileT1TOd7Pu3a2K8p6wQMZd3\nFYytf2BUzVcoOj7TQULW48uWqd0gX/r8wkZ0QgkkUq9KThY4058VrO0wtuMO\na15WQTqfpg35McdKw6FVloKcVBcc13dvhpruPvtjswA6ATjhlaMIuHl5DyRs\n6XhExBKAIrQYZx9mZ1rKF3uqPr/RqHUc4DRO83Kc/JOplvlb0PxSke5jEBBb\nq+2g\r\n=YVnW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf3b664ab.0","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/shape":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/density":"7.0.0-canary.cf3b664ab.0","@material/checkbox":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/elevation":"7.0.0-canary.cf3b664ab.0","@material/typography":"7.0.0-canary.cf3b664ab.0","@material/touch-target":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.cf3b664ab.0_1591122251516_0.5502126564691154","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/chips","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f2e23dcdf774e30951dd065f319d28d795780ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":83,"integrity":"sha512-GklY7NGlu1XdLplP3Uhb/HwaxEmYag0WcVOaVPAVnQzCvswnhca+YJZGtkx4zh2huDkv8wYxW/h4yx4JPpb20A==","signatures":[{"sig":"MEYCIQCrrQp32pZx3AWsNhnakj+Dwqbn9QyIOq1zgLCtm+yMlAIhAKv+WivI9hKa35jPxj5CZ6FCTK5AKYpST6Nw/VEalHO7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uZXCRA9TVsSAnZWagAAiOIP/iheM3owttXQS2Er3Gqv\njq5MRQlSAmzty0dMVHYTBSN1b3NMUYdi4SOMu45/qBLYDr1ojSCJbrgOQjfX\nv9vpbWX+PV+4JoYaDMiAtdz39Vx4NhiH0bdK2UfTKooVhFOnVMp/WAgpxVJ4\nAkQT5BlGKlr74tz3FxVsaCMw0G0YXdxi6U6EIvVqOuTvroUSKHYQtgQhNGu4\nMyQ0ssaangnxFEzkUxvKfU+L8//4Aj2vEv2RSsOOP7w3pjZDkAtYkBRxy8Xl\ndqMm6liPa27fdaqLNk7BrigmItkLdzEFRPNSnG+P/o3//chNnNv/dK9ut3xa\nAOTcK6ijO1kCGHyFseCojx5Qpz+nYNfhUz0ci0mi4ywrYHOIQoZ4d6sxZtJ5\n3oU7wJTwRvxMm2043z99SNdmNNIIdZa5sDKewf9uo2XEH7yvPnZEZ/T2hWvJ\nMGQj0Wo9R+ztwdXFbDvxSksbzFS9HQxjNBcvn5myIQUEtDHssNGw2opW0kwZ\nQAH/cN5e29z4lIbLp7JgicdXliC1c+bkSK9lPLlbGiyer6Pd420LBJWpXsS0\nhHsaXJ/iahZ4AV6rc3m7QJ6uTzFWu/OYAazTJXyfrkJSH5YaqBIzzKyx8rcg\n7txah4Kwxe9OfA+9xSkG1J5FSMETD2XgrXTpt+q/rOFuTMKfUMKlM4A/Wpn+\nLvE0\r\n=TkeI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ba3c9a31.0","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/shape":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/density":"7.0.0-canary.4ba3c9a31.0","@material/checkbox":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/elevation":"7.0.0-canary.4ba3c9a31.0","@material/typography":"7.0.0-canary.4ba3c9a31.0","@material/touch-target":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.4ba3c9a31.0_1591141975110_0.7165951138923325","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/chips","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.388b042c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63bd0c4e337269163a1da3c65570f73ad4b534cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.388b042c7.0.tgz","fileCount":83,"integrity":"sha512-LmNItpKTA1sZGcOE1jKefXGbrvy8lrezr+T2lfnqTi0aWEENUj5yoZKBzecqrfutOangaRZyqABpBziltuqr7Q==","signatures":[{"sig":"MEYCIQD0dEaM7bvn3+wkll/D7FYo9RByAZipCdsC1EEDaVu3awIhANObxuIyojs7DkJ1bYN2dCvezSUh/E8R39/mfA3ePK8B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16nvCRA9TVsSAnZWagAA4nsP/1a8ux/o5WNX+/4uFj+W\nNhbs147gLA2tWXw3C16SmhxbMKndljCgmp8705vV8up4SJFVMQwutGCogDUc\nvuMF+jxlJawgHawgR4VBdoK9mFeomPb5qtY6szOqRdHgYuL/WVK1nIfnLCPG\nFSt0kvxTxZBiXAZfn/+yXZwk0gLgiVI7/Af+y0R3QEsgzAZVV284+gICqMso\nqAus1Xtlt/E0BScfiPQk6oZ5Hvh0nvQGSl3/HP9R/02dswP/eql2uX8MzS15\ncqC0uKE10aHLcV6/zldIU1S7cfkrebClpCOT8HEpBHN8/4gL/4eS2ND8QQ7M\n0zGv6/iBmK7ttkZPlOmJtz4gu9LMHPMalpD/4lCmoYnuS5AuxnRFIbKlP31z\nwM3GlYEJ924CCQz0uy2VOkQGo0pDgrtG/ECeu0NfLzBVCJBRjUZZrem8lYKA\nxztMKIfaafRq7DQ41dGi+5sNf/et4KYu/OTS/PNZ+5CJ4ioTbKK1XS2wwaUV\nWqE7DZafIBCSrEWnqjGuM0tCyT2R14khmWCFKVZc+nY2oy/oxHCaiKVVXCkl\n9ODyE6fR0/AVXwiwoiy5zEtqzFvarVsUnDriDBi6/eaeIk9+B466Z16ByeGm\njG8S4KfRoMymNiGdWVN+ttANNTRYymy62GYIkpT2B4WNtxFnkXUJJFi7VrXc\n9l9S\r\n=jJwM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.388b042c7.0","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/shape":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/density":"7.0.0-canary.388b042c7.0","@material/checkbox":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/elevation":"7.0.0-canary.388b042c7.0","@material/typography":"7.0.0-canary.388b042c7.0","@material/touch-target":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.388b042c7.0_1591192046626_0.268455433575963","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/chips","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dc5c693ccc9014816e12302680ff867229d5300","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.cca1ca84d.0.tgz","fileCount":83,"integrity":"sha512-B5KLhhV915wrQooqZEDczRk/XQycqLxwJYy2dj9QVuSmo+C6vf+CWMiBL4DuTgPkIM3IPnXLwPec6Lb9U79KvQ==","signatures":[{"sig":"MEQCIEasTeUhNS2A9MJRb/hADxlKNCECvwPWYFrlXV09EDIuAiByCpDUT1P80IOtVTplCevLMlm69bQTlIqLjoGpjWT/Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18noCRA9TVsSAnZWagAAJQgP/2AFHKyiLEU5ZOgoANkn\n/Rr7TUKZttkUvUyEekz6MV5zFlcbL79nGAktXnO9ZRB5ox/VQfkRJKoq/mkk\nqhhGlT0cvbzpsMJDdpvSwi+4TK10/PIOn717/MN/e7p4XkdQ0udCqsCX+3Er\nqqLyAqItO8hGYDv8Lasi5jvzgYXVmnp4HkyWgmDIOuFlz/cvq6uKXAWCCrRG\nFMNgOO89W5CGOIAYJBoB/8O9/kC9xr/Aj8swLXQDUuL21dD8s9b5MZTNpIVz\nV0Bz/ptguxhRaCmBkrbuBFTUReG4/qxz2uL9FxdkDe7Ef4sKJnbD3hsGMc80\nPHbQ2k6NPge6FpglhiD7vyeS6ky5O643a9h3bnvnNAmMSRYJv5FDobitAK6/\n9QgXLbsrtfRMsiN9jj8xe6WUGoX87u21E9xTlLPuVolQgeXfb8WLnDTt907z\nJYGFJwNJln5HTkkZm79nW9O7/oZKRxFGUOetygwX7xQcBUW9eXTamSECH67y\nUSmKX3uOn2X2ilLxq0/YhpDOenUZMnZTM9ufQxAbtUDe4AEzXeMFV+32qX1d\nrhbpw9nll5ZFRDq62IobeiNKGuep4SF/2BGJsj6zCeZggsl12PJpYxmaIp1J\nUHTwyJowl8nM/o7/Ogpb7PpRbfoWtVy4NKcKEHd/xJCvcoU0lV5zopH/VqDm\nVEIK\r\n=VXUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cca1ca84d.0","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/shape":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/density":"7.0.0-canary.cca1ca84d.0","@material/checkbox":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/elevation":"7.0.0-canary.cca1ca84d.0","@material/typography":"7.0.0-canary.cca1ca84d.0","@material/touch-target":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.cca1ca84d.0_1591200231700_0.7517566085496961","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/chips","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bfd086fb542558c30510bfffe93237ee17f76d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":83,"integrity":"sha512-zaWfi6WuPucSRXrIHm4G0muPn6qYaLxoEjQBOyRuUMHmuE6qllCXpDdftjEc1nh7k2Edv1xbmyR1Gr1VxXHsMQ==","signatures":[{"sig":"MEYCIQDZFtlkizQPZcNSymLCrZQstxckOct9Soog7RBeU1lONQIhALrhVHeoviiBNEsfnNIxHeK3aXAUdHHIiXsKrTvnzJsw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/LjCRA9TVsSAnZWagAA9I0P/1AgbVXcCN43mQcubRJN\nKdGiPOZhmyuNZghTIidQ2xr+zbGL5F1PJRBXWSHJ8wk8074VCgzRomWZ5KXw\nZsLTf5xhZK0aAR2dgunzBiZjI4kr4Jt+x6uml90bFytcEfne+fFZ8hI+ie3K\niVQS9oUR9TjxO8Xj/rpbI8nHphE528p+Smg8qn/OevWb2sdDqezphUhRQTdZ\ndjBB2XEAaYZmHMBgC0Al8oIeR6bmIICgkCaGyoqIZQ17D3OqACZXFiLlmtnN\npr6gA4fGrCrNV6asFiaptlu045NsXHsIFIqMg3agbRoW046bX5oQRmUrhJ2N\n7TQSGI7U/Rou0FR7iCX0mOhlIFJdmYDqdMQ4MKiutxByfTQoFHe3c2w2hEK8\nxufXFthgpWRdUGHWm8tKaOFHkpYLCAM4RFQOsmN6nsLJXX494YWhU80GW5Rh\nvESIa2PSDqHiyesxIyPN1FXoRcxjcX9RPAZ5QNaXOCn7x5ZDCwlnqPq2aTTd\nM5mHFw4SZAInB2EbNX9ZPCONGxf5B7NjcRDHOqjTykO/kAGmDx/lElslojvl\n5y31AOrvyQzCTfZAdq3RQO9Q+Bqsah1TW68QK9VqpPIcZUCUpaChTiug5pt8\n27pQIHfz6zGm2ZuQL70AY/B34d4AzBDWbnAPjijJ2Q1EEBps8wJtb17dFPcY\ns40K\r\n=6iB0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9b0b5f2e0.0","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/shape":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/density":"7.0.0-canary.9b0b5f2e0.0","@material/checkbox":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/elevation":"7.0.0-canary.9b0b5f2e0.0","@material/typography":"7.0.0-canary.9b0b5f2e0.0","@material/touch-target":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.9b0b5f2e0.0_1591210723506_0.17660819246316173","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/chips","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fdfe3c4bcfcef98213c25b57b76f934f85dd0ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.0a7895f4d.0.tgz","fileCount":83,"integrity":"sha512-ViNLiB6mX8OQfPogTJcTWklJC0tY/s+XOum7hVpKqouyh9MMSYU1XgmbA7WyI2zIQk7gffx0YNhLgNKtKVGR0g==","signatures":[{"sig":"MEYCIQD4AuKuOEGWm7ZyIYi6AjDRcL0Dsvcn8Z/gbJ7RyeGT/QIhAIBJOF6EJLbuKrVtJ/5wy24BkCkJcCZk8VNR9nCkD6Zf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BGdCRA9TVsSAnZWagAA3w8P/iHvZz7xvvBYk5Zz1Tuz\nOpf2ZraW+9T1l7leqmn7389qo/w3M5b6tXVrJ86encRhIP2nHTp+lZba4gmX\nmHRWXH1qsLTLK+OhbASCEXkRG9kGZpozTKs27K7u/2LidFcBvsh81VM+Ngub\n+f/bwf1EdOWOTe/McQcAzr/s4VDB5UqatmIuHoZ+PTnYeZlgCpCMIwwBXLko\n7OvwsdEfw0HRZudluiO68ElIWm0wXSWlob0CVXDtp2En1rddSA5J3oWHL1Wj\n8BTEVHD6w0iEVGG0CCl6HECPiKH/fOkfriHoTR+zXGNPQpdOogMp5L0Q2pmU\nvKIRuKm4yI0dn/civbZ0wx9CwaksJVlXeiEBF394L8F1gCXtpMjwLr2tkMVV\nSZsErg5y8U1DjmahQS6QZ3nSw10B2pQhDS7V0W7FzWKNdjeS6+R/kyV/0mKP\nDi75CZmU8nawGNtPlPEDgcb/N3IVif3p71j51/WMzxVE1Z228lfMyoK1l31M\n4ch2S4Ghuy8zX9RhEIemTjtDDJyenGiyK28QjaDcamQhSAHx0zELR8kKOkI2\n+CHHb5HCsTCdB0AyZuLS97+bGKR66pz+PnZKJx+VYtfDAeqGmEOSIGNPbHwn\na4sPPkuLx9vYV5d3RNJUaWnad/WfypwO+CIuKzhQa8RCF2Y8JaGGVvjt3m9n\n7eAr\r\n=wRMt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a7895f4d.0","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/shape":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/density":"7.0.0-canary.0a7895f4d.0","@material/checkbox":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/elevation":"7.0.0-canary.0a7895f4d.0","@material/typography":"7.0.0-canary.0a7895f4d.0","@material/touch-target":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.0a7895f4d.0_1591218589246_0.7606013752889202","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/chips","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.7461aad68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14c9ee839242c81fad7700ef391ce8581596da2f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.7461aad68.0.tgz","fileCount":83,"integrity":"sha512-bw3HrYVLZ8iwNLHkAv0xSG9QPaTtKTXE6lmXjCOuWuF1ayCyHn91cYSn9WtSthCajbj5poWSUSJY2w51FTnRNQ==","signatures":[{"sig":"MEYCIQC3GdJrRQduo+Oamm6CP9mBUSD9q+gq1884bIJjC4DfxAIhAJTdFvxXYPiX0BBJj8mZC078C5Tyj/AVChLgkyjtbFZA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CCBCRA9TVsSAnZWagAAHUkQAJhxbXltKrv9R5l/MtYb\nIpXw4N7t4wTp26XZeFSbVJOeGQ+5/vI4MVKII71eBUXaNrdabdZ+Lqidb/Va\nSkkYH/QfVcZhtrO1g1ILA4zz9lD/BqjqW24i4+VQxeD92q82nm8xpxRNpT9Y\nG5URJ+pJsfhaUr67tOTixJ6dVWGzBsWN+Bm618O+awJ28ZnzL4/nxrTmFNWR\nHBEJ7310uXbzy+Ad17XEYtdmfOeDrg6N5pA80gqGV2MHeGtiHVPQ52LHj9W4\na81Ja+V+dU9H0cg5Pin/HJku+C7Z3jNb1+hSLdEenKhaPEKXl0gXwUnq7GyT\nn1zwGFS5A0Rv3GZpkTRe80Ab/gSHJ5LnSBROKKPPIcLB+J8/zYHsMh5vXAgR\noWmHzyQHSy+9/VoPWJfz0yfstdO7CFZZsDwE+zsu7qh6VjQ/1YQ8oqFzf4wR\nNjqIMBLPQKLyBFv5dPJJ/B3EApIpa1if+Z14wilwaKxtoiqILCfEYrEmqClC\nTPZrApgm+Tm0H1x4zBAJuApD7OmluBWKggHO/0GIMUBxWO/DP5cEBudtjzEA\nk6lKfxgHyLmLwc6r79iWDuwVAhSC4rhxYEIE6Ry+oFoL7iGHK0C+56kRXFcq\n0hicUWHgXisRiROvJmmCzYzC11NNMYpzPyFL3Lpx1p7b4nonZiJwTckYS8mi\nDmKg\r\n=CtZ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7461aad68.0","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/shape":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/density":"7.0.0-canary.7461aad68.0","@material/checkbox":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/elevation":"7.0.0-canary.7461aad68.0","@material/typography":"7.0.0-canary.7461aad68.0","@material/touch-target":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.7461aad68.0_1591222400724_0.8894787263499695","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/chips","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f90bb28063969895717080349a50bcc21dbf4fdb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":83,"integrity":"sha512-Gq69E6ZNJmLVYm7nmUPTee7K22r0YOxMYaOSMHvTFJd/EKXY+oZEsOFZJ4g2SWlOQm+EGSbPkgzxP+UudoiqsA==","signatures":[{"sig":"MEUCIQCacTxRBiOLiPeao1kUxxU685WlcaSpVIzS7OOGansw/gIgLWmqYFe/u2WChNO8FFjQS3u613fgS//me6qEuHsS8/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WRcCRA9TVsSAnZWagAAsi4P/2NXoOdvJH/BZXYNkM+k\nsqj0b7YZ3QfgYqy1YdJrzq9ESN/No6iG7EaAV7faiCS5lH/1Gdv1v76AG+sQ\nQ5rOMybQvrwmbKq5mTwEi0vBLWwdftYmZdqyxTMoT3CUGsG8DNwLUrGoxDxm\nHYK/YYr0Ky02/mxOaILxilco7OW8SnB4PTtk0CRSpjKhfma5J1NS215kjYDz\nTWavmTWUTnKzSuByBSdTyuTNlBlzF3EHajZgWBgX9Tqed73TBWTl5z8I/78M\n+9UcFdNSUNUh6ML+qXqCfSfipCjk8u6X9YWjjg3cEOT0lt1l2Nr20Rmiq9hC\nHw+E50J+WEqc/jkuC0XPXB1QLUjGp797VOa/WJ5ckjjIEUkl+Xa893O0QRHL\n/vduyZXNBwrTx6WhoZ9OHLfFAeyiPwXnGsHVMWCIhJ62VIi9cYIFbH23SVKL\nM82xrSyclENTMO2rt7fsYd+ViTeO0RVDVTIv1G8siHImSpEsBkvcTDErA840\nj5Ji7xg4yFqnhQ7ZofLCJ6Rjr8RMy9pXvInvWOuTLZX9q6Ff5pBx0WFsgkT8\nRn0F0czG4/aOmsmRpvtTbLpQ06v9nOJO6qhoUJaKAUD7n8MuuzK2vGnXcVeW\nOxO1lx+lzxyUtUlQjeZ/E5PJk303f6U7qj0MArvhdCJQUbHVQ+k1YsVrAa8X\nSW6U\r\n=ZHtb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0dc2b5c4.0","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/shape":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/density":"7.0.0-canary.a0dc2b5c4.0","@material/checkbox":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/elevation":"7.0.0-canary.a0dc2b5c4.0","@material/typography":"7.0.0-canary.a0dc2b5c4.0","@material/touch-target":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.a0dc2b5c4.0_1591305304983_0.678209080968533","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/chips","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70ce306fa0401966e3cff45d702831fe1c90e290","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.2b420c5b3.0.tgz","fileCount":83,"integrity":"sha512-WC2MVQ6/N6kRALboopvcwAdDDZagToR+w/ITQkPjUKptCUqr9aRSHtBn+eQLho15dU5LJvZouPMgK99FAYiKJA==","signatures":[{"sig":"MEUCIQCUVNct0QreBl71VMCB42IKk2SJ37ZIjAazO0fPt8orwwIgOOlJBaEvMNLySctGI9lqfxseFDR4nPE4Tinpoq3cqYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mQTCRA9TVsSAnZWagAAN4YP/i6G8tpQB1zLjrO+7g5G\nMBq5qRIgbE58hcTp2zG/5Jvsnpr9qLUHnTAKEtYEvEtNufet99lUadP99Lkp\n/ZeYlOw+lRBnyZOEMZWzSLvD0RWGeuJOLr+wZVsXm+yAUT8fYM1O32YbWsgh\ndwC1PW52pHt4592InGe5Sg7FLN01trLmpFLK5ccK1iCk0Qb1qeycmRvp4U+c\n8PbtaxJMJlzYNKRpw9m632rMDSgtc3SsCpLSzEKb84946SO/eJ4ZhvUmMUx5\nD54gtj/NoXQlbvaiUoZ9ztnq5cIFq482V2LWiIdeQsY9lCQ+qJTEt166NsC0\n4G6YROz6lpv/PGg2dPfuVRTlq9vIiAShxWTPvFaoqWf8MO/GSUpvvCWEJRI/\nLDjWomc/qvMDHBSx/2fpKkKQVUJAN+HO1IShrtYOjvRfKgT6gEjayIoAm6rS\n8d/GUV8lBgG5gDG4VUs6YFU7iKphDA7DfCGZwUst/xwDIMpk81qX7gYZrihE\n7eMXZsyeM0dnThh+v12SVeOelbRWtPWLfvtuLoPX3o9oXkrGrM86YHEPg7tg\n14GV3kdC1uENbk9zcSiK7XsuAew5QusIwDGis7fhTuR0mD29o/tNKQ5jnYJn\ngWidAymBjXud6JZ3+XZm1bpMOdpD2g6d+7MbeZ+GI3hfQjwSrgnTFPYq1eL8\nBd6p\r\n=SQPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2b420c5b3.0","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/shape":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/density":"7.0.0-canary.2b420c5b3.0","@material/checkbox":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/elevation":"7.0.0-canary.2b420c5b3.0","@material/typography":"7.0.0-canary.2b420c5b3.0","@material/touch-target":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.2b420c5b3.0_1591632914764_0.8605131103293955","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/chips","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dea77be680c4d0029d27c5d9b9f2b74d65b4975a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8fa22aacc.0.tgz","fileCount":83,"integrity":"sha512-e3WaobO+W4I6QM2LcadPpRD71kVJQ8ejjBPzNDQnDH6NXxnc40G2BrNHFLsUTrfz3e4g96hG0xjOmZ1KUWm9ww==","signatures":[{"sig":"MEUCIF26h0+xUpyBpxGORDP2CuCUU4McMDrufPoMN3hsGGQ+AiEAzP0klVyFkMUXN2RZJbsONI+cyIH1UvAB4E+nHaSZZR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n3gCRA9TVsSAnZWagAAAQkP/1JYV8nesz74b6gT2PwR\nLostznwGosqfhdmoQDpULeiZJURy+G+1W8o1XeimwG0UuCGWXCNh1wtiwkAl\nEwIaAECeGM+XL+R1gGLoCwUwJY+FDJhmdz9mfzaFFanBafZc1wsnOsJ49qNr\nWhry8POKkW9tdougrWPXQdXM+b6bo99RFa8ubktsqGH9Y8jPjUEYdBiUzdLj\n9c/Nkzr2QbZltYEVxahAYYrKT3dzZochtjgEZBU0tvQ75wa9iN8YgooMelFw\nitVoevGV3EBhFNlNYyIGgRBNX6ipGl0WMAGBHyKxx9i7nU+2UMYjXII7RMp/\nFAOLzWk8N7tFKZnnmBVoLSGJX/dJqqEU6YsrHMUwplFXpsihUFCcS0FbFK/k\n4NKpQDC6NaLMkJhmDf+qUKuy8r3tECeLKjRoKPSamxo+qE656e7deMFu3/e4\nj7AyMKRq494iW0/TVZ2TLQAQaEqO1rTaOfl2ovcarwC6w/OdqJI4PrPMG1GD\ndQHaxa4MjSBIKjKfuA2+TcZ9BLj+D7YfI1tvfpwabWNdxbMytCnBXiodbPE+\nYURT7ddo0jDR5DdMYznxzhdnZlHHroRZ1X+gZelPTm7IHzXhlfUTo9fVzVhL\n5vJwupFuyiaSr41Rr+MUH+z00V6WLq09GnZ2xNZoCPgXBm8sh4bn7WWjXRCD\nVd6F\r\n=/Eme\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8fa22aacc.0","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/shape":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/density":"7.0.0-canary.8fa22aacc.0","@material/checkbox":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/elevation":"7.0.0-canary.8fa22aacc.0","@material/typography":"7.0.0-canary.8fa22aacc.0","@material/touch-target":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8fa22aacc.0_1591639519850_0.20412925391877823","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/chips","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc3ea29e3e9b7924dd6356751fedb1c18184e694","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":83,"integrity":"sha512-ALvJvfXmMNGniyfphCeR/pty0M+hfA0wOhB5+M7bYNAxwwUz/mmONVM6DFeY6Hr6191MHpYO8+4ersOnDjwv2Q==","signatures":[{"sig":"MEYCIQDsZ6juKI6QoOJH9pLLDazxyJh2vXWYNOCmGKfXfICzCwIhAIGgV22zGpBdRfsKVwKQeRiDdrLOT9RSwFLEQ3klc0hw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocuCRA9TVsSAnZWagAA+TcP/1GN/LMpttOCIax+1lbJ\nI0U2PQ+rndqUO+ItpI9thJi4noJtp5nvGLXVpEnxJJnZRmoQ9CF9Yh0/2UNp\nbgzcxc8zAyoYb+aeuqltVhf+YlsmVLSXosT9ZZzTH5MK6Dl4MbtN3R3WdZH9\nHLTDGei8k3KOPw6ufFEpqDaNTvbZcnwvvnPuWZlL48l1nYuBi2JNqOqVr2gI\nJxoLpJCNW8d+VmwQZp9+4W4aAqD2plmzpQ+oxQuxC8KB+9szIanq6RouObSL\n62SLZCP2zfV7v8jlpwqprRVbeSsP847o6kLYJYaPXdsD0spuDz2vaYNvXz3I\nm7tgw/TbqP7OuG+lermvAs7QSGk1xstyvShuf0+SWM8YOA3SH7Ak2CA7y/xb\nLd0E89UWpiCddFTRmru5TTHES/SDazUFYIr0OXeywQB6UO/A+LBkdSrBNKyQ\nZWcSqtvRdt8XZgBDlQGHn4M1x883srryyNU1wUjI15YX17t1txzAWCkQNrhr\n8adsWzQ90EIOpFdj6rPTMMpvCaQdw3G1Omh1KqBec6Pc0cmowQ0XCbxKsUup\ng2iPHnlaV//lDvBrb9jALmwoASUgTykV1DCu2ZLtBQvSGMQIOD8lhNHgCGSh\nNy2csgJOzFZT7W9aR3UvP1CInscXNRVJVULVfDVSFYd/2wmrebyRZs9lokuc\ngWrt\r\n=n2E+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.21c4e4ed8.0","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/shape":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/density":"7.0.0-canary.21c4e4ed8.0","@material/checkbox":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/elevation":"7.0.0-canary.21c4e4ed8.0","@material/typography":"7.0.0-canary.21c4e4ed8.0","@material/touch-target":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.21c4e4ed8.0_1591641901275_0.34855696028735705","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/chips","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.dfde46516.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be1ef8b486342d8d34189c01c6ac0e3acede1b6d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.dfde46516.0.tgz","fileCount":83,"integrity":"sha512-Kfch4mNpFbNXNSgeQ4Uz3gi+NObhjAXwFfiPIiVS5aX1fneYZ+EBtNh7UezKZrIkEN5l7i1P7YTDoQguuKziCg==","signatures":[{"sig":"MEQCIDquImnrni+zURHqsNJX1bMnXvxtQylQw0l7xSkEt4z+AiB7shuDWZbKj4x0AAKgaWgVa0EcxCcUeFZzpziYCdwBjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pS2CRA9TVsSAnZWagAASe8P+gO4f44FIpkEv2GDcc/H\nRQvHk/w7cz3MaFJ4kqHFEK+bh6Mygx9iVUsmKliow6OoRZDR5ZLGVvV5rRxV\no4RUevfQz0erZu68szpvGH8IUDklQ+SGT8XSoPeXeLlqOZTBhPKA4bCXSYVA\n/wdiOQMw0ouexkTB5+WdOaAQ0D/LEkhNcmAd33yGU5NmzDaFzXJTRtuzvcSL\nTYFBBhYa/UVfcPtlpKHCTpa04GUb0RB905+wc1P3Bh0CvTnkZ6XQwgHynWYs\nZEtEPbdRreYfqX3Mm3QjJLv5k2IDioeoGH+Fbk2cj3abBag4J6SZOs+00RaG\nXH/U2YDKjh88/QQsDRM61tCAbXP+KyKPO6f8R9z8zL0RyOREbpELXrEwjl8X\nh0g8xahBHyhA2NdjRhJCZqfbwM/+3TesDiOzCG6SRouQJSxs8pGQdJTFHAFr\nz5yivGZYwL5xjrjOairubt+0PUd7r3Iy5UQoVHxA+t5+VpUG3N2SB1P9775t\ntDtpTPvfNxj5kNNTqWFU6Oi3ctzjOGTJQyt3NXTJlrgTP4Mc/Zu/xBt/TN7v\n3L9G6977OTCRd1+weMxOyxd5ZzKonOTn3dDg0XSf2jlyoZj+QSjCwue/GBP2\nZZ2A4Mgn3rfVICxejytG7E516FhxDAjEsrYQYWwA0N48ejzN+rQXeT0mfWgr\nk04F\r\n=Tjsp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.dfde46516.0","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/shape":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/density":"7.0.0-canary.dfde46516.0","@material/checkbox":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/elevation":"7.0.0-canary.dfde46516.0","@material/typography":"7.0.0-canary.dfde46516.0","@material/touch-target":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.dfde46516.0_1591645365672_0.15350177771721651","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/chips","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15714d16b3ee0fc2c51e2ab7edc284e01c027e84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.05cc5c206.0.tgz","fileCount":83,"integrity":"sha512-QhBCZLLBOYwEf+NbzMA1kzDgTUek6MUBMyYXF/D5yBHWEIYT2Y4ECzrSISv/ijTpZ+umDN/sAstZltMG0EBQTQ==","signatures":[{"sig":"MEQCIAkkXkimrxvfNARiVw1v542nAPw3AF6wfDFBYRbHiQjfAiBYn/EH2RKp2KZQBPuop4+KDcJg7Tzb63A68BbXkaTDXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qZSCRA9TVsSAnZWagAAK20P/3IGBVLVrX/aqNDAaY2V\nM/Bk6v49/uKnhmjEFF5wTupC08TzxxuG+wJ6/6ht4jvvzAt6mKaUcC9bh5PG\ny7c4YnJPnrhPNDzM45499nQ4V6XMiQT7xcQCFV4Wko0hmG7XJS/WHEuamMWk\nYsdexWiY0Pczcg3ZYNuZPCb6ejMm3eWW0m+yOFWCw+MeV8PrGp17VGz4N5Od\n/6KBJJ74yBhgeQnQfeHLr9cXDPd1ap/G/BhNKJ0y75S6myz9USSHCeeaDJRF\nBy61z2KyzilvggeRBqin9tEGY+GfuPnhyvDQYfApUc4c3gKYd5K3xbGO6Cvm\nlzTNAWq1dxu99+a2qrreYERX4hrurpR2j3A6URdxOvMEBZkA0561myWUJQsd\nXsdi+iXuzczqD/Pq/G5XstFFQoNFQqXOT/hohy7cL0rvVlJ8QaPeYJrOigRa\nM4J07maJF4bgqQu+w42B34Ofg/GZVVilzVvMlKrrRebiJsbPaS2r2u1q2CcG\nZID02h6ARe+sGidrg5PsmEj0MuUOjfhwmhVQ32pA+mwV+NOQbitR0kVfvZDt\ncsUzWZJjIN0zn9zxC4+UU+KqIJzmu603vyl9H9IHEbhaYUYJe26O6jkd3TEc\nzBepE67bP0ILqNIbcWGIXXDxj3uW7vOBFznwGPe15h7FXDd+xODe+O0VJjKg\n64rE\r\n=DqDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.05cc5c206.0","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/shape":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/density":"7.0.0-canary.05cc5c206.0","@material/checkbox":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/elevation":"7.0.0-canary.05cc5c206.0","@material/typography":"7.0.0-canary.05cc5c206.0","@material/touch-target":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.05cc5c206.0_1591649874318_0.8779920447195784","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/chips","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2bf28aa7a9cbb7aedf17d539fd71fd811fb5684","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.3ee488f1c.0.tgz","fileCount":83,"integrity":"sha512-hKET0lvh5f5+edJtm2lr+wPNeLk3G7gXMF1MNr+QDJ78CryG4/18BZRNGvYTOp7KCBfJVIYgayMW7V7rUzn7vA==","signatures":[{"sig":"MEQCIBPaXon6826Xon2n1pRkGjp10CQGaL5rvku50e+luohiAiB1NStY2Bwp4uoAtFrvHeSk6KTyS+MnDIX7GnyYjk2ulQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36K0CRA9TVsSAnZWagAAr6UP/iylXG/XX2hxmbmY1JT+\nudn7/9wJCxAQzQjrG1tW/7PHxp2UCAwl3zkpR1thVVqWjPPM59YxQP2oNJJQ\n/HqOeSZcYjIkYXwjl7jlsXe/4x/jdWRg6/pgOryKp+T5WsntjhCAzoxQuD9F\noD62wJRKgVFZRfcb9bGEstSQGsTZZb8Tr7Tt140/zQvpczopXA+K2uDxTdP1\nT0+U97WBxTUar0dkIEa3MkDjSdm/6Midq6jYf2x0mUjgXMY9sEmF10n+VmlZ\n5XtmSdIXY30QaVgPt5nvW3nrenHLC9dosxlHVMmkrRKAZfXyEPvDE6r+LfSQ\nZDeW9TN/pbWQYRC+VKHf8XC74vIlQNigwnUB7XL1LAeYUsB6yZnnz1b2RKh0\ngUNYAb3biMhuepcW+CV5qmJPloN8ilURvT0TWS6fIwySMTxAgvPH17xdhNmM\nLmEQlv+WIkw6JNCER5uZNA/aF1jPO/wGuoDrF05NKNUYg3pSqeUF9eqr2mX9\nDDJdAsUXleTrkkz1/Fja1D5W68nr19zq8M/h25ZXtlIQ7y+gq5IBZBk1KwtT\nahjLzWnjIyfXAmE2g6+no7os3viJXXMrqppCslqjqWEpLqxBEJZ9wgdYaAy4\n2t1SZ5chUk7HLxUaQA/rOakzytetC/2V1SgCEI1MUluyy4W4z/vzdLaKxJCF\nW7JN\r\n=P664\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3ee488f1c.0","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/shape":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/density":"7.0.0-canary.3ee488f1c.0","@material/checkbox":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/elevation":"7.0.0-canary.3ee488f1c.0","@material/typography":"7.0.0-canary.3ee488f1c.0","@material/touch-target":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.3ee488f1c.0_1591714483863_0.22163958515113502","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/chips","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f13d80d0138b4d1649544feba7b344c8a678123","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.b83d720ee.0.tgz","fileCount":83,"integrity":"sha512-xCdH99fJZUc7Hl5xX3KOLKQBhINQzy1UtRJyxe1H+TCeGj/XNva5KATlStuMATcuONlhpOMthp8/QOlDvaPs3Q==","signatures":[{"sig":"MEYCIQD/cZcpRMo8NTO/c1ULmsTxT3yjFFMYs/tvWpPHuJ8bCwIhAJljGLV4U1Dx8nAsk8t1t+ogiaLJwNXwirPnGinNgHWm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZkCRA9TVsSAnZWagAAkqUQAJM6MQg7jQv5GqqyykEG\nBIEjwL8K4dZG8g9O8hhj9PAhviU7AlAdqz3OVsiP7ZRRalWuicJTyrS5xwdc\nRCpyKpi1bsi58lYsv5kvDXrK3UR/iyrpHHzvZYW30nfFM0HrI0+AAQyMEi5i\n2O6MZLYkqD0w/aRHGI8Ivs8LkfrZVs6GF+swviwGdGxVqbNVlU+fGtJ6davF\nVZMd3NM7FRC9VYIMqr4SODNCPJC2SqBCzBG/pJEVvmwNjqfrpjagi8ts7b+V\nCi9gVo4cv9F9CMeqWmo1WxE0Y75Wxu+c5bDV8gye1YNkzCXmGo1tt9glNIwG\nt/zP8mvNO3yJuNZVBu183VWT7kqRGSd8Sz1ohGseIrw6WstUgXUfu927sFDU\np6EwymikcFt+peMbHH2T1SWFI/eREUGj+giqMpUFPfCdK6QcNsv76vjKXmK/\nAVCvmAxBAWT/Jru48Tnw3+1IlVy74Uv9OvMWozgf32WSaKnYHObdsvcDG6by\nePHnnubj0xLz1S8urC5nQHgelqf6nWlXOr/ir3YCTmCaBdgvCQSr/sNjYpB9\n4L5a3mhO+yusr0M0w2JnCoHM2NV4AlWGpPrgSYZ6KlSwwz8/8ZDqPDZH+s/0\nfgfZBqdW2zGe2CUslhfnxUcPWaOWQ/z+AQfXJIzyxH/kpPamNkmfRJbntSyF\noB6J\r\n=EKNm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83d720ee.0","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/shape":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/density":"7.0.0-canary.b83d720ee.0","@material/checkbox":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/elevation":"7.0.0-canary.b83d720ee.0","@material/typography":"7.0.0-canary.b83d720ee.0","@material/touch-target":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.b83d720ee.0_1591723620255_0.7201306018058533","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/chips","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b0de600e21a1b00b1ec6c6395efc970472ca71f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.afb1c11a9.0.tgz","fileCount":83,"integrity":"sha512-dvemxNHJMC4133g5PWO4ESOpLb9YOZwAVSpiCvK/7MS/4l0Vk2A6N/j7gZaOelIdVu1yJDXeaP4vWK7R9akE7Q==","signatures":[{"sig":"MEUCIQDRnPN+pbyIBKtQZV8UQk8q7/j8jDdynr3x4j10yQmZxwIgUayNPnpzho7RkQGIXXDKoX7JRYZgo1Xu2Zq56hc+KiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+5ICRA9TVsSAnZWagAAH0sP/0sJdYEYtEiaIaP7Sad3\noSzjXWs0QJAN07sjyQdknBlvgfmKZ24V2YQF2A8itqrMUOq8X1KkVtWePiR2\ntd+idHo0DPg9Pn1cBCT4ItpG+yfZKjAqoOtdWIQvTtL4GB8fpKdOyuSvVN3b\njQkRRuZgx5OpTYEybAPsxk3crV00fxRZ1LGYQFZZSDosXEhU8h/c3Men/ysE\n6szDAAwYvGPouQD8opo7P8ZIlRiq2QHtMfHOBKLpb2RRYokf2McsWhsPOyaC\ngVHYaIn4dV8E1AGH/mm9LV4h5IrwvYdkwCfklwwUwiFlYgiKatqCMh5AaUZp\nG0JAWv6rECtG0HOmuescCngl57SnhyKWGRF46Ilj76q/JQQWyXdL671B8HIP\nQzYz6aRUJVs8tjLN/pvY7p68y5HVa3uazBysMLKTFInUpCxf1zW292KDW8dx\ntOSbwkxMelHH4JL+5yG0GJfLsHwQcO4iry8N8+gS4+X2G9jQVJsXRfnm7Wxg\niixNWOgRj547ExluUZms63pyCFZTkCsBnbgs0adOfSksizqkCCazPgpwfydF\n3AwFQy0J86SbnUBbj8u88ZJWIMblu93QA2e1fIiFDJn9e7fho2bAu17ddZtB\nkSDxMafY+i2aiWMa8ckQdnP4wn6DVsY/bQALSLFJecyFc82+/F6p9EAqIFJr\nGciF\r\n=VVF4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.afb1c11a9.0","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/shape":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/density":"7.0.0-canary.afb1c11a9.0","@material/checkbox":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/elevation":"7.0.0-canary.afb1c11a9.0","@material/typography":"7.0.0-canary.afb1c11a9.0","@material/touch-target":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.afb1c11a9.0_1591733832336_0.26028892179635","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/chips","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fb99887b011ee8c2ed60c4e1bb98c95a38607ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.39e6f71e2.0.tgz","fileCount":83,"integrity":"sha512-4QUvFcjPGhxeKBiUKqB5qH58ZnV3cdtbmG2oiDqRYR4GC4LJojFUdq1gfNM28SLVYNayclIPzZyTBgKwYhGb8w==","signatures":[{"sig":"MEYCIQChGOzud/I/kUdM5CxO2wGGmiXTr2CWwgUaLGWWZsrq0wIhAIEGgnxHwDEho3mqN39qJeS3xocVXuwuh5763tygb4a0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3ZCRA9TVsSAnZWagAA6WMP/05SfHMLlaq0KQ9bGU61\n8rcpBSlUdkxUg75lAW5kcbPrWjFbdSPes0go4hZCvn1fdRaytNxAAlPRRzYz\njsIFbMlNWtOz8HKvEqs2FBMa+0/tLmvmKfU+rI1KBK2Zi3n9I85SD5RQSFHF\nalCbvY/1sjxZJZzr1SVCXfSOulZmtnltZyVN8cLOgPTC12JUYT1TEZKn36Xi\nyWjC5Qm+oPGRSwhN8OgHffB46+x5JEqZg7+m21yQ2gQetgVfQZX6yAoIkKZn\nfKwEnds9UArlXN2D/1c9SgkFlqI+ENmOziILj5ebNrjV/rqC9V/z9T6ZEjch\nwsD6TflAkIgODWBchMiv4O/mdbxXkPFhUvJTv7F2DBMu0Yi3PngjL6fcKZ6f\nocHDgZa2Kh+JPbs/2Qhbf55V4limrSJUmPdrBxj7LupibO/cgqS/EFG5abho\nYc7eG6LtrjfV72afhiiOzDOqvl/zHmJ8m8m04le/9kM+2OrgAJkK7ggCwcbQ\neywxtVXhWuX7KoGpmbUdkw4XnJ1FDXf46VkGpH7fUh9vpXZKXyMfiK3SLoX5\ng/ZhlpPHZPSECAAescUHSd25crkW4br3k1DUHbsDKk+0PydX/oSP7L+zHPC9\nY7X9RwTFEgyv/ZYB6VeW+IM3D8JgdOFP/X0SR1QtQyDxxPjNeXdT+qbDZJPx\nXjxj\r\n=dOG0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39e6f71e2.0","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/shape":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/density":"7.0.0-canary.39e6f71e2.0","@material/checkbox":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/elevation":"7.0.0-canary.39e6f71e2.0","@material/typography":"7.0.0-canary.39e6f71e2.0","@material/touch-target":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.39e6f71e2.0_1591746008993_0.6851190470609239","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/chips","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f172a8d5cd46893a641ffa69b0e2d477199b7004","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":83,"integrity":"sha512-LW90Fcrx60ZvcJl7153GGIR3vsbZ+YMtkwhwbyyWbzkAROsitRsI4B2izQS9MtkT66ErLpqjTPsmDPHUWi1qFg==","signatures":[{"sig":"MEQCIFvJCEUNwNSHwEdBAjyslATBX8EBBG1+T76YFzKNhMFPAiAC4LuTHV3E3GQwFGakCeeT2s6FwcaOdJFOOUYXTuinSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m4ZCRA9TVsSAnZWagAA7qoP+wV4YzQacXNK03AsO6s3\nR69brYoauyzkFsstj6EmpFrEp4a3pa3Ov2GbV1HaTYOm22C8pRp8isVQZHHY\ndcL2v6kQyt1c7IZPe9oGebw3iPYA+V79/g+eGEiKvG4Tr+IZXA62Exmxpmu4\n59x0AqFdXeeJO2yDIKI+ovhfH7b+hNf8BBeTuoHuWM10xYojIi5NK9hVr65k\nd8kc22Eg/MKHmXMQNl1GdWs895n9VzdztjT+UjtKlmNwktuJtM5NOK1dx2m4\nh2RzPV1GsOaDkaOgNRtRoZzO6jpUwOh9+D6KYRnJUi9+93qtDH95zX+v2VWq\n58l6C7ci44RFI+9ixtq9kJakw6xEhD2GYyheYkeJ4wUeoe7IR4BWdg7WnSjm\nMYn6HUMp/mxu0qUHiq4hS0TewvQ4/pImK3Mf6duc4KtosrAWnG2YAUI7Bef7\nJMO0J1ABcNxHp7FHhH1/FwLxI9/hKxLFlZWJMHv911xKOVRHSjD+mrRU1syR\nv3iA92RdSQvfEbJmZIpddT/b+YCQDp8WmeMVn2LD7oj1TW0qDcCitOnfM1/e\niExhLllzrluHuioysogp2FIQee7bHnnnMS51d3hrsJMZBMTRhHXmmopNLBj1\nj+Zx50w/qnVVnOnH2fuS43qoCcWMnOLVWAYZ+rJXOGYfLah6MaIkvsGcEKWg\n8ZOX\r\n=yg//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d4c66dc7d.0","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/shape":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/density":"7.0.0-canary.d4c66dc7d.0","@material/checkbox":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/elevation":"7.0.0-canary.d4c66dc7d.0","@material/typography":"7.0.0-canary.d4c66dc7d.0","@material/touch-target":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.d4c66dc7d.0_1591897624945_0.4006391619356451","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/chips","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfcb0a701687d41f1a2eed1d39b8e36110671eb6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.be4a19f9f.0.tgz","fileCount":83,"integrity":"sha512-7UXdLrS06lZhwTZ0vOT92d8NfmlP1KMxCO9+1ckclxt7+sSrMF7lfkrXAnKpcSf7X4mzYJI8VrweYI1aASpUvw==","signatures":[{"sig":"MEUCIBlMzg7GixrvThq9Xd3VbkdXn5zm5rSsITeaZWrZ9i5uAiEAoRCBrAMIq22D8Qj4sD4zuDFgzqDaZAhGRAd5AyACrQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xwECRA9TVsSAnZWagAAcBMP/AgCX8dr9u3ATK90MtdE\nx5RRBS3GlMZ5KMhXHrlbl4Y74mfyQReUK+4dtGfeTGzGzGy61ZHEva4JLNpG\n1wnVRIQbKGgHL5W9/TdQSMMfImW0iK2CZ0uHEaLhflt+g+ROseUWF7RtyhVc\nCfg44gpKFDoko0LDHWAbKlTh8+ipJErVeyd76LInCOwytHwBsWJSxrnZ/6e1\njEOuTozwbXGDf8Z/W0IHcMTWpk5NrpLw77YmtEtAPpV81uV42zp8LnAjA2Rl\nPyz5Qdi97VDQOb4Bk8NH364GN9cvVoikGIkL2lCTGlwjQrciYT6tl4DuKaPZ\n1cjdKa6I9+shS6e07KW32d6JgfKIBQ6CMPnrb77huAq6VbN67XLBiiYUcPRU\nKqi5EzD3MqzbUefRVL7eXlLMhnB4MXHeEJF6PQ3YIef0vozDzrm/q8iGON2Z\nE747BegmARSvxC9P5Qrcl1SNHqqByD/NArMuClvbCMoAHw/3RYrZM0iYRV6e\nKsCEymKxfnt+/kMq7AUce+ZTJJgSyPdJQaA3xHGyQzCbD9CEyWeSEUtlzg02\nfLGrnJY1mZ33VODBVhL3ORpcvYKCK7HV//sCRe3Xkj5hqfXvATAT1nMupmvc\n4nEvMuv6skRZertBn64X0BqaUTlZnNSb7arYqWJR8qr5ZJu3QH19oXW1+d/1\nK/rG\r\n=4Uxr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.be4a19f9f.0","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/shape":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/density":"7.0.0-canary.be4a19f9f.0","@material/checkbox":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/elevation":"7.0.0-canary.be4a19f9f.0","@material/typography":"7.0.0-canary.be4a19f9f.0","@material/touch-target":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.be4a19f9f.0_1591942147671_0.8174050725513029","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/chips","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ab4dc31e37eb03d33a46f0f1fc555b8912c49f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.a6ac8f629.0.tgz","fileCount":83,"integrity":"sha512-Eh8FsrdL5RvMFe8UNln+G5WdJe5Q/hgWjLxIy1a/203NaBvOznR7idpxiggP2X/JA4dCvVcYnUoFCPP2BLxE+w==","signatures":[{"sig":"MEYCIQC1LG5RUAw6Jh4VtYePGpmNHRdR9Zmwh0G2RrVULakDhgIhAPWX0OwwD7b7NAVfkrbU0tD8aupsUnJOwkbmjBw9FRLG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+isCRA9TVsSAnZWagAAlOEQAJPIMJwURmUNtqyrdFix\n6OvvqqGaIvlWbnXhx92htTp+EMYEMlbOT0O83O9zYz2CZ7cemitENIjsQnXC\nkopy7ccND1sPsuYDNgC1jMMxwNov64OX+zzrQxsyK4acVU58BXu4fDooAbNM\nwKrhoboPBJtIx/PbLUf9l4IDN31auJKUh6Kvauy22DEmKoEKvHB2wnEvxTVu\nhPKJhpVOEhYyg87LzX16l0uEGlsMElL9mx5jy7uwep4DFG+yNgCSZspeSFiw\nZwxk6JEepHxr3VoBtjQOct/2x/+qDtkcjC4fssVAoPMMPZcu7Ta3T31ica8s\nIy1GD4wsB7vvw8v2JOUOFRfmLvJPC9TzXrkFtcSOkJV13lUt0FYZjm22Yj10\nNfkdU8keUUzLtPxviq4B5rIxcKHe3EH1QieGVPTeXx92fZV8VnUuzdHfyVEE\nyxc6bElSj+K7cwGebnhdm3XUXR6UGxrlGXB3+8/bpJpBoiMgh7YPE5S0Zc3B\nqdgyiy0QsItpskh17hZbGtRUM84JtWn0jDCorC+B6/yyNzOUCSVyOtUYMWLe\nIN/0HoS7HpggnTrLaFKaPU+pec0pQORTHHFv6p2BD05LgpAJnPIaOHxuMb0p\nXgRMb2ePnFpRBNuwPhlq0cXqFR+7VjXS5UzOnsNcAyvzljvRnvcUQXVvQwGw\ncZcx\r\n=MIDS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a6ac8f629.0","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/shape":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/density":"7.0.0-canary.a6ac8f629.0","@material/checkbox":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/elevation":"7.0.0-canary.a6ac8f629.0","@material/typography":"7.0.0-canary.a6ac8f629.0","@material/touch-target":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.a6ac8f629.0_1592256684293_0.5394009207184174","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/chips","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.9833dc287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"925026954100b87383492793ac7a86cdc82d3b4a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.9833dc287.0.tgz","fileCount":83,"integrity":"sha512-13AyCpDvTpmELIn2YbutcumT0wRr83La6cv+9U57CFtgA3NFXQ46khw5WLXQ/+42Of6fmrCDA5+Wo9lvoWaxRA==","signatures":[{"sig":"MEUCIDjq7Bhjlu6wlXbvs90EU4zIDJM8+4y/6X7C3kJ5efIKAiEAkwwdqGbKraWFSBXm0JS9hOukRyQXReCI6Fvnsdwdzr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJqCRA9TVsSAnZWagAAkgYP/1/91GqNwfQ0cZCVBl1M\nllw7zumyRPILbHzZfhA7kP4OAAhFwV8KJSxh0SFUDBkfJhVyW076QTkt2/+7\nLyhhdTsGkRoogI7aQ2Ajh0tq1gXXGqO7gNefOA+wt5wBkV1dthq3GlobTwZ/\nY6Vzgub8VbaoBnYP1yxKTaBunJYsSPdEt2ooEXLsSyiBqgcyC82bRlVV4NfV\nxUtDP1gQmozSTfR9TWtpxQqeYmeQ2Um+kPkHKZlDNtz3RWyFQa0Cjn89zlTy\n6isduRPpJsF/+rCG+XAovGx3vkiy/qkE7W/biyhc/6Rj8ZLtxnieI1IpAGEz\nDU5wpBf8hpqH90BMxfUM/QM4V1SYA7G9yS6EsT93eOhIilOCdgD4vkF1kuP4\nYXu2r9aZJjLFQBzjjv9nVH4p69EC84TwyWwyBM+gkyDZXYR+Dh6yCBL8M2WZ\nedgJ6d2KhDMGl7+O4Zfo7UGFGDQgPaZ9uvL006ULeFJFE4ZKLF1yfgr49hK8\n8aQGK4Q/5kvl+Gdkigx466ipjDmeV2930PnhfJvf6P+6qS2aITWMRHLQ06MZ\nuN2ZwSo/VRwSAz+31FUW3siipitjEb6WIvI7JkcCvKk7+3XVwZTx9XLFM6Ye\nL9H4dg7c6XijkrSR3J0vxwyjkXD8zP7bOEHJTtdvHLigit6AK4Xkba/qn9Jc\nu9oY\r\n=nvPQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9833dc287.0","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/shape":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/density":"7.0.0-canary.9833dc287.0","@material/checkbox":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/elevation":"7.0.0-canary.9833dc287.0","@material/typography":"7.0.0-canary.9833dc287.0","@material/touch-target":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.9833dc287.0_1592337002024_0.6273795444941488","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/chips","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d26977a4b6365c3d5784004e1c97a8906abca69","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.3aa33998e.0.tgz","fileCount":83,"integrity":"sha512-ssJvyp6jUF3QUxcJLHs5Gp3/wpyo52B1T2OdrAneWiXSsaolkYqPZ/NCed/qeAw12gNRrJF7mWoTGDRA3Ix09g==","signatures":[{"sig":"MEQCIHurq5mmy4kFe1QXe7qB6vs1HZ9V7ZK8mLZ+U5gAhBqGAiAO0QFk+NHDk1ng6ZgE8O+Dsr6912DlPkeAl4giCwUBVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SneCRA9TVsSAnZWagAATUIP/1yzRQ0FS9m0W8UGDcW3\nnHDLLIoxjnKpPLTJHaXWN9Aq/u9C13D1++GP7OjFSSELH5bmCJE8tyLSC7W4\nn6YP81tw+X6mriMdI0WO9qbL+0UWJjOU/JeU26ut1B6EZFZnVow4JYu6Z5ml\nC+8Nv0SkzhLdYgVm4kAL88ZfzUaMOJpFqZYs8FxZMRwBPwtRghvu3FMJs+Bc\nLJX0G7Dvu+e4CBLVFA6K5h/cO+3TlbRKYaU+7io/cg40CLKzKPUqLnBspL6B\n29WSVumfyWVMEkbW9EH284qzcPSsnfVdhYgVNJOY3/GBFvFSa6jcaWO7oTMj\n7LlLV8jRkDNQd0Yly2SgDCf/B8gTODLR5KEkyxq1z1wkgzFSWoiNjF7iypO4\nG5zg29sSN9pUtm8HTgP1zRRa5A1gcnFEfQ0BHe13tFksOjrQpLx3nl6eJJdQ\nrFvvcmlm/O6iTLHMY0SvSX0WKdJy5FGvC37LYhO7Qd6MoVcunKnncXp5yggm\n2sYkHNPz6KeV2+k/zHnTg9hwx2D8G4pk+V/yapZiuZYUKtoAVXc4Qtb753kT\nK+N4Md2PAi64s9AjgZVJtDPfoB7lIcI/zaPurC+cvrsVRY0H7y9WyRWphyoI\nwGaeknyZiYBwx6pAqVl5jNRnigxNkZWEeU3UkD38CymP5jkpLc0gKtnm7cH2\nBM6L\r\n=7aTN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3aa33998e.0","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/shape":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/density":"7.0.0-canary.3aa33998e.0","@material/checkbox":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/elevation":"7.0.0-canary.3aa33998e.0","@material/typography":"7.0.0-canary.3aa33998e.0","@material/touch-target":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.3aa33998e.0_1592338910347_0.03568963837666317","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/chips","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d60ead7a71699bafd0d408bb7692da8272b4e74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.d2b54d183.0.tgz","fileCount":83,"integrity":"sha512-PdgR4cIjgpK5LjA6iG/dZKpnRzUyILmfPVbblIcNTp3coFo4CwybS2Mh9yh5CTXiopIrBAmRQUzhRQjsGz+Q9w==","signatures":[{"sig":"MEYCIQCdyK6afm1m1QOqpIzv/3GWTi1ksL444ru+uvZAaIvuTwIhAKPKJOS7C1c3rV7b5yJo3ZDoG/rK14M+uVi2JMh+T8Qq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBnCRA9TVsSAnZWagAAk20QAJgBiENkDca5rCrLkANT\nc4GUXLFkqsWWKkhUEWkVHwtW/Grd3BJtZfMgcGyqaFXz8TXjTRUthvhb4bJQ\nij3dr1hGHKrIsFOPRUR+vixAYMp+iA6SBGxjrv1Q0jnKnaSLWbYEXOPa3JB9\n9x0kBfh8N7Fwi1ZeHm+WR7Kk9jrMJ6cEDY5jzBV9w34FTeM2t78ZRyW7D0aN\nspWkl+YyXcfIxkz/HAQIT+D07NfTC/itgjyCUlNiAVpav6pwlfYkifGC6jaO\nfWGJJF9/Ff+pU/VFqeZwAQIKSXf5LC/7QWhXQvQmGTcQT48r8ECG4wzFZe87\nKt8LbKLN16CM4LnrLMtPOyHKY/vyD54cNp4AZ9yPlwZYSx3Ho8XX0SLcBATn\nMmPQnGIVqxpjpgYs6vlDEwYsFWJ+ZulmA7Be28uH5Cnpep2mSgXSoIBXgt+i\nmXo2NieNKxzAYMOOTKVnZCNK11skAhoXdAqq51/Na/ESLoosNmKNbu0XnxeF\noitdnrcZ7h6HsTsO4mVWDTdDXKCG0P7oAVH5hK3kuN3X2Pk9jiXZy43XOP8y\n7UdZwJ/N809znItmMxPvBXXaAqH88jshUO7Iw7ykwM2D5QGAx2idos1rXwnW\ntfJUvrsUyvFczvqyl/wK/K0zPJ0EcVqmUN88VVq6+jikdE6byaoPQK9R1Qw1\n6ZIi\r\n=UTIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d2b54d183.0","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/shape":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/density":"7.0.0-canary.d2b54d183.0","@material/checkbox":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/elevation":"7.0.0-canary.d2b54d183.0","@material/typography":"7.0.0-canary.d2b54d183.0","@material/touch-target":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.d2b54d183.0_1592442983329_0.6013446456766989","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/chips","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24560d07391fc2803b651f40ca14ee9bfccc25ba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.f2a488e95.0.tgz","fileCount":83,"integrity":"sha512-xruHT4ktWv0YIwXd9ijhxAv66sKv0SHERcdGa2ayaRhHSyq7yBG56W2RH+y74sz2ct0Qzog5JReWnRjFw3N2KA==","signatures":[{"sig":"MEUCIQCjD3A6xJSg8oBcYnsJA+48B2tsElNcljn55/RrDuERRAIgDi00kRlKotS+YfxOvTSUBAg3Yf2A2t19MRMT1/fIdMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KfCRA9TVsSAnZWagAAjDYP/jmuvPCgFok759FiP/t3\nGquwKJVOMQoBiWhvXXJn2fEZ1OWPFVTymSw178wnsLvj8iechRwfQSi6CmjS\nARkhPY9+Jbr48tsm5CW9CI4zh8yPy/qZWCj/Jpf/mLsagHXZw0ZS7b5XTf55\nlbDOyNd0N9nEh/g9Akb3lwspaGTIWeyVqUsWM6ZODmlR7La15u4P6s9AAKG1\n84TMYfOHr7OXaF2N28f3eHHI+ju7Dsuwgo5LnIjFmpI0NeBNxJeCTSTgVKR9\nWoaFm8x4aZFRiNwtzaMjTnCE3OUnF0YK2XnMCj3WJVCQ3GH1NL61be8Dx5YR\nHV98KDGQd0ZSkvY/ElZrhoADlNnMpspCUBRNqLJtK6fPTSKsAwPocbG6KeZD\nz/X8zl5cSmH9KyTV/tz0H6lKVD3uFZPPxJPYvRO+NQVXTOQlfnYrDs5PXJMs\nwufZLaD+ygOpX9ILCH6RwiWUjV4l3KcjkINRBzIUd0ujq8IHx3BdKIJaMME+\nnQjh6WBx4H1KiuGZTDV8UH3IJCZTXOTCSi/aIb1nJDF68BqWvbUQit2zji3r\nVS5bKlMNEehy4Pgpw0ikPoZnouBBQTBXMFFLhRghtnVlHIzAbNTJIpfUMux7\nLTNQXZOcSLzBumLIo7CMWpmXSSz3qc5wnVpi4lsB4752Xw4md/X8u0ckR0zr\noh0+\r\n=vF+j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f2a488e95.0","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/shape":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/density":"7.0.0-canary.f2a488e95.0","@material/checkbox":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/elevation":"7.0.0-canary.f2a488e95.0","@material/typography":"7.0.0-canary.f2a488e95.0","@material/touch-target":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.f2a488e95.0_1592492702361_0.2455476253657376","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/chips","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff4ebf820a185bce8038605bbb52be6f03cacd90","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":83,"integrity":"sha512-j9tsTkU3Qv4T2Td2yl08zaeUWjPpJD9SecimloZl2I5D+7BVcqJpWrmpCDlex7qUi2vyc4OkAk2csv5u3Gj6Vw==","signatures":[{"sig":"MEUCIQDpPokDYORwv437fAbCL82MVcHdBcbpIMzekEqbGc7FqwIgTRqpYIi/dgCdYhjb2k4U9U+51dCxYx7Q4RcUDCOmFkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64ViCRA9TVsSAnZWagAAZRoQAIeZ65YUKoh+uW3zGcKl\nLUzejrHO08DeJM4JFs1XeEUp39KmsUHbfaVHJEIP6/Jaxu0s7G3xtK2MF17b\n8Sopl1fZ1iFgfNtHaDi1DuyxcSHgwVxHNG12+dpVDxbGak5rZYzbeBHmhBtq\nhr8Ys6TozUsIYR+tLwg7Exdl3fsBnwMQMntFhIHCZKv3ecAA0kGdTmkcSHAB\nSuG97J3vyoOYs4Q2h2nZqg7zkSHgLBtyponc26ojVcQwCdcCsmbL2t+tkyvI\noxgXw7N9zc1BGrc5VHlFpa4tFB9xhtapW6gHMxQLpmD4z8rh1k3/A35Hl9PG\nz1n5nAjkyEg/1tqieSC53mtiFFouu0FJidHonIXlEvE5CNC9DJSnrnMAp5nb\nMfdUpTrhZXcTWSWAd3tgthO7Vew9NwZxBD347sXmKI+vG8lA4y9+0ie3a1Gt\nNxc+LEmTmTKIRmPifhVb8jPIJ29/yY8cGIDxBpPZ9/OfsilmmPNCTVRfHQmd\ngpUJbSLq6o1jXUbslOq+sSpypziu594ebDDTeJbVoza1HWLJjm5kUAkkzjZI\nrItb9guUqObxtdSvlrMQ4HSdoIZp8Hw1HbocG6QsnBWWBYVqVZ0YAJrsOFXh\nYRW3xMJaj3//DgzjWx2AS44FHZs4VM5FGGxRU53myzlC7so0bViSF1YeniFg\nICBZ\r\n=yceK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8d1aafa.0","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/shape":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/density":"7.0.0-canary.bd8d1aafa.0","@material/checkbox":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/elevation":"7.0.0-canary.bd8d1aafa.0","@material/typography":"7.0.0-canary.bd8d1aafa.0","@material/touch-target":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.bd8d1aafa.0_1592493410446_0.14439697302241172","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/chips","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.1321eb968.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a756843b864fa1e750389759bb52e56b07492746","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.1321eb968.0.tgz","fileCount":83,"integrity":"sha512-G5BHt8eZdTIWahZaL4SzorlIgJXJSvC9jzWrFtM+EOVt/tIhfECl16Kif6nlZzb+rmtaHy4NBU218a9crzyHUw==","signatures":[{"sig":"MEUCIQCqpqP+XRGZXhOzmt7bqmITI+BddJ2UuA7NhBodyE8NewIgcC3sJieynh896+0S237aeRLmJ7KaXjJLIvle9nMfT1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBNCRA9TVsSAnZWagAAe7AP+gJozshtBjMcgeYud8m2\n/HCt5VKbgObcfHJXcllbPvkZhbQGSzVm+YgKQSHvgnuGaURxRUwEna1V79qS\nSufwDE+PiVZbwqwHCc1Tsyj9LdjPMjdwYnIR/7bHO3HXC6YaAyDL2bEYc5sm\ntr+sysKBpAoEdfkFqzxbUQX1Jzw6zttQcUzNei3y02Nkw7fGyH0VBFA8BqqR\nII3JtiOcCybnHgNjcBaTwlq7GPYjceqMwS37FjtuAMN37RjiiqoZtHBS32st\nTIlA8ubpp47yybMs5XdXWRua7u7lNiDzXTzvO8WO0H/+tHSVnPFFatv8onzg\nz7UTqYynLyHrpAfUYT0uVQ2NXbGNnYmbM5NHAf97PzAd8VCJdcOk+b2iP9y3\nQf+9oXukqRAsfipbTIIy39t/W6SIBqKfn8Lxrkz16Ljo02Uv5g5wbbjZ9MmB\nFBzvBjGW4XC4EDwjTDwsR6+OSLw/dQ9Utvv3DuLKJAg1SYZP8EF210QyeChn\nmqJ6L+m9EDVDdxhFyAu5aLQ4lzAT8wwxzq+oRMfj2Nacociy44AzDk/gFSfM\nG13S25QvSajuNAGEj2wv4S5zj/IcDuRW1kTVNw4ZXFWJ67VnnnC0uyWsnD9f\n7vCp8VjueWXwIWNpEeAo4sdBNd2e11l3Tg/lmlvbCGeokWiFyxcwCdLXpMhU\n2zVp\r\n=5Yx6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1321eb968.0","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/shape":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/density":"7.0.0-canary.1321eb968.0","@material/checkbox":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/elevation":"7.0.0-canary.1321eb968.0","@material/typography":"7.0.0-canary.1321eb968.0","@material/touch-target":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.1321eb968.0_1592594509047_0.7410606747628021","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/chips","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"816f65b869a7bf9b0d8643c6e491068a05453d2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.db5cc0382.0.tgz","fileCount":83,"integrity":"sha512-ctfTnpzVNuPMw9QGWNNhqiS+sRcNvlQeJ0qKbBR2KtJOtCYudaJiMdRZ737PGXhhkI5dG5izpSy5xL0DK5TFEQ==","signatures":[{"sig":"MEUCIDvmiqOnnAIdCEmMrWpxO8q4z++TjvKvTwWqMlJPh/1IAiEA/Na8dvzRZPHbUkmYJbITDkzz9GqhAmomij+JbdDsC24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHcCRA9TVsSAnZWagAA1CwP/24QLKTyRjp7MTymUTLF\nfGwfpgKgySWG7cWz4A+TKRt3xMOIBRFXX+JRfrKDMbS4cr3LnZJ+6aGaY0ED\nXpEvdFYsG7qkhFvAQaMgqB3x3ChaBTGR271wH/sDhGoFcsC7tU6W21Zp8YDJ\nCYnUG5YD4z5M7TnJP3cJGhPX0kU81s727/fQuF8tbHOnLVjE6GsZolujDtJe\nZC61RvmpXE7ntj3rvLA74JW78FVUufZHXJYuG4URBdVNxJH79vDuorQS+vok\naxMPVAEWCeC8AWKHrsAPwRoD5r0sdTqK2w9hkBkN68H1a0Pe8OjNdst09rp4\nwD6gLmNJI6HEUKNOXa5WpJ8gqKJJ2QQC67Ah8uWMqEce4UHkxho4dXFI5pTy\nPWoDuUURc/9kqf+jiIF6is64xYZ1LYcm2thF3JIUDR24Np7NfMmNVXBHwt6x\nd4XJVlVpr3hR+zaDpWV3NjHrYM2u6uC8XPjH43575DVYVtpTXHINSS2000vx\ngywStVKFv3zd2TOmlYsvnrUYk3VCjQ5sDYwKGvRmkL48i6Ho2mCoAtmBsq3M\nnhDVuDoFIB074HxvqqH3jEmpfksNIQ+MY/g6KQ6WplvEHk9hjzAJ22PZ0XKA\nPUWSk5MfJTMKYVwelifuU5taM1q/q0BFkNQkMTpXDwtgfvsj5K+XdJsDR8CB\n9Gd/\r\n=smhz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.db5cc0382.0","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/shape":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/density":"7.0.0-canary.db5cc0382.0","@material/checkbox":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/elevation":"7.0.0-canary.db5cc0382.0","@material/typography":"7.0.0-canary.db5cc0382.0","@material/touch-target":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.db5cc0382.0_1592594908225_0.16269288561816753","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/chips","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1748965857403ebf4cdefa40fe79e2b330b11c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.6ac9bf031.0.tgz","fileCount":83,"integrity":"sha512-BAQRmMwAEizPi0faNJfq99/Z/8oke1YFxcGiRZi2eZ6yC3WTHPs5Ntx0Sa4DnI0C9QGhrt21XpwBFOF47qPxGg==","signatures":[{"sig":"MEYCIQCX6GPCpJHnw3uHnBp2wBesSzrtMGsvFakXArCqeKb6TgIhAMfLpFj/muOv5zDh3Yim7AwEUESuCCQiwKdq0XqcqHkj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RabCRA9TVsSAnZWagAAsScP/RgFoCjqGQEqJQMie4Lm\nvUy/DH0c6/k985f7ftvWerNZubuJj6q3AvRJpYE9SgwsPWXhwr93OLzvwtrC\nzI/m4iITip698SXfF1qbwyb+mp+rJrv64Pz29KCSlZgeCJMPhpV9CXKj8FFt\n6w4trOSGu98UVMiT/rkl/tAXNczVWEM+wOTHlbIhcIkVnrivjxBiifCWdhQp\neIpDpE35eGTNb9RO2opQXms4eAPgdlKhfbPOCZjMp/dmruIF9sDVPU5VVysL\nd1AmYMquee0LD93DutnXDyE6aO9mgoN6ghbxHGD6MeJI5bonG89q9IDpJBdZ\nrg1U1OXT57D+zIY+DFquOVebxw1XeoHp30Hs7wd97EtKtNM/BMiBg8EpSAXZ\n1Vd6GUMcDYy3lIuvjLCB13lCeeFAhKAgY2cOwG2RBlqQLYiWySXhWXpVg5tf\n6wCvnznbPs+N1XVOvUuq7C7HlrVUJ2+OFRgJWO+2AtezJFTk0OGhjrtCZmau\npdcRqPiPLtvtQEbKjXrvNuo4/uGXXZKjwYHjE0NqVdCd88hw84Mc2+pU96jz\nmHRsMN1AqgaCdVJPQXMTvR1Dti3OkQNMDldtVc5akwUhbSR2X48zGBwWCbV6\nB5qYLUjlcVQlaZBkxDjhEXUf3g4vOTzE9hwW65x/qMlwDPoTRj8PqzLYGrQy\nUwK6\r\n=0qwg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6ac9bf031.0","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/shape":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/density":"7.0.0-canary.6ac9bf031.0","@material/checkbox":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/elevation":"7.0.0-canary.6ac9bf031.0","@material/typography":"7.0.0-canary.6ac9bf031.0","@material/touch-target":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.6ac9bf031.0_1592596123397_0.05348179542804199","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/chips","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790ef6e28591e4f3b1cf3af3d2fee0adb83174d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.c21b5c367.0.tgz","fileCount":83,"integrity":"sha512-Hq6knwD+OfYRZ+VYNaI8Bi1UiWD2T/92YOHuUSQFmAW5BXmeptTygM5DFXYPUzaa0s8ICP2rgYJT8oD1pBE58A==","signatures":[{"sig":"MEUCIQDHNNjzcTZ+ogRaNwlaMIQIOhe8CTezECBt1xqDpTAFLgIgSnlD1+GsjeI4vNz8ERxCOl4fKNKInjsmdfNdgYnv0vU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RvxCRA9TVsSAnZWagAAJpEP/0leym1PSRTxnIDEHWpz\nIZPzWv2lnFdu7uvIjoha9B5inHtIAUf3Ic5lQhmMS2QIqsK66LDdNRxmrEgi\nuiLt8cmPKE4auHUv93xaxZ8s4gfQfuNIZw1+P44ufJKqGHhgVVw82+7ETBTm\ndC+zJTWAbPivsBmdIWxJnl6qtwoaeJ5S+mVDiFVVItb+hZLJjJxfBD8gUwJ7\n3omGnSA9SEmzVAIA3KhHqUnrUJ8VFuFZqtP/pY+YULj+06Zswbe2vpPJonkS\nFrPgAqk7fgyjJo1bWbX83twWsmKabm8Z9mH6Zqpu53k6UMKrRbWQ3+JsBUX3\nDs5SCeZZ06WXCZTR2Bc2D9JdmB2G3RfTT4tujdruOSAXHMgVmbYDK7Ir7mos\nLIGucj2dNqMtySIIJVyDZO8A4Hw7tPnDWjfYxhi2NdE0EIM+zH1iPd4U3XQC\ngzUGGZ6GFMK+S6KhNpur3CYonqplnpAKNyP8CDxW7EWZiEpPJAMzffGzvKhP\nQqqRIANU0XZCRGvtEa5Fql7g7X37Fqg3HA4Iun+1HQGhnPZKQxH/X6JWq6ZF\nbTzqDZcyH20zrW13wLgbGKTL3nvSQDBPtcKeAZQKOcTuVz+AzzrZR72bGjWC\nvuDa4AT1uMJ1kcUYNTetVwdeY/HwoVyavkpVkpij1q3vNWrTyk72jHunyHM4\nJG66\r\n=KBrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c21b5c367.0","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/shape":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/density":"7.0.0-canary.c21b5c367.0","@material/checkbox":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/elevation":"7.0.0-canary.c21b5c367.0","@material/typography":"7.0.0-canary.c21b5c367.0","@material/touch-target":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.c21b5c367.0_1592597488640_0.6835059059970487","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/chips","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8edd13146a9830589441b846baf0e6e08cd77e5c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":83,"integrity":"sha512-Vp2YCBH6p3+H+0VOW2LFa9IPVvMecjOVxUghAdSy/583ulIpvtFpIMDn2Sl5CZmD7W+gobbksPUBdW0DhvPVNQ==","signatures":[{"sig":"MEYCIQDpO2Q4gO21O7+5uF4HLsrhbmSjAyektn0EQkDOlQsHqgIhAPGC3EKVBH+2vVX9vRLoUqzLdASTsLWZjqzMjX/jovpf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4XCRA9TVsSAnZWagAAnIoQAJw8abiy0fpz8tmvSNmS\nLhMcLsVWK5DSz5wVxKA1oSuvM65x6id5fwAzeM/nUpeD8af7p8beTNRbSUSm\nOKaGClCYGtNDJZASTW3NAMQ4js4E0lZuj223HGSrb48usLC1PnKNAMpee3C5\nNmJZ/MghK/0dpU1cioyPLNJdoGjqLKumsoO+F22bFIggQd/9mx7ZnW8K7AP1\nSewtIa/QZwdpN8Gm7odkCi/jCvSmqePfwAFyGfXV7oXOxIAJdtdmMr7ObZDP\nyWapObPtqnZ9ZgmmQmFGs2Qu5k+TPbDSyx3/eCETlvJLzV8pTdYG7RPd/1u7\n0n8MLS88o1VSE2/It1HNxMr8tT8E61UNgFTGE8CgfWzL5nmIiqVjdLSIreCD\n5+iiXUth60Y6APidYkMDPYjvHC48ilGC/qz+shOH6j//bx/W29orNwryeSXn\nlBc8qeHFce6n0BYHDxkmdRKUbtQqqXhSdZfiMFAzEz+hV8mhXlGoSB4SwgDW\n/3OZgOM4rnjk/3d9IKg+VTIax4IRQNR7CEN+A9cfCdrl8RNkSbThShD2SQKq\nW8E0+tFshPBJR3AbWKNfhjOR8xUZOK+ca8Fx1Y3fFqqZkRGEiHCu6VzVoEio\nnlzqAFjiWggU/ApYC47kg0sp7aA6EKr8tFNv9Fy83nT2sdg4EuailE83JonL\nyoqS\r\n=E2xK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bfdd7fd39.0","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/shape":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/density":"7.0.0-canary.bfdd7fd39.0","@material/checkbox":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/elevation":"7.0.0-canary.bfdd7fd39.0","@material/typography":"7.0.0-canary.bfdd7fd39.0","@material/touch-target":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.bfdd7fd39.0_1592598039508_0.9688579813490605","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/chips","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.10b505785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f8eac586d157f3c83cdbc859e7a1b94072d1e7d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.10b505785.0.tgz","fileCount":83,"integrity":"sha512-yUidXkvjYki0Y/JfXxi0uCMgczgGcuCrRX3QTWeUKwVqoTcCV6ItMP94jjEmSsbW0YbzGDqq0VP7XejabCa+TA==","signatures":[{"sig":"MEYCIQDPf53DLIHVUgNE+yGdU+/NhzotXRPJX3DbRzfsBBzqdQIhAKaOK78+Tz8yYs3qmdHeokFzyQ08Ka9lya9Wpxy7Voed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5vCRA9TVsSAnZWagAADowQAJdHhH6oamn/2VKJFtuI\nX/jgxZVUh+53mb/sZa2GdYBnD2Q//mA6XLHbGpf34y/Z4mf5JQ5fq28e9Gpl\n+Q8mJ1i6sRIeSVmxBsSQa+1PohhtY6eqWu4h+jfWoJyLqs1iaVLdV63m7KY0\nLY0IY8ut/2ENGt3W6jjc2/81onrF35LU7NjiTh5T9FaX1B7V+i+tfimNNLum\nZOpf6nkSzkFGaWqW6QOOLD0+wPIyuTRdbQdRHt2SXwF93pgdu7XCqDRpjaL3\n06w0/OHxZF1Cx5M+e25QeswrThzeJdeIc26vfLakwR3H0devQaDmzm6BN3PZ\nKKiXw59Z9OlLsEYFea6DwTuqn/2FxCYqggo3PRW1OWUyz1vE+RfxAdAhlL4w\n40+gvuRThvDdUVRuz28SY9TA26RAIPPGkAwcbROAmPGnWSBTrTIHrqH1VJNq\nOhhGa6AjeAv/mSAGrDjh5chhDEh5/26/G8CNOW1vX+CHwWOvI8LMfXikhbm0\nbp1kTCHNJUzgpxFMIcUwGbJPlTi6OmO+eB6kFvr0Uwbw5q/s2nACTlCW7ov/\nFzuZ9DTJUct3dU37Uefb6X8WlUwYqsoDqhKYyU8y7cFB9ikXkWV5E54B6wbp\nRY61C6sMmo6kx04Dgv+MW21RJHozv/MDPB+HGiRxXl75FZBK4B6AL5MMNF4w\nr/3Q\r\n=ZE76\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.10b505785.0","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/shape":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/density":"7.0.0-canary.10b505785.0","@material/checkbox":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/elevation":"7.0.0-canary.10b505785.0","@material/typography":"7.0.0-canary.10b505785.0","@material/touch-target":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.10b505785.0_1592598127123_0.07743898687334538","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/chips","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"794050a0da498774d66b82c857f8a2cd255bc982","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.6483d3f44.0.tgz","fileCount":83,"integrity":"sha512-hq0iLEuYjtRC1Gi83R/cYRWLeV8eCyD8xVxOklsSENPB0TuWtF3d5WQ5iiq1Yn01NH2q5hOyVhdqh9+vdr1n/Q==","signatures":[{"sig":"MEUCIQD5xoAjxlT6FAtcotNAWNSYtagT3qLLHvjfBJB7UZgdeAIgSREDqNMQJw2uL6H7NUfFEgS0Y6MiAswuRsgQs4Ptfjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SI8CRA9TVsSAnZWagAASGwP/RgVqq/UwdxsAwlld87Z\nS4ckBJJ6U+/4S4++Fg0rGF9U/YvQ80I0CRQ4e01Qc8oaknfDbLWX7oNnYkvg\nxmebPBqQFM/+NNuswYsPk437pevPcpFvDCTtIsumI0cBufJwiYOn46fzJSrR\nloKmtfBHr/r41kVIMsM2BJQijCgyTzRJTwGIpkoJaHcYd+uJvAbDOjoaC9XM\n7Jic9LQNqw5aceNhgJasnB8s+pYtdpV+TUfQPJ13cqnb8ILfMbh4RwhI9nQR\n+ZOYmDDTyZZ03Gnn0CIiUTZSfu1EVLXL91ni3XbV3rtcfdHJ2KCTXbX9LYp8\nT/lOjjNzQFO+9m77LH37HC4jk0ogsy7LXaYdUDY1C5Nzk7Pku2W6sfVYxrDf\ngC0V2OtpjIK1qddFxvwmRQNCwx7Zt9Ajj4Mc3HFYaUG97gEBE9sPiyBrKLq8\notoeyocMDpqL2CbYTa3tk9EahXnp6SVq7KhHlsdk0CLGtE19aHLkS3++7KXe\nEEMQoXEzpcjg1j2ceL2hKs4uFH16TNBPfvpl1jaif+Y+OPtntQ1PustPsb4H\nrALjw5+F8+Hqkx3dFKoTP+OAsPGc0kM21ZK1vPHQxiOiwFvrOZDd9oBHVHeF\nPBM+p4EwDWqLRolxEmXlEiMWWdV2qBK8qPHnZ4YvWRDhfT4UNSZEKb10Kfm5\nSDqy\r\n=KI7C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6483d3f44.0","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/shape":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/density":"7.0.0-canary.6483d3f44.0","@material/checkbox":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/elevation":"7.0.0-canary.6483d3f44.0","@material/typography":"7.0.0-canary.6483d3f44.0","@material/touch-target":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.6483d3f44.0_1592599100353_0.23615848988155275","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/chips","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.30a74e921.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad553442127a600f2785b1ec381feda74c8e7481","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.30a74e921.0.tgz","fileCount":83,"integrity":"sha512-1vdHUHfmcgJ6ddRIww6vWRCKiZ02aLSfUNDYVEm4VmfYty+IF3G2Q1pgXvXYa4wVjLsz/W27EdJu/uAyXL5FBQ==","signatures":[{"sig":"MEYCIQCzV6Tlb8LRFZt5n/IMwlIRSfYjp1Cgz2ReDC6ht/7fowIhAOy0uJzDmOR1NmvMgAVS6bPHA0NKnrT9So5l7jGG5vBd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SLCCRA9TVsSAnZWagAAfhQP/1IUmRHHSRPSiA4jJfEc\nI/ePhk8Mi+4mC3fWtwe/UIJbblQvE9UHLF30YA24xZ0R2Xbk7MmXtNaBXafp\n6e5Lo9bK96aIsIFBNTF5kTEg49gaJBXXwtSRb/aZoxJuKJOIAmoAnZEuHw2c\nA7x/RFXfcD1AyozIcTVmeaqUYg8XBcmX1A+b58U6pEIUmrTG/5mqNvc1UYUD\ngjswHHEemRtf8mYTMwzPD0JWyKd4s7Zl5/cxVrOqtLVmv0wU7y4T+M6vzXyG\n9Qum+F+nOlPSMGTfzdHt3PyM3KQkfVVqU1PVMM/2T2W9U52evecOZ+lKls2p\n9XUSFBVjjv+8Wahn3dpFMZixX1TP+Q0Vc0S22k2cbzOHnn1CwG1ikpUUfCpI\npQ1bVpGZGLDCFfLk8n0F1lszxf78LM6MBPeb23aM+A0OyGVd+1s1o2oEH/9G\noWnBLFQTeKSsXZWCEZCu08qN6W/0aThiWvcR0sEpxwzjhVCgf8Z98K6G8zwI\nx8emmDsnjKg80epP8ob6XuUOPAJq1o6qKvnwa922opBzK903UrnIjsZqH1/w\nVDBeKgKcKa0xl/9UbUO7CBAtT3Nb+R9WC68cvtWnGGNYZs1KJ9vET4lpMWCK\nMaloFe7V9KCWoMWRg2pmDUPDaXJywvDZbeJj1oqCX1uSMq8YCEE9fko3dfL0\ni8w3\r\n=6W94\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.30a74e921.0","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/shape":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/density":"7.0.0-canary.30a74e921.0","@material/checkbox":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/elevation":"7.0.0-canary.30a74e921.0","@material/typography":"7.0.0-canary.30a74e921.0","@material/touch-target":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.30a74e921.0_1592599233722_0.2743517011896268","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/chips","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.c20727498.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c9bf27483ec5bb065d121622eb66b2dc82a7647","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.c20727498.0.tgz","fileCount":83,"integrity":"sha512-GqDhSTPNeniYE7Z0nhroU60WBIZiX1CM9nbJSSfel0bmCJuKgNwIydEXbCzMCwouoMeyCzHAACg39uwEjR1C8A==","signatures":[{"sig":"MEUCIDM4tPe6WazNHHv8EZu6ERM6U0/95oNBWZUoiA8sU0ayAiEA/ArPzqbgw4pYPfc2atgyxHtk0JEocAfXgfZwvR5heAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNuCRA9TVsSAnZWagAA+OoQAJ0OM5GnnYWw4xAxxdAM\nd302Fm43rxmFXXYyZ3/MseXvFHmlGeLZsljFuE4oTBPTSkIYF08ytytyXhdv\n/xRuu05b+oktA+sw3IG4MWKGye5G4nfN1M4aomJh9iLLGpi4Q0kk36r0PO7X\nVImK7lZ5YHOlkjKsaC2kWmmAMJ5CAOsY9YMECkKX1JO3ly0QyXaO0W1Lbmtw\nVquLU/wgkZM57U4is0WaX7YXtvM1SkUiS7olnoWcgLyjHVqf+Aph9bwKdEbe\nM46OwClDf5NPjBR7X31ewS16HLE1z5MUGJGX7fkwwOxfmTpSFhh4Ry7ryMWt\nl3RpElevZYgSePt2BzRpfWZ7Kwioc8Cl5IwV2AUy+OAfyZQ2WcSJoI6sWCfv\n68zbkogZ0cGZ3BMR9tZ7HRcfI00sf4+g3cL6H0XbFnhx8sWGDd+xsTUcb9tF\napEAowXXaxRa662RPA4L2NES4I2MX/mRvx2Qz2k0kt6vMiv8yiQEW9E4CczF\nEA4lKXrAHNE9Yfoz4Hi2+aAKO4acSMG/8okD7XvwuiXWGZF2uIRnshNIAfB/\ndx1YhFPgaggYkH8by4+ryOE9AcQrtvjgGfbZZNC0Y71AtmkWKvF+wqbzbaAF\nj2GBFRxJcpQDwMe7uLmgmcjt4ml30UIpB3tqZ8XBgIGm1xMSQMbb73WbVsBE\n10do\r\n=wrl9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c20727498.0","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/shape":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/density":"7.0.0-canary.c20727498.0","@material/checkbox":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/elevation":"7.0.0-canary.c20727498.0","@material/typography":"7.0.0-canary.c20727498.0","@material/touch-target":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.c20727498.0_1592599406019_0.9663741936505335","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/chips","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d4302900882985ed2c5b1d6779a4c73b104e966","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.4e360ae94.0.tgz","fileCount":83,"integrity":"sha512-nTdx+Q9gcYB1OyjHWBlVUVc3y47SquvYPP8ZcPj+mGROVVWVBavrOSVwHvnE1MTrEF06CnSDXtXSRv/5Zl9XMw==","signatures":[{"sig":"MEYCIQCACFnIEggXlG1UOhZADr4Ty+6SPp1lBhpcCQ0p8aDakAIhAPDeNek78+p8erIR3mqc/RIPhPhe1S7BqCJvHtwe3Ced","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdYCRA9TVsSAnZWagAAvZoP/24RabY4HUTCT14QsQ+3\n2iFz03BeXj6v6SOgkMhAnQIqJUDODadfZDaI+9zF8N5L2rAvwTj1fNnvTDbg\nqLrQcf//IL/kQBf/b3I3AjHIBGO9b8IEuO/i78yhg/5WDXI8sIF4nDueyG4y\nBbVPIv5ItKj3kWtrZ8nNAO5EtfhqevxjQRyOPAHfiTIXxsVvYvizZaO+ukpi\npjYL+gyvrIlodAVkl6gWFZ9QkejlHh2h8yWZC2kVrTMPlmQyMjM0ZVdGRCT7\nHePQWYaeM/2fi8veEIg9FvpOPcUeEQJPMO2pvTQu8iFz4gUfk5FwMI+hVPxq\ngXaBLmqIBcqwGddPjqPDkj9VG+PT+VnEIe3f9L4bhnnGKaFxiB7/h58P5/iG\nRr+HFm4SYJl2TDMJ2+RlDwjo6sIlBUeWVwc86taXVAaBM6lEyiLTDWDp2utF\nkTTQ4Sz3bg6oMDCIX9b0CMgOE65VjAMgLYBPcCcAS7inAvVBkahBl73SgNwn\ntXRZZv11qmdwJUz4j8Y0ApNk1mQmGeXFuuku3cBprzv5H1V5a4d6GspItDAq\n4GygmhylD4Hvx8CCLTijbaiV7FX6m+L3Qfgx9o4wXUrr+zrSjxuJ+2JIxVTU\nO2VBaIHUD2VPRO13q5pKScXPwDYyyk//HOzCKiDZjrqNMf6F4qvTPjHznlYC\nTfvG\r\n=N0bx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4e360ae94.0","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/shape":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/density":"7.0.0-canary.4e360ae94.0","@material/checkbox":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/elevation":"7.0.0-canary.4e360ae94.0","@material/typography":"7.0.0-canary.4e360ae94.0","@material/touch-target":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.4e360ae94.0_1592600407675_0.7469276082694187","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/chips","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da3028a44e6b83ae4d1fea5c25e74a0982c54a0b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8550fa53b.0.tgz","fileCount":83,"integrity":"sha512-pK/9trAuFHN+zzsNk6pT7F2HwHjBesE4yv1nguqsN9vF3tnTlVm/IL7NOViorOPpIjpWdkfKQ41MsAMyGYV8aw==","signatures":[{"sig":"MEYCIQC8O/H1YaQzjm1pNshICU0RC3YLWu+IBBgL644BFG16DgIhAPDyJ+UEUaGB0JiZ1yu2is543RbRWx6Vyp5wMf5R9nYJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfYCRA9TVsSAnZWagAAiNUP/1qUZZON3OHl6X3TzSUV\n9yUltLedl5BFYsB4AuDBKBa85MVdYqQI/VNew2OoO09z1TiL8nY1nRHjpBdJ\nzp23FBl4y2R1QkhbBmGg5bU81RtgSlvSv3JWPCTySliGEH9Oz32oHc8lYAg/\nMFF5vYZh1wuz1bZXq2JmM1v+Fr19XoBRSQyrr/mnFOUmoVhziQYvzvF+erpO\nsgs396TqOKFkEEOIDFtcO6M4sNxUh8VEq+kuSxDpa21HfnWKp+j3tMEkeRrm\n7Vls8usvh9RVTyG7Wf+Lz7wcNVIMhQtHMkUtYVfYRTcyH/VS92ycbSUd1d6B\nWuZRDId279/QB83Ck5Dx9goVxRu3ZCj0kWY7J1CT8L+zq6Yafg/AyOjqhtMm\na3UbiN1GU5L1zUDzOfbva2du7TIFDOlp+5djof5/h8lCID3uaP2eHoz/X5fL\ndbGZe8nezkiUNiS+ujik0mkwWtQCo+QQcsr1tTtevT5sCenWlcljx3B947eT\n+pS6Z7Z3fIMllRsPrdsquHeSnmsBliCtRgrX9VpXKBZPG16pDDQ6F7mBv35+\nxO4zXu6WtKp81+HHHaXFa1ecqC5L/7Apy33jfcAUfoMvTFtHSyIb5EedW8cW\nCK2/7RIuWTyYN3lxvqZJ2nFic7cAzEpSwzVaD9iESNZgoNGJ0XWd/kfxk4V2\n5a66\r\n=LJrd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8550fa53b.0","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/shape":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/density":"7.0.0-canary.8550fa53b.0","@material/checkbox":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/elevation":"7.0.0-canary.8550fa53b.0","@material/typography":"7.0.0-canary.8550fa53b.0","@material/touch-target":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8550fa53b.0_1592600536004_0.670675461449896","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/chips","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.93ade142e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43bec88b17b2721dc46947333e16edb7eddb8127","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.93ade142e.0.tgz","fileCount":83,"integrity":"sha512-nNfI9gAh7+Ld/DbtRUI3d9qoMup48MHZjrOjX/tn5ZvzETbXqO8zdww3cbNRPSnu9lsLr4N/DxVz1aazS6/uQw==","signatures":[{"sig":"MEYCIQCO75PmYpm7YhEkkhzo9JYe+voPGPCYDBz0mWW4tS2DbQIhANKNTpLHrx2mpuT8Etox5Z3RRUS5E7Xp+cbi6+f+KUWW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgxCRA9TVsSAnZWagAAKmoP/iDoX/CQQ/0hlEI4dWvj\nNbq0Elo0J9mCi274ZdYNHR/KKjSNvpwJEXqQIgxrUeRJ7rBQw5y+PbanfyWE\nYtUDJaHLS8E9cPS7GMOmBQoBOaq2Bxl0xRfKfHsccG0gYDc7+vj+KxcQr/9D\nzb9uQfUBTulbjKLzqCqsWRfuPkGA1imtf2j4MQEoBL68tF/IiclmnNJrAc2L\n9AmUfyvvxv8yiU80Q5Rru8OG2KcxDGrhpbWJtlB+xCc7N/oabNRO0ytxZ8Z1\nFI4Yv5wkgKO2K0pNIsbaJghBscw+44QSMLuqC9niVQwSwFEbMpNBuQzpJofd\nwX1Vyj1CKuPeMNU0Bq2Xn8xFjtZS3Ai+BPJwH8uTz59s9PXpBcvkPhTS2f8t\ntjD+3KRIlgM0Mxhyi94dfX9hdtdNJr+SvyJdt5aLY48qXKSHgm5N/Azcd8VZ\nZ+7cmmFaXKKjzGpVIWnxbVX0MgYgi4y5JsT2GkXwE/cORBob8JQEvCTY2LWA\n1WhPi5EfwjEk1RFcx7DjpUAuHEtrlPKog+dbO8HrwNHljEG4xd3hscTCV8zc\nVemSqzwEG5fFfBLfivZcKSTL844SQLlIKwlCXY9jx08g+zz3RLhMzLUXggmG\n/dHuc0/DdsRMAPl2NOVMlTEWhtew0A6gnfIN0dZyp0eP7zANiRvMeasbvkHQ\nodzy\r\n=2q7a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.93ade142e.0","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/shape":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/density":"7.0.0-canary.93ade142e.0","@material/checkbox":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/elevation":"7.0.0-canary.93ade142e.0","@material/typography":"7.0.0-canary.93ade142e.0","@material/touch-target":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.93ade142e.0_1592600624659_0.9740241961055922","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/chips","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be413a82b8b372fbf1787ea2765617866a77b272","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.a0032f5bb.0.tgz","fileCount":83,"integrity":"sha512-UcCblW1fIlIYXphmMjchA5nR6HecWAdmbTbVg7Cmu2JVrz6Rpgd6USYZBwm1ttI0O1nBHsb6AoEqessCxbxBcw==","signatures":[{"sig":"MEQCIHGz+CNjXVDQdp0NCb83lZulUxJgCTALPZD22ZzCmG2kAiBu3+apJ6yGAFS81asKktqJiEkGJa+FYbuNBZ1wXmEe+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4YCRA9TVsSAnZWagAAHucP/in5bTAuO7SifN9etNXq\n1OhaCWx7pVrCPUxl0ZJesv+edDBjiWwGp3QVkyzh7lXLayeAPsJM3XaU9LL+\nR/cQKbwWazD/bgZKH9G008jX1NifM8WPEb4tJkIYOhy7iDA6WyQDk3IadeoM\nP1CZQDJkTy1v5fwskQ/OIhnWtFDlz5JljD54BPvcLf/uOmvnHS/Xn3AhD/pp\nybuh8VuaH9U4yKM6fxLFtgAdpoT5v4yiRoHl0+mBZxoIhQoMSoD2dPvyswkf\nHNJwoNzGBTHalHZh4OIZDluOstTy+Cwnh0JsxJK+dAIJt8afxdVpKqRUyXrJ\n2u9mp2sDdslontM2QwQ/NyCXxdZFWgHaLudIEgwPQJmTUBvMOgQCqESxras9\nEmQ5PEiX9OXEIVu97gYZJiECJNcSer8dMoSE4hpfDFbpaEy98camKnRRJwgv\nBcrYiTBYBjhwHjJA7KgbmQVCHC1yhWYBySQMn+HAgO7wFQJY1ZjZA/7p6R5q\nwhIHGMbOzHjD35TnIRC7yo/px79uT2SWbFLe39UDAo7hKMI+D9zI5ZEiaUOz\n0QdYiFkkO3q+QMfXQzhlSGWbkcD8U3t+NuWX1Rver/0wKdjFISqEtvvEX/Vn\npOepoCmq3wBUa87ACaHedlJsZ/em00VLDbrLm6QG40rK8iFSZxDzu2YfBRcw\nOGs5\r\n=WtTl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0032f5bb.0","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/shape":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/density":"7.0.0-canary.a0032f5bb.0","@material/checkbox":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/elevation":"7.0.0-canary.a0032f5bb.0","@material/typography":"7.0.0-canary.a0032f5bb.0","@material/touch-target":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.a0032f5bb.0_1592602135459_0.7767532604528209","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/chips","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.3f342e721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f5e8b02cee0712f199a61455569d7debda28f5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.3f342e721.0.tgz","fileCount":83,"integrity":"sha512-kEpSVwV0BKb0S43rxC5ALDt9igkh+DtdstMTtIqtS/3PBHd5PcJRSKYqXCddOZNkxxfZF0/9qOl6waJDhDkjwA==","signatures":[{"sig":"MEUCIQCcBGmnl2+Mr3MaHmZkZUsX5xk4987Ph/M/bAKSq1NbFQIgV+Fvy3gr0yE238i9nPHi17HCn/5rFJh4Y7IOh92rDq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6gCRA9TVsSAnZWagAAECoP/Akgwx+tkCJvMQbm4fRm\ng0+nS2z8dD3mUXcoM7pEtYJYWvzf1Mp8mUS4ycvJth1mIox9JQNzbFrDJ1I2\n/spLuZv5T/hlU8Rd9WVeOrhl81Q2gucIc/wt5fFoZkAD7fsLMZQauj2mUtZC\n6WLr39OdXCNKBTDntVNSZBS+1qKN0ojCq5Pfma7y8vOoLDm7uoXok/hwh/q3\nys5N8ziykOPlEg9BEwatkGRitcIhhnZP+S2EODdycdiaxqBGKT4OkaY0kLx5\nrhmvmE8G3+iWmelC86HG/bskSCCCrXYredfIHRj0od6ngz6LGBRJX7sYLVEG\nfIKU9ANRgfIe12bKb51SlvKreAxhqcRQZo4z64wtrihFaZdBOrekZIwflcOD\njrW0wLSiRML0np3mFeOVm+e4uCwYp9EoLZCBreoU3k7h9UaWC/WT10C+xT16\nfjSxSiKVodFATMXtytSot4DfRtnqJG74UHUE93gGrAY+yqzqC3awf+29b6GU\nm/8hRgQtoyKqCCP9bglfBSakFg4YZdaECUhJGnJo+sj43nphW/YvaUU6DyHj\ndlIzTeh/V7aLZCtxm3McXg9yFq/JEEXUzceypHM1IZUFmC44+3s4GvwsTsy1\nlRIVctG0FhC2+yMHPaUWF862WuZuCi0xghHNIlnlETpv0WTcLWy8QvGkubwY\nmS58\r\n=C1eH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3f342e721.0","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/shape":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/density":"7.0.0-canary.3f342e721.0","@material/checkbox":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/elevation":"7.0.0-canary.3f342e721.0","@material/typography":"7.0.0-canary.3f342e721.0","@material/touch-target":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.3f342e721.0_1592602271565_0.23058633115242966","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/chips","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98be19f064635cb767defadf46cc06a3e6528f7a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.ff89457cc.0.tgz","fileCount":83,"integrity":"sha512-woBgvDEpO0xm5tkpuoZE0UImZhmY5QVpgEq0SAFC9dg9FRpZjgyLR4DA621v/Le+l6QWuoMVDnZmczbo01lglg==","signatures":[{"sig":"MEQCIHtmnxtPFifZRSkVJxqgEsbX2iHsy32g77zcvIdNQx2dAiAcXl86OYCtmN1YJ/QoJhMov7O0XEcscmPUiL0rPK9cCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7FCRA9TVsSAnZWagAAGW0P/1RQXcwPwtMqh2N4FjHt\nWiY2dtg1xPsh4x7D+rb/PMp7jcvZ3ADAJMPrO2YyxToR2jIozarSsMrCnSav\nqKnrOKmua4JKQp9x/CkFN4jQznpvSKxznkHjePmzKEDFPDv9OweA3KCm7Zj5\nHXU+Dzd4H6Ica9xqkfwh2vRNGjKalebxWbCH8g7Vc4NqtcJiWaeHM1+CyPlM\nLyqoG6glBIftHMMTe/Z3fVhvrjdDVk8EcBi98GTQK0E3fhVjTcl7UASMo13F\n4vhk/7KWwle3IUEPBrRl/kykUDClUuMYbKRzU8J5mpS2VgnUabCFuE8IjuGN\nTC+AcXdLE5jU/2DPLe242fR5lkPyGOGT8+55RbdHXoYCqjHLcPYz7SvbOmJX\nNt/nE41gJuPKs4yXBmcmGqWHTdKqHUEL0U9kriiBc9h6wfnbJ5fhxsOFxQxd\n8zXOlzeQ8eIvtoB3UFfSZyVvXzwVBvbtnOeyo6/R7hhi6DFa5hv8jTSYRBvm\n1Uzcl01kmweB08SMaUd5wo5GQ6pUtoHwkRIyZ54NpbghONK+206YHS2Jbhhe\njpW31xJkGE56LTOFl1mQzrwiEM06YeXQ3f6YBYyTQzeJZ7xvoLq+DVN/xpbp\nK9/4piN1SWWi+8WIEHs40qjvPCsCACucR9ByvKm3DYgcZFpMfQWB/fyR4ux1\nOoIA\r\n=BAsv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff89457cc.0","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/shape":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/density":"7.0.0-canary.ff89457cc.0","@material/checkbox":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/elevation":"7.0.0-canary.ff89457cc.0","@material/typography":"7.0.0-canary.ff89457cc.0","@material/touch-target":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.ff89457cc.0_1592602309041_0.5071600009168786","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/chips","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"108dbadb29e0c5e1f149899cccd601be4362a79b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.4a1855cf8.0.tgz","fileCount":83,"integrity":"sha512-nGzP4MXG+Ks63sMCpV1PGTTiB2qLW7vLpizS6hMBSutWxNqTZUul6VIqddbbCE+wEMDwyJ/MoQ/GoTzOcbRbJg==","signatures":[{"sig":"MEUCIF60VuCBeDZh3rs/6sgQ3wOM68a8gzNQDl6mVxKV3X7GAiEAqfriOtPDkgAlQv0c0TgflleKBFaHT0JqBH6s8gvDTU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S94CRA9TVsSAnZWagAArDAQAIxErCMWM5JK1VKcpWQH\nmxJTwrTOXhWnlvHzBf2TDs76n55wQh4CEQBcMO23qojrRE3sYCZ8UZH3Or9M\nnFjZ/bXKrov/NZG2olznBBgQOuUr7XzZdc/YU+mqhdqEvFd29JK8U6KQn39D\n8E4gD8crj1dUTHWqUvMDrety2sUJ19p5vZp8MF3z+uDCFj5DgntAocIh/Nvc\netVLOVFls1bnKQ+YllvtFdc2z3x368sD9t4cOu/QySvcOlFddxUUAi2quWjd\nEV5H/q52nwFLvYeOagWGHP7a+cxTvytvN2+P9K5ee08VFn46UGsEeTvxPB2i\nuugWBCMlDzPsf1nJhhKBH9diZY7I8j5zW+bKHMUKtdTrtvw49sURoJgQ6i9W\n08OJomW7POn1eD4NvcSDNu5l9+6DUUfn8du6RwSyyMCiVwqXVd9szc+P8hmy\n5zRndy28/TfhSVZMKN42aIgm5KJAskYpqBLNKGbMpfZHUE4NRmV+wzyOSPZK\nmKQ4S+nGRA7uShwBAvalxe/wXDl/Rb0fNc/BRrjAKdvkL18sLBkZBxanYcJw\nzVJD3a0nrzPVRdQDjiA5w64rOKGZLXaOz1livsfC0hQ2oGnY/xnr73ve+l5o\nN8Xczye5/rw1W/AKqfW/ds5i/Ks1nGVGVL9zqrQdq1nYrRQAsiMFrWV19ldn\n3HuR\r\n=x5br\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4a1855cf8.0","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/shape":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/density":"7.0.0-canary.4a1855cf8.0","@material/checkbox":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/elevation":"7.0.0-canary.4a1855cf8.0","@material/typography":"7.0.0-canary.4a1855cf8.0","@material/touch-target":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.4a1855cf8.0_1592602486985_0.24404095018349792","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/chips","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29612a53cf02adafd8139452081cb58f914a2b33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.8602f1b4d.0.tgz","fileCount":83,"integrity":"sha512-NyGEmACp8Dz2p2uZzhsZggKvjxvrBMvMkTBaz92whSfSG1rtBHZtcuqbTqq0dn1F5QnZXtoJlpZ7Qfqb4UE2Bw==","signatures":[{"sig":"MEUCIQDP0RHgaytNEBTjfCzvBKU9COA6wadHXoP8XdOwYe3hpQIgO4xFsOmHD5ckNE7or4tIEbS7alKgDt0X2Up1KGzpWDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OlLCRA9TVsSAnZWagAAE/gP/A7PAdbKXFlWjQLWju+u\nj8tgtxlzedngqEahO9ous7MWc9z0b8r1ARViPy4zfTNL4pVmtkK2s9LG3gVd\nwortLigQzvD8hZPlov5viAnhYxrIphNd5SvgjxMt909L7C9MzxUNilhW3u7Y\n4VB5t+1lXIRxCIsNCKqli4hrSpMUU072k2dAZOsIOPUDGDe7QvjwQDFSF7/r\nTq92y9Y0dGQDTMtEVS91dZbHCYZhtSsAI3u93Z88R+VqiejisPTdAkNG7oMl\nqAD1XH2+OXMbJxBtt1gXLViaJXS1kt4OPhRjl3cJx1PPgJUalOcv10XKkb0W\nKYddv0NBJUgjA8f1kKXAI7UT74ejygaXEAcEY35cb/MRorVsawJeAn2UtmWs\niC0ZOYLXdJo6Qat8+2WBhA29QbZGgy6cYx16Yq2R9Oxrlgt+1JpfT1gXUUTr\nHp4igOHR+x+KL5J0tdCwUuYBOI07BoNi0hIBIGhA4VaQ6oFqIQ9jqG0V5Azg\ng3a2VIup2sQRt3AdyxKMfh98RqsGDSHoq9RUUmQtxzXVvDImyZs9FekYq/mx\nUYcFwND6zQHrKc/Lvo17wCjnMKKTm1MmH00LPfzatKTKPtX9+CLNwIxUdDN2\nZKeinKaS5TSQaVE2gXS+2i8wIFaX0pwzGNgiij/ejMoD3vUffyp/jZ4wdTkH\nUips\r\n=bU1x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8602f1b4d.0","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/shape":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/density":"7.0.0-canary.8602f1b4d.0","@material/checkbox":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/elevation":"7.0.0-canary.8602f1b4d.0","@material/typography":"7.0.0-canary.8602f1b4d.0","@material/touch-target":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.8602f1b4d.0_1592846666537_0.6396425881503653","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/chips","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1530a1d0bee1f6ca9bb50ce0c1bb27ed03c92773","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.69f9f0982.0.tgz","fileCount":83,"integrity":"sha512-lSSz0w+1RvLE1HfA4IMH52yxUPiMDG2PERPHZb+F0LAitsy9LLoQ7EC/tQfpiRBeagqkib/pzRld6STfZnFUTQ==","signatures":[{"sig":"MEUCIC8sppTYacfD82Gi9ahofqpwVVO/1xKCWu4kF2GxHGBqAiEA4HHoPukKkWai1P9BK+aOQNxeQocRsQ25ijq8Vq2wGaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9XCRA9TVsSAnZWagAAlskQAIdN6T7BJBXv3qQu68cS\nZoy+7gRbGThzC9J3R1BXsODmwulDpvlqlct86jGGL4IwDMWAhcQfAvjUdoDr\nK/yqpFdkjdhcKhttrTaSZvuXtYxXs5LowL+eodpZY0A/HK3Z+bLaT5HsoNsx\nkycDGnHLOv6zbFm7InA2pkYGaAmVhWpez2K+znMIm1ndHTsiIyLNHFNE9bW5\nF0oNOPQEcDe8YmBayaogu9pQ7DklsuaLorB9b1x1uteCoqy3lnM/KeGsRYhD\nBCS1my/Octq88+/g1xSYHlasvUKQSrZXnM2RhVg8L+8UThtYK6bPr+BemcrD\n46BTR4wrk5eENnh3lkFgjRFT/dzwIpYHDzp9l6mUf1b5sUxARLFdKq3Kt/yf\nJxy3fA4panP3Pqe847lCK3fLfF3aQQM5XpMN1YO9EYOmZsaJdAuBiSmSshJA\nhyq4g1SjDRMbDtLUX5gnq8SJjqdD2yZ/KI19NnMwGZdAFtfyI1+bsY30hkGe\ndMCdGSNBjRdy9TJ2dK4y6XhXDz+9k7bTnpgwMkbtMw5gfyNml8hrc2tHXku4\nKpQ5OOnUbyCEf/LRn16D0uyRN3sLRaQYFRrrSODcPBbyx/4bwd/dnlRa3LrM\nafi9QbzOEDjjAfPVieXl/RDIvJMkx3UFBAXfuPTftKijBJ+svoO7TAVqVPiG\nw9IC\r\n=Dzcj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.69f9f0982.0","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/shape":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/density":"7.0.0-canary.69f9f0982.0","@material/checkbox":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/elevation":"7.0.0-canary.69f9f0982.0","@material/typography":"7.0.0-canary.69f9f0982.0","@material/touch-target":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.69f9f0982.0_1592860502903_0.8865552766596951","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/chips","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.369a293f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c462714a5075d9ec22d829b4a9da0e997d8e05f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.369a293f0.0.tgz","fileCount":83,"integrity":"sha512-YXDKZF1oW65xQIeMp4+J81Gfm0IM2MWFcUoe8ZpyzdkGI7ULov0j51+bKc8qinB9UVEjAlI1FYnRemAA8WLN1w==","signatures":[{"sig":"MEUCIQCeo9RytFvjzi1C+/4pzVe/CmQil2bODXxDgVT2GxVzrwIgaU9KU9ngrk6dmipneZytaOE6LArPKkjhpUE06IebuIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R/4CRA9TVsSAnZWagAAOjgQAIUmHVetuIQu+GX35VNJ\nFehBdHtDpOT3y7xfSAwIw1OtF1kAbgvzjuNgZkTLB+tsSUtCIfKVA/8GPvQq\nHlT9b/0L9SNUdQ6+Vcv0PRIMenN7LkmPW83Jah5bjIDQO7vSvnNQ7T2LrVrQ\nzVOxIAnFjjnOUyVbPGRoGzqMpVyIop6/uTCYJmOACJUE2NcxV8wf+wlkZHGH\nQKnxqzZ1zNvRuHvaAOHeqbUXf87n6NtbZaguH/j7cXdr8aBjHYt/fSuG3Owe\n03U6tatlyhBdOJbn99aBAqn407KHLLY8O0KtOn6RVJusTW04pbdc5uBCLkjb\num1FY0vIVHPUcnWh0xbWih4DBwGO6DX/5oHeo8g4/RZ9DtkCrbVPJ8NVHCBF\noAS/7nSU3fwrWEe+ZJAy9/1C49sMvSKqNaimG6lXmQa0XYvEcLhJKqyaPNAi\n7wYPWNQLtSe9GTgCBFb7XWaa4Yei4W7DSnO5kNgpUVFNVCNS9zvvLMrANDjh\nTTZbVBa1hkl89hpl6CZAdv4qO6UN/r6z5PfR5IT083f4P8MrwlWoWjba0FAd\nlfb4rJT4AKgFYbjUIoABSYG7kZ87p2FiukdKZb22Ml7dlm2KukCe7iy1YnWF\nhT1jA5xBRHh64rB/ywkf2uKoL+EOcjR9cnuHdlLCo4R29aIh8yGzMIIv7Xlr\nP3Nu\r\n=7iwb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.369a293f0.0","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/shape":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/density":"7.0.0-canary.369a293f0.0","@material/checkbox":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/elevation":"7.0.0-canary.369a293f0.0","@material/typography":"7.0.0-canary.369a293f0.0","@material/touch-target":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.369a293f0.0_1592860664338_0.19401515541212966","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/chips","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b23f7531289e1190a62dc4a35ad239647da1d54d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.f1432b5c6.0.tgz","fileCount":83,"integrity":"sha512-fdIC45Dr5GJmMUhOiLBAi+JrvsHNgjTFFHCJiWCIVCHkSEoWs5Cju5Epg4I8dBJeXLhmoQKcrzDLpIMmljWeYQ==","signatures":[{"sig":"MEUCIAvT0OWNpsvNVy9aua0Hwr7yYX0uB8jVT8McpyDZ4zdiAiEAyd3KBlCc6ppjKJI9tL9cTFqW9SMStEm3tFHisq1EEHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHlCRA9TVsSAnZWagAANRsP/0d3rPI8Bjt8BaPvkC+H\nMD60UywK75cZ3X8Ee7rH7CzOTLKn6LzjmtKxucKNoJuXM5dE2GM/DJQYRDDx\nXEnox8Q2IFq9vacepIjkwf4Uwk3K6QJAMbli7qZd92G2nrqUiP8aoLEUPtYz\naq5CsH7pH4cBTHt4VpOjASLwaufzWqt5rrE7LmB9uxpe9bHoxSKMmtYG/zgA\nPjeTAIF2EZU2kfCKdfGpAIcH3KvcbLmt6MyaUiT5X2s+W4UEoOB5jKqID08l\n/Rhrif2WkQVWoMfOi/OPp5xhKRdQZl9sptDuWLGXnf134ackaBQynNvZNg4a\nzdZ7mKep3B4jHdVIwFCb/WmE6SSaZhuJcwexz6BBxTv+aPIzxVP2CHHwJEgk\nl5kP1yWjwCNtkqLLRnlQusCDJCojcv3h6MxBzTP/ehX6/UyVhQEwqOStqP8f\n2+3QDKB7aclTC/ICEiL6PdRpOrcVqBr+QCy963qBmk81NfrvKV1MiGtkfYCL\nVlQe/2QgEyRL1RdFtjt+4NDpHf7jjMDDoNho71dpOQ6oRnlNfnbl9FwqJTtM\npxYqQaDS1NssgDwMGKH03Q2nuv6t36a8LqaA+nuh23iMeQT7IKzQpfg3fhWi\nw52fL1V7NWuohlPiMf8ougSULbIHb8sUFclr088LjWUQjgi7OaojsAxlt8Ix\nntGZ\r\n=4BUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f1432b5c6.0","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/shape":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/density":"7.0.0-canary.f1432b5c6.0","@material/checkbox":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/elevation":"7.0.0-canary.f1432b5c6.0","@material/typography":"7.0.0-canary.f1432b5c6.0","@material/touch-target":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.f1432b5c6.0_1592861156717_0.26155407597413083","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/chips","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93e1290fd37e5e6664af3b651384cee776e07918","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.4757a16b4.0.tgz","fileCount":83,"integrity":"sha512-eY5VevA6hu1Cya77NFO9LRBaUCUJ2DYA5h5VKEAXVArb2FV9s4+QWwZ0kxuqTEkRYOXTYgr4vKiLjCqqTwL8/g==","signatures":[{"sig":"MEUCIFIALt/Nwn+pEIGFZEzIa7YRiIU4Yo5AFOhvZQojYSp7AiEAiDSk6y6NZU96dZA2zUi11aMNeSyx53J9ghhTvrBb/2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShvCRA9TVsSAnZWagAAdAQP/04gczNmin+OA1/oFyiE\nr/fck5twmnY3dLlUdMHRCyY2e76TxTwT/4u8UQsZY4mAbprFSqiv/YF9ikKG\n79CDw+3aHMmNdtnGinDVkidgq2cwuIpvK+18DK+KYFBErOHN60TCZlbXmPOV\n9zoheZiEqnS50j6OFQ9QqAQvhHPe+/gfd9ty01r/+EGYRdvNv3MdUsyHJ9Xr\nF3Cmk2sj2eobzrScWOl0LAoGKotCmbzXLYIMMMBM6brXPxrk/EDTCUq3A5Iw\nJrj3OkBbBNXHFPPqca5NuRZVMzHa5xXeti5GmCkPekO8awsITde8Tk1AOhkY\nzHA4Ie+qG/bSB/NjKDGa2UFrarj3g64tbqWyhk/1wQKEw+svsi09lZvIiZUp\nIrO0IyKeENgGjeWvxQDho/5t7yCmbWscCfXzcT794ZeSvFJt68r8FSyZb0It\nzhBGZ5gCMiT4ZrBvtsbI0nhhEcSBDzg+G0VRVL1CCE9musaTPQ7zaEJF1+ql\n0ujuaTNBLTMFPXE/0ymmj+9bSnx6uVoHMpAzb+02BvEiT+x3j1T3l97cfbpS\nUx9GwsGvQjcCO+j5HA5BGpLTVF5R1khQgzARU0xAlSK45NbUNGCW0yf5ZOmH\nIDJxakcMEksWn1R+2XgaantTL+50T+DqPJC3QAiihoNOG9MOPfQzHYsAKbo5\nk9Pj\r\n=vCva\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4757a16b4.0","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/shape":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/density":"7.0.0-canary.4757a16b4.0","@material/checkbox":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/elevation":"7.0.0-canary.4757a16b4.0","@material/typography":"7.0.0-canary.4757a16b4.0","@material/touch-target":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.4757a16b4.0_1592862831479_0.36924487498939196","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/chips","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.f8f472762.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3a17f9a20a9b95981a939728d9489993c3814bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.f8f472762.0.tgz","fileCount":83,"integrity":"sha512-YY6uyrhtxDQOg8trofl3nactd/tjuZDv11YuipT4aG01Ber66OiLIzR3ibRLs2FuigMz2SV5JWL+nl0+GQL2jA==","signatures":[{"sig":"MEQCIFy8+qT/739scFao+hfb5iixXMy324JME5Xwrm/3CCAjAiBIKaPTD3z9WPIJLN3c8rkY++jslSbnXcDaUrMxOXrHGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlzCRA9TVsSAnZWagAAPIQP/2G3rRlj4mxWNDrzcA+B\nTyTTHRBeyOQoQTnNm9K6BYtXQgBjxxyBQUbSu2ZQnKZsaHz4xPhwrWB5UXj2\nhl6f0Wqax/DeHFQSPKsuaU30GBgb1I//RCe22xa/5nQ9zgohwE8EeW5QSfph\ngjZn5fIEElCeYDM+t3ahzJTbjInl40Kwfd7aJV8VaRt8XT3HWFwBtFFW6UOu\nWkwi1RDAAeiufHES5bYn+tyv1YyhOHVilKnwZQz0olczOYOp8bBvnLSLUbwC\n7SXJLRi8E45O4NkkPYh+rORSc649WdiLOCTvY7858ZWRpm1ewXdtcdLWpvDC\ncWH59N3fLMzSLI+KNWGJvp1hwRzoM5rGaZePAFCh6MfqSWlQ6qZqDtxeTwS9\nJbhuK/QxFGtS88xUU3j5A6K5QO/niKQVVEAtdKiVOnfA0NRqKtUC0A4njQYn\nFyvuI6YjuhBGBoFes8FR0QgDSqzP78zraQaLnSvm/DKTKGUE2BC9Qj4MKqC7\n5zSiyHY5/nkzFzcnQBC1QloahJriBVUPaXVesgCXg5jbT9qL8sAJSL8jrS0q\nPxrx7QUK9+JUIk6HDJudN3PPzL0850bUF4r9LEt2Eq/WTPqLcE5aMhAooJfU\n3X6AofrrZzNCi9D7Buaw5IwOXdqraiJcAGJqnwJohoWP3cFpOsentO4PS8/9\nCExD\r\n=WEQ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f8f472762.0","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/shape":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/density":"7.0.0-canary.f8f472762.0","@material/checkbox":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/elevation":"7.0.0-canary.f8f472762.0","@material/typography":"7.0.0-canary.f8f472762.0","@material/touch-target":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.f8f472762.0_1592863087814_0.1748236854778089","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/chips","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee5b9989274208b3103d1ed454f20937d22c2ff2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.7e4d55c34.0.tgz","fileCount":83,"integrity":"sha512-L9ppMJx8zpafIaNdZ6OcJHarkxOxgn1w3GWVewGRzhrq0XzypIqHUoyMdyeLtGDtVryiEyiYiydwvm3/Daz8iA==","signatures":[{"sig":"MEUCIQDtVC2PnD+4+xIB9P+zOHl76O6UakPkImd/bG+B8FubqAIgO5SEUszbOaC6uJr/OawBtj/TMZoVSGoR9aXaxmlTNCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDsCRA9TVsSAnZWagAAIr8P/iOI9oC36i2WyNlIds7w\n9GhTzTXQo9cTZNMigErIBu7bB60JAdyOtaNQf1KAL/Pf0N9NIDRFIGQLmLZ2\nGx1/cH//Hx8FTgsxaYo2YJ8FhN89DLEiExbIR73MjQiUpM/6AbsY+0J3H39F\nMkAr6VtaSUW3cfl0t3deHPCLnh3TntsznItP6aERBwIgsIHsXjOp37gpeLUB\n/eJ+hHJ5xs5Zhhc2RRN6BviwLk5V0QMv5ir/A7j4YifrCLdDYCLye2T8NnSS\ne+ye8pYFVoaBjnnequq7Z4Vt384dbp0qLCKvjWKGvDm5x/DO2i7WA07/m6XK\nyfUYKv1o57C/z9FwQOnZjMKyQI5k7jyZS7NnhNfKyRyKCBaWG3pS2PfVwFbs\n6ldEhctwuUM6ZO0XmPV5udJWzUGfRnfs9maiA7lUz7RANwrdo1yD/GM07ef7\npbe1/8w+tHJruwLD4IbO//FPtQYYpLeOSX9Lbd730wGxHZJk/GdCr5ZNqcbr\n3GdaV6J+I6W8v+mjzoUDfIVl9teoes6q2zn289yAx+gCCY9qRAlym7++80Xr\nVCD4yCbczQiNCcRrJHnEDyNkxFOiv22XwQ/opgH0XpplJMTfIOCaXadAyaul\n5w5ERHF9ry/zFCz2j2mrd0N1wknc8sR85Wnx9hcbB4X2RKLJe0gmraBEmr6b\nNPx/\r\n=zzW6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7e4d55c34.0","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/shape":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/density":"7.0.0-canary.7e4d55c34.0","@material/checkbox":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/elevation":"7.0.0-canary.7e4d55c34.0","@material/typography":"7.0.0-canary.7e4d55c34.0","@material/touch-target":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.7e4d55c34.0_1592865003920_0.6148938215283053","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/chips","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1d99ced756357e587991dac76d62b5f7aa2890b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":83,"integrity":"sha512-0vSQhTCnTqhEFD2C8wf2O72MetrKglEF8GqE+9rxLXukb6rXOLd7BTRTR5hD47sQvajsF7/S41a6EtkkCrWYvQ==","signatures":[{"sig":"MEYCIQDF4qc3G4WaUsvQMFv75AWsSTpNUiXl16X0SNQgA1KthwIhAJ+TkqWJzmp/aO69kyOc/s6nEC1d1JQXAphFy5aAbWK9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hGtCRA9TVsSAnZWagAAB/0P/A17gpgFl6w9FzKEHpsP\ndwTH4QmkEd/zx6qQvLQbShrYQAYmXA+taw+ENx2ucDrN8sh0XkFErmRw4Bvo\nn7uctW70hbnWFPbrcDxKQDVqRFQLeEQDVA5u9UvdX4V7FfOIUN/x4uhZaLDw\nxx7r6CBkjHphx0c+so9l+Zkeg30WEIvcAXKqissBUX5isjXJwx5tdhfd9zA7\nPaSCMcmhELcNFSe5RMjWeWmJVYBFpSfRFV6/7D6KjCe2hYyyiT1EErQLFBCr\nDgNsruq1BPJe7p4McffbrffDZZXvbzyxEarLs4F+PooX/V3PCLTovccTKjLQ\nUaBZKxhHZRstfOJ6+tFlV0nhmuQZ8wblkPweERWwHFlnmuNDi3YjooOQzOE0\nbHswDoFdmaaq0nuzD5i32n/6vG7GUMAVNFOfxNwHscRGtDrlfECehT2rk6ZX\niP50J55MyTY8RJlk/0vegqTLFmoi/oLUaOdwJ1qA8I+UtK3Rvp31vd9stIpX\nLu0oDtTTUc/tCtpaIIUYOJNblT7zWmUxSiJgWGqT9Kg3En8CfYmcWOvbPHAi\nAqBp3bMOgJAjRAnYXyJJLAdwGj8th2CX8HZ8MIX455uLNqvRODbC1Hl6K1HX\nYc2d2wP6pVNLVMhDAGyKtHsuHEvzPH2s1yl9W1xRYFqD1eqjubAFXZ9K8xH0\nUKoB\r\n=MZSW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd1dbc91f.0","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/shape":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/density":"7.0.0-canary.bd1dbc91f.0","@material/checkbox":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/elevation":"7.0.0-canary.bd1dbc91f.0","@material/typography":"7.0.0-canary.bd1dbc91f.0","@material/touch-target":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.bd1dbc91f.0_1592922540624_0.10768277061088738","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/chips","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.31523bc62.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e66393e3ce2819727799ed49da1e38014e2782c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.31523bc62.0.tgz","fileCount":83,"integrity":"sha512-P5GP3IX+EdWVMjL0oLUV4p+SP/uxKGux5s0lhDpJw+8s/j75beH9r5T8ralOBPd+vPF/QcPzSZqN45Sr/jCXFw==","signatures":[{"sig":"MEQCICw3UazGjv8WMAEK4Q1bnqN95xPRQUGbTjFUoKDMpACxAiBamixh3kBeQjAuJuj9A877KmK/81OTust/9Pg33TL1hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hMECRA9TVsSAnZWagAACh8P/jlCEss969w2pQ6L4cMF\n/G0MpVs9TSoB7alOU/qiPO5jQONcBS2n8veXsquBDbgrYamK+6pplNbkgh17\njJasCqgBCCfa6P4Vomur5gN0rfQATzyPInqdZjwww52iY5D3sgFYI/TY80Ev\nsa8gjGvH4wvuKSRkxhwL7No2rlg+izPdX5R6uqZ7sR8nsVbdXy5hiBPQQfUo\nq9WR7OAP0nOnn1VdBQ5olcM+X/XS5RvnKoHPD3KgJdAd5PixSSzqvjazsF8u\nPxdA7XHGIbTMXgpBFof7bEEX886Ob03YoW/pyubavaWDEJrlWcVdX8+VV0fa\nUINDMWfGwNNSksvYbdK4GDsyzBeMz3YFji7SSricCAea4LVZItf81qI4qua9\nrmePYRA80wbeicx/Jk0nvVrigPxDFxLq/1o85ogtGrIi52GasnsRiNozy1OY\nTYeJ0IdeSMQXKyiZcbgkPVBI+kaEFFv51amYlHPFqd6AjMp/dec9ZQo2upfW\nS/Z2dAhM4LmrmHYtILxUHJiekxOKcmJFxxCXkeGYWDkSvVTqq6/6hVSJQzNk\nE81/vqg5zPgUPDqw1H+eeJEmYCxMtN/67ZPSgPf3RLb0MSzJ/eB69cJcza3N\nVtTZd1sn+bihIDW+nPUlDhslFCHbejz3BXSEX9mvde0iGEPKsKFgAKVhB7q/\nB8fe\r\n=8xLN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.31523bc62.0","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/shape":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/density":"7.0.0-canary.31523bc62.0","@material/checkbox":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/elevation":"7.0.0-canary.31523bc62.0","@material/typography":"7.0.0-canary.31523bc62.0","@material/touch-target":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.31523bc62.0_1592922884187_0.7175539935741777","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/chips","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a00ff312a25ae4eaa0e4f8ab5edd41ea3985b3d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":83,"integrity":"sha512-+0koLysN8mw3772GI5SrG5lklg3EVUXMkstC2Ak0LxSuyg3Zv4sI5HyDbNN8cZ92tmNVNpt8XBF43I+Vha0qyw==","signatures":[{"sig":"MEUCIAxuZD3GtHyYwQqcOAgAXqE8wKVAkmTVBsdAqjU/XKCqAiEAj+Rr7MO9o6tuiz+q32YLvJSHiibGfwt4rVifAGw6sgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hRZCRA9TVsSAnZWagAA2QEP/0hfWHykPz37C4m6rFbc\nGApntlAn+mXx+eGPiO4Pv8+bd410YTSfV3a0/ffD0XMjJlFs4aqwD7F/vkPy\nE61wgd8+ulaIw7PbMkX45nMVT40J85BOKpvK9BTi9320hHYlkJsoDsbwy4cx\nIlLoGrGzcs1TjJvmp7Tu2SJ8zCCGs3IbrbYOyeD2FwZ1HtIeNgF0gEBtN8Sa\nIeSdbqqVZ6fTvZRiJnrcPD9iOA9/y2f0YOLhumcafnsq/XN7kCIVIxom9ZPb\nAhBHEAZm8PGaSz88qrjCyn+NkjrlRK1972WUh9ZHiYmWra25TbOeDNJm8rFW\nb3zJhpySpbuvJGJxgVEBl/wq/NdhnJp18XvDNYWmxxrvp5g8+NT2wviCFRgc\nby0LGqwM0vOlIJ8a20I0gMy90YTfZmcjyUOFa6iePb+EiZBh1fULbHNtWN3z\nUX+0fibK+lfMj+8jbAC1rto9N1N8bW9nI0ACT03vK5l/BkwiGJsnfm5JKxwQ\npIqbOTysuFANLPYTVNX0LzJVFy2gBUGuEEJN4xJUCiXOq9zRT78LLStio66C\nWk4lhpJ4GX6ap4NU8YS9rUUN4DDuEgb1Nbtkk/eaOyXA0EnY3BBFT24Q31Or\nfjXgiWKL5evAlZnto/xUuZT8mhQZuJTh/V/UdMXwP39ln7sYbnzkmU5G36mH\nM2Iv\r\n=4ir6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"38539ef5e3142da419b89547f32399835fcc7472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a96b6d4d6.0","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/shape":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/density":"7.0.0-canary.a96b6d4d6.0","@material/checkbox":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/elevation":"7.0.0-canary.a96b6d4d6.0","@material/typography":"7.0.0-canary.a96b6d4d6.0","@material/touch-target":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.a96b6d4d6.0_1592923225226_0.6566931099089097","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/chips","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"312cc5889b680b48c08686a4b7a5b53d7e19e72c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.ef3a09533.0.tgz","fileCount":83,"integrity":"sha512-hKJXUzt98Q2Vf3uxLhEp2hbQxA6b0SiV+I98JAgVCvqYUnSDk649ydeqf1OaItr7RwYEK9kQV4/NXSd3fhWZMg==","signatures":[{"sig":"MEQCIGPvJJJaFWpq6Y62Y7qkOTlL81D+MTdgou5WTIMm9SCZAiA/VkplzzcDMnEKhoSuO8jn0o6DGhlEUVeOGjw/eEn49Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZMCRA9TVsSAnZWagAAIqEP/jI8KD2ciXu1fyDa7LT7\n2HaiBNvUXOvWSz0FpoorhXSr1dUosy5yhgA5pcuR6onyrbPkWLlw7gSDvoyG\nskZTSmeekzLyUjvwID5CcisDXHw6pdStbp0wdDXT6Zut2MtzN+z3h56pQIUu\nEWaAvIoHxNcv3Qb37cWd9IYqBkOHSkqNErs1tk6FkhO5x8ID9TXLMiqi2s+J\n1HmQRR14U/Pz2l9MG31sps5Ksl4aDi8WAzsnyQM2ysks5RfsJ5afl3ari/3b\nq7wSmSLtpeYlovBB2eYRHFopobFCbd0AuvVV8Mk4Ze7NO0YxnZN9EQ9Pj9J4\nshdvEXIlKOJsxhzyXGI/4njatPtuRAK0Twy+feLSvjUfVeOvRFPye0WEuBVg\ny4BkEOq9n2OiOJX1iEdO9gMC67tmB9vp5KBNE7KDvOvP0dNs2WJwyAHKHZPk\nh1karLiCAGgP10ZA5o4oeMv7ixSKuEyYLw3wStfuXJtpLGC2YOXQ6Sa8cgH+\nU9t7O53Lj3Ciuj7ebnUPf+G/6Bi7l4EvaUhxwv/P3TOw5Jxijsb+0WO+MtaP\nipa7lh9eZM8EAhhOoolHNP+w1Jop8ZDrod465057w8YecxgLzex569krVAoG\nX+U4rAgz6ETlf8IyTAgd49EvD5dHGKEBrllb9Ju0hIawLiH+8rhak7wnqPSs\nD3ol\r\n=M/Qp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ef3a09533.0","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/shape":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/density":"7.0.0-canary.ef3a09533.0","@material/checkbox":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/elevation":"7.0.0-canary.ef3a09533.0","@material/typography":"7.0.0-canary.ef3a09533.0","@material/touch-target":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.ef3a09533.0_1592923724313_0.8007017097993367","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/chips","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.080965f39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf580b224c792cde1d1eb99e108a89c0f61f0095","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.080965f39.0.tgz","fileCount":83,"integrity":"sha512-R/0RptyXe7AtH1yGesH2DgpiqRhMADpPjxE9lYuBdKRbg6SPmxQaupUq7dooHduLCK444D0dIDRVqwPUUmbgMg==","signatures":[{"sig":"MEYCIQDRBobJYE6UTDI2jaiCyc3JQEl7FEZWsr/Xif3s1+TXHAIhAMqnzt6eC2gRwSRf50ZD1vlA9PBJB3PjOqiiZcLwG1j7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0sCRA9TVsSAnZWagAAxdYQAIRLDl6pH0t3vi/HnfAg\no046hRKWsq2P3T1zVf5IPlJfuItvk9KlGN/AdsGp/rD1Y6WVPK7QCCDrxWsY\n9X/KtdfpPlrxQV2pd3aCSXf/jzxMQ7SQfyYZOwW4OT2nY5m5CjGPHrABoS+k\nEIjWI8WU2Ak8UKxYLcvHhFXv0gYFteGSqsB++yUivjc/Ind2kgp/rSMtOWdz\nIwLMa/E0pZ7HJ9MH1Lvs7LZVO23xxJG69dg8ESTdrvbWg2Dg16pjfQoqq1cq\nVDRLu1O3p1PrcySuYVEGZs/mWkLUtAfFLjTZw0fvdG7vq7n/a6MRbRrvifQq\nh/1gE3S8nsRxS0KoogXAB1YmdACQ5u/+a6eby1m2z2QKzZeWMRKuJhh9NNCB\nBJ1IFg57MmsqHb/GnZKdVEe5DBJ5JGA/K73F6d8a7Zv+rSm893z5172pXOHw\nf/bP9T0Tfrf74ARmSabeS1+ATeOxvlbd+b7iYvX+bbulP+6H+afxDeMwXjLT\nyh1j2+WplPdDJdhjFDxLQo0WIhQbVlPzBd5PzurSjcDW0ivZUUpEb9C8Kguf\nWQ0qXRk70Ln1AcCUgkZzZWOBbRl1aDf0KHEg9GdzZvpsj/k59LrDfKwJcnN9\nXuqEL9SDELxubkZqjBPLVm2YerGQ9IwoGRE9YhPUzxq0EbrY5YAlNUqkigqN\n5bxy\r\n=a2f4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.080965f39.0","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/shape":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/density":"7.0.0-canary.080965f39.0","@material/checkbox":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/elevation":"7.0.0-canary.080965f39.0","@material/typography":"7.0.0-canary.080965f39.0","@material/touch-target":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.080965f39.0_1592925483997_0.10287348119894513","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/chips","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea60c5886e341b245eb322776c83b4fb8e577704","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.1bd67b65d.0.tgz","fileCount":83,"integrity":"sha512-UNcCzX9xDtAZTv5kX7TbrKeQ4STQIQzPW0DXe/kg2nNPGT+xs3J72lshJIayd8tWQFZA6tMnphGplONsze7sxg==","signatures":[{"sig":"MEUCIDvLovXOOZgW9GBeL3Ty7X5kozaXvV4VW1ji4T5LMwEuAiEA4Uk8gKQPJKSAM0/U3PGwy1X7VZRMIcammkz2Qcni6GE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8iceCRA9TVsSAnZWagAAPggP/2+BR53VNSoMcmOnvY3a\nb/GBrXc6ieP3hzVsBpnSIP8NCQUNvQfh0b/OTjodrDyF/ajgiEd3XN4Migsv\nbFFXAv8wELtRCRwVJihpXa58oidEMdX+FSYca/8qSIMXU08WuRggOY2TL6d7\n0Iwmnwompzt0OUL2OT3uLJVpWTl+izGMnUS/axxYqrQ3rcjAvHF0wQzqa05w\njpm25koRqH1IrLL4DGKvnNniER/f3V3X5iB4Trn5Qm2CjqbTLsLTZ4unKbm7\nht77FV1Le1ruEZAXJ7UulGr2ZDjHoVI42x9TDMabcSJhZ7qmspO1ojmysKqT\nzVRs8l61m0kL58lh/XnGWOXgPfhGMXBHiQ2AxVZt+u9J+N2VahFahKP7ULCi\nZ7gR54Ull1DJBaRcm2bSrq+Vymgp+JWysAOcZPTTFSCbsZkMlBEmAgh7LL4h\nAMTVR6o1jOgYUrKxhLWWZk3+GGYBHU/uBXIwWeHFJnB7R+C7TB233YwAzS+i\nQGqdG3Jd+uHU5MKdHOUERKffVqS4qdoL4FDQkHsJgZoYgZrd1LoBUd994+1d\nyJW/BrliK4pdYoimigKMVsBpXHxQR5FtFFpws4CDeJHddGd0vWfI6BzuI4iv\n1gx+FKYapRYtOGS9ssqmNdMzXEpZzbbcBJhuvijnYaUyod1yfoZh9byEUfb9\neVH4\r\n=RmYl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bd67b65d.0","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/shape":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/density":"7.0.0-canary.1bd67b65d.0","@material/checkbox":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/elevation":"7.0.0-canary.1bd67b65d.0","@material/typography":"7.0.0-canary.1bd67b65d.0","@material/touch-target":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.1bd67b65d.0_1592928030430_0.23987100584812948","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/chips","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.18ca31248.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb523ff6731d4229672f1befd37c99ffe49c3ca3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.18ca31248.0.tgz","fileCount":83,"integrity":"sha512-Mk05Cp2TN+45qdbD6i8F0CpwDRCm1OqRPxGcnopFhCx5hFs5oS7Ybj7P8+ZT7Am9vDYHuMucRCMrxvacdkX5EQ==","signatures":[{"sig":"MEUCIAHYOJZkZOlmMXKPBwWlKtjO3wIi33YaJxJtx4ZUTMxtAiEAu+zO+Gh354Qv6O0H48I2bHHKdH1mChYDBfFlu6ACQto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kkZCRA9TVsSAnZWagAA1v8P/38FvzZGJEI0CufLlrhb\nLDZGScqIj2wTM5x05r42adAbl4v7hSgLwFoXqSXF/kT7WbG/uHAfxijBLKUY\n2VCHQdsXJt0BTgr2Ff5J66Yjal9BII2AjMGNj9SfrXhRtMcj8U3BOO3kUzip\nqqUbOPTudARKBVaRhBq1JNTTv9VxVgiLEq/pcm9YmA1gCyJ8wJgx96+7fG7d\nR7gcr9/buzN847T8xh+LCJcsevmDDNfwbj9LlnFZ2BomcrTIwyhJ2cxALLX7\nsjAZTOpWE8LES0iY2igYG3mpVz99hHuuY2ki0DvNtdvXXLTtTIjPu25JnCit\nnm4dCklBygh1wI4HmAzisv+pjTb4IW3tG5LNMHepbhhC4qG/LARrIw7Ufgis\nlJMWVQ2a67GcMGeBx7LnheSTh+SS703Lip+7tolI6PkDVqgnwAc4IH+u9603\nv7o23VnttI5VbYiF1pZLjoXC8ocY615RZs87sinWqEfRSTyZwaD+JL60DN4z\njmSHcJVuJsjl4m3jjq7eJJBYMiL0X2PMcwtXsp5VDac0fs2NgRbjSCtRR8vK\nlMc94dl6M20KP05qOMAj7yZrtug18lRPlG/XfT6v4etC2cpy4xxXVIqmO2tK\no/9XzF3Hy40eWlO4FyNnPEgPMEjMfqt3Y2TgEynWSJzT8n9wp1tfdz/Fo89r\nDJtS\r\n=mDll\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.18ca31248.0","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/shape":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/density":"7.0.0-canary.18ca31248.0","@material/checkbox":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/elevation":"7.0.0-canary.18ca31248.0","@material/typography":"7.0.0-canary.18ca31248.0","@material/touch-target":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.18ca31248.0_1592936728952_0.5850611634394736","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/chips","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.39cf00836.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69d3de79eff4507a641c787f44c4b67223127117","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.39cf00836.0.tgz","fileCount":83,"integrity":"sha512-m9eGKb169sgEPKTEEg8xX3HWUPjv3A904/e2JP87DjnU0ODwQXLikDkIzQ+s6EXwX9xkze1kKEbK1v39c9Hf2w==","signatures":[{"sig":"MEUCIQCNCj/wPQtgRmP6PUknyFsiG2ookHf8fUwsYj2MeQ2TOAIgO2p4aU7+H/SHBvR75Y96B6XtRbvIg7tF3I1FrY+9iQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k53CRA9TVsSAnZWagAAK4oQAKDlQfJTZVr2w/FdqmLB\nMhrgm4hs8z1q1HZCTQc9fwh9PAHL7LyurCUefG1UZUIdv6tauLIKoOB++CCv\npT6+KLUQqwSeGSs6HNRXv9/2lhE5UG77UUyg8AVjYUvhQyOCrbJ0yu4uS4mS\nrxb+QkPKdjRrDPFiUA+clh5jLAtgL+m7L7uLPOwoegsAKBUuJmOvqVSl7QR3\n/MnWL/ARFoQE7uMHA06NDuqgiEHBy2bt9CwPhM/cFCcXYWqFstFfvkBE4hDd\nwMMNAfkPOtyEeZDO5A/8PZ1SjrlZL4piuy8h/hfveyrSqlJCRfW4JidmhFO+\ns1I5uIzt5XTa0fqrd3fPD6bG9gWnAsxOlsjjABOaWKsl6PwQthdSYU3py/1m\n5LF0/tsu7LffVRSN3OFN5k7pbnkqyZB/iyEE5AQJvKq7+aBCckySDlmyQ/3k\nV04CnjFp/l61eAKJ201x2DWyEcFzkZZrc76uifck3knpcQh4HLZiSRCSesG3\nBi/Xag/FRmOAUzgJBsYWJjncaMd0bC3uwYERMaFTftfnokGHEs2AK4JURPL1\nIgKYK9forlOjOpgaFccjDXX6zawrGVbUdv9FhYsSLTvyu95ySkSAPUguY8zn\nIOVOMYzZ/sgoXixlVgW947shQgheaTXgAmxAo0Eng3WSKG8xnnt7aW+DQwH6\n1HS5\r\n=/leN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39cf00836.0","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/shape":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/density":"7.0.0-canary.39cf00836.0","@material/checkbox":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/elevation":"7.0.0-canary.39cf00836.0","@material/typography":"7.0.0-canary.39cf00836.0","@material/touch-target":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.39cf00836.0_1592938103328_0.04657510365897788","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/chips","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"987962614f0343e456179ca98727c5afd4e4937c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.1bfda9e05.0.tgz","fileCount":83,"integrity":"sha512-dmErTagpa11tjJLnBgw0QAI5hYpzMPut7onFhM767ERLQxRxyqS7zq65LfJRbVgb2QSj3IvaqHPlFLYmXs4ijA==","signatures":[{"sig":"MEUCIQCm8OR8Uno0TEa4TfIl/+H7Wx5QKhAfG5+qINtulJJs+AIgCTgRqwul8BiW5A7WhaROjJB6JwN8Lcrqw56+LY35UdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lF2CRA9TVsSAnZWagAAbS0QAI/FJ10dGGNGmY+/vym8\nmqDXt6pTpFowoUhLeY/w0Wn+w7WM8HHILrKtRKA1nHRC4Kd/X+6bxnwSiHo7\nX4ZOp5NHGHy61Iw9InnAr4GBADDhsIMRIvSd/lgLJ8kEk7nPECs7drZ+Hi8T\nk4Kltj0jOjlgKHw4cjQtjF5FEntos5LUAnKM6FaGzAIycAiFcpkIcqdiizN+\ngYUcUQuMBUsqVbwSNLrIynuZzaj+FE2e7vquxc+ofyztucSZxwQzs1VU9MiK\nqD2YrK2L9rD/YG7vVzeHTfPfuU6ZhXQMcxlcZ/ZfyUT8V0/HabbMMN3csxpw\nANiRtYfkXUEl8MOq+qR/LMVyyM0AFEvu6wk0wb5W/lDnyp3zghxDidW4U2Ue\no301LRYwMugBdfpAlZf1kewT9Rs/gWzWhZfeXU+zOjLV2tP0DmYADBYuy4K9\nj9uUgtLyznlmzxIeLmw0FwWNXgeLKkxlT4xUYajpJlIjhHa84vJHV6bMfsIJ\ncYdczTQ3vUFIRNzOXDfeXXR394MA/Uy7wAQ5zlEYHUI+OLwC+n1zEVS5a99O\n+WluWMzfLIapD7MNfCWdk7CWx0a3wowXK14QXOHhuPynTM9P3JqiH5AaR30V\nuY+Ugd9udy8NzIpahIr+KDzazIiXX1QnaaRp7VLyqezHFowGUKGkKxH1MZp3\n3SHQ\r\n=rcRL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bfda9e05.0","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/shape":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/density":"7.0.0-canary.1bfda9e05.0","@material/checkbox":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/elevation":"7.0.0-canary.1bfda9e05.0","@material/typography":"7.0.0-canary.1bfda9e05.0","@material/touch-target":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.1bfda9e05.0_1592938870154_0.13606649304051532","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/chips","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0-canary.08731bd95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15335fd256627ea3c045644654af77f5ad87e6ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0-canary.08731bd95.0.tgz","fileCount":83,"integrity":"sha512-D+BIJsG7o2mAiHlwLY9QVhAESt6KJ8EKQbPb7fNXbSBBaz2/utk/tfSIwsU9UAk0AT+zwn5b2H31reilToJFHw==","signatures":[{"sig":"MEQCIEcaDlAUDDnpk7iPg8TD/Bc5rYslu1XE+ZH/y2TjFd2lAiBQC0o0jgubdMKXKBoNFYtTS/DWQHSIcnnjFe91JiBSEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lINCRA9TVsSAnZWagAA2TwQAJ8j6qd2VBJJuNzmHp8l\nKvPzcKrFHjUnPE7TY8awaHoWyk3I9g8uQILfMphe11V6jrhY+ESe/3fxV6D9\nMpLO70b03VglcLB0zSgYFZ8SZr2dqs8hkGbrUyqxRyxW7vDZ0j8AqWf3BUGF\nGJmUPRhfjm4Ffpx8yekzoyvX7GFcJNPGLdbIRibgCzJ+nydxL1ZYAPIPclzB\ndKbxEWUlIN3/ZVDnZ2iGbeaua8iRNYgpykQE0avIsjr/+P5D64xfo1UsAYWj\nrFyasPxPK0pzLb0jPYappaG3B8oCMEi23PVkslQbEzSZuCzpJca6n7cMppC6\ncv6wYVir1nb9b9lU61hQ+SRNEwj7xGB+ZKx202j14g30U+YmaDaS9g6bghFb\n/pUnd9jjfVAsD2vvwodo7+LYdPz41r48bsVGhVpTQmLnjW5xQJK8E6Rk/lbR\nHnXJK/qoe1WnK1GinIkX/qtVliaHrzMWPNB4oHcPadnEwvxlOTuX9u3QUTi8\ndYe7GBt01qOXo1zNBQhIZf3VQyZpMDCvFJPh4PdG/8Z+Q9YqcO+nXxmhmww2\naTQR/1DLf7L/JabR20RfWeiFVf7M8HFR3bKGGRxfDF2xVFG1nyqY1+4aHVEj\ngz7C0tDGceUEdKNoDEEWZIzqEBVMxneAZ3NrrzOlWQpEANn8EBjvC6km2BoV\nSRz6\r\n=bsTa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.08731bd95.0","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/shape":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/density":"7.0.0-canary.08731bd95.0","@material/checkbox":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/elevation":"7.0.0-canary.08731bd95.0","@material/typography":"7.0.0-canary.08731bd95.0","@material/touch-target":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0-canary.08731bd95.0_1592939020964_0.5527620759436118","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/chips","version":"7.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@7.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd1f7bf7f259cd4b60cf6eb4d1f6a738eba7df7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-7.0.0.tgz","fileCount":82,"integrity":"sha512-0ae26TKSC2bftBf3YIxInwk1QluHtzvdj1YYO2wctpXA8TCHN3EFZSkf0xV29Ymn35MpPGf+5+JOXaUbhSkHdQ==","signatures":[{"sig":"MEYCIQDob06MCq8oyY01AY8WOVOV6LXVV8CPCVkcZMUkyTOvtgIhAIHP8CkhiY1ilcLMaZLZkomGerzoqWdZDJJQugNaRt7C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPtCRA9TVsSAnZWagAAoZUP/2KZOKQYBPZGzA1CrBYz\nvMtkkH87VBm4UYbcNFZVe/kgloxUWJBY257y4c3qB/2yhhBF7WJwWOWNSKVS\nxPOv9G7156DOoNMyX9tb3iW+3dueueR656sSMNz+XsCSubHIQWObvN97N/l/\ncV07uVCndl/1ElPi+VdX25Sa1WfwHeQ5BNa2mnhEegtLsmkYzAcUzzAwUzGU\njJ8ecXkwcC+T3HHmeJ1eEMdyvfFVE+Ot4XXBKGfhbNVKYWmMOMDjpcziOo2G\n42WTde+QjhTdZ14xTV69yIGRVyH2hZGv54GMP1ECGAIqxPGYm56vHwy/ta4/\nL/3GdrDxw+Lu/8+CvZ3IWxGmBjYumTTrqDifl5CIbwkwfwuwO0Zmnh660ZZY\nS5QOda+PfdH06ZitPTLutzMxrZFsaeB+v8tDBWQkalGtVRM4SCdXS7OU5sW2\nBeblnrHNihA98A3jcI3Ci2J778w0jpUFy+70YJplbSVdnVDjxebJaX+iIS3a\nY4XFzt4HLJdrYSfhTI3Xe4Paovp5SKOdrmu0FTapulIZCtR5aH3l51XxjHUe\nEC4HE8eaamDYLNIM8XV9UWKux8y73TKjg3MaTmnW0lFLNm839bVXUWD/Uxd0\n1869J4XQY/YaE98/Bo3uE2EYpOy8+WeIswlkjKyRCjo3nLY3HMR2i4ONAiVd\nSZ/l\r\n=9CF6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^7.0.0","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/shape":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/density":"^7.0.0","@material/checkbox":"^7.0.0","@material/animation":"^7.0.0","@material/elevation":"^7.0.0","@material/typography":"^7.0.0","@material/touch-target":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_7.0.0_1592939500554_0.4169360764717125","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/chips","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a3212b209.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea470da2d0571fff937a179e3c6990cd9d73f1bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a3212b209.0.tgz","fileCount":83,"integrity":"sha512-UwN99igtAroBaasgV+DO7vC1ytWh1FhSjcIgTDlLQFWvWRH2D7yixVyFPuQ3iS4tG5juHxJYNnLzkEzqTdVJow==","signatures":[{"sig":"MEQCIHDoncQ41A80rujv0VeJKRfJfIJAkflEndxGxs1BTHfpAiBtgBgpqqhHOQjSk00Fj0cn+XkHamkMf5vpLNVKMzbfsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQjCRA9TVsSAnZWagAAYFgP/0cGRqrJPFVCt+euKUy5\naKGBsfPAWjuyPB9d2dtJevz3KDf0Z6TUitH1lRUjlCXwoqksWnGSBaStD8QB\nnjUmrXFFr449/nzeayVPJgWp06QTCa168DIxxZwdQWKZVzOXkwAzBpewe4WM\nakjGXpQGq9eqmjUgsUEec+2lHSpKo36VHddaqfdjt+K/8kw2DTVV46/G3YEe\nMbWJ79c/8mCt9V8PYsjnmX0u63ptKlhXAreoLzzNYTL/jDwnjNSCBlrKbfSi\nEwoc1gYvtzK4KGZiWDQ4hERtulzXITUrQfAF4P+Q3ERMh6rHg+8lWCgvAybE\n1eVgo6ENmbbGglTg/lK+WFSx81sl9KaoSZY8sojC4hbxkBmVos7a5FLzepNB\nKgeFQd3Yro6h2vD+kiEavypVj7CQvVMIoEyeuT89F2zdX4sSyUqaFXqml1s0\nP0WFXFE2tFpNG/ZKqlDu4WkcU1YgvX5XmuQ812+0CjlRqxD/RzggxPS8V2L/\n1hj22fkEocgGTL/RH7iRnzQjXSIXypSP09hGXd4fMpT91IG01FGTRYCVe5bK\nQhJWU4LLFtg1Y+gvs2UUuDcZ6a0EMUxyuV/RV5CLclENVzKKNJrcm0+m1gWb\nCLLz2hkl6wNHBvZhDjaUSf2v8uBqVl5Tahj+u+CKux4WtlLy6uaA7qlXhYD6\nbUGM\r\n=d5D0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3212b209.0","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/shape":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/density":"8.0.0-canary.a3212b209.0","@material/checkbox":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/elevation":"8.0.0-canary.a3212b209.0","@material/typography":"8.0.0-canary.a3212b209.0","@material/touch-target":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a3212b209.0_1592939554415_0.31521429374010745","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/chips","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7afb2a9ba2155cb3191727532ace111771dc033","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.15e81fe98.0.tgz","fileCount":83,"integrity":"sha512-5V5K8JpaqkRKlXVNMsbODsXuoU6NfhuESvemC3nG+SQ0ck3PLwByEUJGSnynifkyLW7TfwXrVevLUuQRWP1/nA==","signatures":[{"sig":"MEQCIEQ5O/H4lTHkMPYdkvI7pgBoEeNHSUUcuJpSNpqQtYmsAiBjtdRdn4mBHMl0m6RZvc3inTdTuXrDgI4uRS+KHNQAvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrxCRA9TVsSAnZWagAAHOMP/2nH6RIldyDgLwzA0+Sd\nWtOFZuaHTGt1kQd+l5U1NQ8XUVjilvFLgZiXQlayeDC2ChOL2jN18cmhwhtR\nPu0eWYr3AWxIQmRUXxpiZi1zy/r5Qj4W6fIwTrtisUn/cHOsidvZCNvp+HIO\n6tDbnKTIcne/O7BJLuEDCpunsE51VBjwnipt3DOQWEeGr1pXx0qNDPwgBkX8\nydCONbNyMCBABpjYNQyXulrnYuDPlaNaccYG+wm5c96QTCLhxzzf+eBIOavw\nN4yObVXz/h2eKHX0NjVDaRktmLmKlT6k0CXeJGD2pEDjPyWMra9S9fSHBn3L\nOCqG6JS195HIqeiKAeTpc8toSwSXsqpW+bEdoEKlLNpE9qwG5HRFvtuPiB0y\nF4LApI7EQK2gm5t072Ha9il8uRbrHtRLjqXJsopJ3x9hmSylZk8nO5BZvZZz\n/VQGM7p6uFWkjRrNtA9m95NqiVn78iksRdckulASkXKbDmJG6HeT+GH25MSr\nZZMM34wSsgiwex1UJrTnthE383cKRI56MdQgAL3SaV3GdjE/2M5VDfqkQxe9\nZv8/zqe2BYsdGIzg73DofLll4KA3owKlbUe5Gboz2qKYboYfN4BNol238xXA\narJhux6ZfSJaLXX6k4qT322MqRm9bR9D7A06VTMKYuCEAarU8Lu9LVIVmv/n\nd4CH\r\n=MME+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.15e81fe98.0","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/shape":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/density":"8.0.0-canary.15e81fe98.0","@material/checkbox":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/elevation":"8.0.0-canary.15e81fe98.0","@material/typography":"8.0.0-canary.15e81fe98.0","@material/touch-target":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.15e81fe98.0_1592941296803_0.4438234984596503","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/chips","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.004c9d392.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71ec4fcb461e9cbd2c11edb6fa0db430c252e06b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.004c9d392.0.tgz","fileCount":83,"integrity":"sha512-/Hwl9RuHIs80ekaomwJspRKT3w5ebMHXCiWrRcCLGxAfMBWjWL8vmA16IxQNejKakXuWnirbscdskjEzUWpTOg==","signatures":[{"sig":"MEUCIGMKyZQmeU4v1fepAMCXYSN15TATUNKFk8sVdJht+wcVAiEAgQzvCxugA8xtt4h9bJKO1qDNC32twWBGsuA+6WVW9mI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oiWCRA9TVsSAnZWagAAuwYP/Rwup4ynFr2bNUgfXkbq\nVNnJ7xj0SbNQTbkfhestg8Z/3xoRk1VJuMkCT+IzaC7exvh9wd70vEFDWs3T\ndSdkDXh6tFha/Y520HxtKWGZjKHNTdse+5xYvdekNbiqMWj5gsnhGo68lrPz\nngJPBerhXV4wd6pY8lmdDFd2A/sdDtA48avyQf34h0n4H8EYGNpbuYMe/z+X\n3PUjBwSNzSgsGId40XwDdV/k8PYO5joyDRRB0fWk5VrTf2Bv6uEBaVHi58BF\nT2rrlvUB77zA48R5sOOdawjmtJRxvSHtdmqjrVf3kVHdwz6mDtXafFXbBfcF\nkss/OT2dSsp2i9FCZ2rjZtgLcJOeGzOSmevixzrI3WfWLzmVia0VkWlEyiFv\ntrKJ0BYxNcP05MVFhm57uhTGAfUWhXLyStZIgR+rp6YHB2PCYSczE1Y9DSBI\nCdU4KHwLvYHc29BT4rNY2ug18hahOiropMShrEpgnYTCmRgPwSIdQZkLhrDj\nEeht9sbzfT7kaOHgst1NLkg2mKwonU0+SkykNepidEcHDC5Zk7fj82+xaXi8\n4LYrjK+UNoWWJSUlsfyaoC8H9TmPiNYWIG1hhpOEd6n3HuwsHwl7QFHwA9pt\novqQgUgGJqi29dTweHvLjVS/7wO29i4Es9EWW8thckc4LguVci6Tz+6HJojB\n12q4\r\n=UVPi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.004c9d392.0","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/shape":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/density":"8.0.0-canary.004c9d392.0","@material/checkbox":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/elevation":"8.0.0-canary.004c9d392.0","@material/typography":"8.0.0-canary.004c9d392.0","@material/touch-target":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.004c9d392.0_1592952982311_0.4531115951831315","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/chips","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ff05988a2f4b0883cfcabe41d1f41558565900","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.03bde00f5.0.tgz","fileCount":83,"integrity":"sha512-jZjeNQsBaJ+EY0aonVwHGtDVJQR9/9NK4TgmQQW6naHFrEmqcMcQo9re1j7Fkn978/9hygUSoJ9puIPaxzRFYg==","signatures":[{"sig":"MEYCIQDPV9lrRlooglE73PVWcMrtiYFuXzeUI4/+onSsURpWuAIhAKwcQuIsEhs1+VlaI6No6L81BhFKNLj/U62StRKRE0ED","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8WCRA9TVsSAnZWagAAdjwQAJTTvjDLPYxGbadZvc6x\n31HUGWSeDszKdBgrxKetyaJfed8cnj9uKHlu/hJFkuNLDa7Ur3nUIe6cySBx\nIA3YGJEMI1Mecg7XrSE1v94TUaLeUnH9Y4aOrmuRZvEh9UcKRWKQdtZpmwk7\n3klPOK7DH8OZuc2OIOBGN8LVbSXLTyo/91dP4mQDBErFr37S2s2QI3kteaM/\nahCzhf2wGrmDN4u27DiBESC4Drn4oGwn3V02I0BhaeAOJqLGQiv2EXItrUqP\n7ZgUQrSQMDQqU/X7OkVk9MO932NTdL0MH/zkWE8LFIbJ0vE0TLBSeA5D5yf+\nUijBJ9tpV+sbVgDPhlYr9ii31JEqyDOXr8AtD8ZSTNwTAIbyW5UYich5G+uW\nHuSiwTuZBeFKc0e1T9w+Q2Zxfq+HqWnmXnYQ7K65+4jISLFEYapDBRUBMvCs\nMlZrHUEgKMQtgaa5w9sOsOVVKfLbHS40ukHVoeirOREtvEjBOm9JN35FpPcv\na8c8y7gy9WsJ+P0shTujw8BLEXkDuHXKQlGUDAFrN1tt0TbKwPRtt5Bynr8+\nrHesdagRL83DNxbZhJMYdyCLmW9pshBSuQRP3RtYwwDuVW6Xm/UmxHnFRmM4\nnAMmOMC5y9JyQ2LOQgUws86qg9RBqZz2y4Mo7BcnUntFNZ1o55YD/knKNvx+\nXdvu\r\n=I7bg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.03bde00f5.0","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/shape":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/density":"8.0.0-canary.03bde00f5.0","@material/checkbox":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/elevation":"8.0.0-canary.03bde00f5.0","@material/typography":"8.0.0-canary.03bde00f5.0","@material/touch-target":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.03bde00f5.0_1592958741700_0.42213230571650806","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/chips","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.599b8c319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab000833474e92472f710040d9004e87c149ba9a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.599b8c319.0.tgz","fileCount":83,"integrity":"sha512-crpACaMfn45dKHW2cjzDt0JyMQmJFSy6Q7IPocv5hBbclhgDa3uu0XtmPnTN4AMoJdKP0D0vBgXF1Jc+Bi0i3A==","signatures":[{"sig":"MEUCIGorftnz8aHvgmAS+31Ymobv2s6jJ//EbFrLyHPpM8YJAiEApUU1HpqfcTJ7d8JgI0MtzcawvBDNwEHDFRMNCYE6pYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82nCCRA9TVsSAnZWagAAq0IP+wWCkfdR4YG9yYyZjeBU\nBP9PE9Dt55BZBPSoAs7+uxfbCXV9YGk8j99a6R7cIlh2yNnn7B/+4hGiwDql\n0kjxriZ2lIsJNI49MF8VvZ+hRazt6cra29rCq1yva/2Puy/eNd91TKRab/cY\nYf0BJNefl6fMaNVfkTVuM+axOraPavxG1QMdMS42//hIyczXzTB9ZcTuVaXi\nSxDFQxopk+Tt3Bo08Ozu62iwNtFN8zaDG2/D7shEF5N4EddPyo4IKBPvzRbs\nPTsW/iWTLlVDXCz8VNu70Uzy3gN8dPV1QgcLCPeY8293truYNRe2tATjeybY\nOyozgWgi3iqyL8f7LywaR+ObQ1/PrMAA6ag+1HG5OPInNZoFJwipBwmUN1Tj\n28BscipbUwPw47ItxM/rwIiTiMnFOPlfJWlL+6nltu0AeVo38D5IsLw3tWcR\nNG3QPrA4b/agyEgldrrsQFJBfYgb04/qbIm9qzqXjV4xEsu37p2wN3hRCIXc\nAh7TWK0OeFwkv+8hf6y41+mEflNtpIuOr9EJ67K0JCeWtrYaXHYv5A+XIvgM\n6NxofJeUYUjfzmDMoeFdeIoUidW2/sm75DyyPsL4WWcpEapY9kvE/rxhhkkg\n9JDCy0bWXY2XceN681WtsaNB5+d+gbWo+2xZzn2OV/EX1ua973BH4rwo5oMx\nX5BA\r\n=rVvR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.599b8c319.0","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/shape":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/density":"8.0.0-canary.599b8c319.0","@material/checkbox":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/elevation":"8.0.0-canary.599b8c319.0","@material/typography":"8.0.0-canary.599b8c319.0","@material/touch-target":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.599b8c319.0_1593010625952_0.4475313701465313","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/chips","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.87e3be418.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd223f1dfff6675ce07be6b9d136e0c08229caa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.87e3be418.0.tgz","fileCount":83,"integrity":"sha512-8bq37PL+7rYXiagS0Yzr4wcI5yr0QqXF+5lEepeC4czxQwmE0cOALhPxou2tdfKumBf+E5spVzfCb+WplvQTvw==","signatures":[{"sig":"MEUCIQClBg6+/ZhjGcJ9qAXTyyDh85JJVZWpNddmjDyMwIbwNQIgNSjQ4ooxSE4DHEZrWw7Uc8SFZftKAPBLh3G5aaqgh1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MmCRA9TVsSAnZWagAASooP/Ry0GLVycARvyOVmbslr\nqU/UbKIoJmy0iklrG5Wbah8kZ1xqT7RZ0taQg74EuyCIkErB2Vic3dlwXd7E\nGt+NgidhlO8NadQFGGKuaqj8YcYXt+LJIAUmUU2DO5ZYsSRCRME/Mwo8TiHz\ntn/Iaisf21U4uFqQuROBC+FkI1803BgjPLBWqkw9MSPwXp9Bfwe8l5uUREsV\n4rrnTt8Bz2VqehjFNCPnfV3HisFUFzrwReo+IpkW7ViJ5ArLKQiaCERLy9j8\nK1ngyebd6L7cGntJhyZpe/AqrUsyKO8KMvdY/HuZmXtOECa74N3y6rdgTrqg\nOoqE6FLtXeSX0HDDgO3FdHPmDEwOVu+SxWmm36gaSmDnx5tWXu89nDP0Hovn\n2QRw5+8I9O7jTk2l2yZhMa/dBY958DeEzDv9XXByFMObXo4UtoLDgzWkR5WA\n9+wpVJrMJqKmR0okSRJQnM7TkJfWYSSTk5azUKvraU4muiKBKSmGzUCCcotn\nmbRXLLREP/FzTkeFLQt45rMbKjVm+isJ0/g5zEpfOe/54hPXcU4AxtKwbg5h\na288f8yR1zVnD3/WkAm9D3AfXhffTPAcb1oeJypfJKU/iYcZYUrd5sO32gKI\ngLhry1hk5l69nmnEgvnyn5BA5b8K+/ggCupliibYeG6ZvecWU5lPMSQdV986\nRF8Q\r\n=ougA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.87e3be418.0","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/shape":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/density":"8.0.0-canary.87e3be418.0","@material/checkbox":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/elevation":"8.0.0-canary.87e3be418.0","@material/typography":"8.0.0-canary.87e3be418.0","@material/touch-target":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.87e3be418.0_1593021222156_0.24313258149098305","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/chips","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32a27ca0076fe52a96fad3addd4c49635e7a3c8a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.035cf2a6f.0.tgz","fileCount":83,"integrity":"sha512-MECXAHIRrv7mqSs4wd86Ry0ysOqT27K+lxGnm72CpwjuV7BOiFjz5GWN6528uXjH3wvGppwP9OJDZfpJO47Vfw==","signatures":[{"sig":"MEUCIDH9vSxccU0o4O4bltq230goaXYATzwCE6VCmzGE6UFxAiEA3wqgCXJEiEGNMvUyJjA3HVrB08zm1LIsAufNElFkM2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853YCRA9TVsSAnZWagAAz+AP/ArWnfw2YEhXeOUgCaOd\n+BgZ+UgWEhebrDwnmgK4FckT41AdxnmRVNijRtQwRnCdcpruyroTJwztfFlW\naGljsJBXLQzyQJ+RHzD0s4PYoFYrI1Be1PElFB07Fr4poW6vT1iusUFO/sQU\n0eJokn4mbblQE33nTL/f9WwNzodtsQUC1rs6ObHdoemIsq6ctM/HRBUA1err\nmvACu2cC2+cZInIFzvVWmdqUfNsIi9ZcNCYjoLGp00y1w+oHMPLxXGSzhPAy\nmr1PMI0msN8IyqKBydiom3Id26jlGZx7u6fcDs6y7cYFV5z+Go7QkMLPtUji\nG7wPRXP7efoACgpsEPG4iY11HvtykrRRwsNF2GmzSc4lZKkRZlUh24o0FhIr\nwIamPUnCOg3KQf28k0KFf8SwXk5SwpEF7CQyja4ZQlkTFJJBKz3TAC31A010\nNCXLvv4Ekhf8R0Z52yU8s1svhTwOxqN2+xxPOtF1WPXWjlkli1UPWvdnDvTU\n05Dt/kmFkJJeRbkN7DIEpb+mtn41w+sfRMid8ilkxR+E1QMPNASvks0gZcgN\njr7JSvlAsZXk3UPBYiPNQFrucPxAMLvU8vIyqG1zYO1+qnsQbN8UfFlGtkB4\nKeRmDmfkjAaD2vKUxpe9kwKl8u4hHGMy2Dy3mV9ya46I0Eu6TPYk3h5g0eJc\nmN3Y\r\n=eg6X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.035cf2a6f.0","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/shape":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/density":"8.0.0-canary.035cf2a6f.0","@material/checkbox":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/elevation":"8.0.0-canary.035cf2a6f.0","@material/typography":"8.0.0-canary.035cf2a6f.0","@material/touch-target":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.035cf2a6f.0_1593023959767_0.4914304464365191","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/chips","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b425420da5197d6f56d6876ffd14a22015b28d1c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2fed2c12f.0.tgz","fileCount":83,"integrity":"sha512-sltGsrYbhxXMFxHBoSrZoQIjLoNMFbjcYQaCl+tHU2oSIZ0flVIfuAw3X7ITHnKdODeCCGXfSR+H7nQY7dI67w==","signatures":[{"sig":"MEUCIEOSYjs9bUtUUfbJcWU+RCBi/gtD9j6HWMCvafNywzbiAiEA1sE0MV0zi8Cit6ITeOReuaNrdsUWQAy0ZSuBFud/v6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLFCRA9TVsSAnZWagAAX1sP/Aq+6LWEQJ2ThJ4WOM+D\n2wSX87afoesfhdYS5lWADQ4xg+i4/75gshGfJIF9RdKoTj2/xNTH/JCpaq9B\ndZXUTTzfH2OFfqYmm7jlefD3goLBbVC9109o9wyKvX8j+sHaxfaiIBmNLAei\nIOOX6QdE9JRihjNAZvJvOWIMLcMnnReaMPeaoMe8FMl/+h5EdCoj3KGGsxFt\nEOXqVLYzNBHRa+gPfSojZWTEFHLogfytMKNYpkbbgCCV45ffXXub1aqyP49q\nqSEkAG3KeLoHI7s2qSVRINDJ0e9K5ExryXZFK6MFYcLaSdbhAirwrlWeJUdB\ngLQPfSrKKKCCvKqv7lsKmIn/dll7VLLjz5eEKdJQGgz8DQElFIaxgYKUfOVo\n6Upp+HY4bquvN6EsUayeNPABXLpRVyg+laNy6Tj8rw+Zj1NbRkY2GDO8uhC2\nZeJHUcXiryayzzt5CUYRg8NlzmgGahIqQQJGaTHFHIo/9JD2iVDEjRIUnj/9\ndCgpV4iTlUiXjUxzLueltdDsXPvQ8bj1iLLzEOExwFC76E5GsqZQYLDSMwrp\nMLAlpoAGGs+OrqJ//RkRQa4JsY7tzb3hIqVjMExFpbVs5m8nLg3+247ZJIHR\nU+XYGFABx+CZvj30ZEy7ElEkQTI0D8mcLiCm0kBa/MljXsrespeFDbCrOyZX\n5sfm\r\n=YNdV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fed2c12f.0","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/shape":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/density":"8.0.0-canary.2fed2c12f.0","@material/checkbox":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/elevation":"8.0.0-canary.2fed2c12f.0","@material/typography":"8.0.0-canary.2fed2c12f.0","@material/touch-target":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2fed2c12f.0_1593115332634_0.5334379850266235","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/chips","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.38197b443.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82dc131c8b0b33f00e6fb5723114b899bfc31842","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.38197b443.0.tgz","fileCount":83,"integrity":"sha512-RBigowO75T6DUbt8mCKiEPdUnOGsWRpMNB3LPxeD0mJB4JKnBtIgQByL877Wt/yZ3+h+WSkSrzhHnyINaDX0TA==","signatures":[{"sig":"MEYCIQCsc8tI4gTw8vYH9sXdsIHkVUzHeX9gn1CmSJuj/p0G1gIhAJf/6D3K0BD41kpo+hvXHozm3zutJM6ViJ6aQce4YCWZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RW0CRA9TVsSAnZWagAAVT4P/1Fphlw3LpuwHNCRs1ho\n1SHQGTFw9F26yFDarrVp9r0NuVhTx2DE77tUm3oa5ayVbCNaaruK5GgGlw+r\n0EgvX1f0gWqHSsJjBEOm9ZArVd86Lcw5fsGMx0ZNYVarkac5QP8xFgZoGxeU\np5jyPFCipSSsTh2cb24wMegwpTXhu017eYITMR9RbBUKg+6wmJmllzU7Nfjt\nvSg3J0Y2SyG30MG+EMZTDSlvz48f2CWMZDy6h39SjG0PW+f1JE8nc2IY0CBD\nhFNjXKWMCtGTjMLRwqWhdzXty17PPaWIUfRo5LXBTbygoydIETAaxF8XDTlG\n5FEqBihpPIzRbDxnIwLvkY8zWeBW4U/V/pQto5VKllwVc6VuXZg5mII0G3f8\nXkBwTxqFFjszHVr8g40Wqy/oRqR4/qF5YwQB5MluCv4BSQGKd1wYODeSxFuE\nd/kXkxoG4LFJC8u/NER4Ir+3aL+i/+Y8tC7WKbh+CI5pX3PZ0psW0UGRyelT\nDIkb33xGSbRGuYn+O2T7Ot/o/QafCLkxRxxlj+hwuvkZP5/PTgac2rCfoFmI\nZnEquvTSF+or/mwrOpoGMfW+bJhTlChSnFiONNaKcd1PpkTkTZwOTJ5ADvnU\nMnAI/ZGiCp0GKM3RVAa1Z0iujsg8TlkNu0LZGCBy/oNmI1v8PDG4EyPR0Vjq\ng1h2\r\n=VVgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38197b443.0","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/shape":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/density":"8.0.0-canary.38197b443.0","@material/checkbox":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/elevation":"8.0.0-canary.38197b443.0","@material/typography":"8.0.0-canary.38197b443.0","@material/touch-target":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.38197b443.0_1593120180206_0.5981345919029948","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/chips","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a5512172b5963f5c64a5e916d6d96361232fc0f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.69a35e80c.0.tgz","fileCount":83,"integrity":"sha512-nqHc4i9pjEeDqVo1ojqUIz8bxoX/fVXXRgc6dCsXz2y2Pf56VaHkErVUWDfAEaD/OrWTN9bkw8dtHo6arqpAxA==","signatures":[{"sig":"MEUCIHgzthxQWgEmpGmAA9awMmvM/e6snnqsWT/CO7mgAZhVAiEAmo9lKvffTUHXmoZHymvz5biw13gGh5oVmx1lD82+3tY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLOCRA9TVsSAnZWagAA9mMP/0tJp4qDu8qHojKuP2lu\nZn9SqIi/0XfdIv7lBQInL/2xShMUj5/PekYi1b5MfM1EvNA5Em5J+X9GwyWR\nYiQ0fnTirl8aKfmMoyXDpt55GH4KLlLo0CNOCLN+q8fGw/LuRCx5OSlYCjHL\nSFaUBVVnRD2Jbwd11IpLgsPhIleaEhmtni9XJkv3eRaUn09iRrF7CoI/LwCt\nmJD2Ekh0ApPE5LdFC0L7euqpV6de3v9bJ4LD7zZLaR74bynke8e+vcO1eqa9\nkjnyzUp+cEq3181o2tXucTmB/ID3NeFz+Lz08jm+KS1+GVGxX0ikYuHgWZXm\n091qUscu1RuRaD1GX2wKsWEdMKYXrZhIzzqmQ9n5OlGi7GqjeP4cIjvzLIFy\n7eCuk3XHDh8VjsC4T79A0qCxtqambLp+hGvcqxw6LEEeEXrvheBj/FdhGpmD\n4Yyj5ef8dh29tBQfjZS1p/5xra6zw/99tIBuRNWEik6oWgwWq4fBQHCQHBBH\n3NSxwX3AcswPGQkRdukobindJKrhQvbKCDZyl+64YxpASzZPmOiOS2VE7Nd+\nzw8v9hQf6kZNe7dd1IzYRZ9yRhSjbLQEYdYqme/+BOoUETdhlCXdv5UtLnbA\n9yj/QMQBwMgIY+p2D2Njm0bppW01goDLthfPji0NM8X3Oouv0u7QDsRxmOcF\nokT/\r\n=rkdN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.69a35e80c.0","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/shape":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/density":"8.0.0-canary.69a35e80c.0","@material/checkbox":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/elevation":"8.0.0-canary.69a35e80c.0","@material/typography":"8.0.0-canary.69a35e80c.0","@material/touch-target":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.69a35e80c.0_1593193166316_0.4985895919650458","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/chips","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7947851d1bd0452f57cea8397c17367986efdfc8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.df7154fb3.0.tgz","fileCount":83,"integrity":"sha512-VmG6SB0IApqYTIPrcYiZD+momZ67S86IyloYhSLKIwh6rVxWmb5hS9Bc0sIm62vhcFNnaU5dtUSJgdC9ohiV9A==","signatures":[{"sig":"MEYCIQD3wrhNU+ggxSZpxqCU/z9PEH965XLQRAmgLKesSxEzagIhAIgfY0hnN9wKm4nK1vQD2KeaR+p8Na4FoLC/EhXAS1cf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juqCRA9TVsSAnZWagAAGg8QAJPGgptDphIeWs9AH4Uu\n5LE9g24gyaHmADIu5BMsSiWxQhSKYMzo5ZiV+guF+vRmUnDEzOeQlcudyRZF\nQafjRwAr7nXLzTDpUOx4PRRcE2MzmYriIBxJOii7B8AO9raTKfpDuVS4ACHn\nyZqZTU4CA3H2jIVGREI2/OzEFsev2cCD0+uFBgd+BFd+lKbb/PWT9buV4feA\nt4Y4vS3xvnMxNgIRFWOCrCWyvumvZNi38lPMp1PFNOUX7SKNlZoQGEdJFoXs\ngpCcvOSLvcSDsgsUsldeuX/atii6BGowpgvkEOlQBWLmendcPuyT63PKymGj\n+Dp/V6X1nZXKfjYiU7OuazTx0IZC8LrMgB2l3ij9pztf3HS3qS9bRkiI2cr/\nEfumC7XAoMEnIdgc1CFh/7ILaFYZrSf3MP8x3EgrHCJEvviuhJ9UN9FgNb9a\nb6pePDEiHOrmvk/6NO1TgjZAQGCa4b77MIewLW4BSz4iEVZtxsEpXdpzTwM5\nSgkFCGJPsH1F9Shi4aNHar1GShUXFbqPPBicbsZJdbK675SZSElg5KuOGOtG\neQKtyIwccIwD20pHpeGOCNnyKwkNO7ZwmYDJD6Le3ZJxDqHGZ3HvqExaLhiB\ngl92Xdl8MpAt8C7AMyLS4PEsNPX4ujBi2GRPRBZQivpQHpC1MLLg0vFBq8Xk\nsok1\r\n=1nqc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.df7154fb3.0","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/shape":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/density":"8.0.0-canary.df7154fb3.0","@material/checkbox":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/elevation":"8.0.0-canary.df7154fb3.0","@material/typography":"8.0.0-canary.df7154fb3.0","@material/touch-target":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.df7154fb3.0_1593195433792_0.462575607768674","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/chips","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.d5618602a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7812ac5955c61d9061779a98fa35b12585f4607","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.d5618602a.0.tgz","fileCount":83,"integrity":"sha512-t52WxLLUQY1b1IRxpDKa7lGRUIZXl4+GISEDmZlyrfsiDoRkBKKnyjOw3YbDROpao/YTnIgIBrwbjOS9nLg4uA==","signatures":[{"sig":"MEQCIAGajgsso36DPuZIfIhiERPYYqa86q44JKaWr2yA0llzAiBXCZX1lsP14ExF3FkgycmUnwA93Pg8noWvDozIN/9gEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m05CRA9TVsSAnZWagAAULoP+wYeH/yWzXQhgtq6Iu2g\n5lyFB2wGo9EZtNJmkNPAWFblLDsKBlERVCAdkFgmjsb60vmYkTu2o+ZS9nUA\nwDPGcUkpQWEqCyudRAPnN78fOTV9aQFlqJ6qL0xBg94jcM3E5VyhkPVhVOjf\n3PjHMrmYEs92/2hGsOHY0NIx99k72qnuYsdKWtUvrfATYT6qymjHdx8pjDAv\nGpprVgTt1tOnZz1MnL78a9GQ+NSxExinNcjhr8nA1n0Sx7RL1EITluwq2bsj\nGSoOsfVPlo2otiU2x9cirLKkAfo1SVgH7WtAoadbhpI9sg/SW6D8kPTp5nXK\nF7Gq98oNBBbZe0CDLEK2Lkl346U0Taulh7fRe3woYNn0d3PeM2O/slztKSZK\n2q0AeDmQJhe3m6BAIhWAcL6L7KlVkz1jUtG60N7KNUP07KgDP8UgliYAFP6u\njq/wGrARsCVsctnijQWhAX07pb6Zepdd8MRbGnewudfvVGBiQprbL8W9POQh\nW0s5xmtpbVf0E6bqj3C5uOYIUp8NC9fP2QApsmqndR/oGZx5OFaJePQpMzFv\nHDMvU5UV06fewl0tSmcnExwse63x6olnWqIB0JkVlhSkBnjBAx+x+sZChDqn\nbZZCJjyZp0WRE5A1KQFnB34i5R7RzImtUWJ+lY2OM4mLhgGAcbMvDcmGGpvj\nALMB\r\n=wp7b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d5618602a.0","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/shape":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/density":"8.0.0-canary.d5618602a.0","@material/checkbox":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/elevation":"8.0.0-canary.d5618602a.0","@material/typography":"8.0.0-canary.d5618602a.0","@material/touch-target":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.d5618602a.0_1593208121039_0.8174882028737742","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/chips","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e590b376b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f1966f9767bde9ecfbb42f3b01ba80cba13133","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e590b376b.0.tgz","fileCount":83,"integrity":"sha512-2J+II+zaQ1qOO2bEMx9x0QcNnvhaxzp7X+l6lIpegRzACNO+xelbouzEweFPDUxPqdIWP8n8LM4pvWoLsexrcA==","signatures":[{"sig":"MEQCIB9ri/br5gJby8W1mdRqlM7r0VxulRHvslHyH97zD680AiAD7EkpYVa9nNvdx8TqP/tACnHYj/UVVrY7hp8D1QMxQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOTCRA9TVsSAnZWagAALqAP/07Z5uPI8DqlYro5kvY/\nS+FExilnYS/OZD7Pmptb3GmMOgQxj78OJQrYebKd3UGfiyt6aJSkF0jfA57Q\nLZo/dP7LvNXmqkk2UzoSg7T0PTl10L6EhGW4Be0Zlno1lSeBYWEkB/4/ymZr\nCpx1yqK8rOif+FXts4zyuZKLI3Ku0gJpupy6WKy2Y0Hfxkr3nDUImXOmU0K3\n5gk8Ijlt1C8TeQjH0tQchgiqmri7l8KhiqEi53qK0jUAdBYZtB3pnZBqqxI5\nCiPYPDZsyT/CHOCt/DY1e9hcPodSlIO3PPseIB7cGvAAg3f97ZwD5aDwYU4d\nQuSkBZegTQZa8F3ExzM+8vfmfzo/tkZA6v0VWsyLv7lVRckOOWu+ZIx4ABkS\nrFXoxFWNxk7Xo4Snr2L7TtmZGxU/674p+Ed54JXqf6m4PD27cA3CsdXQJ6Ac\nSV0oXKeV3lkzUH2lGru6G4DgYk7Nn96HuQI7MneRf39mGCsS+ktptMEpl4Pu\nhWyJWpA9aRH8bweN31LM9OKF5rQ9gBjregBxDox51JjE3/Lam/n1MKHwU+fF\nQHJLz7WFpdxSMzDZ5l/XMVGFn87N2MCfWLKR5yX7dsG7gHaKZ+hXL87cAZts\n9plqXkBg6hcblGXZOCr69lKLWfRbLD1tWp3v3NGEdCusBsVzaUa5LiR1FOYY\nkQAw\r\n=svK+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e590b376b.0","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/shape":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/density":"8.0.0-canary.e590b376b.0","@material/checkbox":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/elevation":"8.0.0-canary.e590b376b.0","@material/typography":"8.0.0-canary.e590b376b.0","@material/touch-target":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e590b376b.0_1593213843360_0.6672585751377509","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/chips","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aab3c9fb1a490561b8c49ffa514c472bbab512bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":83,"integrity":"sha512-Rd3OoM6BQVvgw1OCTR5UBjWCehJeIMG6hP+FAO9dPmIeJKb8+7ePyAQiDOEN17DocE2yCJOh11q5r4+spio/HA==","signatures":[{"sig":"MEQCIGDDImkdrYtvfFYyLWaIWsE+B7ju7MlUlJ/AJTCO+VWEAiBtjIZEcCjTFJav6w5E9gQ8Lg+/DatJZY7pXIywoLaeWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHTCRA9TVsSAnZWagAAJZUQAJwWJX0KE66gbFQHE6xO\nw5vMaqycSjx/OVS6tVt6BcdFyjSvTA4+9EApJlT6u50/j0SNHcAYieWPW8Gm\n22KgHqdqc9aij0FrmNjq8Ti6H3M4AxpsyrXGEqAG6hhnS0O7vVl1nuPeHWp8\nIFhsfduuOODjW0N1mqsk+X6pPmwMaEbg8wSLs+PBtpwSUWovjzaMzOVZgs58\nl+jpLaAFPEd1I0dL6nJO4rWRTrEAJslpA91LwHemLSwvp4kjRfVTwRaDRla6\nfI3pPCEMSJUUl1ZstJrokwvA6ZGZPVYiE15g0YMk5qsHE878h9xpFgJZ9MzM\nv9Gc2YR4+8qkFkmNi0SG4vVkaVKnMYWmoFRCzvilrzmq9MjyNrDqtZq5CW6Y\nbYrZcrza2Sm+59ioJYYab7yL1KSs1F7G8sirBAOuUJeRkiygTGORP7RIZcbp\n6Qf4ez5nA1jPrQaXSrzhC6LcYrB1EOn0a7RG1EHoQa+Xgi42cgW/IW/gxCLX\nUYOqdQH/Tp88ROgOEWxhH0Ogp6SkBhTDpjbP6zJG53p1sdOGj9r0+e/yPLJA\nrjbR2St4XZc2OH//TZFSPhlzsKzlWGnJywSTxSUKouZalaruyBB0+jcFxlEV\nHhnL9iJh8PzxHE2qth4OU7f2eJFAs+G4yzc7P1ne3lqVHLKGhIEv2jSk4pCK\nuz3a\r\n=fA6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0c9d6bd2d.0","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/shape":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/density":"8.0.0-canary.0c9d6bd2d.0","@material/checkbox":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/elevation":"8.0.0-canary.0c9d6bd2d.0","@material/typography":"8.0.0-canary.0c9d6bd2d.0","@material/touch-target":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.0c9d6bd2d.0_1593450963245_0.4637072617856979","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/chips","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dac9aced81c083292ee60afb149e61063a1e322","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.c1fec4246.0.tgz","fileCount":83,"integrity":"sha512-At2/+k5M6pEejZql1CWnCa8NkdzH+xF0fpSShWQLzcsm6mh1ZHfjhNw74n4zOAcxAnmzvDY2bpDdyhBOAfJhgA==","signatures":[{"sig":"MEUCIAC3197pD5B+qXRrowhNPoTU4deXs6bhrFs7PN/bD/oKAiEA+2d4j15qQUZGWBoMcNt8zKeL7/TzjRtFRRkHkeA7VHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iVdCRA9TVsSAnZWagAAEMoP/2eRXRdhSfikXDm4flak\niXIMj+6PzUAbK5hcl2dhInzbeEIag0MDOVYiGBvra8a9tZPGfyi/iVz0Muhy\nAUC9a6yMH7ME2A6GIsFJiBGgYhwvN4PQEuif6RtV7CGZmRwxvLIFGdf8E5R4\nMWySUt1slVzcdqTVYDK7n4oOWUtCWVlZTegtq0Fm3pSjTiLg/VkFjklLGJnD\ne0+UGNwyokYF/zBXkXa+ml2pyc3w7J4un9RJQxIi8gWt/DL8hAuBLd3Q4PyF\nwQChtM535ycVQHsfliCYmEb2f++hySONeB2lndcyET7ft0WFZKXVz7GKy1ci\n21BqmOB96gvPf58WFNb6h5AUjDPNeB+0j6Jt5Ek0qNckOpJugU/bYbTCBr7I\nF84Z4NGCK0unBoZIULcloFc94gPhRvPhecGCiZ0+wxs3B3jWRcshX1zgcjHO\nXivMT16IVIg04NzXsGlngRyz2LA5GUEsJQZxuX+C5Bu69LFHf8GiI8NC7oH4\njdis3nOKunrQ2Yf3r9CeuTzWXilC5ff4Loc4cBv4TrV5rqDm6nR9T5K3F3hk\nFZIWMMzzVCFyX1XLzuPH6VvOyEID+M8hmkDwr/+WtCYNnBD3B7CW18Kr3KdC\nvUFAlq+anVqcoK6BAP2SPidSj+goIiag8+2RxVUAqrHvd8mwj+i0/DoEfu5h\nZ/Ga\r\n=ZX4t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c1fec4246.0","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/shape":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/density":"8.0.0-canary.c1fec4246.0","@material/checkbox":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/elevation":"8.0.0-canary.c1fec4246.0","@material/typography":"8.0.0-canary.c1fec4246.0","@material/touch-target":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.c1fec4246.0_1593451868975_0.8720189377762648","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/chips","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2c28c385a80f8be9e1c28e99cd34b6386a7b738","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.c678a9d34.0.tgz","fileCount":83,"integrity":"sha512-H/FjdzcAU1PhuFltYrWLOTbaH6ouyVAFqlXkVEY3Syx1PvCQWGc98KF+Eetw/cta03CejQ0YReAwmy/nLmFicQ==","signatures":[{"sig":"MEYCIQC0Rhp3QTs2iOc5S7+p/Le0dk4/qveJyeWsXPNnwHDM7gIhAMnHc2vw6S9UNP/0K+ZgPNQx+PtSB7HlCM5PPxK8dvnF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ipsCRA9TVsSAnZWagAAkr4P/2zfNQGvTT8ncJp/K3Ge\nfCV5kt4Udc/YQp10Np2f2Y8ZtyUCbQWFZP7S9bvuYWU9FhWZK+L1LkUe624I\niB1AALMxChksdY1Q9ok8hwHw0R2R/1d6LvYgfZ+GgYml0IqhSDCoXgtZwej3\nV2Gd920UHOdCpRZWw0ZCmTAoeGx73CNbS0bzA6CDzo2TDgGZh92Jc/meeUP2\nuYFH0UyLVl8mfHBE5om0efy17Rtb+ZW7PyNH4IgfbnMEChv+TQzelhloZDR2\nWvhha+N/D+nwd4CTI4KW+CQ8c/9ggLRw964WllT1yID3Cgk9guruQ3PhzSiW\nZe2kIRNNMB3YYn+EtwAVmyGdHAQ6kv496OLsuMBr1dEYcZyLPuQ9ph0HoOv2\nsUk6+diD4m+XZPS+PwYUdeyBVINxBDVdjkAbKdFJa+Yr0JLs+5ye3lSbFlXm\nxccn1LyAtbbiYwqEPjrZyWDCNLUR/gg2IUeqWNWhOQ9qwxTYpPrmhOWzftzW\njIXyPxSopmX93MSPESfgzLnOb2sMt0zpAAy8uUPt+3MooId+GcgghGTAVLNO\nc4yFM7JOMvyEoLoCr47TTdHw+xwvarU7NG5Q7StZ3cOR6Ybmv6fLv88BCPac\nSX2t4eoIOp2/bcQUoISRN8ZWYL+iP0/algkXkAThfUx7d7uszyfaJ+KCufXO\naHYQ\r\n=MnfW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c678a9d34.0","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/shape":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/density":"8.0.0-canary.c678a9d34.0","@material/checkbox":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/elevation":"8.0.0-canary.c678a9d34.0","@material/typography":"8.0.0-canary.c678a9d34.0","@material/touch-target":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.c678a9d34.0_1593453163880_0.3740021968356262","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/chips","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a39fb20136e5425e1379ce4283cedc4572aea96d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.521afaf6e.0.tgz","fileCount":83,"integrity":"sha512-IxXXjA+asqFqmB2MNaFFagxtqgmOeECQbLb+CZyvL+MaErOV3mlR20oRop+2WHDAT9oAqt9z9iSb9DWxspEF4Q==","signatures":[{"sig":"MEUCIHXTLBmbgIOhOtKjVCVCSVDFj9oMNG8LFtHEy+ucVVEIAiEA1ia1KyCgPWmyCsf84+P4zFpBnYLYdWaQjTvTJHiKLnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1TsCRA9TVsSAnZWagAAZhUP/jumjPXq1x0YRb9dguN3\n3wywr4EPpO0LPihpUBeWbjUsp/fxfNksYn8LH/+zol7Z84Jrs0bo21tTBri/\nvBoLfOkE+HL6/o7FP/CNVX8mNPCrazt0y72WJUEhbsTmAruvJscWCGIOla1X\n6VoARoAaoxNmviey8+gw4DVmFtv+23gNUdKEvjZs/nj6JMWyfoAoz2Tqhftm\nf3b2g+zBU7lP7/aXlpAI3/9ObTf16pf/hAGTCzCQ0CifBxLlXjxnnMb6sJCA\nl3bKLITHKLCopSbe1aSbRRqI6R1aD9OQ4doR0wT+VGRY2Z6dfsear7qq/a+B\nrKcDMMOC3kL/uq04p2pwI41waPpuCpkVTR+n/Q1Jokh0E4fzNFVYs9TcMtWy\nTFXlEo2SrHnTCZkwCEQLt9GfE7JOhJiLCtmVkyy54s/tqeEPS7KLRS8Fub+S\n6YvaTZQz/0ZuQKtXKla9vBdO4wTsWnmdFiGiMEnDmv3hsC/g3gwMDjR424PE\n2QrbjdIm3NmN1y3ZVpdahRSqwcbopTP77sSIED5M0cmwwDD2mFGTG7t9l8iS\nZsFWdDPtMrgHgiRj+Rhhb1mF9gIU0xyDSIVkwehC3/FBkgdJlLgyMJ0EDRaA\nXUk8ba0hZziP/My5R+nxV9vR2Pnw3T5aLOrp7nmDpWxQkwM1+9xPP0aflaXc\nqQLY\r\n=+4in\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.521afaf6e.0","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/shape":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/density":"8.0.0-canary.521afaf6e.0","@material/checkbox":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/elevation":"8.0.0-canary.521afaf6e.0","@material/typography":"8.0.0-canary.521afaf6e.0","@material/touch-target":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.521afaf6e.0_1593529580491_0.47691455370900204","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/chips","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0a73e366985a1e3ce268924c55aec8e9223fb31","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a2ad48839.0.tgz","fileCount":83,"integrity":"sha512-V/Yx6FPLVRgcZg+5gkvhm9dsLM50aYiSrghVJx1rO0wXzmP0wl4Q62dQulAJXdQmzO5gByplVu9/CFQJpaSUvg==","signatures":[{"sig":"MEQCIESc1N+FsPmnzGZe0QZ9eCEiasQVaT2l4Z5kWNTiarf5AiBxy/s/PD4p82F25UGeYwzNFma/TR/CIzU0GuSStrnwaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+49DCRA9TVsSAnZWagAAdskP/2HTvKGTh+Hd8bEEuFKa\nWp4n/sl4lopgfy9eC6SjKhx3nxLkyNPTPc4jo/geiomZvN5/lWjjatO75N5X\nWBgMFyks8RveSInBUgwzyRx55tB7UfApOxYcSgGGPiwpAT2PRvOpTubJhfSb\nenzYTjDsvc5P/kC1fzmgaoW3a8+8YqDV2tonyVaF5x6J6gX5iCCI6+SNCEpk\nqYAjvPKDYJyMp2IfJlAgCWyi/m/yOwl8W617kTtoulSurVroioRURDsbxgwI\nl/zP6B+tCoto/L0p7wkkZYqRIjyYLzwzxAjCAU6DGDgaSGLmcB/n7GQJUyRc\nN84jR1fYNqoLiG7/ALsBkpZN9KuLJO59/1QMyDM4NcQ0hCDh2lxyuLJgWege\nRYO1ZRvL1H9JVBjvcHllZ5hPr5QcHSMVpxyWZLkGwf5ZtfbdcuXtktDpzVrr\nhEyMspBo5r8kvVBfPNI/VxqZu6MRga05+bxl+6FdQvuCIq02OIpwK4xh6dd3\n44whd6d36mGTPE2vF1qPUWnA1ZIth8mUl4V52jVbqLXlK0TXzAKqUz8xyysW\nK6Pq59WZhJnfnan7IJOrgPmTc6+LuSexG+FA4onuCv8fKH/c6U6nJIilM+g+\nVTNejowPYR+OS8+Qon9A/lj7q4Q1L4zXugRU49UARLrl2lyJmuA3Qbhzm4Fn\nKgF7\r\n=X5ot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a2ad48839.0","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/shape":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/density":"8.0.0-canary.a2ad48839.0","@material/checkbox":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/elevation":"8.0.0-canary.a2ad48839.0","@material/typography":"8.0.0-canary.a2ad48839.0","@material/touch-target":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a2ad48839.0_1593544515583_0.42791120963329954","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/chips","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.ec2385881.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efcca15faec8a1de422a3dbc8f14eda54f3e9e6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.ec2385881.0.tgz","fileCount":83,"integrity":"sha512-PtwZNJ4oiHSjlxrQYMWrI2FJHRa18Uu/GbBDybQ9l2cijqp6oUn/YzRUCOM/S3Qy8kod/lHgprpZ5u5bfNCcFQ==","signatures":[{"sig":"MEUCIQDUhIcUscDWKAq+JXISMFl2kl5tFXoKRLe91obwOBQvtgIgAo0HKJK1pyuTWtkN7VpSL4tKOyWQfJF4aZtrSPp7zag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7MJCRA9TVsSAnZWagAAD0QQAJQKNKUcWYDhyI0rPQ0N\n7pTIay3R+BrT3h1UjpKD3maiQ/dh/zPYSAZNZ28EeIn6qO2KhtTqgd/jgz8d\neQ0Tp5xaMJz7Yo7Vo6fvZ2rPTAu2wygvckY1ZNgxqpmoAHaMJ990taWNAcbL\nQEQq6c7wNZLkRW0kyvPv2sTKc/tBks2bSzRXlvhEEYMgLWonRKH5tsvpnoE8\nePaox1WyGhIZqZy7a9TgB6VGDQjLRb4xEGidPtOfwYdpoiymvr0Ex3DkFJcX\nnYwEX9cEMq5kmWXck2uYrph0MkTmvn7wULiZdq3W2zoT+SvrwtPjXCEbX3Xz\nZTa3z8NJzvmLKsHTvD2vzP3gbITG74wyUzHGSfw2o6iC/Vu6XVI2SpU2HU6S\nF1cLXpuWwo0gz5qc4xduqPuo3Jkyeh662oLZMh0elvXzWEjrpMvzeg4+STUz\nm45BVS5p2wZPaGLEc7QUSbfzHkOgaCdXTr0lkXtmObSEWHrzwZa4hKKgT1hg\nVELlsL5odYjP/dO8nE9Eualbzlpj6QpxWI4/xMhRSFfNiRjbJ1kDw0xw+u9K\nZUlmwYmiD3ANbhNFcDGoNAzVtBT+NpfsA9yOMDqH+Nv7aicY3ZI/dCV6Ao98\nvINt7/604thY01daFY/x2AUdmSsR5rbh4mHInlXowsFrQBnzJxEG5Qa7emgN\niaR9\r\n=3eYc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ec2385881.0","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/shape":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/density":"8.0.0-canary.ec2385881.0","@material/checkbox":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/elevation":"8.0.0-canary.ec2385881.0","@material/typography":"8.0.0-canary.ec2385881.0","@material/touch-target":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.ec2385881.0_1593553672897_0.7289326598244465","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/chips","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edb833c5724817a8df3ebedc22c2df92ee579b84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.610c26c4a.0.tgz","fileCount":83,"integrity":"sha512-p+bqnPnkPQdESxrKhgnMm/GgxJxcuQyUNsWwcym9PXkTQG4GXUgmPPzbP4XZSiTCDZhGVle4JeayRoPKmZdCbg==","signatures":[{"sig":"MEQCIBUnIMhKSNx8JKqusl21Kyls9QF3WVt2Wbd2yzgFYUk8AiAOXGungU8eSE9GEbdu69lMApX/Fo2rvqvxvEOBY5FdyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQrCRA9TVsSAnZWagAA7xkP/03p/oNPPE+XpT5btRTY\nsOyApmgWMD1zIrxpYrk0tskZ5ltBbMd+56l8CA21Xh/ZyZCse+c072X2bsj4\nHFk9lR8GXNrbFJBlxzwX0ZU9xXE2U8wtX7aSYMhxYYOMnJL6Qqs9g+py+8VN\nsHouOdnV7um7f4/aXf5ChWJwmiQGJK5o5rOSf8vWUT0bxn/ZV6zKbu0b/d5g\nmVYd0gMttqf6ESt9/2edYVA4dVWpvgDtcJlH3ZLmm+WsaO0bITp2N0CzLfUz\nqgwdM8DXnbB9mVjVAIzVsuNVPK2kh3mTAz0SSkgn4cJvkrzQb0kep5uOErcu\nyQlQOPUi7bdzpszdXtGARKqrKc5EOKHmGQoS8sQiGaLXicd7Gz3CJT20eiK2\nwEv0yOOQtmmKW3smwJAwo2LRAYOUsFUnDLeLXN522yFiiENWCAK3g0jupcO5\nekTEyFrmctaWzGCwYkgNwXEHFEgPjYpA8rpDzgnVprYudI6O+qE5k6gtJ8Er\nVIjOf9IUG7vRZUsR0Fm7KAKdRzt+MFR/Rc6VsycGTbnI4gqQ6nN3qLr6n0KL\nNN/cpd7RO6LrmZL3r4F3+I7NRrunMiwFGPOa2jPqktddaPtMhpO3JBoQrLwI\n2gtU1/0YUW2TBxAKaeJy7RU9TQ5d9T0K7gry2lX3J0LRVEnj/WcAsdxrv8ab\nbrUU\r\n=LCr9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.610c26c4a.0","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/shape":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/density":"8.0.0-canary.610c26c4a.0","@material/checkbox":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/elevation":"8.0.0-canary.610c26c4a.0","@material/typography":"8.0.0-canary.610c26c4a.0","@material/touch-target":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.610c26c4a.0_1593615403170_0.2904319162538278","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/chips","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"302b29f5a812ec10362d57a1c0c13d01479c7464","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":83,"integrity":"sha512-Ij46nVck4/7Aygyq8c3DAutLo9+RgGyrYKN6sEFF24HyJRGvTu6FKiJPFapRM4XAWgc9au1oBU6dWmH/b078jw==","signatures":[{"sig":"MEQCIFxgnlzd4VY15RXe9BUvayAYzQ2mTb2K0xnMQE+Cqo1yAiBVkCiOofBmfYvtMYNjeIze5DVfb5HEOTdeagvtwGGkBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OO8CRA9TVsSAnZWagAA0xQP/3xe61IbceiU5rxKz1K8\n9Py966Lbc/dspAjMdw5deuYj4dLC4i7Dpw95T1mlWfI58THLZAvP8gmnxMTl\ndQ3YyM0dU/WsqOoHekEqb5VDTJLqQ0+td89o35qj86FiaV7MyAGaCvX/eNPy\n6Gxd9B6Bm8kqxSTdyFyzmRFEtrUjuVLOVGqZ1x/M3IZzYQvsr3oM1P9YtHo+\nYZjCIHkXhMI2O34YNGAIf0gp0bvt7DWHxnjQUgVm1xqQg7AEu6mA2xwVpMNe\nVY+qJQ5j87kmWAjnbtIpOIHSUwljB1DPScscwXnZEJspUcjUQUvwSIy/3OmK\nkObpgZ+7NXJJREo3jJgAISXRGkUcCaUNhQz4KFUC7PxMoA5o6493V0kprd97\nO6sMJLz1w4r7h4yIzNnZrrScNCez9SBU3FRTTUFLWIrMJEScnL23ilrO+48B\n528rOwtWWC03dCHSN8NPnEWneGTrD2Z1un7aJlYa/yNeypqWU+y7NtlRUvo5\n1i6WhIMZaankjGHRlm1/8IBX8NEwxnLFEYZ+wWpckr+zYA73ojbNoujHiKJm\nlt0heLgFUyJkLbtPudYvXIWBru45sP9Egk7h2yBc2bXVjCnRKYa3KVF1NN5j\nPzzTfgO+m94nxmbkSmdk6+0WfvrYg6M3vJTDSjEMZK53ZRwH/FD2AzVgDj/U\n9W5g\r\n=PAf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2ea4a99e.0","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/shape":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/density":"8.0.0-canary.e2ea4a99e.0","@material/checkbox":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/elevation":"8.0.0-canary.e2ea4a99e.0","@material/typography":"8.0.0-canary.e2ea4a99e.0","@material/touch-target":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e2ea4a99e.0_1593631675524_0.6928545788676304","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/chips","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1d9e3c5b5dc34a70edd669048a8a34a5e390964","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a78ceb112.0.tgz","fileCount":83,"integrity":"sha512-ZZYTMb4CP7dSy/8BGpIQu1ejFHJv1/tdLxAWEDXI28OTTka3H9I74SExUkC3htqpV22xfWjSUZt+XnPMzIqffA==","signatures":[{"sig":"MEUCIF+Iria2t7PKDDOvRehb8kjxJhG6K+6pJDorto0nNLLzAiEAs+LuGjsIuw7qUeabbHiebS6KZWTDDs4HE/Vi2NFjrKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZ7CRA9TVsSAnZWagAAL9QP/1TZBggLkjzFhIG+O/KP\nGGsYTWyp5NUvm92nqGh6jiRnu6RUeO8LUTo0RYROp9XI5D4nlgSB/R8ymdNQ\nR7HkOS4Yb4S9SdDEfpWwD5cF2hJEAQseQcoTQv6I/5B0e0vQtRZeCgkKA0ly\nQxObOr+Qcpr8IycSiwssMM/LtMEEAgvzymiIYaCVjQE5Xt50bJkalEsZc1qO\nPFo7DPSHkkjD0cuMoZ5h464s0Kuut+40Hk3bcZACYl3QFMjM1BmORNc0HgWm\n7YVqkAA6FFuwAF9HYM/XUc6QcmgzfDFIbTBdgTBqQkuYe6tjrn7648Xvq1+U\nTVStdLMXBnvGLl9L0jpg1ZuDbSOGpwZvPLgUpe7TQU5xCJ5SNBfJi92Rc3RH\nZSdkqYiD1+c9yyEjb8Kxf3z+dDGyqG/zUHITr6trCL07qGtGck6MzChWXFTq\nY4LOI94aPQSxxHFE8cseln3FcxA2wOcnFTBxvjD79g9uTkX0yDUNpIqQnVuB\nEN5WBjTvPkE0oDWF5H1rKqiWMZuJg2XfDSfMGIcGnCaAEf8/QWqEPgmWS6Tt\nO7elzM/xogeMR6prCVT6W/my2Y2y0uCLhqY0OvyRwvqRGc19et3JZBFiEMQN\nVyjH/TlFpUzn0MJUGLSGjuN35X7Jk3htJ/ArVZkTTxhxBleAr3YgGnd5mGPi\nkEgi\r\n=7X57\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a78ceb112.0","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/shape":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/density":"8.0.0-canary.a78ceb112.0","@material/checkbox":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/elevation":"8.0.0-canary.a78ceb112.0","@material/typography":"8.0.0-canary.a78ceb112.0","@material/touch-target":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a78ceb112.0_1593632378912_0.786287122608698","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/chips","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8e655000964c2000a42a94e72e5f7120da60e43","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.b0c456d33.0.tgz","fileCount":83,"integrity":"sha512-lzRT8f1w4wOxB5HbWcnbLGondNvRNgqb5OR6iTm4CSoMv821TBH4aFcV0QZKa+ZdPFx8mB4+9vDUvXoDxv/0jw==","signatures":[{"sig":"MEUCIBZErYUnlx2CXcTs7UDktA/0kcodSbEleETD3hLZCsh2AiEA6KfEm98y0ExMGPVRKYF7ZIQuFJTTQJEDGC92LZ1Tv/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6jFCRA9TVsSAnZWagAA4bUP/0uS9B/f1IJ1t4AS5itS\n83eOtq0Nw/WrFXl3RWj1VBFeVA0DmyHP/9SjbrZrrtbxW6N3/wwkqjcom5wf\nshY2nInY3glROkWDyiYxapyXjBT4seaU64uQ05VJ8WxkvKr0ZWEKoTdDJUcH\nUBiMYjTFGBeydcJM5HaNqRdN26PdpkhUsJ5Euy0nE1r6KjpOhn9VAz/HSra5\nsp7oAdwwxKnd/F4Uytm3jP7GNbq5efaEK6mZT6GHeoBQvUxO8LSIhjDqWTXu\nUBg1UU86ZZnFRQltMix48NLhyrctM+p/XPq10UMZT/gzJHzDe9YpChyUwL17\nadN48rlQRyh2scx/yl/boTr1zDlSplQwezT+m8aW0vxI+Eg9p54GTxCqCzVG\nPGHp6qORteR9rQ/AvfmgnC8g+cFQe9PDtz3VTXGugIeh8CLAZh/wLtrpq+Wh\nRG6UxoyoIJnpd6AihVV5GDUt4xKW51I0opw6jewByPg2/CUXZY3fHuVuqW5V\nzmQmRIjNqogAQ/S57xP/FHCAU0Bcg3RA/f3xSc4HCog2iizTaAPxy3anoE5J\nzxPTZRYQOm1aVNcI1aG0ErkMcIGpfNmIFL89kuUU0wfyi3PZ795gl0n0VjI9\n25/flc8sb88NGcCmguT8fY1c/t12iHlVh/aIoIzBgotxXd1zsaGnuunhJ3bK\nhxNJ\r\n=YFO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0c456d33.0","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/shape":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/density":"8.0.0-canary.b0c456d33.0","@material/checkbox":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/elevation":"8.0.0-canary.b0c456d33.0","@material/typography":"8.0.0-canary.b0c456d33.0","@material/touch-target":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.b0c456d33.0_1594075332684_0.7935367375758908","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/chips","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b302604cf7bd3989ea2b8c8dc26d457a7f312bc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2e5711e04.0.tgz","fileCount":83,"integrity":"sha512-LnhiU4d4HO/vlaTWW1S8ZH5qhQWt5R5AxJVCPT96g91NMhHMo0T0kHXQ3vxb8Qf7vv89ePWmp7COvtU6Nn49XA==","signatures":[{"sig":"MEQCIDGwpRU0fC28PC+SR5nHlA4eg3RfhwZY5kuQKo88+CEvAiAywbofdAH8TEq/53YjXWOOP6nXqSqH40woJHInMRUZpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfkBCRA9TVsSAnZWagAAt60P/3bLLcO6HygQAHByy1SH\n+mqUh8qLFjgTV7GXOXSKzO3vb56UJovlWjZekj9PmVGXyn4j4uUXghR34iyJ\n2Rao3/qrCk6w3VIVHAiauRusGX/2wbZg+Mjj+RVXtlKeQWTHGR5v4t8fxcEY\nTFhDWSCFP6YMBf3NcXk0T2BJTFANGsiWPAzAOwGL3I9bDfqq/93fEx+VS5Bz\nfTqr6f96w8fbcNVPUnB/7tNHnuVImoDbYN0WeMyeUXsNj1iWT1XuQkLoHkgW\nmfCzOPDbmjPizlhtnQaQ0WyjjzvzqxZMhxfoMucxKJJ0dJaqc05bOlzF8WsF\nlPO4eYhQ0gNIhTg/Yq21EGaqsivv0vGHpgLGabypemKlPbEhVN3tFuwOni8A\nrMPuO6b7laDkruaYYLYqMXELztxruBndeRyxMvQzU9xAmRnWVphtnV7sq0tJ\nc8wwHL2sAVAvv0zDni8iFkuJRoDCV7H1tRyVnf4psflVKU86h1DLzLS268ZT\nOu5KqBRD93TyYYZDf2fwksFRJjp6HaYuL1qH11vtgRoK2+Ixj0xBChvr/OUZ\nvuITM6Hx8+/+9rXdPjj1aprLqz9hNCgEdyjib11cFnaKzNcBZv4uG2GLqMBZ\nENhwxaqFGfZH5O/dVRUpf4irj5o6n7FKyqV+xH2cQeh1YIQlAwWXmi8GBmE+\nJQbe\r\n=MKNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e5711e04.0","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/shape":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/density":"8.0.0-canary.2e5711e04.0","@material/checkbox":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/elevation":"8.0.0-canary.2e5711e04.0","@material/typography":"8.0.0-canary.2e5711e04.0","@material/touch-target":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2e5711e04.0_1594226944477_0.7473354351849717","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/chips","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9428aa9f0f54c5b63ce5d2d1cb0f04be8f899c75","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.811fc5d24.0.tgz","fileCount":83,"integrity":"sha512-bV38LRCJgSyZK8kON3tB8xa5q+6TORe0PQY7qk9N16Nyp90742C3pSzRKzoSEsH184zTT6NYmvgq50P111Vvhg==","signatures":[{"sig":"MEQCIDt+tOWo+mV6yNBD95Hf/T1kHf+N+3JW+96u9jzhnNF4AiB1rJ9/0H9A2bCq1LtNd4RWPT5p4rgRta+8lq5heW60/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf97CRA9TVsSAnZWagAAwcUQAKPmPM9MQHYdyZoUz0nq\nqwEX/laznVlbEyF1b0f/ngzw4c0svf8j5/qniboVpIcYbDQWTd85efEuVm7L\nImY8D9+9VTWpx8EHY4XKxZHlmBAYbgh2BsfGFWPrWPRSWoA++eNd0SaiL7fg\np+FsVObKT223c/jRnywx6Bt1igEgczqiB/hETelBd33kLKlKXzGPXFHQmw5G\nLoi3q1MAbPKLKPjmSVLF6aMdOVWJaD4ph3AvkXaZIGzoJioLGFgWpdFnkyQD\ntJBnmGZ34WWxhqTShn1xbDfQzIUM3t/Ibj+yAO+b14xJwj1RumZSQBFmaGez\no1nzJUJOQNwpx4Kd49hZs+aqzzk2UJslOhAg2F3F/bBwRaqETY9voUpkmTJe\nFbTRdtgFcTcrTEtKBIIcT/HNDJU1Mx3w6AvDtmnHJkznlvDqve+FE1Vq/5al\nm8rkhWf6bjGwiJvr4CSm9rU/txAcEWQiTlnAt07ptsXCN/uV4sQDhoccvKuc\nkkFN14tot+zpbyGj1oJ5YeXUvDe+fCOqrytLEZf3VIGvqUagXCv097UGlYrv\nU52ajjmHhKKiB5DSLqdPv6ZWEJEQDgdL39HlFLNgWCRVc8Fxo/JMLx5fggDc\nQTfvIwLzbJkbq9bW/Jj8J45iXzMw3ph58vq+CKvcIlcEliyAis5BjboD+go5\nbWaj\r\n=DIGs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.811fc5d24.0","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/shape":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/density":"8.0.0-canary.811fc5d24.0","@material/checkbox":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/elevation":"8.0.0-canary.811fc5d24.0","@material/typography":"8.0.0-canary.811fc5d24.0","@material/touch-target":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.811fc5d24.0_1594228602850_0.5262979429451835","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/chips","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba162bf43f714d18abdaa5cbcf9c8b66289957c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.6ed717ddd.0.tgz","fileCount":83,"integrity":"sha512-gRF46NBZJCT8fu5g+/iWT+iIur0xRetlTS7dtnv9L4ce6gMZoVxUcgkZvApsS2oIqRpUcKFuW5CIUlWQpIspgw==","signatures":[{"sig":"MEUCIDPPbqenDjMEpLioQhFGdqoReVDAQQHG98N86n/O+7anAiEAkST3SZ7d+rXqQrkHSTzI6zM+4OU6Kg2Z8uzCz6r04Mk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiI4CRA9TVsSAnZWagAADaQP/1nDC+aO7x9edWF/RT2o\n78D+0dZjNctRYvZp8qZX1ITnLKdwElfhIaOqKFg6INJl5pE+qdHPkcrHWDsA\ntNhW+fjZvxDzsfMQD7+GO+A6vWXpyQQWQJh+aqnB6wQAInWPA++nqs6c42rU\nNTeeYewONWWnurhm6lbuGIcu1DcrLIodmFv08ND/hFHZpD0dhUp3MOzKBTna\nXDkyWua5xW10eC7tYsXAc8QC0Q8Ac5g0qfP0QpVFdBe9walxMjMako43rm3K\nVcBIvViSaeVfMit+8esz0R2HejmHpFIfipRjmcHC+f9Jy+gg7YpS0frHPgvq\nkQJurWw/bxFXKp9hkytRZvIFWAM8AaeD7OVWbIRV1wxj70YwZxTNIz8k4ZuS\nT1X9/MBl/4sfJngnUl9M0zab6OvNeDyP4EMRmmVnOjayCLiupmq51a1EqTdA\nsHApr0bCJtmiLHPNI6tm4c3/QMoXFmm+Rzc53R6PQyzOZaX6jQd/GWzGQBsP\nu4oDiFQqDH6k9Sucf4qLTkwrVg2OTsPuRZZ2TFSKujfsMaYS6FkTbDHeEIR9\nbTVOhgVdgKGWMkZRV30T8yorzFPVr7qbY8nJNwz7HkYLcZWSLXhtR+CBDizz\n+xkCwyUmTEbKisylIpAmreAkXKQz4iZTXtORU1S5vz6G+Mr5/lOXCKVv6GnZ\nr8xD\r\n=69r+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6ed717ddd.0","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/shape":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/density":"8.0.0-canary.6ed717ddd.0","@material/checkbox":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/elevation":"8.0.0-canary.6ed717ddd.0","@material/typography":"8.0.0-canary.6ed717ddd.0","@material/touch-target":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.6ed717ddd.0_1594237495983_0.566515454789891","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/chips","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.d850de590.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9182c2c0ecf842c7bacef20e1fb2af67982a30","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.d850de590.0.tgz","fileCount":83,"integrity":"sha512-bJd6EG5DU+ZBQUVhzk0FU1P7rCsKfkiFtypSGv5czoDid1tqeKqOIiQ9ZkFkuYcP6BB3tZ/G1opzeENPBuOO4w==","signatures":[{"sig":"MEUCIQC/7w0ImT1rD+tl1Eis5QoinWD6I3o2ZB61ruihcsyO6wIgXH4xXDa6YJc/mDWzITG3qiggdIM9sf9uG0eVVIlghpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yGCRA9TVsSAnZWagAAz1AP/iSEXgLMwFntwd/yGS7y\nQ9IdDjt+LrGZyET8cP3Cs5DiVPw+jOjQt5OONXY216TSSdZa2UzVqjqBryYD\n+1nYndjqWvwg6Q5njs2OUYEqVLunixkdWg31IaqNNUc06rba+2wt/9D+2Ec2\nzCaPGwAAdDYU0byIOC8QPvPaoSOEso9nwLMu4kTnoU7DxldVQ4OB5vu28/sx\nhLvqK1jcKoNoCOjV6eJ3phQ1pXZKaCic0p0Fkyk6NGIEoy9qBuLTQLZTHXdz\n1eLdlbaTA4eSFti7zxRYbCS+ZQenNvlvhdL58CaaXAthCtKtaAEaVOhUt1vq\n+3o7AXmjd9saMlLjREvTj0tOd23ixn8EYjEpXpdZyp+QD1FuHguk/GBratL1\nPuKUhSPskTugiyUU+1qEMNbMktMj1mHHiGxdBVNUBjw8mhn6iQzcgdkt5Ceh\n7+o+PHznNHSLWxfDw0P9QaOo85tztgVJFv/ZQZsi33UH4ND9qucFyXYLUaaE\nBkIvS0Xzu5MplTj0Y6URQGbAtSdzaTFv8HaOAASBeHYjl9uTIrzWvqXD/oYc\niQYdnE9B4rqoJCGma9SNv3hMdaVFD9QrUk5dZscGFHJvOcXqTq+fpfa6d0q4\n4beNhYAV3bVPivsMWM5xDkhE1OpbDqfG4qbkNdvnYSQc6SaGM/5zsfTe/8X5\nRj+E\r\n=twTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d850de590.0","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/shape":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/density":"8.0.0-canary.d850de590.0","@material/checkbox":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/elevation":"8.0.0-canary.d850de590.0","@material/typography":"8.0.0-canary.d850de590.0","@material/touch-target":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.d850de590.0_1594317958314_0.6811337000686877","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/chips","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e07a70841.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"726611e2d755c8c3bf1ec3c40c70409493ed39ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e07a70841.0.tgz","fileCount":83,"integrity":"sha512-B0IdX/faQOCodZH6jGFjsKj/gANbxBfMmZIZmPlHEF87nRG0Lw2YMJ9kFI9+LD/7I+L04DXMoSgU27yTU5H0oQ==","signatures":[{"sig":"MEYCIQCD6S70l9KqWJDuCJnK/Jo8Vdn/QbZsqR9dvzu3+ixPvwIhAKDv+Dik74a+vJ8Yq5AsYVewKnh6LOCMe2rCSRJqpzik","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2N/CRA9TVsSAnZWagAAwRoP/1Ch9p+b02s6O3f64Nwp\n5VukK02bD2VP/RX+pSnWdWpMMAe30Hyq+HiUprFggmAPdBAzTyXpl8taIl0b\ny/FlQK6FSNIoNIyfL6TqMKTVSKHl33CmjicQaHD45WxVTNXP6lavwWMxasUv\nEmA1T/tQMdZ/2KaVzO/Z4ZF5nAx4LXcAPO9aU7nybLaBxZwFdCMofAMxtzkr\n/dU721dJ8SkqNGUFC2IcblEbs5lIKMBpt5gdQojRqKvQ5aKoGKE68lZ1X8Z1\naIoeif3qAkGWRokGn/W3VcrwGnRCSAPvHiK3EwzNodKbm4ir7d2HqTfEbGYN\nJR80Zh4p1poEI7RUblVhbfSWkavVOKlIMoEklsihjnPXYA/LpTIcwj3wj/1O\niRjSGlAsvNEjptOylKZLvT76NixbtHE6wfpVh3Xg8Qt0AqCFPaLj5IFh7FR0\nu8YYkcHvgYNvKysPubwgDbsSoHM3esvF0L+A7eNyr4DYaGqgozCn9a6yLUE0\nkLFZ4WPuflMT000nM4na55E0fZ5+ceLLRbWtliqwYQ5AKHLf2t7lZq52rtK5\nKMZUqFdynQ9pqHFAC6EExy+JxcgWvfRRti+9/cw3zgHlh4pCfZ6SfnDUw2Bm\njPSqYbxgGyrPgGAMDkdn2HBbm/AmYw5qVeto+fFIVs6WkXtFHWVH5PvdFKR0\nAgrU\r\n=ZA/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e07a70841.0","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/shape":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/density":"8.0.0-canary.e07a70841.0","@material/checkbox":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/elevation":"8.0.0-canary.e07a70841.0","@material/typography":"8.0.0-canary.e07a70841.0","@material/touch-target":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e07a70841.0_1594319743304_0.3845761266909735","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/chips","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ff0c9565c3ba9aa2cd00d98952c97c4de2bbd1b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.37947ed6c.0.tgz","fileCount":83,"integrity":"sha512-bqrDUz1y4VEgXQezaG9WSlr47Y4ksrGo266kTys9c9v63DQBV0KaRcabVmQasCgVUnr3SH1OhVuFAd0wsIqn2A==","signatures":[{"sig":"MEQCIH1/vS99qFYP6W+M+PYcYNlBttasggNOBzXClrDOZGueAiA6lJBjhr6eUsNxjkGvQlWtC2kYBJW/XW60Ot5UMHKUkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/xCRA9TVsSAnZWagAAJrwP/00qoniKv04EEt6PsUUT\nCdCeRiQHFbqP8UFDrMT9VWh4SlZZB+iJSjBbjPiLeo1KhsJfaUCLY7ErqCCW\nfhvD6ULSOso9Q+o1mBmLIlIPeUg0s1l4LOnbpSKpjcaupXONCIuKVjVwhpZY\nQ1kgSd5OmdzY/baHxsiW6lnsqlmE3ZxOXx/G1xEK5ZBoW2n/86RwCZQNF+kF\nU7FrlTUH9Oe5vF36K8O2GtZ15/t3TB30aYJpxGpZrfoZqa3QL456It4f2+Cy\nqgsTnGHWtiIkEkr3IAaxE/ZGAISf/75EoyJc+gY/JiEypXlsVzbdWXcxjtpK\nheiP8NO3bJKwctRSIoooD9AtF4HpjAncUPlUxAiCKIfTvYuk5H/zJ+MOXSGx\nOWSNG5REjeEzg63gaSHz5VsbT2rPx3J00uWNDkZH7mWsZwqjdj/t7lzyO/fN\nsqH/jS8fEiw770/bWNAkHMRx2YqSEB9M75tlFrnFGZjtTj040uG9eZp3vexC\n0xOlyk36yeZ+vsbX+GMO3jPSWngwTzLtmWow5/zcMqmnwB3NLUtHwLOooddc\nLZGIWvIkVsVoZnJ/AjVRf6fIwQb3f1s9mzzmFIQ04achHS0jqR6UfnxEm2Yy\nvjYOx6A0gW3j9NOeu2yjSVJFC9Dm0vQEhvl5t5wEo1Wft0VVh6v38PpyusDr\nnIPF\r\n=yVZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.37947ed6c.0","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/shape":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/density":"8.0.0-canary.37947ed6c.0","@material/checkbox":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/elevation":"8.0.0-canary.37947ed6c.0","@material/typography":"8.0.0-canary.37947ed6c.0","@material/touch-target":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.37947ed6c.0_1594327024650_0.701669741400921","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/chips","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.5d443afec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d18742518e8a21dba3e657c85364b036727e9e54","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.5d443afec.0.tgz","fileCount":83,"integrity":"sha512-y7mGOm7d2iqHyU3BDAaXwazjOS7mKtuJVFtFEez3FbbHiunuVGE8oyfuCdI19Tg1qCqQLBSry7El4I67Z/yaOA==","signatures":[{"sig":"MEYCIQDMLBvFS9ftUtEtbVM20X0Hq3Zit24Hced69c0dMNvetQIhAL0pgkDRGCghMYhNbr60QaQncm/nhfJHN314ntkWBtlV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4ONCRA9TVsSAnZWagAALM0P/3fETIyHB4LSvLXV7ha5\nk/MF9iEMEim48vDHuifpNLDlIP8OsVAMzwTNreqbJd9hdtxWTlql2hzUcClW\nAS26Wz+kA4BZHbuFVNS+h1MHbNey+pv4WLGSBq4fP/WnYfaULJ7WoQOHqg5L\n7a6xuooPNzF/yCm3ArbxCRmX9pLovr/osZIGxNauo3qKkECCJujELeez2ZZX\nWx4msfHsYwenwBsxJaPtUdSecLzV/kPxYVym1URhdpwkdTogwVl+4jc6yfL5\nnGZdCH2AOdJoiXQG8RTjqt5A3s4UOSz7wGZ3ZFxLF26hFDXdtX+Sh+pUkh6w\njeKnj58ySIWud83q8BMxVbnRWe+rrJ5v8AMilS58cbQEAbMHkS5eDfB3NB+S\nKcYm7PEYTDEwWF35eNssJrwCm6Z7WJsPdi9/fHqtxxersMLZd+vCmdTSdnSF\nB26G6jSshU+nAz+ifs4WeqCSr29bl0iRviJCl4m5FlAhEIF4r1orYvpmBEaG\n0BbIbt8txSgMBjut1cvKn69oxVmA5CACOb9BBNDMSZVe08gYhmcJX0EYhyKh\n8N1HtDEJKr9gWBkzgtlxISFFw+7b+4iKErK/e6YBktqHYKqIM1rH44agbVzt\nzyntwC5+iem0el8uaH/hG5iaHbABglDCxaZ+1uKI6s8T2EbYzCnb9dnIKIH8\n+g9O\r\n=+IzA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5d443afec.0","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/shape":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/density":"8.0.0-canary.5d443afec.0","@material/checkbox":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/elevation":"8.0.0-canary.5d443afec.0","@material/typography":"8.0.0-canary.5d443afec.0","@material/touch-target":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.5d443afec.0_1594327949444_0.7713958479121374","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/chips","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6defa06d0df10cf41a8dc735a10b2b8ad3a8a396","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.9ac1ed914.0.tgz","fileCount":83,"integrity":"sha512-gqn83/NBN7yTh/u/LrO2OBi0zeZGScSeWL2V9WgjGYLKF4HiRWo/yJjpB5j4THk4QlyIPcQ6Hd1sMfR+4R3o6Q==","signatures":[{"sig":"MEYCIQDyPDc3R4xhTNSh8mb9bccjKRwZQNW3+Cgzfb+iORRP2QIhAOacJmOyn8+0/I/wYcDUExyJoUnmfaTCGnF4OXim62/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4pBCRA9TVsSAnZWagAAFYsP/AxTRXQxJp4qJjWbmvtf\n5k5b/V7sp9usErVwaZTaHYwAbOyMnn2Gxj8ad1C3e0Ag4RwT1Ve56C98E622\nIXomo60yhYNqk+XUX6csnkeU/3Edz0KEIozR3eMq1xvVtPJO2cu2LtiinJL5\nobpJmoBNQNY9ThKSDA56lOYAaJDnqC/VWps1Pfq302yh4n3QSY47jxbPmElR\n4LpU+rTreOu3+Y9seiejTSByRGUtmeQbnV/ZK5YIxSgj5JSqHcVfU9aihPEz\ngRThJBM+m0vPxYTUyLTgFC25EWDBM4ENlTo+JwYHrDD9S+bYb464VQu4fLu4\nAUk1UVZTSghbyU+dl4QU+yBlvDXN9leC3ZmeJUbcUsjm3RoFEpvLURKcm/29\nfNOotf79oib474LZNx0L83n80NQZBioYYeo0TC7jideYDnE9SVvSvRPg5XJ/\nZax6GKd5mN2sBnegnBSM3E4tOmIbkFKRSmRPJPfsFr5RrazE2+h9llnDsibf\n3li2PQAySPX0LQas+Qapahx0b2CGl+keCi83K9PAQ3uxQ8OpR8rJuXshEUF5\n4vFCBqw7IIPv7pY/VEKtoMdCtVsi+f7h7SkFdYF5NLVy23Tg90Zuu431zt1j\nu4Ts8BprDj9+bMN60mxKqSfSrUCucYnUrFVWKvC87V2sRfUvwmq/+S++bA/L\nonFC\r\n=0dsf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9ac1ed914.0","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/shape":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/density":"8.0.0-canary.9ac1ed914.0","@material/checkbox":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/elevation":"8.0.0-canary.9ac1ed914.0","@material/typography":"8.0.0-canary.9ac1ed914.0","@material/touch-target":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.9ac1ed914.0_1594329664667_0.7819924020617837","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/chips","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81d29e8422812f5eedd25146d1af4bdf9a28c069","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.1e7cb6198.0.tgz","fileCount":83,"integrity":"sha512-YxH2GDvTU41stpBb5eICPFo9QdLkqfRpkQaVPePcFTh9DtKCYpqbogPoGky4oM8Y6hm3UQ8Yaj8/8WgzovLYZw==","signatures":[{"sig":"MEUCIB/OH7oNsXjHLt3gW9aK/iFizseUJIJB6EPCyrMcnpe1AiEAtPYHOC/1nzJ087KUaMxdqWnDo1X+B6OVGBFZt5j+oY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZmCRA9TVsSAnZWagAAU1gP/3ee7uzVCq3tRNwOhShA\nLaTRYy6HPlknWHYAGxwGxy/YbUbMGyKWXI+UmpSNzuKhn3es71diF/LSoewp\nICRoBs4ZrSyKrDZKxg8ofrIlXS5EfyiueZ320NmV2nUs82o5hIIkFNqUbP6/\nLaQFvBt9N2XzEcaeUwzSFtYR+imw8TGu8zjobn1unJaRQhVAzL18uZEQEsXB\nld96x+el2oEzy1t6zMPG5qQGRCV7PZYPmRMzYw4q163LF91wFTgcNJdYVHXz\nmb2BlfuCb5LAu6NSbDdhgk/9EHaJ1B6skskSJGYm8blAiSI8IdgzJmK1sMKS\nKGcNnuZ1sHiAAwSpMFNH9xWd1HIvD3gAeEAWLOs5O4EY9LW9onaW2pWoGcfV\ncv3iJLsxcdwrHgjEuSeMJueVzEqJ8Xr/3zRXLHib8+TVrr4XqrZ+LQAiaVTZ\nTw2vgyy1lnmPWucswk8T/ycFyL9IBGgxSVV0DMgx/EfRovw5O7VgllRbgU9E\n9AqC7Djn//Xay0dd8GOLZZDfMBUKZo3fS8Q2Rbi1mSLtwyfkLMmHvdkT6vkJ\nggt9yh6xrxMV6wCTpBJWIblbh+fW4/XNue+i1m0Ym1rAa8SeX31IW9ypJ+nD\n3nmeNUZWYCedrdVt7kAXmupi5WXNxwpdX+cJ4FsbfGm5TUZhIRDUN3MCQcYy\n+Unq\r\n=9jxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1e7cb6198.0","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/shape":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/density":"8.0.0-canary.1e7cb6198.0","@material/checkbox":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/elevation":"8.0.0-canary.1e7cb6198.0","@material/typography":"8.0.0-canary.1e7cb6198.0","@material/touch-target":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.1e7cb6198.0_1594332773846_0.9786538208307407","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/chips","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.843f636c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5dfa96d0c3e3c7c7bb6e9fec19fd004b59b0ee4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.843f636c0.0.tgz","fileCount":83,"integrity":"sha512-jg6oz9LTCkLbwPvZg+h+oL/RA67vPGEMxYLs8FUGJQNzNWh+nFNfota3EUpbm9jj81gdSUXvTkcLobODRmm9Qg==","signatures":[{"sig":"MEUCIBu+SpS+h/5A9qErCasKrGzfP75B6DP2olLOH7jJ8F0pAiEAiCGzMCKpKPNWMM/pbOIvGn8jWgDvnu1Yy0U6bqe25NE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKiyCRA9TVsSAnZWagAAx6gP/3iOfTEi0ICgH8R/n2UG\n5mvYNeCJXEzq+DwenINs2LiHI1cDT81B4XcHluM8QUi2LgaX+fDa2//0GWBu\nJmaE1nZf7S6biARAli8Il//rwY/NNWAJGO5ajoXH/xJ6ikCuJVTdSGu0Rplz\niIILppOPsatAL8DIGER0/iwoGPlSzlvXV31iPWjd1k32fetA+Bt4QnWSCRpu\nc8jnn/0+wh/INlnKMUThjxke1MkESz9CxWkZzxFYtS16deIaqXVifGeccV9C\nrBAlQSRf7RHsgI6PeW1XQHnlorQJID1p33x0qEKyIPuMPHLYFXL1l0vxZiqZ\nS7HMeZkZKB76DlwmhMtNsbaSMDCBqcROXsV7/uEgBmW7MsULi3NRCVtyRLOm\n/ZfqSAM4j6fLHHJb6w5dNXGpkZRib1wz/p7vjF1V21OU+fGN9W6koL1mL/UR\n8+rpEDAZo8F1ONMDTWH2fg+WvQnc+WzqlUg4AQXiqdGRhCbAQcWy+GhXZkgD\nc8Yvm2FGMgqvHP6+BqAMIomIJdNA205pWZWyLjHgMMj5xiq4mBfnMXLGEe4u\npA98HQiOpsLIX+RBupnxyPiowRSwsN9/vCyUqkLAAPajbZzkplIYhKODU2lr\ne4yEYgNBbedcuSYUY+xBn9hhuYZdKqiJT6PRfFr7tCy/Ha//EQoHFNXycfh6\n2K2T\r\n=8bsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.843f636c0.0","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/shape":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/density":"8.0.0-canary.843f636c0.0","@material/checkbox":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/elevation":"8.0.0-canary.843f636c0.0","@material/typography":"8.0.0-canary.843f636c0.0","@material/touch-target":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.843f636c0.0_1594402994248_0.8936385529220894","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/chips","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64443c0c956727b8b8e348a13cbe3c0c367fbaec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.b2edaeead.0.tgz","fileCount":83,"integrity":"sha512-D+EiGnaRwhMsgCLvNfK/kgzpsDXMKkm9qr+uFOChDbjXpZDUJ77/+n3EMsB1EKbj7sCutG0AL4owDCZOx7pmmw==","signatures":[{"sig":"MEYCIQCVnfkGCDvpchcCb1CG4Bor3zGZZNBVO244V3dQvOU8nwIhAOVSmgv4ma2D6s6i4lBTb/FNpC58uFMvFVrmXmPvZp+r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK6ACRA9TVsSAnZWagAASRsP/ipkk0JJbWKJlNt0+Kta\nv7qbBS0pQUS8AhjAkkjtEOsvDav1ZtizQGodPmH8O5zWyKn/NaYrmAIZUpR7\nk8r93q5QOU2Mw5r21Noppv1BdzDtkq4m1iQkzSQ/baUZ7IQS8EG9J5cKjO8Y\nId6q+4n8KBo4QW46A/24b1RBCrNFeMjEH1xxcqP0CFw/oKno65bAyGPbflc4\nPNoKPNJPg7xeuJM00tYcRNCgh4ljV5IgkzII75JxLt43zo6kda8yxaqRFY2b\nJ7MY1JCffqFtPjhh+U3+6HD9kNC92ViVvvzLhGB54azqBRZrDvbiXmlDx6KL\n/z6qhuP4VSffFmtLqLfY/2W7Ulz0AKywu1m7kfayTLFdBMZWkQPA7VcfTYN0\nOPGb8ceJ7JpxW6a95R3HTV2hjDuC6XrRnHlT3Bug4AG5Db4pC6kVSNhCQIe2\n8WWsP3A2gyl9g6QcxkrYtPyR87v8n1dA6s5CJlIJirTGOryQsa2NTs15R/fw\n41EuXpwDF0eKzQUpCVj/oLljMby4yxYfCRhUgftXFlKQ96wVSBZATi5IFBP4\ngk75iM+YGSpe3D9fAv/iZhwVRrvJhw1K43SqyPQwbor2VSsiU6hJ6C4QbVSj\njZrJspVm7KERbIB3V/n4CbGQbmuT7n6/6zyTd0m+w4uCnSqEO6DVDPQaVvS4\nRIjd\r\n=FKdj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2edaeead.0","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/shape":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/density":"8.0.0-canary.b2edaeead.0","@material/checkbox":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/elevation":"8.0.0-canary.b2edaeead.0","@material/typography":"8.0.0-canary.b2edaeead.0","@material/touch-target":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.b2edaeead.0_1594404480405_0.14416663572510569","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/chips","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0626100301ea9e49aeb6eaa94090228e4bffe6fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.5dac1f624.0.tgz","fileCount":83,"integrity":"sha512-ky88C12YqM3XyGYgEYRT4UHmjAU2HoN/Qn6u5GHijy0IVH0nN+aWn8grwQ75zcAKt3ZzsipK/vCgEWk1OeJmyg==","signatures":[{"sig":"MEYCIQCXHc354FYBgV0ATy1G7D32H5s6U8n0bn6EEyc3GxY1bAIhAP6OsgnTiddQTqleVEO0+uFOzzCXJcCnTQFINcV5L/5c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0kCRA9TVsSAnZWagAAXvkP/RB1B0HYCxs5jYIyEB24\nAj3s5kWOWYhcjvVqhL7QVykJHrW4gvxCh1ArkxKWpU7JE1LsO2It3xDzdsz+\n83RDw1OE4Ym/Egc6VG4Fu2y7gCmnQS3D7GGMG7Vn/b7q8rHJpu4OXzSXmoz0\nrz9Vepk8ILp/tll8BhIykHboyjU2eV7xlJmptnWQU4YwQAXpj5nTtdlwFwWI\nqgYBFLW7vQgUqWj/BNcY3s+Jyb1xqnlgKEBbuolB2iKtFOKBX1H2bispzEzg\nDXH3J4m3MgPiDNdRAwKgHRMwoFoM5ab1BzfAc4QYoQTxsYXEnehdith+FtLP\nrl1kRyltKV2klsjdm2OrryLiveMGkSW/5YoaZ50KJ3gdkMV1CkA2/Os4GzX1\ngjfHcVVYtlcy30vEP+8WXC5l3OxYH5XZZW3m1sTVO1VXVNjo2L7KlfycLs4S\nNzxv8cM4+zD5GQO6MISuptVUk9xGE4F8pk+LPUFw2+9PQayU55f/gFUyNPQO\nqEuIWV9Yv6RJ4RGHbhrPqWoUYe1OjUquwKZ6JrhSvu/ztquXkoZpyTvYLhh0\nY7GmVYyGBRCU0C8Ia28vSkOVlqviso68+ZdxTM7a/mTGOVWpnLtG8lR6J1bN\nyiFue/IlYMpHOQ/nU4uK9rVRhYQENrjNNVP7w9OoQks9lT/IezP8Cln9wvrl\nJCyY\r\n=IgDU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5dac1f624.0","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/shape":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/density":"8.0.0-canary.5dac1f624.0","@material/checkbox":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/elevation":"8.0.0-canary.5dac1f624.0","@material/typography":"8.0.0-canary.5dac1f624.0","@material/touch-target":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.5dac1f624.0_1594658084352_0.6315091493604992","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/chips","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.4497acef8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5e9528e8e8d26123552f5d9ca533f709cf9956e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.4497acef8.0.tgz","fileCount":83,"integrity":"sha512-gXfCmuo+TxRmXXhIhAtVooYbeSdtQQt2zDqDbw+mI2G2Y/v/cjRB0m9ahFPrd7CCXZy8BI9/4mb/Ud0XPV255A==","signatures":[{"sig":"MEQCIECUcYCorXJkS+cwNpjJcTBvy/ne/sWUe8CIMqhGj0svAiAO33U3eEyPk+hlXqDpgg2Eb3FBKizdSF8VTdjqtWl+XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb9LCRA9TVsSAnZWagAAAHYP/2NvW4Y3KjNnSYkxc3jH\nf+YO3PX8EBVPOQyAzG7+4Y8oB1JgJvSkplMUjIFjsfL8qwdj8xS2Rshy7r7h\nKNBxAjkofbak6HsGdSidw7juG8r9vWM9ro8YHlp+IWUlym9ta+IrGjbeL/yg\nUvzHgpTxnMOCrmkW5/6ZDqFCQqFgj6rZDIUaU7zNNvmXyiszXLFq+FnluiYG\nx9nQ+AIQ5tSXpEytd6tlbq0chzd30t3oHIurhAdAO1PFv1Is0XBC2mpl5bZW\ni1POUQcakwHX6A74jy7L7zgYuY8WWwBSFz3eifg+Hjgo9FG+pkXGIB5uWg6R\nT9Mb0NxeTni0hStf2SKdfQ4I+GI2+9QzBumcJrpnc378CNu83zrJQIbfLk6I\n0oTc6OnX/PkrtLLffEYsQ3ppdkvtiVKhMQFLRcYqX6Qj9Jg6eYnodvmctZks\n0WkObjwqjTTuqR3Dy606V3G6ulcujCs/EQ+UG1Xg0PCo1/RFU4uFmiEiStao\np2LUUhZn9OTzyP309aP/IjoWg/4Pt0p5q4g1MM+npa/x1rEkvvFgvTYGF8x2\nZlAL2s6rmSpEvUExSlEbrt8zxLQu457N1IZawStzKYE6VkIhxflMAZxuwEyK\nONBTLhwkyHcQpeAuWp+qYBZYdi08hyG6SubKTWo9Yw7FEMorlt3Y+Cs6NVe0\nCieZ\r\n=urT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4497acef8.0","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/shape":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/density":"8.0.0-canary.4497acef8.0","@material/checkbox":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/elevation":"8.0.0-canary.4497acef8.0","@material/typography":"8.0.0-canary.4497acef8.0","@material/touch-target":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.4497acef8.0_1594736458573_0.2417917948858297","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/chips","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"679f944a445ab72acc7e1ea2288cb3b60ed2ff0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e6e23019d.0.tgz","fileCount":83,"integrity":"sha512-Ge0crpt6rUfNz2/haixqmqW874VUp3cT/2RBmcAOpejIjfc+9ah/gHCMiOxccRhAEXgSBHnJ8UVBevAaty6s0w==","signatures":[{"sig":"MEUCIQCC90gdUqmILbZZd1tIp9YYbNbsiu4yZdqTMorFouFHsQIgV3Jo3A7KCQHgGNcqQJjZFD80euXCkQ7f41eQcsQ6/a4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhFWCRA9TVsSAnZWagAAgIIP/2idixqylrQku6/pT98K\nfdNDCQVjAeG/0/GVM42YPObmkYaDhZIG+jBB7j3uEOQbiRP572EEouGDhcpt\nlsb4ihHFfVpTfwTmLbKsNxqpYfsl/5MzGQUf0ccvlmoWDka1wL1CTsD1yEW/\nLWrJpEK6C5v9MXwaYoQm1jiRQSSySRnyvzD5GO/VlQ1vTr5/vriHyKUrWOrk\nFi3FLm2v+gQaHjj0CklxaVKcR5PLwH+4LfpakTWExyLx9Iy/rtF6prPUON1f\nr58J7TUEqPff3OmVk2w+fpoeVmVyQpeTjnQR/hiLgL1MsRz0Os+dUVv/miRw\ncg8jJzatBLs86J2GMphQtfhw5T5CtzRVyYT/croe418DpOFoBbxnoqY/ryu7\n3k8XX+YTujoJqhL/LdsIwypB4aMtTc2wUM9edJz0hn3V7TaDPEzK828Rb9Ha\nc5HDozddVjiEqnNZjVvne/v5PNKrj54/GloJIseAguwDJYle78DDO3KO1mh1\npB8iO/c2GFNWx9RzUNKWeOD1SbWr1fGtuv99GGDQ/oEeKTtHiUOShRd2ITIV\njHvuRE/6JX9A7AuXhb42kuyGNV+nhYAT8fuMH6YLr5LDGvd48mZJhnzB2+87\nYPs8OSWh1QUed08Ii4g/DK7LnEmsZ3eApcbPHk4LDwZs+jFboDDByk2q8pjk\nsU9x\r\n=j6kO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6e23019d.0","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/shape":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/density":"8.0.0-canary.e6e23019d.0","@material/checkbox":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/elevation":"8.0.0-canary.e6e23019d.0","@material/typography":"8.0.0-canary.e6e23019d.0","@material/touch-target":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e6e23019d.0_1594757461947_0.4840509410070475","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/chips","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7058618daed6d2b53a8dd740af1d7eb6695684f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.d548d7a92.0.tgz","fileCount":83,"integrity":"sha512-yF2ew0Mgydx5OfZ3Roaw50qGaAvAxcy8Ez39397FfXfiW1bMszAL+xeybeCm+JCU4K6umx9TZsUVD8nEBZyUCg==","signatures":[{"sig":"MEUCIEzzr1atWm+kn01nmHS+ZvegX+5araZJMIpLWmbotK9xAiEAhVXmnQpcrVJqoVE7HbArlPRcXWL3bbvBNuvnTLONA/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/5CRA9TVsSAnZWagAAqpUP/05WNswNhTg6BRsTsFsy\n2BwVyQT8vYYtFmuImCrdWaUVzTBgADxg/Y5tWTMgOIl8R1O8plNL09yNR4FH\ner5o3LoqDuMDE6qBxmilIVl8pEuQSqhgQB718qiYLOvR+KBRbfP2LZ7RWpyQ\n1HdZM5lW85wX/bI4vjF7TFIw2WQQ2VIiVcMWjkglhI9Uh0B0ivxCdnc43Qrq\nYc7EpRktEv8O7w0PDWFgVWfmOIS6hDYiybyTo4J3jEk56VnkSYQqqoW7DMV0\nip+tLOYpVL7MyBMgSvlVp42TjyqqoPTg+TvjTHcJGUX2Wzv8WvraQe2TughO\nd6LdrqkJ51v1EzimOo36nSZ+ewIZH+iVUwgANgVKRojfNamTb99FGop9Rfh1\ncsTki2Z0yu23UvRiWqX95hWyNhdSRufyb5G8bnNoHK7EiWzWqD3yA77JJPZv\nW+C8D0YPf9LD6+wLckCHK8GrK8ZdjYGYbqeS6FjRPqp/l01eT5Y4YIeFToX5\nW82lNhNfN0+5XCi3KRnwLakGqFa4mdUseA1iXbMpf22nYYgvifmeL805KOSg\nFWUuwXkHJyWuHF2ALxmA0Lg/yu8uTj3WO/yGpjGkhLfV/x1pTCrKX+GTugK+\nD39QdSl5SjTYgspdr2jHseD5ugNDp+2XBI+Dx1HILAM56MS3Rtc0rLtp25et\nWLeq\r\n=nl6C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d548d7a92.0","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/shape":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/density":"8.0.0-canary.d548d7a92.0","@material/checkbox":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/elevation":"8.0.0-canary.d548d7a92.0","@material/typography":"8.0.0-canary.d548d7a92.0","@material/touch-target":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.d548d7a92.0_1594761208699_0.9931280213826874","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/chips","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"902bf7091b410233ca50795cd7fbd8a612442e0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.58ce529cc.0.tgz","fileCount":83,"integrity":"sha512-yFLCka0sWw8uIJ4JGeGXHZCYffCvqCWVsEDtp+uyScpNyssrq8ndIuxPObkWMtNEyYqq7PxDLpfy0SqLB8pWnA==","signatures":[{"sig":"MEUCIDRl6wXsk9viKzL1ZQLQGJR/4GjGPbNm2pecZX3pKPEsAiEA3tvXLwwUSSzQ3TyuU6dF4VYJWxENcThuVvlke08ESak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiB0CRA9TVsSAnZWagAAWcIP/20fw5VU+I6yEy3JdHOk\nMEm3funE8ZU/yz3T0FKCYV8MAbfG8axiCE3KP1Kb+e3WWlmInNn1ms0LTccL\n7Snn0VZM/J4qOVzmZXROTolsVXctzrACwPKpbeJHwNVU359Niu83DZzkq7yR\nfiaEZegmFD8z421BQ6ZuvQHuv28mGNz34f/HfJjrzwf+fexlDhDFuDfrnzMs\nSzacgjeh0zEsr/bnAsIYQ6SjwsV7MgbY+50VNpEbpMDynQ7kgTfrSkwfhxv8\nrAMIeWWhwXKi+WyHLDSw7fqEOTkwBJIM8e0zVFknmAeK52VAL/7ZmfDDJapn\nwqDNHan3IhgYaRJChX08NDfS+d0d05edT2vaR6x2uw8eMHYkZ5BQFmz2S7Eb\nApAKI71T+oUS5KiB12I1Im5k93caW3kDZtYrm/MdQS5nT+LRr+1TLClFPtJb\n5AGaTaNPsNCUxPH3B4nGhoflVFmX6rbORobSkfylbadlVba7b4r6Ij4kk80Z\nxuEPXBkAMW6kLFxPaIJALhcT2ilHL+lbc4GeZHawLSyxB1oGy1CZUQKpinyT\nEYt68fFw5LqcG1FwcnbJwDGGadT/w6CI0R7XMFT+GPcXOiwVrRohPftGeZ8u\n7CiI50ayGVc43s5Hg37tb/m027EAPay2FzMtj43aveEixlw9nYmb6QYCiagO\nFLWe\r\n=t4er\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58ce529cc.0","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/shape":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/density":"8.0.0-canary.58ce529cc.0","@material/checkbox":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/elevation":"8.0.0-canary.58ce529cc.0","@material/typography":"8.0.0-canary.58ce529cc.0","@material/touch-target":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.58ce529cc.0_1594761331874_0.23408288078787476","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/chips","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e46f86dc99d8613353932f3841eab82468628c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a0f1202dc.0.tgz","fileCount":83,"integrity":"sha512-d+fCIWCwwP1vJZ+xmXuX2FuImZTjZ/xgl1hkR35IKy/YHtby+b7hR0NHvkjAQb4JmnG73XVODDuHk9WiOzV4Rw==","signatures":[{"sig":"MEUCIHDGjLlfdFAepJCOmNXVEaAqykbx0+v+z2EqfOKZPht4AiEA3AM0D7alf80UtRscPdgM8oB9OAG5i0TJTuk5jTsXoTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiUBCRA9TVsSAnZWagAAxycP/jVPHqL63Oz2Mfj+aRXz\ntHXHyLLbmRDDT2DRQFecHyV8XX7nsAWV58mZvA1e65B14M44jzaqsCYXqsvQ\nndHvh7UOLJtsN+f4uB/0SiqxZkKcSAsdEjzMJC+YzYEUx1P/jAErpXI96Kf4\nd416plAZNqzn7qAWQ1SZiQPQOxpG4212i8ZqdZB0Splp08PagEIlHCIiKUR2\n0dnHZMcg3S+a78p3JBa0lFfpi0a1Aa9dmqBDXKi6junSeEQJPwJyhIB1GrV4\nKTQH61CYPqjpR0vRFO8L6dd3LNXcuAbZb63D9vrrQXp/oLFYGOKcV2lv9/ol\nKz0MKrRXeosYKf3edktKKgdN9lib5FQvje0pMV0meATfhZcUYT0rkwI5H0w2\nyCLMdqU0g6YGkFGErAuuc4TJx5rR2722q78xZ/ReRYsFmyj92mg2qT/uuwyf\nU8ZB8bCbQnh+Uckrwbq/GYNrwKl9fFqSXktGaw3/W1xE6k9phyiXE96BCLDY\nt5vRMnsASr6pKloj8/G1e/tGM+2bSG5CzYX06T9PgVOsv+6Wrt8/LXd3L5x5\norqyvEWbkS1Xluxnw6Ow0Y7IFMhU3ulUcHFhh71x7yp+kqN/caNHeg/aupuL\nvaM9WaBgNtWHnCLouMgpOh+W6ydqsNMubObW7Aa5HR+Lj/Mwu6wTmv2WogIR\naDB3\r\n=UztF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a0f1202dc.0","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/shape":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/density":"8.0.0-canary.a0f1202dc.0","@material/checkbox":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/elevation":"8.0.0-canary.a0f1202dc.0","@material/typography":"8.0.0-canary.a0f1202dc.0","@material/touch-target":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a0f1202dc.0_1594762497161_0.18773110929284353","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/chips","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ba48b69ea040dc56c0abd1e89a09d736376f4ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.ad4df58c1.0.tgz","fileCount":83,"integrity":"sha512-piBJtF19RWuAVKvnDJ5hkN3+y52KCvgBkv4+G66lcqUIAlbu16qHbln6gvai2Dxcgw2IT3pSKwcBFx/3NhZnYg==","signatures":[{"sig":"MEYCIQDT8rcnAok1IQnpfCZjNUH+yIKgX7jTEI+w4T95QrwivAIhANO0LPEbfQk3/sIUKHasigLd4t50QcMSLzeN9Ftn0D55","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDklOCRA9TVsSAnZWagAAQWUP/3xukiBuOevNswxYaSRR\njWhHx/E02mNCA/qi56jM3uj4WSi6WLT/rkon/Zwbmx63dIVZeVvbW76W/Jp8\n1JpF5VSCTVKuQxWZtACj3g1UW7PMN4Qhsc+yvIevxBiwxOHFPQtSLmmNR90E\nAyPlnfjW+R/CekjlGJd9Q9SaAnYHCadMYVo0gkVhhrc3EASWqWpuAoVr365S\nfzTRuEcSFdy3NsvwDo0roCp7sQx/6bUmAKt6znvSVfpoQ5fn2Ikg6xuHRFQc\nRK75oPgUJ2eDiGmmTtVWcqJxhZdz4pO74rwZjVOZ3WSAgJ3nUXO4TD9UVaU5\nucBC94YidEPip9KMsMW1mLvcnW5wVkYkdgShR3dbzJR5PZFiLK8exMzy28/2\nKT0UdXUkXs9upSBLzf8/QgS/gccE0iVpYaLc0UsN5QWhZ366roHTxqmbZgqW\nruPza0wbwzS7Q3s64Q9U49yNBdqayA8t3VqRqTRt+8kDf739BcHLk054OngM\nxvfyBgshKBNcPQ50Wk8YoTG4vIU0fcmbC3LarCTLSRjcHgi5fgls7VyXy8hG\nzW0nJnnN6igDgdK6PXGGgXgBN0dp5vU4P80Mk5se3Jmo2ULDOEOruo6vqdyJ\nG9UrLLFzdooRtcPHju1z7TggJqgE4saM2POQ+0WtCzIs+ScH/cuW/X/Riq8b\ncAYj\r\n=crf4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ad4df58c1.0","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/shape":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/density":"8.0.0-canary.ad4df58c1.0","@material/checkbox":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/elevation":"8.0.0-canary.ad4df58c1.0","@material/typography":"8.0.0-canary.ad4df58c1.0","@material/touch-target":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.ad4df58c1.0_1594771790453_0.16186382592723558","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/chips","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.01db89053.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7aff704cfb248018a7179929cc7d9ab31a878ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.01db89053.0.tgz","fileCount":83,"integrity":"sha512-YI8Sh98EhRcNLLU3b/MqQWogd3VRwpMKiHHssvbG06kcWiW9QA9T5fZV5e/j5zs22Lpqm/oDKdjJunnT77HxKA==","signatures":[{"sig":"MEUCIQCiG0KrJxtmMfUW3dQM7GhIZnkXgjqNGYEYCKpvdhmukAIgGuCVwJwOqc3V1SgU3HsZW/lzRVctBMgdAwS8Hp3fJdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIL7CRA9TVsSAnZWagAAdVgP/R8cmTGQRHRYCdMdulYd\nYbHJRTgSSoEqBVil0zSv0eMl0KOmrkbJZKRkkvAfKC0xlbLW/Xpft9ww5ETs\nuWeFiQPJeCv+cKZGPSnL2S2phNi34BegCYvJ3yoY1s0vUgyF88ejYCqxD/8O\n6gzOkxAxmW2Vn6LcgR2PldxrZo9Yol1F8jWKNnIR/U3/hFiGcGLf8g4vLF2Z\n3IpiNNITs2zSxvGh8oYB/KvXMK6MKdQLNC2j+uEqa7oeLqNxI6386qBsAMx6\nqcN9RW/vOrLni54OL5Z6g2NWf6ULuOkvROiaNab6DSg7dncbbpJ+OrNl18OH\nPckcIKiiyAdgEctZkRDXf09fspX3vuQfKe9EaPgSTsYwefEu+nkPgX73C4Gl\nuBcYLbvpE+I4CJGO3vw0lspl3BxZY0So3AzCHZa4TH+JVyyzlPiQTk7hoYkY\nkhSSQRY8LpJSNqXTrkjcbn44JHzQDh7HTjrge0JDyPIPKUkN9ssru9wySSSY\n0D87DPJ+FHHKn5NoGZEdwuWSn5GFpF+da8RAu2r0o4mYrdB4KijKMat/Yy4q\nTakhZgDhnj3jACsRzDrDRxZMg20vN/OSWMRnVLF06G36aZIR7utbjVMSm2id\nb+o4gFMZi+Nckx5nWWfsVj8lTYejaeVjgcu7Zbg7tSp8krky3LqGwXxWcl6S\nSBoc\r\n=+9ZN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.01db89053.0","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/shape":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/density":"8.0.0-canary.01db89053.0","@material/checkbox":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/elevation":"8.0.0-canary.01db89053.0","@material/typography":"8.0.0-canary.01db89053.0","@material/touch-target":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.01db89053.0_1594917626575_0.35216787941435257","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/chips","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ea33a46f5ea602afe5e5c176bc27342b104bf7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":83,"integrity":"sha512-vRfL1CbdowboLCkvP/h7rL/2Va6S2pMhXb5cC3u2tYTE42pYd9NV09StozqIDf6UZCh18V3VQ+OXJsw2pprJ4g==","signatures":[{"sig":"MEUCIHeS8R0T1YZ9SVLYw3MPJMQCSo9fdG4sEi3Fl5TU75qJAiEAsD4/rjMNt0nKZgHf6cvvTMc5j4VD0bD2oFXSTgH3jFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe6QCRA9TVsSAnZWagAAHD4P/ArA11YDe0mAdvqNh8y/\n79PoqR8ZBmvkF4mwZUVuJAN/QniPoiSD4WNl9f8U9tpmmI1XqR3CKmueNLDv\nZCcSMellcsZc55Moxgg+1TDwUygsI5pZibn/x+rt0/zFMzy7cvNSE+MV9dKr\n0Y6XMwCySIDYTSWaNaz4Jg10JMnfNlgvmgNOjx61WQnUlAvF1HG3z7h4/E08\nnjn5WUawA7wpSk5S+j6k5MdNNqBu0rV3KYXyt8j17jIqfC1eRt7/dz5mf+T/\nF/Lae2f+fwBnxYxQIb5JFRii+UskaOKS7OF9fgv0Q2epFXHLvmctuxPpcoNE\ncmLSjEiPTlGio/L4zS9xS3JWT5SXdUqRV3kY/J/k/p5Anx5Zwz3d4+qYexOW\n8KyrYW8r6sD7pXh1WQmKuLjZZny2sHtlxnXnGG5XV4xnT75OaRbgt+73XDb7\nxq7bRNgvsH4FPRK1EXAYOKEGQF0l8VT3SpQYeqYX5cDkGInsguqoz5p4FSQ+\n0KCwsc0HLVZugv4fEFzH6itmOWK+lIbxKC5K07IZVnYfK4LGd233l31MF1fY\nGkfFSXP/9djvbF7wOMAGT2ymccecg/tw+cd4WtXi8qgk5VpDUR+kCaySAiRR\njg7No/p3p7dIk0YiG5WShF8JjMKmqGQrtfHJkumSWp9joc1fAHuAK73tx+Sv\nwtrh\r\n=7B9M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb5a4cdeb.0","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/shape":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/density":"8.0.0-canary.fb5a4cdeb.0","@material/checkbox":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/elevation":"8.0.0-canary.fb5a4cdeb.0","@material/typography":"8.0.0-canary.fb5a4cdeb.0","@material/touch-target":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fb5a4cdeb.0_1595272848166_0.22544845864842133","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/chips","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3abb74b3bfadcad6286ddb47648942abe08a5c5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.8df0f517c.0.tgz","fileCount":83,"integrity":"sha512-KHSJywUPMW4VLVGV32rjJ3GNMvrI0Y4v5i/7+cOeAgtvey2mFBQQGxsE0GQRiojSzxcDRiAanmPMASwZkb5XUA==","signatures":[{"sig":"MEUCIQChhGFwqVlT2+64g0cInGO1YTBCBF6Ta2946YQ4w4p02wIgWZiO+hxClRR44vB9fDkH8w78ajETyyxlbFymb2KyLMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8YCRA9TVsSAnZWagAAzvYP/2MrABj1fPX1ZjaTChr9\n3U/3me15yhXeeaRKIpTQ1/MYnM9m20aS+MtXAdZ6llJJR7nRDLybVGKwK56y\n3e2yfiz1+9JevzmtYPg9lV5Z/0Rea59myKGoCV4PVX8GzFgZFp425XkGGwLd\n//0hUAXb+9eRNOf6PsqEQQKIxKxUKqHSwnRNt3mJXKtuRL8K7OI9k+fvtJZr\n0xagdU5VXoG2eJ88VgrXArw2sgDUWU6SeytjGCSoVDP/BYlsyfNNh6p5rgtE\ndMyf/z9VHdvK/KTPwZFwvcloxwNonMzcikjPyJy9njS9AZi1d31+CH6MCJ04\nGXOFtBoOQVRZI6cOAdsmN4W9bZLfK7ffTM5nJojJlpjRYU1wg4FEjIpJUpg4\npV1ej7L4r8Cbman3gWCbxyYyEsFOhaj3JPtoqpeWq7KdCZsvF1/KOY5kprsA\nAzLbyy2x3/QdJjdQVj7VOLwBe0WP3WHIKDZ0LEBSXE5Lp9YwXsbAhqpRLjP5\nRHi+NBkd/oNyMDlPPWiNf8VV3hCVtM5WGfdepPi/DzbsrJUOs3Ovx41eW3ef\nBqZzqL/lVt2mQGkWMJQ17o6u65nJsoz55gYyWMwYllqjB6m3JDalePT2rmbd\nmKMnnAcw1pIMxfoAjaMgHJ4kHH99njnLzQUriAe9NTzJK7eoQz8v2DPvyikN\np6nt\r\n=vYEc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8df0f517c.0","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/shape":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/density":"8.0.0-canary.8df0f517c.0","@material/checkbox":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/elevation":"8.0.0-canary.8df0f517c.0","@material/typography":"8.0.0-canary.8df0f517c.0","@material/touch-target":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.8df0f517c.0_1595289368487_0.4707790930186513","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/chips","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f52295ef11df50f706e1e1a7e924631dd311a78","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":83,"integrity":"sha512-2Bp2UExjtvjOVlVNyM9XjGbUl3CQfCBJuzFFbvZnsmoiKRHb5dV0DAM0pYEgk8QaTtjiB24VgJg6+itq3HrLaw==","signatures":[{"sig":"MEUCIQDgNMZsmtAZ850IDZobPjsMOUKvga+8DKQRVRcm/rotyAIgDCiRu0e5K6du7Z5fR9WpD/OqmRHsV8Xfe+2rE9kYg+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvgCRA9TVsSAnZWagAAf2sP/jv1vr04ZmKJgfgfyQCZ\nTJEuWWStDC5+c2y60aL+iF7VWA6BmZSs6f7rnTrQi/5o0VJDyTFArIRmhlrX\nuSM/kT3zaEvYFX1V9EJwfGCl7v40yzHXQxwOGDw56lXyNARxKwds3lUJ5khp\nqDVE/bdV/VUHigUsREN8MSrz+bKWYMm2ZG4cg0RebAUgcx5xRPr2oAvTDfLv\nvz0X3NDICsekZuDBsngPUSLgNqppWwm2dMxlzRaTrt6Y+8dtUH+KzVODNEgL\nf8UEUW2AtIOOCDf8oN/2LdYGHZIQnwSUSpugntIEnFPvPRI7xdXH2KB50WUo\nndmiZ6rNVgTubqSgPMjc7L6WNPjIRq+/GUzeH7oee/3g5FwtYrZXVRIyU/sW\nNM9wmjdnOJi5ho+Q0AauX46+XeRIxf04MdNuNJg6e9kUgdADJpkgRrNE3yGt\ncSiiCS3f1TDyf4fm2VNdaZSf+FNtf3BPcudUf+L0SoCz89cei+EOB7rgLQN3\nLTkqU5gGPLLOHlHuOkhO/7B9IcVFWH3vXa/i+BuoZ+F/EuTTp4cZik/Yi9Qo\nAUBTfiekhkjEprH10YcjDwdhDAcMo87fKB2YKDdqs84mwcrF6Ld2XDWPscFV\nHiSb4cfw9qS3r3Y4GKTliNSdPyPeQGscaazHuoXX3JQFI4rvoON9hq+sOPQC\nyhz1\r\n=bB1u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.abcdbcfeb.0","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/shape":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/density":"8.0.0-canary.abcdbcfeb.0","@material/checkbox":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/elevation":"8.0.0-canary.abcdbcfeb.0","@material/typography":"8.0.0-canary.abcdbcfeb.0","@material/touch-target":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.abcdbcfeb.0_1595292639506_0.6434933860214695","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/chips","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cbebf91486460d7ae57710e82205b7a24687807","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.7bd5075de.0.tgz","fileCount":83,"integrity":"sha512-G7yOAf8HpQPcyKDtrG10mXjV9QPhM+rPRfCeJAhqqOGhCCayyBx84YE1zNGZlUUcFhVzm1nhNsmiLmgLv31Fgg==","signatures":[{"sig":"MEUCIHL9nmhKcQti6zkyBj85BLT15UX1nXTuSjExaYehLXtyAiEAnW4kNL93vPIddEjHtpsrRVsSeqrch+YVuyY4M5lPvQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzhMCRA9TVsSAnZWagAANbUQAJ5kKEIcxa5CMQ/+NHsD\nYGyIPQFwn4pEARdf8KNqPx1Dy2TNkAWqU3fkQHSu3Q5Pv77v+YcmS3bAOnGW\nY6slUPjcJ6/DgMhcmlkGmVMJWxPxyagPk9abm6VkMeLbX197IW/tn+ig6fNV\ncHt/AiHSHIugmJ8GMxsa4nqrzu/ZI2P32jRIxs1cLCVOwXQvotoU+QUNYrr/\nSdhoRBX9hg5g068COFlwV1nyatdqgpIEmlLzrIoPxpSxI73y2VPuSHxOqEV+\nAnnscFagWw20Ktvmv3+mBoKdgHcwf9qgICM/RhTkoCIMqSYiIlNUnnPxsuQk\nsec+tiqe887w4r1j2iTNN33gw0g7Qi3JUGOcZ2PZmVCK44JKpae9QBnVVEI1\nH6mxA+XJD8bL1GElTPcRY0wG1D/aqB6egbnPdy2QQD8TFSmd2onK/xRsFOhY\ncNnn5epAIRQXacJJiNSUFM1wRcYpZcXFLQKy6fQUexyyenepBN6ZxBqn+7YE\nwUDkY48RADJbHYfHQnchNDC8nPsCzYDqkpyZcz/3a3KBVQKuVMaFHVDLk89U\n/Sh6NSS9pTyxUfDM8SeY+sCblOKpvRwAdd6tIVrXbAJYYiSha6khvRU/MUr/\nUsYeSJGEoXu1Ckv2mLdNQRxfM9HBKEI/nihfzCD9Txtf/kWFzAUtbXq8bcm+\nRdHI\r\n=y7ly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7bd5075de.0","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/shape":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/density":"8.0.0-canary.7bd5075de.0","@material/checkbox":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/elevation":"8.0.0-canary.7bd5075de.0","@material/typography":"8.0.0-canary.7bd5075de.0","@material/touch-target":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.7bd5075de.0_1595357260169_0.3819557615972424","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/chips","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.405a29a20.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cbb2d93e84b480629868c8f742025d5cf406996","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.405a29a20.0.tgz","fileCount":83,"integrity":"sha512-g40PWvIJx7cU6zGdDzZdT4Dm+4rWZVe6r4JkRGmdYBp7MA0s4r8qfw/d7RUVRX9OlY2AI6tAMQ/HMbf16RKErQ==","signatures":[{"sig":"MEUCIQCWTSzRMgv3Ly+V60f/9XUvn8SWUHqb3Narx64jKHzt1AIgSaNWl3KaJJ/0pp+Jb+bER1nvu5qLZjDL0vMkOBymwPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLyJCRA9TVsSAnZWagAAgfgP/2VLh34NEIofd12ZcL+i\nrg/C/kTH7vd5q4ZAeqSg/+zDSeHlAye4meAz61BbxI8NGZlTBTlQ6lal9kjf\nXCfXppP/sM1RHX77bUnwbSdHF7xufmhslTo5QHcfK32M8pZu9llTwWdvJXCB\nSReXGj+q262Puw/F9JVRXzCanHb1HAk44UPyoyAYGcfFYniUNA0H1fXmO0O2\nHBllAPKKGKgvsACD46NFbm6P2JOsgshBncs58D5hE3BNuIOqK2E9zAMhExGI\nhW+K5W69D80zSbv2AtbmHQbp8hHxDBwO1zW2ShhdjPAn2piByWX3O7IZW2rn\nZ2YCS2b0n34C0UkYU2jhEafD/ohUJglL/x3ldROE7jjJEVpYO97xfnE63rXT\nbveZXP91YfXMZNl8D9/oEGTqsRBrQaZq0lsUF7zIIrIqAkoA/20oHj95YZpQ\nRcBE8uzHsdUQ581/FH1kHqrh72Pgc1hGYHsDBiCBUkZVH9NtluBAoKVAD+eG\n7KGfEuQJt33KdbVKOescdGYDmTDYqe6cI9k6n9ZtgUDrkEqs873+LLSmTQig\nCuUGzCw+w4sFlMEp+acaoUszkTNL0OONqUDrqZwOxpj7LDH0bY5RSI4ycQuz\nfVAVbQRHNLXnmijt9nOg7aiW2RMBhVqJmVlFDhVe6JEa8Ut0mtcGNbZEN6qS\nFYU2\r\n=jU/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.405a29a20.0","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/shape":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/density":"8.0.0-canary.405a29a20.0","@material/checkbox":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/elevation":"8.0.0-canary.405a29a20.0","@material/typography":"8.0.0-canary.405a29a20.0","@material/touch-target":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.405a29a20.0_1595456649340_0.3281346240864331","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/chips","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6453373122d8dd97d2517e60880ac2d4c38307ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.f3693ac4c.0.tgz","fileCount":83,"integrity":"sha512-jJWDMtYTgjKWgxxhxsNUjK4cw42Sjw79d8uHKIgaruUmHNZGJ3iDupr87G2Gl+r2oIv/dvGTNRiu5+r9lz5XUQ==","signatures":[{"sig":"MEYCIQDtjzjfMKbmJ0zKeyv9CH/IqynlRezOn7nixMBBjYX9NwIhAKAfcS/1XA2Bp5qUEG6BALA2bbMzFjQut7DtvPcHT7f2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL74CRA9TVsSAnZWagAAxY4P/2UnxqlJoRAjHtbrxjFa\nVUmFLxnZLnDj1cB/N9nvCg+Diwj9rHqTAFM94jHVF9TAs476WxG8IkL/nUmw\nrlyfAA7wcYOLUybSo3VPmpOBKivc7IaGZXPUVVFHvTgHHIQBtD3DN0JrmAx+\nVqKgLp4H72rifHkmM2BS6qxABusQ+Fozs9ClU2is5LW4sszFobXNxkzwa5XW\nqA44P5RblikP3G7mp61kd1dU+FERtsUd0YozTZB1/L9A+CFSVvvbhuOE0cU0\nUhGejr452MimYkc2Anwa1ZPmThOgqHRTdZ2p7DkJaMTNZYkfR4GDi6TbJT+8\nhR8Y6Q5sxaPuobRla5KCuydE+y1vbJ8ocBzMECHNPzJs3si1iCSNGwge29dT\nbK/Sn1xPwTl30S7xmXVRbeTiw8u5sv30mEimmsJspHDt1cqoqYktgn9rscMi\ngNsNBKrz5Demcb2AeaO39Tz5M6N8gjzsMH2aRB8JCW0gQ3RyhEdEU0ymLLPe\n27yTxsViJ2Bvf21aF+EphKMfMPpM172I4QGgStNJoOAwsr7humTVrnEtqHlT\nNeaPWtjXwlqpC70EwuVYFotKifYDj+RwNpBq6MF09jLlriyjlJkYfEyun2uN\nD4T+aZepheryU07PpearuyeTDeSrrykjsUok180+d4mGLo7mHlcLQQ1tIdoJ\nSEgU\r\n=lond\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f3693ac4c.0","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/shape":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/density":"8.0.0-canary.f3693ac4c.0","@material/checkbox":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/elevation":"8.0.0-canary.f3693ac4c.0","@material/typography":"8.0.0-canary.f3693ac4c.0","@material/touch-target":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.f3693ac4c.0_1595457272382_0.9020844535663284","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/chips","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.12a109680.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feff026698beb3bfcb99b63cbf43f2107a3547a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.12a109680.0.tgz","fileCount":83,"integrity":"sha512-sk6VM6uhZ5+CM8QrpGvV7eWWJvWmnIuu0EqhUrBNehmK0+MXdwLajxMX/PaYymszb400QqBYz2HFXysTZxez3g==","signatures":[{"sig":"MEYCIQCFtDN9f/rbulz76sgthwCwj+DeMYHnycGLTwuoPSr80gIhAKeRQL6XhMckh1lGVTcIeE3eCAR1TSNB/L8LEIynpWgU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXfCRA9TVsSAnZWagAAbaoP/A+EvVmbKYmPj5W7b0u2\nePZWE9DrggVMkhSM7ROywRCAdVMNmpyObVAgwMGz2oJ2BLC2J1LHmmZ6Y5VO\nIRZw3ii/OT86icA3f4saRWxrvYUoRc6IeJmzdT/eYhBmHxMcZP8o5TVOos9t\nIThucBDesgAm8KXlApp2XlIFi2+sTvn9bHoaShiqc7M2rNsHdYTZaTQyKfIE\nSQ3Auu9Uir3mMhMCszTMKywUCBZoUj60I/bnpz6uyNWCUbSwE2lNFzsFrcUi\n7o3IcarJDO+6Ugr4H1IlQrYjQRFvi2dmMd79fij4E34hVa1qy1d5rEoUkmd/\ntGVO5QLjwOvI6G2Rwiw/IHkG72Z5SY0Y42UxbcdVFvJDsabGQc0i0s1PxXLs\nMx5zC+MOsL6dkraVlajyfga7YfspColkeofa95NSVEGsrJbnERFeANFb/SW5\ngilj7n6Dr39PaC5q++5Ol5sA6A7LEqZE9Ra+b3QR2ewxaxR1M5ZK3ngKZcDK\nkQmLignCOa43vEBRLI8d8vE7JTRf2DyGzvtLzwTRzQiPFeBtcP8p8752wyPE\nFQJjL8EnkAvUqYZTfSDdUPXirbhTD3cjLsK7qQ8G1vy4orDE9MFC33l1RnGF\n2HhL/4brpWVCiuPXhMWlxjtJ0Bxxny32n7mQKdhgwTMbYkqBuVq7YtSzcGTZ\nXVyL\r\n=HpwL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.12a109680.0","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/shape":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/density":"8.0.0-canary.12a109680.0","@material/checkbox":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/elevation":"8.0.0-canary.12a109680.0","@material/typography":"8.0.0-canary.12a109680.0","@material/touch-target":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.12a109680.0_1595459039177_0.2909844134680686","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/chips","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64a7e10144312f22e74324290597afa9d418da61","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.bbd06696e.0.tgz","fileCount":83,"integrity":"sha512-BfGVX1Kyzv2mY+MW9UgyOhQHQMQPNpHKIsukq3f0TeYzAJKfcwUkaSbZl7d5SVvXjkaTWkzVEZa2U0HqeVgEbg==","signatures":[{"sig":"MEUCIBjapUwX/CApymWc0l0jNsHDl9+PECKuuFfbkuufzjEjAiEAvwojenTjyKwHHMiae8Iji+f3zffTuYz/FpL90tN+xq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNF3CRA9TVsSAnZWagAAqLIP+wZps1CFqH+qCYIzx3W+\nUA+Ia4KQzMEGm4sWpmJmefJo547JQwCz1HPuXy9DdAXWUtL1ZKRM4ZnrT9Yh\nbyXscXs//kqLOFN8n+XJVxx+szDvvpZ32JAgboKBly6mEJSlKpQc8c8EBHkG\nnPEehPGGNty8r6gQPKAPXmC3srbakOWV/oiSIkNwYEQ+keWgc6BltV/mCF2S\ns1OhLJkMCrHadIuT50ym27rYuWHzi2hnp/g03/SVjcDxOuwKlyaVGOtQ5mHd\n7zuhNPcVMcurfE0Y8nGIBX6M+wFA02BQKqJesKQrrmCei4h9w1gqdHyNqgMA\ncGw3YA4ak+p6VU6DkpL0Yb3ReKK9Yxs2wJVM2SJe4UmpXgza3uDPhBazkmXx\nDMidyffQg1+RAd8pwu9d8zMzPr7PPwnJ2hIDWy+2SE8Zf+d7ireGInqNugd2\nawdq9XzE4Nx+5VgdFaiX0Y9rZ0KvIUT8rB4WatPHgvf/WljWYkIvfY8C7+/7\n8zjvziuKSY44t5V608gjGHCqCtM+feRXm2P40eZAgmu92KTW6nNme5XZWdqg\nhGjEqctM2Lf3q8oVVtP3abOEWqogemEMcsG0DuAAka4Xxc36TfFr4pmV9S1/\nHkKu+STZ4EYvbkSOHbr1epVJqi9OV6H+xnIfF8U0iH9CZ4AWNybJi5QSMBC7\n3Ttt\r\n=kT1D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bbd06696e.0","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/shape":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/density":"8.0.0-canary.bbd06696e.0","@material/checkbox":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/elevation":"8.0.0-canary.bbd06696e.0","@material/typography":"8.0.0-canary.bbd06696e.0","@material/touch-target":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.bbd06696e.0_1595462007210_0.6232090970248907","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/chips","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.4951e7651.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"156b2a3bad512128a41fe2b9a3c3b2f1ccde8406","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.4951e7651.0.tgz","fileCount":83,"integrity":"sha512-qfJZsf8w8ArOZbVeHolgVFooz74nN5492LoMspIJG3ERTByQKJkk6sLkTyaWZfweXhFRVrrqAK3uJRr/8RWXtA==","signatures":[{"sig":"MEQCIDWVlK8u93Trj7u3FBHxMOvfEtSMPWntvSbBaLcVQTTvAiBJaO51RhXdPOJFfDpydTebJQWONm1BiETjwbkCOEUCJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOzSCRA9TVsSAnZWagAAnHcP/iBmVPEF4PgAgWmwF5mv\n+mEdL24ywfWcZTd/1ANGCoL4PXbY11BQ1TKDiOvUUhgm+nzCG2NhcceEFR3m\n0QnGTLI0+VQqv3F/XI/AEFSaa8ANiMCuzXDmGvTCvnDYVr1RxFzo9sjjedIQ\nVy+Ay0lPLvzTzAM57Irit864G4W7Emhva91OisjCvnKFmNAa3KcyuwVRCUl+\nxpzdJyfXZUmi7LmxFLJDj3q4VDbIGUUPa4Mgcykx3t4+Gi2n2TxrtKsc3ric\nvux21HuLU5Quij8TqjQwCGwErvTvocQzbRWFQeNrwdzgNzsKtXnyoun2gf+L\nCywryGnHt4FAyek+qeJA3LTlYzeC2sKJidi0Fv78PA29flfIEAe0Byfc/dm+\nPyGJj6tWlL0HzVrMXk/04m/98n0oXkoleWgMkWaYgQkVmVJ9DykbCRF/N7T8\n/mvVYQe4uEyEAXykyExHat8rsUhs1PH+24BhZGvfKJBNT2pyPxPdCHdj9SUG\nqT2C6gGlKG/jSdWQeix7KMgqJ1JPDVmajdEreMYahFHQEf1Tee2noINkHb/2\nD5mpdH1hY5Eckwox/RwrXcIviGH0qdPCDraIb+uDro+kFYwy4NQQTrfyIRiT\niGHryj7euPmmC/cEUyUfSHVv5Gsw7zdF0U3Bp19V8OphhyhathPe6bSdVLgu\nFdX5\r\n=fkjN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4951e7651.0","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/shape":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/density":"8.0.0-canary.4951e7651.0","@material/checkbox":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/elevation":"8.0.0-canary.4951e7651.0","@material/typography":"8.0.0-canary.4951e7651.0","@material/touch-target":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.4951e7651.0_1595469009906_0.485614395255064","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/chips","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.75deebbef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e5fc9a91ea8939625079e5cf4d0e5453d7341d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.75deebbef.0.tgz","fileCount":83,"integrity":"sha512-RYPsrxrctfIutlijvh/mZOVZjdhUc7QQ5lYpTVgS6bIq18F8j3dqcLGwnLPS45yB9/CoRtAK13tr8J7Mmb11qw==","signatures":[{"sig":"MEUCIF1a6tbrsK/wujs3WPyQztrIE29XFkE4sRV5KeMLmlV3AiEAvZB6PafmT7Vih8Q7fRcil1Ch2u4CeH5BsaSPP3XLKek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc02CRA9TVsSAnZWagAA5MYP/2IxeGEKEDbLRCtZKjEs\n3AAj/HfI8ojgeP/Rdjh1hhhkF94lNYoU+wdKNDdE0KO08+ZbN0HptLmsiBF4\nz5KBQ0PTDEBi0SyL7krWu1Zvh+eGPYdktn4itDVLpuUOnJsrIEdb8EW6oCxZ\noziCRmJYZubFkW95hMe2R/OCBcPBsF8D/Hd9NoErhJl9cV1byBzJ8Vlu0vcW\njNECOoeNXXH4JqD6tcWJMEj4ZCXZHW8Ah2XhJs6znD16gJxKz8H7HFiLfCeH\nRYcQ7VqhX30btweStRI4mPqtdqGdb350I5Z2IsRg5mnb8SnzvcZxbQJehkTC\nUhSYps3RLaEBBHC2JrDlLnJzb3rj2BUMFgRkxlAGYyZOX6heU+2H/gJ0WLMS\nUIgmSRTl4HnVqyuS9cQE0Cdk6V4aQq9CGuLizOnxw+fLt7cqi4zBs6Ju0m57\nR1KnB+29WWLv5v7KkhWUWaekmkVoHWQgiFovlTZTCJFCKBYr76JIEbJT3hOi\nUnU8kU/LWaH7fDjUJ6aM/oToM52ybYNVHu3jrWgZR8eovXVho/zKaMBDnKdJ\nqOL9A7OKHWn9o79hPz/oRwJGE55AXVfC2gu8qhuESDPQuXJiuqgWX44WftGq\nQ8t6NopRUsRLN1qvlaLTWYJY96NOzqqW+HVB7dP7PaYP+vsyWANJMpNyAeyg\n83jx\r\n=IJmX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75deebbef.0","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/shape":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/density":"8.0.0-canary.75deebbef.0","@material/checkbox":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/elevation":"8.0.0-canary.75deebbef.0","@material/typography":"8.0.0-canary.75deebbef.0","@material/touch-target":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.75deebbef.0_1595526454524_0.6344790795385851","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/chips","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a74b24227c14bdd1c3595af9d51e99f9f96cf9a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.95aff33ee.0.tgz","fileCount":83,"integrity":"sha512-ngta+aOHeHDrg5qOMTDjjd0fZ5AVw5jiYSE+gBP+5qf2wzwj6wbeXR7EA3yIvcSJasLinhGcbeWGU1hDX75iEw==","signatures":[{"sig":"MEUCIQC3Yu0C9XkYlnVnDYx+31s3XRp4+LCm7WKsWRjUP8UF5wIgA858lY477btlArbTi85Uc24stoG2Y3XNXpoz8BZcDuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdtbCRA9TVsSAnZWagAAIN4P/2Go+cZtwVfs1WG9xGNy\nYL8XlMWTY39V1sX3QcUhZ5rDDi4nVO5gCQtrTVOsB5860mzmCFCnmqxh3vfw\nzhh+upoWI/HcIYmulZpwRyLmYa0645RSXY3SZiP0S/u/3rodEFO+ji67kilS\nqp4uG7W6XZhs1TdksIGduu5RSAAMx8zW6N1PSlc09HSm81qwOUQTrNR7XYlm\ns2GoXXKi6I866o5Z3ef2rY7FFH1z60BvOpdNencUjjMEZ8Ml1M1i58kIYg5M\nihJaMiANxFYVaEg5xEfT7j+FbwYKkgQYa0UJ3XSVCz7SG61sus7vn/TEIpTA\nPKWYwb3HRLtZk97lEcTEDALSf2kvx8MsqPLAoiUcQhaNweMdV1Hng7ik4vDE\n7BGUMuz738LR4yI1+BSMZk5sPQvNm6fjHD5iXTHypze6Rk9XtKdIm71cIsfT\nh3Rz+iLO2tm8nsf9XsAhzEaLPab6p0f6RD//k97P++kgoL0tO2pI0n8AGjrd\n/DXqg4ScneslE1iD8GYzwk0JYDyOD3sMVr000weLtSP783wSsJnqXKyEFI0J\nzCueiVPWrXvG8JvSdrqKWRbfiZicYKU1JwaZuUEWT7WNxPDaucSodPp6ImA/\npikZy5zstTdH0aevQKSrP5AvYX85Ptt+aMdY5YR8ThDL4jm+l+Ewb816U0uq\n3ss7\r\n=nxYy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95aff33ee.0","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/shape":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/density":"8.0.0-canary.95aff33ee.0","@material/checkbox":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/elevation":"8.0.0-canary.95aff33ee.0","@material/typography":"8.0.0-canary.95aff33ee.0","@material/touch-target":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.95aff33ee.0_1595530075064_0.3248117426438657","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/chips","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db6892450f2b267360106c65754b9e7ec1badca9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.9d9f47473.0.tgz","fileCount":83,"integrity":"sha512-AlBcjnsqstPghDPr+oSngB+DQuElG3Dk+dmlnTR+Y35xqzWFdwiYZaNdUgdGIhl7oauQiZ5Ubamy2V53B3QHeA==","signatures":[{"sig":"MEQCIHwUHzmzj3C5ENFEeS56JyRJiyk1pWGjO+tbX7FH6/19AiAPLfNWoIL8WvtcFtc+jvhsO6ET1ST219RCc+rO7iSiqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGewXCRA9TVsSAnZWagAA8p4P/3/J7WO4RLTq4cVF3PKq\n/KQMdxTD9sG1k4tdenc63wDPvX8ZlDjHyX+Z53dE8sVgRbVy5QtUZXQnVm4Y\nMZIAfo7tE0viSkFNgejltBP33kY46HZPrtl46H9HvCsbbstO9WWv/wPZ9iQD\nLZH/XBfIofJr7CwDrwhH9zWb/PEHUK3x/HsGFagfbeUIMN9y1rv5vnY2JinC\n0igMkRD74JBWh61Ot6LYcDT6tNqqnuYGg1acopz/QKKGP8ZW620ssj2keltg\n/iPYQ7ac5Qg6yK94QeQAx6Sito0axkCASUV3CNa/xDGHmnEUDyvfarXG6osp\nwA1d3eyJ/1ONuOg1j3I+u76eLA6HIgkI+NpH5KTIUCyAkbTXCriPJyRP+j1x\nhg99X17thOpMsb3P0ILDSdWQkB4vbcbJST80/DLaI/LrHjOKOf6tLaWcO114\nUgvENN37HQSZn3EhfKGs0Npgzfww3VdZeyWsCIKJgWrv0/jybQ2hfPKdcNGS\nm8b+sOI9RuruPoP9pl6ZkNB6YmJCbGKKvshRvFR8DKZncbMeRSotQ0F6IDis\nDqL8AZG8CTrhR9mVZ6/5Z2/FTM1gi2c4X7a5E15rkc9PREATHSBUbduCcAXP\nwl9/ib76YQHBAqtpwKAaoERvoI9KCww8prt+mZW01O/+T/a/N0xELNwyXYDi\nWK4f\r\n=RG1O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9d9f47473.0","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/shape":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/density":"8.0.0-canary.9d9f47473.0","@material/checkbox":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/elevation":"8.0.0-canary.9d9f47473.0","@material/typography":"8.0.0-canary.9d9f47473.0","@material/touch-target":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.9d9f47473.0_1595534358639_0.5245705178001299","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/chips","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6b9edd129f8dac9c3f75660660ee879f4809ed8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.00dfbf6be.0.tgz","fileCount":83,"integrity":"sha512-+rlOmtYBqGocIhzWYxzUzRAcX5kGh7qY+ErY7YaHB50hVObCikQdGTBcZQOt2rcdOTec+xoo5M9C1h+GtSqgzA==","signatures":[{"sig":"MEUCIHdBbigT6yf/c8eOpJ636nb3PL9BvyMK3tZWLzPJReSKAiEApP0E8mktqR96pKsKoQHhmzgaCxrFs1qX6Uv27kHLcWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfpyCRA9TVsSAnZWagAAFlcP/iIqYrWGKWr5Hp4wXh00\nmsouUGlGreF46+UlcwHMvUdhQwzgqReIH5Z2yC6evoKxRSCYN8DOC3+cmq1T\nhRLIZJqjr8Yi3WHSEvHeacyYm4B7FnrCmM9MxXfCsQ+8H1Gz+STRijSm2OIe\nP+sRHFoDAw4N6qFoyA3IHFghEGMhbI4BGRzAlhdqoF5tUgOhHDZa4KDsqKKc\nIAIkhsHSPbUQQZytq2jO6peYaioUCghi4MtRjY9OLXxLqYC9eOqHV94WyAeR\nTwFK8hAf0vbDAzJW3WfaodGKk7a0abjj+XMx8U/NkaynzhlX6wb9eRsydk8C\nhKgHF1e3/wB9SIRFza6uGixfFe0qc/PSf7dW8/yX9GjoWoZ2YcduRiV2fxnp\n91rCTFJHLeZ97x3myzHeALxnijqkml3gO5YcRx1VRN2+1JnCxLH9Do85nR3E\nnTxHWzIj7k3QU3fM+rEeeyCVT9P/32e6pkUnnEv37L6cpSLrAmsn+SmURx/Y\nASR22/ByyoxPMqA8nIZYzX9HnqdRE2Qgl2NZdfNhQl/3JcoWs/nC9sN9XX8q\n3cZ23GXiJ/5OOQJXLzbXs/ifw//qqfTfFFCWsKvMsvBnBnC0aeTcBPvLFHj6\n1XZ1Q7ohYYwxbmBegVIqjhSQwnXcSDAK/OdbtyKIqmvHzCkhYLzCE8zQinxL\nqhKH\r\n=iDQE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.00dfbf6be.0","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/shape":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/density":"8.0.0-canary.00dfbf6be.0","@material/checkbox":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/elevation":"8.0.0-canary.00dfbf6be.0","@material/typography":"8.0.0-canary.00dfbf6be.0","@material/touch-target":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.00dfbf6be.0_1595538033806_0.19106190843116555","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/chips","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66cf77ff17b4a3d1448e738f3f78f39cfa5c3f10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.b87e522d2.0.tgz","fileCount":83,"integrity":"sha512-039lJ881tsg9iyBbcwXZDJHWRPDBXvBEVw4AGeFHD0Y42k5p4di5ZI+66TiEczIVmZSLcrmpWJAMIQ7/QGjrlw==","signatures":[{"sig":"MEQCIH52ZgdNztktj01i1DeUPJDBEqvp0HO1KDEIMBJgKXQQAiACg5aB2C+TLdHxtXnOVPRwXzjzwOncvlg5yS4l2WWZPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGgAOCRA9TVsSAnZWagAAffUP/A7vQ+nJ9xewg/0cer/H\nYCUQF3bz3qwtaz3mhPTPAMPiz/eujLFtl2QKR4tRFKNfg6cmPb0LQbWKBkoY\n6ccQV3vJbERq7gfumpEdPmUzukZsup2/VtSYy4fCgwVzfPReWobD32ga9T7b\nGke8EysfpN0yBOlKOdWtrRrs6utSX0SYmhYr9f4n/0grEpLx6W/D2zyG/BpM\nzy+gnNhD8R9gPLCMQzZT5ufyHl0Px8afxQ+Bx7oiGhOgp1izC159yLcaR6Wg\n9MWoBnhWhqctC+MP3zJ3EamH+xjMarwY8O8lx1ykyPoRZfUhNCM2gpdxcQHS\n6HdWFhabVI6MIPT3RG8fUMmbsZM+zichBbsTALC2TY/rsr7FySjd2N7Rf0FS\ne17hCVwc8ZDUSbQuxk9sDzaDYD/UrLF5e3VwWbdO+iY6cchbZy1UFBRRgKs/\noS1DNZBjij3UXwuvfqXv7VR2uBZWdMluYcXbKC7lldgtimaIHCF/ja14vm3X\nUd9gSyNohCIuusYhpy7x0WR89SflKB+/Az12eRvaTGt4HrmNM+QrH2aK2Soa\nAU2mcLBLT4PRU41tLGWrVfJ9q9GjsdNrDg1c7cNDpkQGlAqN7OvNXvr9rBtj\n0chUZ+fdKEMNmzDRFV2Pt+6oFOV5CTSal+KWY1RGD8qaGg70MI1qwMiY4neE\nfFpQ\r\n=tjwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b87e522d2.0","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/shape":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/density":"8.0.0-canary.b87e522d2.0","@material/checkbox":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/elevation":"8.0.0-canary.b87e522d2.0","@material/typography":"8.0.0-canary.b87e522d2.0","@material/touch-target":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.b87e522d2.0_1595539470085_0.6571748351571243","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/chips","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89e66af73d70322cfd4061bfabdfdb9e0e19b126","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.5b3e150e5.0.tgz","fileCount":83,"integrity":"sha512-CZzLT0F5bvvuFSOckYg0VLeM2BGI4QP2/N6et3PXWqYO+ZEnM2IYYh3p6lolbIokqEH1vR2jKU64iW7hMdczrQ==","signatures":[{"sig":"MEUCIQCBnKkWY88hBcyQVKhd63R7OCnwynlUHXxCJ7AGrwGomQIgUObt4pwFpk5r9Cj1ea73psf7Brh/kUgee3xiqCzXcxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjhPCRA9TVsSAnZWagAA6esP/R5YNGTbQWXW5mbYvzxp\nqE+67PCdmnscm4KCVFqANioAInpNUp7+ee5iVy8DZ2FZwmRQCl7pYxaZXvKI\ndSjchz1txqZIXx+GWl3XKT/Z5TPlmjjHFRLf4o1P+MtAcXGIXzRDZtmDKcY2\nvn6HvY7aj03m0vamSOz1bbpSeqkxeNo+sed7RpkoOFWDeqxQsMPzeq1YXDof\ndL/RRQWyp/nZ5GIihSCutZhz22laW7ca+1IZVaTZdlNmGnYBVb3LyooA9iim\niShNqYQqXXPSpaMFOoZQjCgHa2YaMf3vTdI1NpJXkGaWEhziMv6MFEShDSxZ\nT9LzACgFifMtij0sdbyUnq6lJC2VrTPFBVD38rzV470BYhu4wh0bCAWyGSNJ\ncxCLIkZ9zeN8aNeTKug5BoRGsRyUXiQRNqedZe80Sgd2l3rOEYy9oTVwm96t\n8h0S9Eza8rlOQplEHg4Uk+liP95NcoZO9Z0wiewnvhqaOZtIk+8u6zeFYI+q\niatwbGxOzQGQ29pwZa+A2bmuIj4cUHVdgnKtTzMH8MpZK+EFLba3Ea7ieFd3\nfGt3UdVWRCacPZSF+//LLBStaECVeSCCHx26e+kOQ8hYpS77wbZzkEK7fPVd\ng+KkdZkGqyabVuW2RKPjOKYfZCXI/9La3lBewH4eEAto9kLoS5AH403hpJWa\nrcSw\r\n=zSAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5b3e150e5.0","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/shape":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/density":"8.0.0-canary.5b3e150e5.0","@material/checkbox":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/elevation":"8.0.0-canary.5b3e150e5.0","@material/typography":"8.0.0-canary.5b3e150e5.0","@material/touch-target":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.5b3e150e5.0_1595553870571_0.06975801163101059","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/chips","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7585d9c609c0242739558eb56dd1d575f558d4b9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.f0ae11786.0.tgz","fileCount":83,"integrity":"sha512-sptLzNf2PDXG3kpYURPGYfqZ6nITvyiezYrYKvZy7nY2gquvPf4+tS0VYyMaFbDunzBylazEhrqe+0Lwz+pnlQ==","signatures":[{"sig":"MEUCIQCjarSP5yWYCNsU5YYFh+ccRchXtNJyUPrj46IIzmc+qAIgUC9fLXkDsrNH9jwIBDVEzIMBAZdkosdjo3J0A4yswXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGj0FCRA9TVsSAnZWagAARyIQAKBerqCJi5Ze3xcGY+HB\nA7Cajn9Lgndj0uQ4Z50hUwddax8mFaoUbnOYFcrHNZeA5ypHAja4/n0Pxzbf\nrRqDV3fOWtUMwPfolneWtgjOFw9NqumGNfxPycWbzRwE0rvIOf56MauIuu6C\nws45Q+gOOLWcWld0g0KSLtAyuCdbmepEbUesircZF22bb4U9nnHJWACXAWyO\ndOfzCN9Aku5dlJD07+48krRitT5soyJYDMoNzeWlFcFfo0azj/fV63gSwLsZ\nDGjRUbL7K0GBOGO7r6AyQ1n5NkmLeQ6QX5I9XnDVlMtpWJrdMjg3PriRB1Xh\nj1Z57daW4LWof01n2f2HRMA3FusVTnVF9oewZjRwY5YAOjaJcpJFzjSCmV3X\nW1+QRiCgeAXyszHUel/tRo2Ii7CCe61dpf7lxLpfs/Jgz8F8Kp8alCEvMMOe\nj0m8kiG06qHIhuMPBWMBFjZzSrf2yVBxcY1NsN54RCBni/apz5HUesrfIwyD\nW9PMj65l72ZcfoDtdi8DOfUkKXo5obrLTUfGMypdB508LCgsKwlxrsEWBujI\nrgs19+RbHKtwaz39uOCpENo+Q4O76hHaLvYyCCtnzQBNv+nvR/GnC21TzbRQ\nVvLbI0jhXwF1UBbNm/9JPpGu4rLNIUmKwij4VgPDjJ1+yeVWGzZs8KdYxJTl\nQh63\r\n=ePjY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f0ae11786.0","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/shape":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/density":"8.0.0-canary.f0ae11786.0","@material/checkbox":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/elevation":"8.0.0-canary.f0ae11786.0","@material/typography":"8.0.0-canary.f0ae11786.0","@material/touch-target":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.f0ae11786.0_1595555076737_0.023263518275851602","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/chips","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f352dd6094686cd9bd9c158e07875ff0e7575d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":83,"integrity":"sha512-jN4u8yGHHVA6lU1dGGZQE0/w/SGql/Jv1n09VXJyub+tk/5qRGzKHxknVhv983CdeEz1N8heU7OLc9PJ7iaT6g==","signatures":[{"sig":"MEUCICKebufcteZWh+Hg/G8Uo6iUef3Y6q5PiO8zvQxmiQSGAiEA08rWdl135crPC8dlJJ/A6MGRXiWt4mvh7nhG4dj9dTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNECRA9TVsSAnZWagAA7qQP/1pcY+wYs4CL9vB1rPB4\nBOCzwq89tKQiuhfMJ2VHu3D5U64fHMB1zQGy8Bk5MMxCQ+phP2ZNPEhxjoqO\n5C2BbZKRzTkz0btO8W/Dx9TghTXBRB4TxZiRn5QC5om4VzhmXoL9JJ3wBocY\nJGzkjynHStFbC/7xY64VWigmvDUKIvJgb1noOsDjNpiyc8QFZVUYUcYnDoXU\n3eQZk6JVQTUCcc8KdJuz4G6c7yVQYebWCqEytOOWe18pffbTX4lXf5amRKZr\nDR3OLzACteLOEtDGtg54d9OKVfKb0SLx1Krx89GsAtGHmAzJcAfIH+N5vz3a\nKr0wZM6sNiAsqjO11WV1VW6r8GQFW+36LkquWaEQ1cF/sT7x0Hm2qNa9xahK\nbDhrGkFNS+o4jmogdh+6HP6372GesVE98FhYp4UrCaO3FDKOumwfi/Uid8M2\nsT+fgVM9B4lu9NGKaMtpwtaJPLNBwNMOgJEwhqAkA84lY+M88iNS3LLkUb0Q\nLf9aiBj9xLs9PnU4Hup0mJRIz5W6qDg1YugGTte8LzMcPYvy/SFMK0jTsJ95\ngmvxt6vfDMMs2Z35eMakCGTYZxnfNE2ShsOeLeRLDjnxHVO/L86N8k+m9UiT\nV/L+2damF2js4wwWRGyW7xX+xWRexXy95t6zigQqoEke63JA8MRjdg41FcWN\nAEGz\r\n=tf4z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb4ee66c0.0","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/shape":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/density":"8.0.0-canary.fb4ee66c0.0","@material/checkbox":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/elevation":"8.0.0-canary.fb4ee66c0.0","@material/typography":"8.0.0-canary.fb4ee66c0.0","@material/touch-target":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fb4ee66c0.0_1595556674046_0.09053828306063227","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/chips","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5997f1064c7e3a370879531c782eb77b1ec04457","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.5511e0aeb.0.tgz","fileCount":83,"integrity":"sha512-e492bRjlDw3zgjA94dsGwxxEETz4plTIOEkCUKtWJhHYsiynPBzJ/v7eM+q6ZqhnrMOQbXe4QCc1AW5ZZL3fhQ==","signatures":[{"sig":"MEYCIQCZ9uYPO2WBVyZYhPMGS+52A4fUmTrJ5dfXFdNjh/qKswIhAPrWhDPX1T0+bbaa3y2Zsb1pzWYZj2X4iTbnCgSLwdC8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxMECRA9TVsSAnZWagAArcoP/31WfxjLtkhEPW1M5ZvI\ni5kR1GwMsdQSwRH/GVg2ULUZDK6UNb5KNlFzUWw6URfr4cuv8/8lycOFLqk/\nXPFKZOvM0hhU7ZBvhdOQLi2IP/MY2eqrpS8ip22jNv5+V3ZtQVbTIs1Ta4lr\nHSl37EdE7L4CqMS3EBeuFKzjNcsrjIqEjhiRX5MIvFJZjlAHUSUxW7cnAZSx\niowzbz2XTGorIaWRp6uBAVB4AtJAtKrn/gdgnQ13C8VVQYVf8AdVrhstAZQi\niQuLx5RfPtz+YY4/kAaHd7jQtEqVCQUL/6rWzIQQgYs4j8YT1B/M6wGYkdJ/\nTvNsc1Vl9J8wmvEVk7ohF0aS3oeNWvcl/9ngQHwZThOxb65U8+wnWbm4KOVq\nGup9Ne/+Sd15cSkq2VyTtwZsA/JHQ69ihQpIC0WlFnOi1egZcMKLtHqcdgOu\nwHy0wwMSyWEe8eHaAo4m06LACkswrAb5kAFpSMmpgbfClpXTbxvxl/6xHS/Q\n1TGRTfg0mJRO4AmlYzZH5j69LY1l2nMKLFfeuOiMWz52IB/yB/CH7o8Dhbzp\ngz7cABB+spYaOQG+Ffge/ZL7/6oUuyrTGk6vWiXZ8yNSLNQMxtJ5mfTkWUee\nzQSWDmfSKMU/GQP3pGkjfEpC7VculGQw0+Pw2q5SmLIm/af632GTMA0WfI8X\nU+LM\r\n=qllU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511e0aeb.0","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/shape":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/density":"8.0.0-canary.5511e0aeb.0","@material/checkbox":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/elevation":"8.0.0-canary.5511e0aeb.0","@material/typography":"8.0.0-canary.5511e0aeb.0","@material/touch-target":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.5511e0aeb.0_1595609860434_0.8180183588925805","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/chips","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85a746e2436f3c760820145df0fe36124fb5fe38","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.8388a9bf6.0.tgz","fileCount":83,"integrity":"sha512-Nn4+4vulMOiPBpFlD1bje7Yz2EpSnKcneKi085TgKXeX2J0C4Hn+9EwIPl/0Xy2IG56G+4YZVbuGuhWw55tDcg==","signatures":[{"sig":"MEYCIQDap0hu4cyOld3W3PrrhzvlR4DXSnOFLHW74ZPzS+2T9AIhAL1kXVHTRRvoQattHVS4wQosYCxpF+JnCsurUg+luB0K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0EACRA9TVsSAnZWagAAaTwP/RG0bNu08OI+JTVhDFgu\npCPqyEtyVFcnAzEBiu/w0ROTV+7OAb+z4umL20CkiTfToXpKkJa/DtvF5Ile\n9vkZsX8KStsHRtHuwqvWKuMpivSIwHEdoRZjw/Xd+p78VEo3grkV57+LfJAk\n6BJY0GwLvXdnun5APSYrrs1vJ3R0bTxCc3+WuEh3p1O0CCI1U9Rkd9JUcpgW\npifInqKC2OMKSyRvOvobL91/x7eCLaGr+y+kI+R+0J/l+VNeCldUFQnlsb6e\nu7la0XcXQRi/jNEBjCMhYS3rK/8COED5wA1Y9vnFWQ8v4KMnoHfyCDMPqXJO\nDKrDitoF4BJN83KIMc4rePwxAN3RSoJYQ1UjDIFMM7d5xbxf6Ye+KKYYvFTr\nyvKfbWmPCKR1Y+MXNDMWPWv0f6DDhS3WyYn9roGhyWYYulJ7os9dtAT7WFJ9\n6E6SbWFuxig+m1nGJD4sHAPGDyB/tkhXR8ezqx2zn6FCHFQKGnqYo1BJNRSN\n+MgwwqkX4Mjgwy7ea75v98pFTRgC3PXyai75j5jIA8dHz3x65/mDeDT8apOw\n1cBn7Yq56wCZEK/Wok+mDNK7moIJSDCDd1vWnoP6gryNS8jI/UXngfm1GXRY\n8x9adGxdCZDRjafJvsL7Q5q7oEpoihb+ZJyLccSuCrwG3F+RBGMLVZpKvSK/\nvZwe\r\n=a6Oo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8388a9bf6.0","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/shape":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/density":"8.0.0-canary.8388a9bf6.0","@material/checkbox":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/elevation":"8.0.0-canary.8388a9bf6.0","@material/typography":"8.0.0-canary.8388a9bf6.0","@material/touch-target":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.8388a9bf6.0_1595621631825_0.42010372795019624","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/chips","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f58a32294128538c54212fed6fb153c1494ecabf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.ac405eae1.0.tgz","fileCount":83,"integrity":"sha512-wGSSEdjWQ9LM2snk0qURw8CtmpX30cK6V2HHN+y2wCYDvh2xHQKUyuFDuIQInH8q3GC3khXun5axKR2kWd08uA==","signatures":[{"sig":"MEUCIQCw4IgCxagQJpjFuM+rqQ4/NV0P67iBGqGKxS2E7rGN8gIgYSoOL7OesDvwec8eR8y1CP/n4Njyl2fVuTPS7aJ8/Dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu2sCRA9TVsSAnZWagAASuQP/iBgdeK8B+Pz3lLAD+HO\nvIxPf15LFZV5pbmXUZy1aiOe0UVBtnd3bPxY3l/rfrmbrEtsx4CkMCqOK64b\nqvYKfcCXIU5atw0TeHVtMYceH4nzoDuhb7FRAKvWspf4IOHHWlXuEpfn0y8z\n7g/NIAEtYQKcYylvRKU8n+u+oVIZ/iapGp+xiBtu9AV4da8xCcOUAhmz65xJ\nQ/6xfOPpITlDENDaOTLksyd6AfjEAW37IjlCBV2lcoDqjrZH6IetKRXZBPjq\nW+7FKPiZ3b/gn4aJKDpaQwzsaY1nZKn+sDlS5u55EHtVV/JY6/wK03SoH8/g\nDBo5Jr7rZxj5sYtux1gq7tnqnb97wKS4Wywr+1uQgawqZnHHf03hAwCzgS3X\nm+x3OBxSrXD4oV4DAIAXvOw1eB7MvLUvH7Jo2Sfl4g20tiga2gkdLcOfosfB\n/z0X/+4eH3hAkHUjPL4kNyXgDzKj0DOmWQmvn9ApA+RMKS2KA3+DzaIBA9AG\nRPxmynfA8qF6OlaiOmLxENwvVaSZD6aNRetcNjzHEK82IgyZkgG1TGc4KL6f\n22LyhWBu6qNZAHNMCId+c73Bc7ZBq9zy6qUQGJ/jV/ARW0J2yu3xRxgqs5+z\nycqmswjaQtDPe2G6oGrPxqeXtW0hdQxu2cFL3nOgaLCX2si8na2mG68UyN4u\nmgH1\r\n=3GG5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ac405eae1.0","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/shape":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/density":"8.0.0-canary.ac405eae1.0","@material/checkbox":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/elevation":"8.0.0-canary.ac405eae1.0","@material/typography":"8.0.0-canary.ac405eae1.0","@material/touch-target":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.ac405eae1.0_1595862443723_0.902135644122702","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/chips","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.75553837c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41db9ceaec68c77057698faf6e2d4c6773dc681b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.75553837c.0.tgz","fileCount":83,"integrity":"sha512-2hhVIc4wAdAt7ZJTYc2d+wakxGyieKm/c8CxLFvHKAU7KFx0XXS3yYy/PaUHOPDS+Umc1hqOi+CINrEpwN46iA==","signatures":[{"sig":"MEQCIB/qvulnMtsaVcpnwPIz35nxEeFiU2wNYcSOf5L77mfQAiBTgkciscZKA8Eo4QblzjD+EBKG2drVRMK8Zwa4OV8ndA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu8OCRA9TVsSAnZWagAAz50P/iJrPD+G1JTGLpNouy9E\nZ+AJBaJnzuxVFocOLNKnTahC22dwC4N+8jry/eCCUcmh1Qvf+Ax0WAt/zjxF\n0G3wf5EdbX7EkyLQMFnoQp7bHKiW5kLh2mEdR1bkdDvfZmYqbcCjy9indh0G\nuGugxiOnfWrTfpAXacrpUbcy+M/rslqH4WMnzBNMLtXJO1xGLE9FtYmrAWMK\nS+dZYp2L2meBKc0cnardhUJJHNm1Pb0flwZZWz55ivmFMIf6Y1SV1PQxDFzl\nzPGucX0NyNWT2hvP/Ieri5lI9QxsYdRdbsfPyiMa7kf00MQQ2GgXRQqwMczP\nIbD+i//oZn8Itp1Jl8zxhnT0BW071wMELs7vSaoiS4gb3V+LH7nO20zqySTT\nNaF9vi/Xxl8A147+NCFI37UYmSTqNMvO/MYd19EkfwkfF8aTQUwdBW5+uj02\n8K79oehzKaLHXMieGpOednK4i8gsvBfkzAl2AfebnDgUH7gKbmTOdBH4JL4S\n3xeB/MigymGkHBdgUicNSOiP7xQOGapvlIUPjijgCWCU1ICX8y1z9gEDjnmW\nLH11qVoLpZU756uL62ub3byiYXGtDWnSrWfTEjfpQV1htl3cpp/aMwEvUF4i\nIYrAttKaZ2mEWtBNS5gpMWcDKFozAUdpVEHGnP3owXpEogrHbTjHPG2GnDQf\nUkjP\r\n=eltS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75553837c.0","@material/rtl":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/shape":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/density":"8.0.0-canary.75553837c.0","@material/checkbox":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/elevation":"8.0.0-canary.75553837c.0","@material/typography":"8.0.0-canary.75553837c.0","@material/touch-target":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.75553837c.0_1595862798295_0.6290019529273827","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/chips","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7e3c6dc793a95ffbc5b3ba6a3e24f78f471d675","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":83,"integrity":"sha512-znqWsX6JoIPRz2n5k0u1CbNeaV8RrNwpf/bFcXQyCNI1MjFdhESdjjz3Qfm3dzdCjkkKvCi1PDK2xt3gkiJLRg==","signatures":[{"sig":"MEUCICJWVfbgqDKsxqWKFzKB+edRwey36PP08yxHdno/MwW2AiEA1eZPB1/ZnrIt8WjwhkFHexy4u5rt/H2MP/2UmBmfKS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvURCRA9TVsSAnZWagAAn4cP/iUghM2/uFTJL/3FAnYr\nsuq34zLl9cpRn2/5AKPEPEnr731ouPr1bX9IEcgi7iDT3UCKr/Hg5pPEd4MA\nMDIyvwwOTCB4OHxjuRYdATLxizNQescAjFQGz4pg+ABUMhHC1n2k4gEgNkSg\n5kDrU4fHrUMTTlBhR3V+QLEscDcsXgW7CuRtkVT6NcYAUEEW5nfbz3YP3j13\nr4G+8L2TAf/RQmou3RXxY8G1LTX4HjfpT59guIQ+h5CDHHStcnDv9+P6JQoJ\ndEweDEvdhi9eJlo8MrhxSvJ8wOsXSRmKyC1BkSvR7qYDajLjl5+hlAIbVJCV\niJPR9rNwzhs4cX9F5Qa6VU+aFBbmAIUNDfKzZf8brsAOy34aeYo0lqWncHu4\nt1u/XnFlqCHRvCL5Mj1doFlJF+acukGz3He0NX9r9dhtPdnZOS1w/mdeiQQd\nNeT7YZumBDYeQGDnH8awT5XRk7P9HOAYM36T/PbpPpKqPTFfJ/l5ushVDBso\ng7xTjSfF4Zn+n75gu/3ffrefdThDPz+gpf7SbxyCUBQ/OURxs73GSGuM0baT\nKPo/P4RbCz7/WuMHm7J4EMje0oaKPBIKJPF9qkIRt+pJvMKlnIBE+EBT1x+U\ncPVc4d7mHmZjXsgxCZi1d9S+oNlIkzXetkiVa9GURNhEFdjIGydxnJ34kvp6\nfH77\r\n=va1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b96fbfc7a.0","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/shape":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/density":"8.0.0-canary.b96fbfc7a.0","@material/checkbox":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/elevation":"8.0.0-canary.b96fbfc7a.0","@material/typography":"8.0.0-canary.b96fbfc7a.0","@material/touch-target":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.b96fbfc7a.0_1595864336656_0.5946388870050945","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/chips","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a1dc84d2e57037b80fb21baf9115cd7e205bcbe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.61f1a8d85.0.tgz","fileCount":83,"integrity":"sha512-ekf5aA2FNkYVQSv3snhpAQ71dMRISlRR0acFvbiVXlULoN5ViyaGyqmKn6oM0zExc7/rA/EuUkxOX+hdtzZ2kw==","signatures":[{"sig":"MEQCIEKP6lcULH2ypLREQrCgxfpjb5mzSUjz4OyKXCc6h3HeAiAoHhgrqepwnHUERbLkUChuNUjxAgJMcKqWZchd6A3RRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvcdCRA9TVsSAnZWagAA4E8P/A5ER1YWYwRLCY4omI54\noE+T26xsjaL7sdCxORbIfb9qpSNg3wKUhe2qSi8yVWRQNydZ60RDPwzKmjyl\nAKChpRgHAHFRFF2UsmvOscIiiT+zqy2VcUQ926JRcbn4CJ+Kd4MXVmlZNedv\n2qjHj8j/kMWBYKSMDDvHKJkGbfhLSUY8UOXwAV99XS09vsJ5zzPA+KAMRmHw\n8TC1TNcc1Shop1FcPvjPrv0N+RREqO3TrhgQ1VNQAi9GpWWGmcoItJuahWQc\nNO25xCVdy9BDL1bQW0kr0cj/vUkbCQRnUCoLrzO3ov365LPpt4TTFbr077JM\nxdAYQWUnaufbZnuME1mce2ZN6bUvyLNh0X9aL2RUo79h0bn3Q2UvAraR34fV\nc8XPLqrkY/XEKZjnP45ieO+4BwGWrcWHEKlI5A25wv4B/vOyejBjjUEH8PY0\nkw4qmSARh16Tbnx7ZkVDizqsknTFPuvkF3BezJ2G0UQVSwSr6KyYZBEyK6Yz\n3mDwGJ8Km3eKvTK9Cpv0fbQMj0I1ZaR3YycwrsDL6O18rrJpCjk5Fvv2e9lm\nKcWb3Y8Xm4P4B73oWr+xSNqZG9gSw2DnZXj5DyWRbU9+WpLg2WbTCh4yZh6l\nYfWbTtp4mw2kyjavHnuy/PF3PH2yfvCWBVuJoc7kM4kwp+Ku64skmnIyH4ny\nTFRa\r\n=Gmn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.61f1a8d85.0","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/shape":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/density":"8.0.0-canary.61f1a8d85.0","@material/checkbox":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/elevation":"8.0.0-canary.61f1a8d85.0","@material/typography":"8.0.0-canary.61f1a8d85.0","@material/touch-target":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.61f1a8d85.0_1595864860712_0.2681690168404316","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/chips","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.81dc33377.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca0366b8920a41db16eed77fa9a815cee92cb32a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.81dc33377.0.tgz","fileCount":83,"integrity":"sha512-lbmcbAFItIZOx6ynqX0bzWwTquP1B7g/JD8h9VBWenZO42Aqh6nq4kSgWdBBJFQgfnMXmbKSqwHIXvPeGuikwQ==","signatures":[{"sig":"MEUCIA+uE2ASCIz/61y/Y+SO5x0PgY72o3ZmpzqIMWMIFugMAiEA3wl+QiyLnay/fTnFMQz2kjZ3vSSIqCnWvfkt+bCFcoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvoICRA9TVsSAnZWagAAOZQP/0mfZ7oEWCT7h2X/JFDO\nlOx8rR8T0tgA/8wSNPWAEHwfa242w4r/hwwUpKPZ7xV3zwLZ+/UnXqe+azTw\ngFY4B4EIBAPFmBAe6IlDxXcmGBUJgWIMq4Y8rftT+VIFWQImD1zLmeSMst4w\nxfjIAm0n5txUSA2RejSqIiNkNAJvbFIfx+txq6AfVxRs1pXhonNafbgKAjDd\n/25DxVbKfFHxI6+DxwZghLzoY/xzKRwrpJTUNcxFHHGX6LM7y7sm1gZ2mGZl\nCy7WfsehoAAA/zBiza+qrrrSr0PiCpVCjqauLr20xDfh2U6+3NNTnQFkjfC9\ndAiHuRYkT6aaqaIYbDDNv8VYCsbnmJYMW62fGxXoM8zjQ/RfPgRENE+rZsUy\niXnzwDmmEbicxqdEuzTAUMjv4Q3ab5Mp/8BtnysPUpWpzKyhJ+ZxNpplCtIY\no7Lu6aP1Cyhl3nuAgVLO1nLZioRI31XhKHHDoXlpEmX2gPPWDe7UU9rKby7G\nQR88YUdL0keN7gmhz1xpJLPTFBTERn9SEJa/NPToSxIkrcPqbPQgJVNChami\nI0Od+nvbxpOWHA3zIoq1RRHcQmLd4q95VZUKu+xo6WdVE+iv5U4Aaa3aPrgl\nPoraLbn2bxYkNjqtYJVkn2l7V77P/9JfCzzweTEXHgmDTLGV4Dw1bNGO/5XX\nGQAK\r\n=bUtk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.81dc33377.0","@material/rtl":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/shape":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/density":"8.0.0-canary.81dc33377.0","@material/checkbox":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/elevation":"8.0.0-canary.81dc33377.0","@material/typography":"8.0.0-canary.81dc33377.0","@material/touch-target":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.81dc33377.0_1595865607921_0.3825124032519649","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/chips","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e2ff9f97a52917c033e5056e5a6f239c6d832ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.ffd9ede58.0.tgz","fileCount":83,"integrity":"sha512-xyKpMrfhXL8S5AaFdYq5V8hI0IRShm8beyQNavH4VZh3spwmHvOCNtmfk7hQCAa9nxYFm7J4CKUejRprTmHctQ==","signatures":[{"sig":"MEYCIQDe9B+ofe8+2XOC95e6XrszMtEH+ZdZpWF7F2ZQeh7etQIhAK/poPWYgWhv/WqE9kcHaDPOiotQv2LVwz1DtFJKilHD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwHECRA9TVsSAnZWagAAqX8QAJJQEZ7cLs7HToB9yYnV\nXRYSquIMweFNdWn3yGllARdhcCs718LGZ+kYQhhFmI1wX/NUZMbGdQdhtbPm\nOMNhiCdmT/5rfEq6y6daLR9KrjsKUjObgHso76K1YR6zrD48LPvn+C79hsLW\nsg2wqf0g2UrW1EUgVrK56eNZejj1Bz+j5NzPeXN3u0Zex6Hdf3uDYhyTK/Hd\npJwnILQ74IIhOKFs0iinqNqyqJld4Q6etC1tQbSwUGkgU6iWVA05oDb7kgHM\n4onka0cXao5Q9/UG94YvoHyu2KAl2JxPwyMDV29LuRGPmIpmGWoCHAgqGlcw\nxhZgqZyerJLvT6tkr2yaCQCSOH2VqJSBAS63ToLmsZpWEiZ3CKXMa0lEy0nT\n+y/mEJFX0nta4Id0SX1paoRUIWbxW2OVJJd5gK+eW4zlsEhLl3F3qJy5bx9C\nl+xvgF2jPGTbR7Vp1VE6s3O3qmUqx/OLiX7rOTFyDA+9thHqX4eLEZImEyE0\nZMg+JezVDxrc1ElrV7B6/0rsA0bU1JKQ2FicfgQpKU+UJqUcZWrf213N/bfX\nfi+O65DhD9jt8CU1l1JE8S+zb3FBdnhdnT3XA778A11ttCCYujguiOnHEh8Y\n0AALgiUWRn16VeG5w2mLwHeopCNFA1BrOHm9GzBVATtQludoOLI5yTNk+4Vs\n8eSd\r\n=2hng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ffd9ede58.0","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/shape":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/density":"8.0.0-canary.ffd9ede58.0","@material/checkbox":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/elevation":"8.0.0-canary.ffd9ede58.0","@material/typography":"8.0.0-canary.ffd9ede58.0","@material/touch-target":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.ffd9ede58.0_1595867588305_0.04557043292350649","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/chips","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a36df384a2585bfa5a8aca255e1894455aab18b9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.52dc55acf.0.tgz","fileCount":83,"integrity":"sha512-2rF27OP5uJzJhJmO0jfpo+wLRJ4bFbupPlhbkOcTYxA9eQsk25LpCC+Iu50vqUywFLgVOnIhDzK375E5c5eGiw==","signatures":[{"sig":"MEYCIQDo2uHxbAYpP0Xs7lK3kptAfizXjndg8iC8ddRQ9lrrSAIhAOA942LsYXtRxkkM78l6AdNC7vBaGeGCYcwr3tr/iKaP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoxCRA9TVsSAnZWagAA6ZYQAIKJFVcdGL4BlHjihTTh\nzy1ObgAm81j9ea+a6dwGZmTzHERWCRyiOImHtwJNp2Nv+6Q1Sm+CMleKiJM7\n37byI+7ZCku7VoUzqipZ73mseEnjgpeoOy+Fc5AhfYNpuuBtU+5+GhdVmx2V\nFLbL9TgpIS++msAfZSwL9JaIEtWCWNpp1m+xXxKKuN9cMyoIu6j81772+p0x\ngUUgFjEU9wPpb/HwGJyaOJGlMdgakllPWNOKj/jG5KPJwSbZAxOjtGc1xBFc\narQDtVoE7KHsWTat5DbnorAlSu9De+S+hgI84Mhl3YTgfDvjwlPAaTciRL5w\nOatjo7QvaB2Vty1RSzCn2Grq9XhDu/jchxSkCPSLJ1qR4J9+NVnmSqGrpFbA\nLZeXv2oSaHl9PTmGyBwynz0oOOiBQUsLje7plhb98leqo/VQYyZqXNHguC9N\ngU4BD42p/6XN2Enlph3wuDCqu5TQiV8v53ENKVVLgdT8whMmfPtljv7d4cx4\n8lxVfNtJVnKIZwZb2RlYQU3lD5mXezoCcntdX1Audd2aArikJ5qCPcxy62qg\n8pftduRLQNoRiPEbWjHe4UCz69cf8YIdbdAOjOJSiRyd0kfDbeghJPMTaxT9\nE4Dv2cYPOAQ5RdeFic/z7pIdEvENXNuqCXJ7hhdEODLBAPsQwfNy92bbkM9R\n4hhe\r\n=tP2I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.52dc55acf.0","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/shape":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/density":"8.0.0-canary.52dc55acf.0","@material/checkbox":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/elevation":"8.0.0-canary.52dc55acf.0","@material/typography":"8.0.0-canary.52dc55acf.0","@material/touch-target":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.52dc55acf.0_1595869745167_0.6287435797583871","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/chips","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"352276ea2302645a2efaad47cf8d9334f2c7a2bb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.d4274ff05.0.tgz","fileCount":83,"integrity":"sha512-vn6/8CC5ydTZLLNwfRu4v7vYdePTsiadqHak6yDuYesdX1VU9Xu2zLHwUo0OkS5h7VslXycfdR8QKbpRlqDfCw==","signatures":[{"sig":"MEQCIGIWe64RdSiIgG/lnp7D1w4xPQoeuwr95A5GfU8gfW6CAiADRhxpm8AADijZo8IuVACFOs8Elpf8P6O+BKXLlhl12A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzCLCRA9TVsSAnZWagAAZbUP+waCGVoJbj70dQbSmy/b\naZ+Kx9YAc6PHEFYpx7e9ooeHKJ/jRxetQZYnavcrmZ5EDTe/gIbzhUXBhCJg\nOY1hh0LhIoWrDwSMw8ObWGe+Pk6AQXmIN0Ly0kJj9kw5itFCkLTKSjRIyc6T\nvQkDtRUNQbcAhQkutVIkG9vCsjvMpYDGloRPqmeK6dL+LHyJrVYNVDIWMjNJ\nzhOlNhzT4hRv3wmFcgrVw2SpycLHyWMkB7rl2yzpbvAI9+xfNF0hVVmgqdd9\nrnHEB9DgYd4li4J7ZU6N94cMi44/SvlCu00SWwFJL3y9xT80MUiJArIIGKD2\n61E8vaDX2mmW4kBLG0Dq8ei8mhOhk0BOmBFfoYEkHkOVTkTgrD1SCHLqA4Rp\nt2LBe7Pzl3hfzIWMVjOoEZdFqe3Ztd/yGicGhXIzIQRuWvu7M/hSZv9hWSiK\nJm139GWZ53R9UAd/fBQAdH5nexs4T90gxbWUWvnh/e8jJfzfXwy4IGKP316H\nDv1qbRmW2IUtV2vG9NidAuYqt/gEV6sfIaDjjoDZdxOMtZgg7oN8JbEUELau\nI431yzdzgRO09oi1+1C2rMqgyOF96NtBw8zbyqyrTFIjEZJqUsOb4zZbNliX\njEaEnbD8R4GUFvyzR7Wifb/chSpgAkGA/KWKXJrhC9uP6B2u4X5aREpzfubk\nlQJX\r\n=Kvvv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4274ff05.0","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/shape":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/density":"8.0.0-canary.d4274ff05.0","@material/checkbox":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/elevation":"8.0.0-canary.d4274ff05.0","@material/typography":"8.0.0-canary.d4274ff05.0","@material/touch-target":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.d4274ff05.0_1595879563103_0.33142569545741973","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/chips","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deb2192ea60fa0441a2aa20c11d065c2b28a3a9b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.b82d0696d.0.tgz","fileCount":83,"integrity":"sha512-i4FBtMPGyGWO1BsPJnbYyQwvRtce+xuZXYTfkNana9Glc4nE0jYXg6ljtqiOnJWOsvuBMQJnZCR9w6CSo8UR/g==","signatures":[{"sig":"MEUCIQDUfV1CXew1Vh+9VGOPREZj/9gixgpcyMgEdP3gLaqRBQIgfAK9QAuqPJKCkcLyS9fm/voxRbgIAqfwm8SsV5kynD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzIFCRA9TVsSAnZWagAAcGoP/0bU0LqzT5aCTz8CKG55\n9cC58l+Frs9vTsy2+fGBWX8ZQGdAhaF1i59MCbz1sWq/mMEvDy22LXvPp1pa\nR9pic0QmOOQ5tJbzC5LLot2nAXfociaX8TVSxRkCOMqQuUdb6pQSxCf6y5at\n39hwTwgz5BPC4wFTa1v1rHnz0yQQDXgS4Dh7S/I0pmC/z+G50B7b7o3NpMP+\n/f1f8BOJYYYfxma1Tw6ZlcxPzIYlgLxG9QtZeBMklbT0BJpDw5GSxIXqPRqo\nGbzhFr/CmJODOi5Envs98MBHPHE6trs4sZ2ddDyPtJZcabpSHYX4kOBHTiyg\nLP7v5gemG6Z4Aev85VokCEx3oQ70umTvBuYKBHYL4Fz2hUOqaWkdQV0UOTzr\nZWZFHy7+F+K994Heb/zrmjdgYBt9O3b0WlgDAJunP1NbK493CGrDYDZthvGo\nOfFC0a5JO1dWObwE2Uo2mU1OHlNo6EcSaCPbsDJvb2w72Ktc9Rhja9j4DOl+\nsUbvyPEYXYaYkLWsKqVpY62zViV8Pfm5+ZogpwNhbh/f5sokyad/CeN0U4G7\nLwa0IvmL82GmxOjVQ0HDZIwGKAt6yKfTJ5TMjdsbbl2XHMOdaZfEtqo2TTS5\nhWl77UbbCw1nbTCX2/8VeQjm+rdd+9/Sl24JVrfQVwUge/p0PqNyogw1pIiJ\nIWrn\r\n=BDz8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b82d0696d.0","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/shape":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/density":"8.0.0-canary.b82d0696d.0","@material/checkbox":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/elevation":"8.0.0-canary.b82d0696d.0","@material/typography":"8.0.0-canary.b82d0696d.0","@material/touch-target":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.b82d0696d.0_1595879940695_0.8086039852630194","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/chips","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.c2852000d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c5de7a81b62968a61de8d3e8eb5f226fa382029","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.c2852000d.0.tgz","fileCount":83,"integrity":"sha512-29BjA/eYDp7nGOULSURUR04tRCZGV+E1u3aa+dZzq36M+YbYQFwNDY3+Tll5e/LvgRVv+1oy8yTfyOwApIxWgw==","signatures":[{"sig":"MEQCIF0WchYVPMqX38+SzuEILQys23YM0DA+fG2isu9WDmSwAiBzdGkTt9+ZqqN2aQUUuyBZvZeaes6AzlWNyQyxV0PxOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0AnCRA9TVsSAnZWagAAwN4P/Apa4/jRuwvmjXBClV7x\nE/mdpwMEq5cPfH2KFGn4iod3YySzxV/nBVNZsa9qLlT45ncSTtniWMIIvQ18\nmm8DrE4oUZpPRopNMd02ZN5aOLFqGGToKDzg9BdZ4eyXj9Dx9F3wMrUDL3BI\n2HUYWWGU303EI0YttjXGkfIz9k9u44QGMVHv2N7BehgMBewHLGt6axxed0Tp\nvbQbQmlpQfdZIBLVARKz+hzA1TJrxBuxrdaWmsKChw54bfUdalCtffCCJjfv\nVqD5nEAZ3P8G4vN/JqqscPWKStBdHguFm9hjHtP5qgptExUM4cfSTgtuyjEC\na/FQGISNMvFN1cfRWUiKkaxcMHVuVs5I/F3skJdsYmgc3HKYE+oKhvqBFr6H\ney5E4IgwOvD9dUwgAJ6LiMDvm9YgOk5fJeQErdR1OMZw5HBnMbkIbntm/TQz\nYZn4RNzHSx2i3Kq7zDkvtgj05PePUPodBeEDDyKJBd1HnHhe85qkwyJ3O54u\nzuFWT7phdkQze9VzUgclgR9Jl6xdltcFtcsP2UZzFjp0yxIvNfZHTHKUTNR2\nlP9fkINF8tCuSFz5iQQ+hFY97f9ysTkNuJ5VSabkZbraMtlyPkU+JKWyilVV\ntbvNfcohgF8vS/bLgTtYF/GW2twgvi1kQ4l2FMnxL8nOq4kTNwPEXAWCV8zq\nKQSX\r\n=4xy3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c2852000d.0","@material/rtl":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/shape":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/density":"8.0.0-canary.c2852000d.0","@material/checkbox":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/elevation":"8.0.0-canary.c2852000d.0","@material/typography":"8.0.0-canary.c2852000d.0","@material/touch-target":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.c2852000d.0_1595883558612_0.8738363128956939","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/chips","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7cde886c5a3cbab0872799f585ad99cc20b1848","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.f86f83f54.0.tgz","fileCount":83,"integrity":"sha512-BrBu7F5cQYfqzmyfxkiDhSAsk0xUiMIdHF92u5YWWdbdWf4GcWfhYpfb38qqnhamNVfQiQ9S9N6LIq/P8IFRxg==","signatures":[{"sig":"MEYCIQConWgcrsTN7gkiTCIDG+wtqLllYClJU7gHmipZaQvOWAIhAPM1p4Yt+j49ke7LEm+gDQujnfrTzIdqhwkScI5Od4S5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00xCRA9TVsSAnZWagAAIOUQAKRS9D9v5oT8PPxV7TAc\nh6tHCjPONUjVth9lL1AQKCJGkgMSFcCYp1jf8+N2cZQRSwdUa3CeZz3P7PR3\nFn2PNMJhVmopV4KZIHqju2kvdiOd99MB1KQnn5xxIQ7LhOyMWz1xpTiow9q5\nhLDJ4bGY8G5nwxjBwSDWsM5Ph0pLPrJsH3ught4Gr17CayE3NOieJeJauWv1\ntmoKOZSz+ba2gvL1WGUyouJhgvrJl33/C1czLKi2bL4qZj+GuEp5dyQ+oMyU\nH7Cj/te/WhmnLYD33QjPSDA6ueW1kHDA8uhgXgp2qlUnRg/sTQmCGmULE1Ju\nthkUFpkwxN1cZWA9bvFjQqTdjI51r0Rq8T1Q9C9hUL+9LKajYK75/UWv6CV1\nsGoCn/YS9DpOP2mLlTFns7BNSu+GMPljt/qpy6gZAKHgIpuXCMQAN66ONsz9\nig+cI+ZVtTbwFfVeh53i9V33S59lrIUHdltoZVunbNWGWh5Tk/6CYklnuyKQ\nZQeYEbnETPwUf3DWYXbpwu05uxIQJn4iq7shnLcARLFoRvyshAt/SiA1bGvX\nWbELgVa7N3Bm8DkZJT2i7k+OjTI7PSTL2hlkZHM/keRVkzR2viwJPmJvqIj9\nQu4gT0gvQoztXla+EA3yff1M2NG3gVZXBufnsYo4ZFWm9yqi2D9Pi7HgBrkE\nKWu4\r\n=G904\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f86f83f54.0","@material/rtl":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/shape":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/density":"8.0.0-canary.f86f83f54.0","@material/checkbox":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/elevation":"8.0.0-canary.f86f83f54.0","@material/typography":"8.0.0-canary.f86f83f54.0","@material/touch-target":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.f86f83f54.0_1595886896688_0.6638271817024162","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/chips","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"502bc2e8e77d84fff2aa64b3728712dac3cef80b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.41eb1684c.0.tgz","fileCount":83,"integrity":"sha512-5ailcAeQ5FvpuQb4kogZNWUkXuGY7noRFopR9XIcSLP/n+86M13/mS3hiF3oBTU3NgDhoQrIOHpuIgkP5Gbo0Q==","signatures":[{"sig":"MEYCIQCuzfvvs3lEORvYPzKVsKzLsTlBPfGPhnvii4wmjl6xDAIhAJYOaGysxjeDsA8Askc/NMJGBm57hmn1tNhE+6bj/bqC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGV/CRA9TVsSAnZWagAA078P/iB4DcKnb140bjgF2aCv\nPCDK2lJSNZCTEMCylnaXtBBdnpDTbo9MzBpj5vhKWViE3zKw3tmbua8tLjY6\nryU3I1iehGzs2VXniFvN6ODVyaPTrqGc1KitktBKC69nOCQjNNn2I5wd0cAv\nWIfNUfzlu3OP7BwkGKc4vZqZ9hWUbzs2gtES3po7Ayp/35tptgJoN2aaASjq\n5jkY6HB0DmK3oNxujLAYz3Gf9Jl8KOCsrZnOOBixKG2bO3a91ac9iV86072F\n0yWBbZZa5yXRaYvS4RCAvrBXImEBExMuLZhRkq3BD7qAKv1QmQ3WP/Jrq/29\nEw7bsEnkHLkT0ICrUXBWcI+xssG70DZdFsj5zDx3J1PfO0QEyA/pfhRoo1HG\nNWk4vQK6cfJJARbdTjLAkAsODTM36l6rwwDIC9u1Dlzz1NkQkFrZgGEGTcJQ\nK3gZFKbDJjnjj0zqltnZsseiOhx48Kh6dRV5oqgZhVLPp7cV1cOMK9EBRHOJ\nIrcvgcpLVvCH3R9GnViPbWL17ELbdd5W3qShVqX17Ya6mG4zEa0a7liJWdzF\nL9WvXrEXu8I6zlPflmiuAEpPz+3VSVEP2WVc0zAySYuLKBMmAeaQ3lmCXn7e\nT7gSwUcjpNt0aHuvcUT8wE+pkEFFFyqx1HyCTvN9G7fr76/9z9TwYgrwi58B\ndtYs\r\n=3J29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.41eb1684c.0","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/shape":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/density":"8.0.0-canary.41eb1684c.0","@material/checkbox":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/elevation":"8.0.0-canary.41eb1684c.0","@material/typography":"8.0.0-canary.41eb1684c.0","@material/touch-target":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.41eb1684c.0_1595958655253_0.45928236905417963","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/chips","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"357ce270a9ee85befd46e1d3ea558211e528969c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.9e2f6c450.0.tgz","fileCount":83,"integrity":"sha512-9lvd/HPFGwxhWndD/yyVCqKD0MS1PXNys+chqSCv3ZQXuJYn02ZrUMNcuIoAw2JzM8+BZFOFlXp8I9nfsL++QQ==","signatures":[{"sig":"MEUCIQCnBlswFhYDb13mlQIfjMUw7g7W4g7pT6ZYXkoTuqI11wIgEV5Wpvs/HspYcMd0vW2Vhcg5lVWbvx+dp2mbO4enhWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKlJCRA9TVsSAnZWagAAjh0P/2BQ4/JSfZy7HGjWIKqW\nt2jp+MqovYto49nHccJlKW3IF78LuEpf+iKbHe6vBjbSLx6fUvRsoh8feVGC\nE1epy6dhK4DlEyiIOxF6vQ4var6r3JVzfxu2RpVY7oF7t45aLw83Jwt5kL6X\nt4jbDmWmB1hCQoW3CMYEfW9ThJDh2SIhliFzzH0Z6Z2oVu9jnunjUzdBlz3M\nIiAjl0JNci7U+u80lUitgh6mNm9r6fRDh/p5k4bdVyUQtDZ/btJfrPoJc/mv\nl193jWL4Eck1pv7ko/iGGA3lqP4PuMGU9PK9rT4RT5UzApAhGeDbP1co+ndB\nxlIiSGcrkbhKluBm/y5hFy8IfM48JK5VrynF25qIXZ3XAB0AgXm6/4nJSN5o\nyklC+8908Wr+/p5ly7WMcn0DwXdjDNCcOscsQIt70H9v8/3cu3OyhiYCKtZP\nh0NEjjGvkwHqdQI+F0yCFXkRS/WMIQdKRDeMndkImFKq8vRlsUIh5s6OZxFe\nYM1o+6ttHaIH1ddnE8DLpXwXo2dgOWpjp8M45EaARmtnLFznVSfWrIZYLWtq\nj/f6eYF8awjPQgcVsnSesClcudJg9l/jSpip/aGNJdpCUvopZkO7xf5/BMIK\nWfcd/vQe5sS/30mYjQT0/73qCcvriN6pE8accm0CCpKFnwti94hVPhlHG/DG\njRG8\r\n=KAbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9e2f6c450.0","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/shape":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/density":"8.0.0-canary.9e2f6c450.0","@material/checkbox":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/elevation":"8.0.0-canary.9e2f6c450.0","@material/typography":"8.0.0-canary.9e2f6c450.0","@material/touch-target":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.9e2f6c450.0_1595976009087_0.2177743825955063","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/chips","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e686601c2776a52e74a929ad6897fd086870ec27","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e6950b55a.0.tgz","fileCount":83,"integrity":"sha512-sfv2aSZlhToIFPzpc1U8XZY+E6CbRyObrWTHhJPE7qf5h+kMaUBhXcXeSoEqeMTFau0syxV+yGJxF8HQOECv4A==","signatures":[{"sig":"MEUCIQCgzvhqyPA9dqEdSLeDXBUbnwSSlWCDqhAn570ORNlbzQIgSCwzABRRZwcb9exBQjKFHHBbGSMTOXO+xoHfSNyOKBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKxTCRA9TVsSAnZWagAAboQQAIdZlObN/iJtdM/81PNH\nFxNn9B88RUx6SeZ2FeAh3/mo65ePGy6eLHPre/yzfbqb1iG6BWQ0Vl4o+Sqt\nU21OCmqGOl9KhEWHLBghEa3/ikUgcIBXEVgzV4atJVJxKNImc6DOKNquUqAM\nUll26blI6Qg4nU/q76ukG9wfWiyWE66KZ5lUHMQUSqG6OkVomieyOkPqJAM5\n7jUE37TjO+AFQpRoA34SF+yCXSVZC/tG6TOueWsTJZtJfsM56mUcuYMbLtaF\n58sGxBw+1AdZxf3IyqhwQNU0roqUIrvBeseFniH5weUkOMPqOZoNyy6Jc1fx\n6Z/1v0b/dJwCyIHYApBKL0g2aEC3yhKfdyZyA4p2XepXn43nVkqfuQTSAWDA\nvFLhoFZlV00xEPLcdfRPJ56Yoz5kwKjuUj+jnQyghb8IukhMSa3V8981MJDj\nQhWnqP2Yd6pV5IIHwTrfJgUJR+p9iJ+2lIU7jEwY2GQB4MtAGp0+EW5m0W2A\n0J03e6QPCRrx2xuQ3wT7rxJufvJDvVONPNBFKCp9+ARx+Fej2WUnU6kTg/Kd\nrvY/48lW73nXQ0SRLNH+JlfL1S7AjsVcJc32EyUZYzNyWnp+k9hya4lVXEK5\nLHuzRAQYn+3o7A0WJVaSvtg3ot5FxVT7OYqDoWqZO7xh3mLwn2H4TNdaTPqD\nQKrP\r\n=3vih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6950b55a.0","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/shape":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/density":"8.0.0-canary.e6950b55a.0","@material/checkbox":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/elevation":"8.0.0-canary.e6950b55a.0","@material/typography":"8.0.0-canary.e6950b55a.0","@material/touch-target":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e6950b55a.0_1595976786374_0.9388973893712229","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/chips","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5db74f5b07f386c5d3a977b744a34f5542375b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.5e51ee38e.0.tgz","fileCount":83,"integrity":"sha512-ZLQwgviR2SKgKLnP0kA/UCYIOsICVoQEvqW1llP/KBB6QOaa/xIwq9W+xHIR/YCSB79Y1fslVce8+Ae/+3Hx6w==","signatures":[{"sig":"MEYCIQDn89CBe72vky8VRptB3jAvpCjmdhh3637DIWohpfrplgIhAKc0/uEXx4nsd0g91A6RKsYebingXcOWcYXW0cpwYIFd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHkCRA9TVsSAnZWagAAMVsP/j5ZT3O0bVEQNSdd5QKG\nbrqvWEBH+4hTfwZcNjTp9k4XJpGmAXcTQTZfBHdft8hIErKBhuEbuesk4UHY\nLPqt+Ld24VomKZPtNGFvpUyMSuMJLifwdlkund3cL/Y+J43Ra67uqXP+Kcc2\ni5UW8mzaj25/mb9rsssmuPmnH7DP4yAV+wX/R3CydyoW7xQEcLN8vrG9sagv\nasEuVEsp5vLk+EM6XqVal+HBL1j7Yui0nrFl000vBvSCKJRhK9xxEU02Dpr6\nKkhYKulZFM6Nh0IS0ybCA/afXadFUuwEFVj29Az+F6U0DqFnU/H9CtL9jxiN\nk/+xA1+KgK+iuvpdg1y0zteXVD7kRhFdOrOXkUAF1oOL0gyVPvfCFtLJkrjd\n8Y72sQgY2gPfjhksUc78ry4BOLeOvqZJUDfcycCcSf+3qbSfamY1dGw94txz\n425tsOGaSOKah6HjZZx79QnVazWEMjGl26g6ehL7iobFAECgJHSMUIZEQTCr\ntnKTJQva8qjOasSRByS9FUegy5j1pO+nyRBgFJEhY50yatUFVbAIrR4ya4U+\nwBP2HKKN4jFUbJMlcgE49jTDjSfFwgPUdPCmBf5zxCYmcZPg7EjeP4yLkcDx\nC4ST8XU94XduKUFLGjnqKVgiN5wgEDyMQQIF8s3QnHgBlHIqHFWB+GT+5nZE\nW4wk\r\n=rOzR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5e51ee38e.0","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/shape":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/density":"8.0.0-canary.5e51ee38e.0","@material/checkbox":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/elevation":"8.0.0-canary.5e51ee38e.0","@material/typography":"8.0.0-canary.5e51ee38e.0","@material/touch-target":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.5e51ee38e.0_1595978211855_0.43885376313342417","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/chips","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"942e9da495c2092972b1f41e5b8d1245dc3edd09","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a3898ffcf.0.tgz","fileCount":83,"integrity":"sha512-CIu6ma5f8Lm9EbUCgKQ/4eVPdzT+Wq9H2Hf3JW+nyOAcaQ1/NYLgpiG7gUnVxDyt7eZDOQIt/upXaVgY5ML/Iw==","signatures":[{"sig":"MEUCIQCMbUFNaJ1wcVmhanZ8NJLsRi/G2QY1P3FRkDnc5i84hQIgWUqGNbsYBx0HSo8RdHn/ukeZRKexZWWH0RfomlBEJY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMS9CRA9TVsSAnZWagAA+6cP/id6d1KLYXyDxkEWqE7B\n3ZkeYqTnmUJUNeyS9Wx3cPIrBmOLXLwKi4eXscACe74WLD6FIpaHG/ETD4qo\ndkh35NI3S8Etdr+N1j3dzwdEV6gWutDdhDhd37q4tSzBCZG6cHCXN8/jso0j\nMOVY3oLmgy6XGRu1dT2ePfxW7ezwGOB07UjS9W+VWg7oILfVUudXcNi7B8EE\nboY93PGJtpKlEY16zs4CIaNkHTdP5J4IyDPqDCbBs7j49uTKBMBjVpE702T0\ncYpI0Rug+55+e99fAg+A8ZFG5JVKwvoLo+Kh6RGWZtlAslIk4vC27vqwGfGu\nDegPRp6w7QeBSs1QvXmQ1DzNkfo5LM4CttePePcOqQHTclHdLqytXVSbqnu7\nLps5tI/S5k2D5UrUUHMaYxwq/o34ieVTzPJ3q2x2IFYOQCt4bkVFZLKKdJu3\nuqYf65VTAC/gzHUFSXChf5+ShkMCK1SpUCX9mmmhmCqjJV6WMr4/FKCAYrXq\ny14p9M3fX3fOe6Amh4plX+PjnvjYfVWXTNE1tgQ13CisN7jETNe7mTya8l7V\nVgWU8wRZ1G/FIzMVAlj3ppYALzeBM8efID6JUO7LM+8ymaiQKTIEPImBi5r/\nQmlFUEkfvX48g8LGsbOdr9fW4uPlof/Z2oIpnvSRBEeQ44FcTdMaZKId3lZa\ncdLw\r\n=cjUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3898ffcf.0","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/shape":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/density":"8.0.0-canary.a3898ffcf.0","@material/checkbox":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/elevation":"8.0.0-canary.a3898ffcf.0","@material/typography":"8.0.0-canary.a3898ffcf.0","@material/touch-target":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a3898ffcf.0_1595983037140_0.6143392673205479","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/chips","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deb28791b5f8828148bffdc63ebdb132a4cdc8ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":83,"integrity":"sha512-n55Cm0iEMKlcQBSm8u/ZXti64oLkK/2EOEYhhCLUUXyjvGi7smWOOm5vOcpzBKPboYm46n/ihg3lSCdU6JkNFw==","signatures":[{"sig":"MEYCIQC6UvSL99cP3a78pLuWhbdKdhUnkXaGqb7CtIhwpV9BiAIhAJKgccdgfc0KnG36uJ7P95NmMofA3t7cAVQuEpR0B0tt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMe9CRA9TVsSAnZWagAApNgP/3M/4TrQg/aCkyTriEBW\nNwmqlXyPdzMCTgP9qFautVDRoUzXor5kdPznY8huvDJtxf98KXRVYm98T/VT\nGhIOoC27K81M9YUjkR7wu6FHCPsp5lYuXSTwgF5t9ipnhnNZZsd+GFB/jSov\nWQqgxdrpn7RkPvv90TJ0Df+Si2GrzEc25btAtM97RYGrY+WNYcGMeaWkHh9v\nGD8MAZ/0nmOmC8vZ6CqrZZl0RPak9V3k2pz2up3Qhmfc435mgaxdxwnJc5Sd\nNl94U4tpWn9oh51Fn/pgZMEf2gMtZyuDR3acfa5zE/kSmA9XunB78qyRDhN5\nCRG1aS56hEesqI6oVwh6aiEz6xJGkRbrC2P+4ze+gfK1KzEtgeSz+lILYm5b\nlOK7ahc9Khw/qvNHaZ2Zu+IW5wxR7HLTmu87159m5IlunYTCvbegKM0CT0qt\nqBuqNpouE3HT8Z2goxaqQiM5HIx3Yx+PgdzsMq6JRhIjCwgA9wnbgslfA20Q\nzJLwT0HzMG9pJjdBn/sR/fM1QpjvdjZCp5CRo/z7u6RGwkPlKOXkaVNWIcDx\nrgqiEeBEGgmUcEZ4e3dxRHv3hKe61ySMGi7hjeQ5P0NF6h74R9u70xkjy7D7\nykMocZrRQpW4rK2IGO8rVL82oyD+FKKLhWu1KAvYTMc2Rscdc25vzP0mymPV\nA2Xz\r\n=mYqR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bc5cc6c96.0","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/shape":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/density":"8.0.0-canary.bc5cc6c96.0","@material/checkbox":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/elevation":"8.0.0-canary.bc5cc6c96.0","@material/typography":"8.0.0-canary.bc5cc6c96.0","@material/touch-target":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.bc5cc6c96.0_1595983805018_0.9762111599316625","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/chips","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2951fcf69322e9eadc8325b8d6984e78e1732c4f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.9bdeaf928.0.tgz","fileCount":83,"integrity":"sha512-O/1ykZNCPeZ7Y66Of/kZucjeuplplB+dzScK9zR/Lq5X4Ko1sKL6KUp7KIOpivDjbjbeG+1KtYg95Jo5J1DHMg==","signatures":[{"sig":"MEUCIQC5o9UC2jPbuUC/LQd7Hlsh8gkf1zOuOkt+iK3lVmqJCwIgPoCkxs6/Wurnt3xYGS7tdimrQ+99OhQbvghMZxWsbRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM8OCRA9TVsSAnZWagAACNIP+wWLWefV8Z4Y1G2daLQN\nACYyLrpMCeCZEw7hU9w4f2k0v21KrtdH2GyZWq1kz92mrmHKMGhKlmMTJd1c\nmLyfqS2v9LLiV52NwlOvsCt6XydmFQZZ+f1kbjLkQexnYZN05ib/aJHH5Y8g\naYcUSRmJT41dvaiq7PrxuiYho5ubYB1q+lVk9Lkp6SXgshKh1zmINXDP6ugr\nZQgrZ4YIYw0YsceTpOX7UtgNqBQd91YhRuRyVuut4VishKEoP4jVxccFhi5M\nZz1jCNypITffiCSxz9aEbPZPurCgMINW5oy5QKhKopaa67fXQkDSw5N/AA6F\nmVTJy96gBNFO/aXY1OTKdfnjGkFsngosUfoHL6sR4rXvqeUorBdA5znJNr+f\ndp2TeDcaAYlcMwpXLuwnVsyzC5zRNrZnwSDpw1j7b6I9jWr1DWeyDvM4uX14\nWypj7EbVJXEYWG27K4MHJqr0Bg9QJs7Akld4jzZjwvaEqREkr50FISyCb/LR\nEihIzvVlnvkV2l0AD8HVbCWKxztyOS7aYjCEA+F8RKCkk7/WL/kXYlR9mVmu\nUIf6XNMoP/grFJe+4+fwBUXDcIMlZ9OFGL9ixu6bf0l7tf5dCAPg0Iw/wyfI\nMKrjd05Z7uckfM0XiLcN53Epw6nNzV2AGkbe+PSAF1XbijSPWS0hd1qBCUSm\n075I\r\n=juwH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9bdeaf928.0","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/shape":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/density":"8.0.0-canary.9bdeaf928.0","@material/checkbox":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/elevation":"8.0.0-canary.9bdeaf928.0","@material/typography":"8.0.0-canary.9bdeaf928.0","@material/touch-target":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.9bdeaf928.0_1595985677856_0.3811402275120459","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/chips","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7de79ecb51cf7a44eb07822793f0102ce849c00c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":83,"integrity":"sha512-ASDoa7MGIUDa+ORHVYZhh1kszvxRA+G9nYN56oQpY/R7tJ3Dv9+EVIN7+zQj0I1dHKPcnBZTr9izxAYXMdr7Vg==","signatures":[{"sig":"MEQCIGUOtfSK9khR7+7tDNQLBwgYZ4XxRkbNNn8524ay6qemAiAopHkiNH//FHke0z6j8V2nbJ/QG8xCb1nEQUDn6TCW0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":921988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJ6CRA9TVsSAnZWagAAfK0QAI1mVfMitJk3z8aTvk7s\nPCENUedmy7OBBNcs5jDQnu41uM3rnpFpbtppoO6aD7nLTnRCpiz+ybetc7fd\nbsBaCjs/rbHNHm9qM0Jx6HoDrMbeSmBntPxSLO02Pg0dR0yLDe8WYdOzAvPG\nyZtIUj/sDYAGTz/oveQg/4yw+pMyEnU64XIlDB6pNNxXI5ulUJNtz8XOrCL5\nFPR19QJjT8rzMoU48rk8LmDVqCymeRwOw8ViYWEtZL2CtZbVBqYasVV332Ue\noNEhA8Hvce7bMbvj3cDDuKS2Uc6ekmYIKcNVZNvGFpah2+fmpttoDbr1ELG0\nCeqBugnKLeQ4RoI8Rx6WgfIaPFLz0VApeO2l8hOUKzMTj6+0srBpf9Ws1Euf\nKK7AY1WH7JyJzefqXeU52l9O0RVss4UxhwR1nY0QFaW5SoyM4knEbNr1s8vR\nvkaiMcSncm8tZZOTiTFP615otWoRuh0uuqazzc3Ai2Vnh7bLmxRNuW1+YYY7\nzdw03JHL2CrvbnRYOvHDgQDsuf/mYp74GIy8EMuPThczwMQ8qO5muo9mRMIq\nu2bAjcEaMliQwBgRFi1RdWWcT8UwaegglL7vScjI2EFV9p5PlIV3sNz+O+Al\nL1tINxGpl7d//vsLqzbNvO/SOfWKY4JU3772LSw4Ctr44JHASrcu7O7lfge/\nLVdn\r\n=S5pI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fde2c1f9d.0","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/shape":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/density":"8.0.0-canary.fde2c1f9d.0","@material/checkbox":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/elevation":"8.0.0-canary.fde2c1f9d.0","@material/typography":"8.0.0-canary.fde2c1f9d.0","@material/touch-target":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fde2c1f9d.0_1595986553747_0.27007678145314395","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/chips","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df192353c72ff79d2187a42815b524869d5f8a77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.6b3876d5d.0.tgz","fileCount":83,"integrity":"sha512-WP69LTY5GO6j9sO9581LShxP/P6uKtZke3y3GZOSAXy9nLyYOCnONEsk41rrYHoCvlE+zrd+tdj9VnpHfgTPww==","signatures":[{"sig":"MEYCIQCX6S7PhZEclT+y9zbnghO0593eFGMD8MdR/yiqRN0JuAIhAMq8mEUQ6cJTCm6VQOXg8hNCOSTYHnrNpbjHoKHex45V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":921988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINNICRA9TVsSAnZWagAAkpYP/3k2sRMZGIemFTnE/WpB\ngwhe+CKXSLAlbxT9IlK3HFCXAYFLuTVOSgNr+GVQv+phX5morVYxC/yEYWPS\nA+BjeLf7dE5q37LIZjyb2iX6GA8bNAf5X1dPT8CyAs0kzXWEzV7kVwvUy47k\nxCkMO60Cb92psDug6aREd8x4Bf45jPx8JHwc6OxN4xO1mjWcT1xD2mFcXqvp\n2JUvuu6GJ50f4+amdLlnPEiPl4IgJPekIblRVrsuYJII1daJBgoRMKejAxH1\nkt6mNtlP07je3V9cLPmcNt3f97dLwyr0gKjLK5rr8e+nQadFCbBR4MJ7HQbS\nx7PMB0BM5Sj5aU8i5+jEoawFOIdv5gDCGbxMIN017PgkQttcszVsBdsuVusO\n7sQIrUAqaX5wx9JfylnvM+6M8XvsdiFVotIpox7aJUnZLQ+SZ62p+4snCGZy\nBhrvVqTWbUbgrv/yrqp8fJNxGYdIhxE18jOqeafonZ2Oj1iw5S3qfU5ueGHo\niLO9f0jN5c1PcofXInZGcf5msl0RRZDvo2/pFLYU9txx77tf8JCwIJWD6ZWe\nMG4OvgMrFAHUGhI6BMDFh9Irq40uMLnRsLk1ohWudY5tI9aCNRk9N21B0uBe\nvW2bCC4BpwBN1xtqn8dt6sesWpfWTcSe8FCGhO8Lq9X27rRX8m+kuxMHWjVC\nOK/d\r\n=eXZC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6b3876d5d.0","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/shape":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/density":"8.0.0-canary.6b3876d5d.0","@material/checkbox":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/elevation":"8.0.0-canary.6b3876d5d.0","@material/typography":"8.0.0-canary.6b3876d5d.0","@material/touch-target":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.6b3876d5d.0_1595986760128_0.8898057488299431","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/chips","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.30ce17873.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b7eff03c24c48b3b3e19de89b021901993ba10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.30ce17873.0.tgz","fileCount":83,"integrity":"sha512-776/aebWVmXlUUKxpvDZ7ZqULiuzrHzVo5fY1w7lhFEScvX6nDaXDcKzUl0ZTYAyH6+IsIlqjv9j0YCMIUz2sw==","signatures":[{"sig":"MEUCIQC/n+yYNjYo42fXaodDsJAi8268+zaLmHAbkgPOULOeDgIgc9LiZehyMfbqmyqsZk0m+makYjbfnCJqlRkmMIn7fBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":921988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7JCRA9TVsSAnZWagAA4+cP/3PRbQhAWnhxOqrn/l7t\nWShIfbdMgjENowHNcUYnDVLE1niQhmhQBl2gtiQ8bpC1bYvAdgjem08zsm6C\nZREd5pPNJ1zIYfLj85QytfU632n4pUgt7qoBealsrf2Zmlcmi97HqcWEEKZz\noHHes9fyQO4QAOunAUaY7R42FzJr13kv1xvJg3ejhjXYE5+x7910xn4LS/M5\nS9vJnhnewQVSJq2Qr8KIS+/yIRFryQk4t+GFGNWJanzq6u53erhqS+Y3T2wu\n2eD/cd2VtNWMb/Z8vTx8DIj4r9A88GugObZkpxhKhcjncJCtvQ8/xbKivch6\nBPK6zV1C+a+xLnIjXpPIr2XQ5mEA67JPzmHv6N3EMT8H6d13bF6pFyQACMla\ndQ/vkIDZe+lEW8zMPw92n7kOF4XFNwmJj0RRfJZCQuP3TM/hBMg5bFqfM6ne\nwIywWOL4HG97PePnXo8dQNPFtN0V30Pmb22CVUPghGPYJsTs2Ji1msbgEu1t\naG9NBEBYAbWHLBE2Er/SwXMDMCrQgVMPeNhXmFQR8rHy7ze/8bKraG7+LQZO\n0Z9gMrk/lb0JpdukKqIzfKFu41gyCKXiqwczsbUSjr3w22X8+odiPBs5bnR3\nqZQOdCYU4ofpu17R9UAC9V8OYjarV/aZ6hC3WHycjzMwVYjAiRj+KNvI4ohw\n14O9\r\n=cfjC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.30ce17873.0","@material/rtl":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/shape":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/density":"8.0.0-canary.30ce17873.0","@material/checkbox":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/elevation":"8.0.0-canary.30ce17873.0","@material/typography":"8.0.0-canary.30ce17873.0","@material/touch-target":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.30ce17873.0_1596042952739_0.004558071065024372","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/chips","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9be393a5c7a0041eb15a0b0924da3747ec273ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":83,"integrity":"sha512-wy6YE0x/L5DfAYf+CO+Szlto/Csv1qoinPEOzafNxHoLFf5ndaR805tWxCvOHPglFTcClQ348jyE8DSAAPxw2w==","signatures":[{"sig":"MEUCIQCTQcFYA6Bw/xnfsLjol7pIWORj5mLKil7X60s8hSjOMgIgWGoiO0p6snclZTmu6cMYKJMvRnC4RqmCCawiW/EzdE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb88CRA9TVsSAnZWagAAiTwP/0wk59F4rvDUtrRhnfwd\nDKkSYpWLeX9QJSziu5InPG1CqGx+fh2aBOQ89gCUuSuzF7J7A0wn8qDeLtuv\nERPPNNSbdvfITUOB4q5bORG72wa+o79sCcdygppjn+QInmboImin9qpARj96\naSnOGzb0LZj6A9sYA4BWmb2hsWW4MNgxi/ymOEnuzvq7uwkJ6Vl+e4xFlh8P\nTdQDDcKUrB+vRC0/xk6rQuouyeTEr1eN+HOZNBwxDKh3GSgFovGWQaeVqtp2\neVJR1Av6sdcOrZxofaQFHmr4DoHQhiF0RHney5VywQgIYIHuTtVEpl8uqZwa\nFfQZOIiGos8DR9Ci7rRScKTwUqm0S60K6bmAabfmp0nmEGprJC8i7EgM4Mrx\nRYp3784bPrmf2NRuBVTLoGw1qgZTvlZA2ZD/0vvT5FFxKve6spQQ8usz3vUB\n72Mt3WXBAR5m9odn//qvdMDlwjEgGnY3wf4i42E0yNtOl4I1+D8OiVxFb8hp\nWIezKI1Vd7iknjOEIpi0VGuZdffIWfR+NKpBLdnI0XR7EyEatYZy3o6qSmty\ndq1a0p0nBiUL/qsIpRtuUvqekUz1npBe+iZX1TvsOMIAX7C4pfdFnhzvqlsh\npn5jcBRr3Q/hdnFJucVWd7a73OvL8ZpjMMVMz1rmC8pKeDQFSkTbKt4pzYbW\nw7pi\r\n=+H6M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f6bb43bf0.0","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/shape":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/density":"8.0.0-canary.f6bb43bf0.0","@material/checkbox":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/elevation":"8.0.0-canary.f6bb43bf0.0","@material/typography":"8.0.0-canary.f6bb43bf0.0","@material/touch-target":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.f6bb43bf0.0_1596047163440_0.7900801078172164","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/chips","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a20e1f8b566296e8885183d23cd9c6e32ab0077f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.6af75f6ab.0.tgz","fileCount":83,"integrity":"sha512-1C+gP7PYQIOA/TS61KRFv949wNVPUEOFLtZz08cQLVIq4EfrHEfkresXn5msSuq4tz2uGS6nML1g0gNUVCo+0w==","signatures":[{"sig":"MEUCIDsU0Tl01fs6GCDKckzy0ZpShIpIzz32NkrsprhgQQWMAiEAgYb3yjpikm6RqMaxou3p+4gxqQFoUeK0bo4R4GLNd5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":921195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg36CRA9TVsSAnZWagAAOAQQAJcmLh1Uv0V38cT3+DKC\ntiLm4dQCo6OCBUQr1WHE4Mfx6wDrbS5oIuaFvYt52rv1LSrW1rkAOTn0LxQd\n7Wujaq5zfu16UX1fwJO9eU9vrblwQ2CMlILMuR0S236FzEonX9ddrsGFa9MH\nQbah5SPFIg8+htq3k/YQaXwt6MBASmQBTKcEX0Wx3zEeIB1skkI1d5JdKKjL\nI13X3n5QeXxWfzI/FnUSd7yMW7qfXGyzkDDJL/tL/pZUtOzqVza+i4hd6VFP\nIqVFkYleFefifjYTKV7tdSgrzMTlcGRkoerOq/GCJl+gPyids0T5ZIS95DrB\nnpfrt9hKvA53K9IBtnw9ktzuXZvn3/16kI25HBeUIYdgvhX7CFV36Uuv2aCX\n5GumehWWHltnYhRTiWl3zRiS7yRR/JMgYuKw59Q/14lVxLZmL0HisYe8GQyd\nlp11qEHRI+yx5chgYcpr9djcTUT8oJ4QFqwBv1+3+C/eSSfSJwDm/xI/CDvS\nGgkeEpnnDUGaNvWiGrw0hOQKiNnjPMPmAerMwWZ97CVv412xiCdyepXJIrzo\nPgtAxMLbYDjg8gPK/IJTWLQ2mtdibzkiX9QsxQnHcCwO78y4ParsYDiZ8VYC\nm1EXf4uaNQE2sas+RphbwplOdOb2Nxp0VBsZtjlydMncXxmXfd/OZZmLWsBl\ncer/\r\n=qWHs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6af75f6ab.0","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/shape":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/density":"8.0.0-canary.6af75f6ab.0","@material/checkbox":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/elevation":"8.0.0-canary.6af75f6ab.0","@material/typography":"8.0.0-canary.6af75f6ab.0","@material/touch-target":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.6af75f6ab.0_1596067321655_0.7581542970681749","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/chips","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77b20b3ce7f736fd0667bcc6b822f7e12608b22b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.42d7a65aa.0.tgz","fileCount":83,"integrity":"sha512-mYwonNRwVeW52e+vQojOH86GR9yTiwdyu+FwofomoGGIUIXHht07LNkMcjA8Hnaq+f/OeI2otZnGww34L8B70g==","signatures":[{"sig":"MEUCIDNuup8FfC03Vk4PFlardw6WvlFuJfeD9xsCxKvCelldAiEAgRk8hV0bvlneK1bdIZt5zGySVeSVqda6jgG8SGYjY8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":921195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhAYCRA9TVsSAnZWagAA+XUQAIXbcaZv4HtykD0CfehP\n79a3xvR+9jmsbBfrPDNuaTecGNwCcJ69ugBtpAnD78mH6cELhvTz3cKE/FuJ\nnEiA+IZg98R2wwfCFRVXAopP5e1nJSz9G6CgXhatd1KjYiB6YKE15WdtHWgn\nlrjr8MdQIfxW0tjbgGFo2WMF2hjAgk96ob3Vaq7Zaqb3NnXmltFB40gk89TK\nu4mW3LiJsuWpld1/COoBEKdrQ9r1IA235zoFNOcJhmn7Fd/yve52z/ort0hP\nZGTIkSIsvu7v0G27ASUthl0MIh+iByCDbZR8KZd0Ka5IrnWUFDuPR9XRvR4v\nYVwBeBArzibXUlBZkJS4zSXT+MF1cKTqidAkUi3TsbHxfrkSoAuqrPhWoL2B\np50BVGrobUVJwKfWRO65zb9fiBBjPM4x5B2haKwo04PVbkr8b4ez7bEf/KC/\nU16/Mdrs+ooDScwVa5MGSN+vrRwYj0nb81I3QoZY2V9RLHkUV7olaJLrNDRi\nXD874BEEyu4NRvDNVZvEmxV3wKTDOCR4ivC78lXO8/IfUxKlMQrKFCw/PNCJ\nb57Sw66SI3Y3J9x9CervfpIkdoAzWbg7F32BRxLbt0fdBzAaXZsyymTdokMD\nbyXe2pNZzJXUofzjbxVu39CBqiWkgJFtoha175xA6082c7mycyoKqzbyuyIE\nUB/T\r\n=pSsP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.42d7a65aa.0","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/shape":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/density":"8.0.0-canary.42d7a65aa.0","@material/checkbox":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/elevation":"8.0.0-canary.42d7a65aa.0","@material/typography":"8.0.0-canary.42d7a65aa.0","@material/touch-target":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.42d7a65aa.0_1596067864018_0.18068477693321272","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/chips","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c55c728770442333bca5993652d6fb6480c1590","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.85abdabb7.0.tgz","fileCount":83,"integrity":"sha512-/OQn2MQ5kJci/d5YFatBPc0I81JSoLdIlPMUYtt4la2ABgXaILow3CXnIo1BgdXYmXxz1Z+zVdIi4D00xBnerA==","signatures":[{"sig":"MEYCIQDhSH96T8fhltFFn9xe++ZMJ7KrmLcxbjC60mkq4EH43gIhAPuDiaanG/K0k+E2o5Vt2PwvaqC+2z7y0aDt3PM5wJAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":923822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhFKCRA9TVsSAnZWagAAwqAP/RxfEM+VhTR69MgpmVr0\natqONE8G2NZuAfZ1x9murDCfQ6RIWl/6k9ojSu7H5svxCBGzvukemTnQn07R\n5D/fARoVdt+Y14RxAD8AYcDHHl3WAAuABIMxQasRhaQl7p33BGwzWGafpM/K\nAeoQhfxQGLjcCkTWUR4UsJ/yjzZCpoF61BQJ0jDbvKbhqgZkYE5Ep5iIEiuc\nDzAXDw1Zbg2ODit+ykyiffvzQDordp4f2ucJ5SFL2yiGdCbbCRuw3Hky6yM7\nzApJCVUhyVpDUBTkcp5T2fMtSOGkPZMjDghBKU+4yvIqYlGOs7VwCKyiUiZk\n0fp/1bx+99SijiJenBJOx4J30YEjUOx/lNdWaPv/a7Qz3jYsy1dHQpI5fh7a\npW27VRQhTnScugw0RcsEq8r+9DzApr4El00ioQ5vITFQDOFbDWFgNARvMfZq\nhn4Ozu9MN+dIO3+Z2OoLMKbcXaLyYp36MKqtVVN8S0k2BFjaNEPAKJKEL7xj\nFE2U4U+wAC1dNbgi1w6aZ9WKhqYLy7eOw0j76AxIC/Wl6xGX2rZDVD6YLjaU\nigErFGlSi1qR4C5l14EGEOrC3L9lqZrRJ/i8SOGtp/sNyJGhidw6o/9TTUKP\nrhqX5C/AwjoXQFRotS4n1+SkeCiPmrMg/6hIjaWfmddxT7ZP14bwUACAIO90\n3m5e\r\n=fmHW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85abdabb7.0","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/shape":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/density":"8.0.0-canary.85abdabb7.0","@material/checkbox":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/elevation":"8.0.0-canary.85abdabb7.0","@material/typography":"8.0.0-canary.85abdabb7.0","@material/touch-target":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.85abdabb7.0_1596068170323_0.9617955127829234","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/chips","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58b1889fb3ad3522e6ee3bfad75f9534abd12a00","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.49fb20ca3.0.tgz","fileCount":83,"integrity":"sha512-jF1i/u0jy0XN6rASSWKu2WlO6ZswaDmq5Y6dMd4oI4bW/6wsiL5fvY+p1zfFOFUlWG1TAruW6m0LKuWSJ/gkaw==","signatures":[{"sig":"MEUCIBHq3jsegX1GOvq7ownmfxc1qh8/HonLqpZFgBSVS4YjAiEA/rKZVMWrHRNTVdYLdDFrXqUeooqiPNdlHXQBdmofK8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiI8CRA9TVsSAnZWagAAnnsQAIzbypu4fULw0lbpgXC+\nRZXkKmYNz0BGiQ/GPsEl3+FiCB5YHHjYH2bElIbPlLDKxexxBR1kEEM4Mhrw\nZbICq3Bqcb6dhclItzpfTFMJorDndD9vTcsGi7zibM4NoHdxPYw0iCx/BHci\nptpk1ECmmRT6AcMh84XUZl6tVUFxfwcgzxmOdTCVHGprzX8gupmFducvKXZT\nJ5RutyKSa9pO5ugzWutJUTypQ82sTaOGG9CFPUv8ycZZUdyikx5qRoZIV6/Z\ns1ossbrGDK5Fqp4gDspnNw1KJzAG8oeY4uLl/3XOcBVbM08XznW8vCDlz5AS\n7Y2MxKsnRkHXvZMV2J6as7sK/NqEY7uImmaG00B1/cCCD1dIYzUXvNX33c79\neKWDGlVH1b0Wy/4IUowzWNnIQAmbQarVoeAiiQZENDmfZBfkzXAKkJdzBFF4\nzPcJ/WJl6MbTSbIEy+KzwWB+vXGSKUu06CXM/XQROGANba2AbwKK8rnl6dNA\nMyK5UkfmkubEoR6IyoEEHb0jSGKk6HQiyovUTi24yzB6o3Iz6VOIohUrvCmr\nP79eb59g2E+cTqlXOreywBAlSOdQjZDr9J6+tqmeR3aU1izXhyqcWSDxWDpD\nl2+dgZf7VBRYq7MHeWjHHikHiwVBqWIzc8k6sErxSFYNTYhu47JKwueL3D8W\nZsDW\r\n=E2+C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.49fb20ca3.0","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/shape":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/density":"8.0.0-canary.49fb20ca3.0","@material/checkbox":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/elevation":"8.0.0-canary.49fb20ca3.0","@material/typography":"8.0.0-canary.49fb20ca3.0","@material/touch-target":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.49fb20ca3.0_1596072508197_0.522984375210543","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/chips","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6ac3f9f6967a79d954bbe63410dbc6476965f46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.962d4abbb.0.tgz","fileCount":83,"integrity":"sha512-azQtTbZjNuMuORUuhQJqFHzN/kp9Hasb3/gF3y7iK9ImWxITGJ5ZP7e8Q+nyU0JnhrtE5pvKQBWdhTbFp3RWuA==","signatures":[{"sig":"MEYCIQDmH06e93o1qx1gYncviQ13i1uhH1JRFXHp/rv9I9r+rQIhAIKtu8JDaPqV2I+fHCcWtXIyygeAHRfnNgXMPXo5dnHC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEKCRA9TVsSAnZWagAAUjEQAIyMUiz2OQrs0Gvmvvwj\nbxScazusYxMpdbCdiR595RplccymedTGXVhWxb56Ow2mQubpi00xCWrXn3hR\nJxxgzzJg6jUQE/4KZHv5R7OzT1uuVr5Tv8yor5ui8eY4kzFZU4+PPFRi4Eew\nEsmgr+7nr4AOLTbpwziKpz/d+sDyjlM6GnZ+ecn3mTIsblTG/fLPnHCurtvX\nYBAHCNIMRDvp0fq/jJmPwW0544qr139LHtaIXkav5SCALwgp3j58XoGopasu\nWvaDMBrZwOvJtd1Rv1XUX+qjHVvHFzQOeLdC722qXwnTzIWPmxoOkLOJ5Uuf\nCcfOzQo353CVDC9fq9xDUo3ukuhjgvkBIw9QwEp+SUK7cRSf0iXEYJZvNGsf\nVDkxq+LGK8sVG5Fz1Vykn+kcMHNmaWPQyWZV3enFRHjP03um2Thcv8a9b8aj\neuzn3jJ9T0Q/iEdcUnENOoZzaY5hy6xoJLiqvMy8arO2B7zSlc6xZ/uTK19g\n4Jr3I9wcKgM2pAAX4wweawhi3VLlDOEAD0r87nuSEzJ75lzrSsfhp6e7IYP8\n4DsIgZFJsRSudOS+XwxKXzpf9ApO9Pyi6qHTEut5dfr2mDVfAmV02cUwGAUD\njsb4GcVc/85KoM2IT1QJyP6GD6S2ipljiBH3U0qH47oIr7cA+7Eyz+G1C1DC\nGHVa\r\n=/pWH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.962d4abbb.0","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/shape":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/density":"8.0.0-canary.962d4abbb.0","@material/checkbox":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/elevation":"8.0.0-canary.962d4abbb.0","@material/typography":"8.0.0-canary.962d4abbb.0","@material/touch-target":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.962d4abbb.0_1596125450250_0.9264408840901182","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/chips","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"180929c27ed3181ada85b49439521006bc6e8012","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2fcee40cb.0.tgz","fileCount":83,"integrity":"sha512-3tO18M3+daiiEFbofYAEcLMZYps2vZD4nzqVx/hDwkr2ca658p+kfCHHR0t6MVcm+VBsn9oMk4k7syLsf4oo0g==","signatures":[{"sig":"MEUCIQCE8akt8HylW+nWtenmWD1XCqaHAcnSX1FUQFfwXT2fDQIgausY2lLxi+TuPvyjOzx8i3pIZ5u76kLJNFL3fDO38EM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwHMCRA9TVsSAnZWagAAOpsP/jaiiH/DeiCuKjauIXRQ\nf57DuT7xdH0mUenyAczCKH9rPBge+EfbmnvHBENCnVKeP+BT5KiWT3gpTcgo\n34Umpmaj3wNnKW65Er5zgAoFIWcJCsu1ciDdpQBzbz2CxZwzJqzHzsLEhxsu\nxDbfvuCAQyzgJgQHrpIU03dxhdgYUjtwUYNLjDTdm5ZS6PjKM7xd09cY4sqF\niTTc/RxY0T47FXQYqx9oXCmGP1uh7iwDkSG/MD1YQFcF0kymilUx4dJAl6qL\nY9lZAsvneBGK6ZTrDh7qBl/wy2A/xNhBm0rjD2Y2gYbT6h/aqx7GZuoxKtVp\nQc9NL3FbDvYNUt6ZukMuXZOVaK8IMZGDUHI51+YZXbYIAJEPoezRCIMkvuSX\nMGQO/G9oidK1IV+hBBeGXIKGsC9gfrJambUHGKFhZ5mbCLoxyG8MBiWoGXNd\n7dh8ILRhRs4FFE/nrNOIT2CVJIe1nIBmpNKRSJ9x2/IC6nDs/MFr8flFfrrA\ns1xQW++GQqM70u4bWfoylnqq4iVx8wFZLfFeWA7g0iuP0G2x19K+PhIFE8hl\nsk1rqNasX0muHjfZB5jKA8r7IoMjFRI6gqIbNmTMPaP5TKH/cs9A8aqMnLHL\nmsoG5CpWi0/UvqQeM2lHJ3lClBwXEReUwryW5GwS+hAHdsIxfFcPWUUQKm5f\nkhOA\r\n=1sW6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fcee40cb.0","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/shape":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/density":"8.0.0-canary.2fcee40cb.0","@material/checkbox":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/elevation":"8.0.0-canary.2fcee40cb.0","@material/typography":"8.0.0-canary.2fcee40cb.0","@material/touch-target":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2fcee40cb.0_1596129739812_0.32662106156057114","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/chips","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ed729fdd5da45d8b85a41c87bab22a654ad4ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.bd5987f5a.0.tgz","fileCount":83,"integrity":"sha512-fmyX7lHqtcvcmsEhh8XDLwzFmjHzkmz+cTTef6KoSLTwsH/IvioQj8kEckIES5pk/bCCeIikTB5LOQrQ1E01xw==","signatures":[{"sig":"MEYCIQCweZW4YgHNkhs2OpBENuWNS1chOYHEwDP3V06Ed0C1awIhAIDUtUxaay2VwI/RGoX2LfEyexobubOhrpdzfiyNtih/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIweZCRA9TVsSAnZWagAA0XoP/j+52Qc9EocSk3rzogc6\ntESTiKlPy/SCAYuBJZRLZWxP5As/HYfmFKEHmM8BSc8SfA7EKF2mvVbtRGEm\nETHW+983QEml/c+VlsQvIFacYezLnVpaW9hntcqozkJF05rdm+yxzcDBAn0d\nuWIgfVUf1caGvPL067mierL8vZTK0TtV0hNlXOLtwDZngcYmHvI3fGzqHbf4\n8i9Ofkn9r7BJEReVq0eOmhOBIQboq1QFxTaRLnWO55Ba78YJljY4CACgzp5J\nFPy43QknDrS9l7tWO6jhzOlRWO7XGo3WwxEKFbIxdgi8RmZKE87DiDgQe92n\nP0JIUn4oCK/n8D3eWM1Nv7YatC7ZZOjBA2LnS+t6wqTglVGpUpoArhVUOkSd\ne8CWFZswiFT/qDJQTqLtEWglXR53mFdIF/jcGwSECANKfWMLK7M7YAjfjgB0\nIH/OEHmTHnc5Db3tj9Ery0RH8rxAkM6D27ZKFRikLLw/XNy9MZxmXYfqQoJt\nA/ZVsCxFQva25PPaaC4oP1OJzmRNZ5LwzQ9bB/QuIh50WgHy2TXhD80FtIZi\nrJ0JiPNgU7s6meYTKkkdlSsGgpnu+M4gFmaQ8BAuwzl6msMirslvKkMFAD+w\n1MXDvdE0pXj29fKraasgfTXBQjZjtfwwPLp+3UCj49hh+0nCPZ3yKBfuTyqb\ntX3r\r\n=RlrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd5987f5a.0","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/shape":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/density":"8.0.0-canary.bd5987f5a.0","@material/checkbox":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/elevation":"8.0.0-canary.bd5987f5a.0","@material/typography":"8.0.0-canary.bd5987f5a.0","@material/touch-target":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.bd5987f5a.0_1596131225420_0.9857676638116297","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/chips","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aafec406c76c9dad0bf91f5d51f5773ad2c1f390","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.005e86a9b.0.tgz","fileCount":83,"integrity":"sha512-Y9J+GiTpmgOugYXGAmvjEmoq0izgEgHjkuNMSZ2GDY3jMOieZxOciQUjA6+CX1RQW9DyZhjUA6j1B97r0HzIuQ==","signatures":[{"sig":"MEYCIQDmi1+qXQTjYWBp4OGd3At3y7Hn7sfXA+Bn3mokBH8HrAIhALsLrZ9RJuTXIeadfyEt3b/9zRkIKHkGIoTRr6GVjvQF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwrECRA9TVsSAnZWagAAYQAP/1ROpPtPJycI1pEFiHUh\nUvzQBMqkxNysOSWVtVVAoZFGGb8KxqBdTlFfIuhu+a627VZuPljbokiGUssl\nQTAsjD6IAR4M6cJDNOAWAkwc2BG2L2oRPYM7pXM4AyC28qsGGSIwcsqtalnw\npcJB2WZuI1uDlDXzKCk9rLTqYJnYg1QMxZW1ObwcYPVbebyf/tu5pO7RAdKW\n9KTxpkMiVgrPmcOyAWLrQr2JR3ve6ZXCNtfeJDWuv0asGJrHLVX/zLC4m5jE\nhGbPPTq148BDlcdReyFWJIN43qtXvEDqeGbPZLNroXYCx6fywfj8a3L33cwO\nLWF7flLSqgXcLuwCj8psMSKIOUQDgbFFxmTJOnyLnJYXeyMErIfKtje9OA1u\n2otIioV7qQEre7TuUSb51V3E2bd37haCwEiHbQfFw5fVMRpPj+fb4FOF+lnu\n4ee5+DASokHYeluUbjc9QeSrFVot5zYxycwg0BXT0e//nUZkpItrm0sdbAML\njEKYO4Waa3fNrqNO4mJ5VutySIj72FhwRya6xD9BflQPu4mMX2Y0+mkTWKMh\n1CTsMZV3KfyNTl514n3A/QqFf0a2+WKc7fDmMZBX5e31X42C8ua3/RYmlF08\nioN9JCZT+kYNXv2Hfng694hpo9hbYwCkPkvZ1WH+BR3n1Bd74SHCWYUygc9c\nH97/\r\n=NGKN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.005e86a9b.0","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/shape":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/density":"8.0.0-canary.005e86a9b.0","@material/checkbox":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/elevation":"8.0.0-canary.005e86a9b.0","@material/typography":"8.0.0-canary.005e86a9b.0","@material/touch-target":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.005e86a9b.0_1596132035527_0.4170636466511637","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/chips","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4aee9500b6ee3dd6df39d5419b9eb4dfc7a9da6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e309c7c68.0.tgz","fileCount":83,"integrity":"sha512-bjPTZu7WI6TzyMHHEwOhD3VFntZyNIhujGwH4TZ7EehaM3KHrQpbnkRIg7LCKobZATVSSWnYSIjymU4fesqvVw==","signatures":[{"sig":"MEYCIQDB5+8OCKOZFOdOYAkMhbuV2B4EVZ+wkha4arjuYsXY8QIhAOURO4kQjHPy6e4akDYsBTzEBL/xi+DXc6OY2UUQgFoo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwziCRA9TVsSAnZWagAALwwQAJRZWTp+9k+xRP7rbBZC\nImgtMm5l+tbcvP92gwJ+NED1ew15HnxsmIr/IvUTj3GdgTvYeybiu82xomf0\nK/733yIYJQmn1CApzUoWHAhhealpQr4k7ed2A6rQMoj/XhikS+fRcHJEuqpH\nMdiH2KGQwzbDJhYsJRQXfU87IHJkMTWx7ARAc33i4uCP2NzowWMwvMIySGOU\n6LGL9P7wmRhauDyhWPFjS2fn+NalOK1+oHXUTnmLw4auYBjioZnhAOQKvCWS\ngxj7yUL1L3WkebU7kuEoL4/xJkS3CQ7WuGed+8p8/Xv0k0HbizbDNItwM0k1\n4MfgJRBh5IYijdAeqOIuXRlGaU5pnZvkiYTy3C7nfDbUK9fU9kSyGUWr7/F+\ngPN5xn0HA+JGgqZiMRVcRZ01TsUZ2kHKfiqA7dbTGqusH+OFDjKylql/DVDC\nrq9vTWFUz75zCJO9t2bo0w6XTuwAj1Cdmx6cVpTSN41yMJht4miwmFe48iM0\nC8oqb4IuYU72+4+grRW7P3edZI1N1tFWqTuWBsldUuMijpre++ImqJ6gYPqn\n8t5wLiMDP3ivyW0+sNB/S5J4bKIvQosxq6fqN40G2NjD9EITR47+9WSKOfNQ\n3i7U97gZ1aQ5cZ7cxr03W4Sb2YXizqgeJjpaQS7sDgvaZ+pvp3NmJYwd0p9j\ntSH+\r\n=IeGc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e309c7c68.0","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/shape":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/density":"8.0.0-canary.e309c7c68.0","@material/checkbox":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/elevation":"8.0.0-canary.e309c7c68.0","@material/typography":"8.0.0-canary.e309c7c68.0","@material/touch-target":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e309c7c68.0_1596132578496_0.7402409461400579","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/chips","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"676c55532533389d5544cad6ca2b458be1e698e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.935a51cc0.0.tgz","fileCount":83,"integrity":"sha512-9JkXxwoplIslIjeFh5qqHuv26FznslAK97sBAF7pFSllz0LTKbdFQ57Mz/PPWqAk9gfmg0h8cDWA+7DMVmpYHA==","signatures":[{"sig":"MEYCIQCvl3UMJ5/YWmSfb3xm4oBU8r01IS5xxabwISrbTO4UHwIhAIH9A/agUgsEFqidKOIlBhncQ+fyjglONRa0EmAdJLBH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+cCRA9TVsSAnZWagAAra8P/RWn8qk+7HVNGISOWjlV\nMFueq/dT+4HNj2CNti84Yj0SlPHYkjivvAnggOIOA6U4DhTZgwfWCT0dGBMS\nyE5vZYVCc93m0ec11Zo+IEAKohFesP+fL7Y7giqNNormPW+ClDR3iLBtevxY\nTzqhQ+VqNFniJADk2zbvuFMJ8OifJWstUYl3BLeWDDxioIq3woDtYkNO0pHD\nVBLXgurFZfBrloxwpn6lnw5tMxMyzTJVnw+leQTEVVEz3Ih9ORBNygw/FSym\nYrTLMyTeLAjJx5I9Or/76pHpg7gPAwcp1YkhAJW/L3uJcSEg3n40LtiFSz8Y\nMiZhvsRfxqGDR5EfRPLH9BNZMdqzuLMm8pBB3dstBNrn+guB0tB3hK2xn/r4\nOfIe7LjES9uS0Cq7SbUJKBK0Tu9hB6+FgAyoBD1Y688Pg0M/6S/HyfeDlAze\n1jAT8YoSNplG1EvJtOJ5D+KhIgk0PlTdT6ifzL8JIiDdHOzfP2Lbryc6eZ+G\nmfS2sooTr5J5m54eDRjryz5c+uDVQ74t1fH/7minxpjQiZJk5NQuExqCj8iD\nDqti3+uJIN5cTqyXWwniVe4SxBXrojnqIjc6upB50oGxX7zL8e6T46Li3Z6s\nm+YzPkraROzpRu2o1vMtrSyVkOn0iuBzqm3LvRw7zoxOczDOTVEViEkDQaO6\nYu1f\r\n=brJt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.935a51cc0.0","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/shape":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/density":"8.0.0-canary.935a51cc0.0","@material/checkbox":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/elevation":"8.0.0-canary.935a51cc0.0","@material/typography":"8.0.0-canary.935a51cc0.0","@material/touch-target":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.935a51cc0.0_1596133275709_0.09485349221451522","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/chips","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.74839da7b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7a561ff48893dd2b80f8f32a339044bcc88dd3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.74839da7b.0.tgz","fileCount":83,"integrity":"sha512-GQzMFiBSOXWmsNuJLx3k/i/h/n9+esqJZaMrrPI9RRGKIMNDjkZTEvm1DJD3VBLG+3LH02RSiygcb8aaJU/D0A==","signatures":[{"sig":"MEYCIQCJd4wPi6adA1M7g/o+MxM1h2YcG0JOL84ZKe3LJyJwGQIhAOh8HeC6i+3Hc9q/PhXMO/lXC4XptxQ2pPbpCBillP9d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxI3CRA9TVsSAnZWagAAUVEQAJnTWqO4AQ+72x07p6LC\n9yYtSKyuevwDlqdA6q7bPUrHN41d7gC4fh8gCXGBT53NBOgLX3Nk03uPiz+1\nkmmbQbh9hpjRh2vtPOgEhUZZ1AZ0zxLrpvj7CDcj8dqEC0tALcFwgPSUbd0R\nf4gHUU9RHJn/6rqbG8nzlL0B3Hfv1JJP04QUaSSbt22rtr8ej7a5EstubR3l\nlbNJXX/cMY1hNmkeXdScJ7qo4x6INCysZcEndXs5rQuQxtZdTFnWxGqRITuK\nXP4WIjxdoKzmryEREbDIb1s92DKZ+lYY21lRsUrn7oL5IiZWMWdaYZHG9nKL\nlLT3Xkro0n3QKGV1JDkPBHY/k3Cu46KTFwrc3GutALIIXFOoHuNzzxXkiSuo\nqwVS6gTO/6a3n1W+dZi5a93fkQ62yqqohdQknSLBt9jCSccMCQmETqjzIwEj\nqOHZUtYxrdDQd+7xi8lc7XUEwEQu7MUlw3QUOIrBePu6LeVSDtlDEAYpZV4H\neMZe0xcibaDPMbl/o/1LHyiZQ1BJ9w8KTBd959ru7hCZRDuUz8yfGDhyzo11\nCupzm3sg4sPYpM5VVnbZhIjEAjIL2BEyCZ2uQ4S8qmdcWUomxwmTwcn+zQ2z\neD5JVqLifjtwzLHn822AVfVjXzarENOFfTDZB60WD4S5Ti/rsSBm3Bx67xNQ\n9WQ0\r\n=1CXK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.74839da7b.0","@material/rtl":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/shape":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/density":"8.0.0-canary.74839da7b.0","@material/checkbox":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/elevation":"8.0.0-canary.74839da7b.0","@material/typography":"8.0.0-canary.74839da7b.0","@material/touch-target":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.74839da7b.0_1596133943353_0.5706443950878268","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/chips","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e885bc95b0d0f3551012e1cbd8e4da0525fd0a5f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.f041a48c9.0.tgz","fileCount":83,"integrity":"sha512-fvUGqq0SNfmruumobHhE7OYiE6mkN2nunyYQ7aS27K3gyZVHHeXvhGlqFkjYxAVJiu/CF3F4YwdjQoyZcrSChw==","signatures":[{"sig":"MEUCIQC0t9ONNLIEIS4K+NO6dAyISYTN0VjROLbHcYXMEuLMZAIgMF0Fz2JrbdvT8an2E9dLedD+IHKl9IyPIotkkZVAi7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1EZCRA9TVsSAnZWagAAXlUQAJJVqd5X1fRjdTfpqrGL\n1X8gRPd6ZAvSF4micdEeMx1u2J2GZvcak5cSAkrngQjYsFre1EJrnd6lLSZL\ndn1ScnvxdnmzP1vLPDy1izYdveSf61VcADBSGzOZ1jvS5VgeRblITeaYzHlg\n+Qaf/OTgCmcdbvE2gOldBXSvyngtxmISbXeUFJHGfsdgaSvAmfIo8VLLtKDp\nvPKxY1dErvysVACXRah0+oRou6zz33rajJrWRt/7KC7k6u7eDpnrpgpBO1g6\n7bYx8DZsh9URFsqCqNMF2uP5V6CIVb3ZAUX23c35EF/9IVLOJJs3A1/S64wN\nDGnBvVxl1sXt8jxbHPyxQJbnXFqlPi2+oPKUof/I2kz22O62F/pnJiZ+Y3A3\noPcPq+ATvibdPY5IrmHOxS59Wzmmxv1HE9fqBwrBkBDC4mWXtj0bhmQKO/5g\nK6tgcYJ+0M6PHjNWDKNGeYE6jRBb1VR8rYjwCfI2KmaSNWy8Ql0XWEh4CX40\nJAqmt70Hr6Gr2S7LCNHS4sEYkGrhXUQaYEz91ol4PC2d1fpSXvoBE44VkBMh\nvgjMeDl3EosrQjC/qR6a3GwURVVY5Gl9AuZXS42qLZt1NAfDnv/h/ZwmcXmh\nTVuj3GZG2EPagJf+o7SFkEvaqmn2HKY/418E2DaKpaQ8DPG1HcVIoqaYhTqw\nWbHU\r\n=LCPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f041a48c9.0","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/shape":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/density":"8.0.0-canary.f041a48c9.0","@material/checkbox":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/elevation":"8.0.0-canary.f041a48c9.0","@material/typography":"8.0.0-canary.f041a48c9.0","@material/touch-target":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.f041a48c9.0_1596150040577_0.19556181037111275","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/chips","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2726f5b3ec03343fc3dce104f2f32d8e5508002d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fbb1381e1.0.tgz","fileCount":83,"integrity":"sha512-qoS5vygaLFgpdw/psNsUoZ/RVn3MM+Z5884Lu2OyoT2zf+8ip40PqsBCEMi5UPPOZgALFHJXm4ypM45WozQo7w==","signatures":[{"sig":"MEYCIQDXcliGdVcXRMNdPJAAynew+6s/5orFHanaThxLPtpghgIhANTqAVzswa0RBj4vlLYvYRa9n4B6kClbL4uUbosc6fKu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD31CRA9TVsSAnZWagAAuwsP/2JYbwBFSgsbtgFmojhu\nO2UraK3Wn/mHavS6b5+/ZmU9bmwPNZi4RiwJ3nhQln6IeNwZc6QQIsT6rUB8\nKovcus9Z2Qq9mtNR29CkHE0rHVvn/eeelUrMUIYr0z0cbLXSRAgvMGyHn7AF\nNQFCxqGDYI8VK7caknv/yuaK+5IvDXTUcGB7Llv5jBaUmSuuCWDlrBRrs8FW\nqZmuXnCVHTekw8Fr8GI8ng30OoN529dPGphWwOX62ifs9YjqqmivzsPnk6y5\nQo5IqqC3luDfAjN1ju1LmjTNExCKMKItiGBKQqJMwj2t0MeEUd1yO6D/tsGw\naqQsFImNGMe1zXWI/wAVKf30pG1shxeznUPZ3zuVVYT9GTj8mV3pwKk1LZ0f\n+nqf9a0xyevm5pv3qjXuKn87vi3Iy6Y5QbgC+ZKQ/IlQc9armqbAZfTzq0ih\nMJBUIkILuEjhf+ypwBuzynf7/PJrtSaU0SmBjZc5NInFIt9cK/4iVF86iSb+\n9Ssw6XLG9mBkLM04A5ghe4SGfKCkZ3b9WMSTnCwWiqVDvOL1/x4pHplMNGTK\nMoI1zAi9VxXueFkMYrofPLkMgmZV6j8VwczqJhzXuxaGzILidu4ShzGO4tMn\ncv4MRvQopdkWXOANUWk+I73vogKN1S66ShRZdtU8Im2lYIiFTl4++RciXnAv\nenir\r\n=VqvA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbb1381e1.0","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/shape":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/density":"8.0.0-canary.fbb1381e1.0","@material/checkbox":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/elevation":"8.0.0-canary.fbb1381e1.0","@material/typography":"8.0.0-canary.fbb1381e1.0","@material/touch-target":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fbb1381e1.0_1596210677514_0.9660983010733717","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/chips","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae00f6e1b986436b52806cea53ec2c43a11eb34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.7f61d5785.0.tgz","fileCount":83,"integrity":"sha512-mGdJRVl4DtD3Z2nrahBfdvc5d1XXnf3fKQTlLrPbXvADMO3phWROAw/ndqR7o7EkPqoeYtr8v3JMx147K7Hmew==","signatures":[{"sig":"MEQCIAhMfYrR3BSjcB6nWsqlgi5ChepGMPmUkV5oN8DoiKdtAiBw2ttMKtL5fwsPZzjXqrNgKKy2GHzwrb1c8flu92lwYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOnCRA9TVsSAnZWagAAKKkP/09aXzjGCQBVg8EX/2ZO\ngFB8xSnRIgF/i/9syj7Dd2BKdy1ihKkxcdDuDwvJp5TIDgtdKEJsFE+jXdYi\nHPqNMGm93/H67jbbAN0C37BgUWsk7A7mH515tnr17EWDp3P6LOwAnehMIqVv\n27UAFVnPaMAs1S1uCieZRAYArjbSWb3L+jzOTQ8p2lS/zU8/6rhVmuQjk3Ea\nofEahHy1XnNVVphdAjcR3YV8HIeutq6t/dxVDS0QqanIKw7ATTxGb6oULfdu\nQvaifV/sr93yWovTR7l1ylWloPtUf+jfy+QPi5UDSWfr0G393+qcssLCZvEo\n+OmJF4lP9LLdxNG0+d0zG0zvzJ9NDbwF//dOQ8vlsxp45VxlUuC8mwlUdoWH\nl186hQoHhwP4Hz4rBIqvp+leSN4vTbA6t/Ihe47U+xEDF9IcPQiFK484Gikw\nj5ZdxebPQoDOwEoAzo/9bmq0L8bsHioj/oKd8Y+zXZhpbSKMI9+H/xZAooya\nYz3JYgw0o2JcYq1gotUy9hc08ogak3IQrAPzO+QeeC4PwVWmI+LSbr9az1M0\nQ7nLxtnkLRAQjE4ny9ZSUHBdYiOc4rkToSJIrda9H9ezr01vmtL65X23yktu\nzaoxwsrFIrzFDKyHRuDivW/rHK/OPBUhPsmVMoNXMz8aUw44insjGWOk45EE\nPFdP\r\n=dAAC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7f61d5785.0","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/shape":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/density":"8.0.0-canary.7f61d5785.0","@material/checkbox":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/elevation":"8.0.0-canary.7f61d5785.0","@material/typography":"8.0.0-canary.7f61d5785.0","@material/touch-target":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.7f61d5785.0_1596216230834_0.37216506371933633","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/chips","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5213e23a63bcc82c74090cc866faf52e63532248","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e1bc84d10.0.tgz","fileCount":83,"integrity":"sha512-apUfTGQyg8t3/0YgNQIflNzr8rAnTYOToZ47Y1EKEEV7SyPIGWf2fMaNi6J8MUpL9HoziISxr2FVgTvAegsRDQ==","signatures":[{"sig":"MEUCIAQLB7aNdUF8X7RdwfajvOaD4QD7iFfTGvYTRCFHr/G8AiEA7LxU0zaYvmEHpeq7Kd1Kpyr3meKgkgq2TdYSHJCO8y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6yCRA9TVsSAnZWagAAm6UP/3x3pV1xdyycsRezy3qB\nHM3DAPlKePQs3mDNlsOir389UrGtGN0PaSAS/RcyBedQM/nwDuqUaH2k8n5/\n8EuzpqZez9NSqoHUHOQJ+wIUx2/qx/vUvIs7cgNHwZv5wp2GisNoUC1cT6Mr\nLZzYYMrmGINdA/P2kBsCcrN8CjgteI+7sKZT4uc09tH9zrqA6GrebiypVPXh\nqFr890UdNQGHyf0420bDR+r+ngWqf4PTAb40m9T+04orfl7wscZA6kxYGWrH\nStBDL1KTM8yV31j5WFhUFGSAUYrlM3FO62PEin2ZUEIkKOJhxN/FRr6nN/U6\nVY9rlPVm9nOL2VqFoy0U+lfEhMSWdhLXy53AgH1HjCw7yXVaIuV7v9M4N04Q\nG86oA64RrbZ1hjaCnW708B2AYeSfYRIQ7eRXc8z44VuEl8eoFK99SwiDUuki\nVRX5rSAJiUbmvzHqm9Ss26584zMk5jSs9+9O35c8g5RAMF37x5r5rypowdWU\nGYmWVonlVyZN+ZmiU0o3Npva7NSEWk4doSHsyTr7xv8gAe+8H4Y9kMqh5Lkh\n9atch1kDGY1DKAxxZw5KfR9hlCAyPx61qabH6J15RMG9pLqBxpa6rPjSRIEg\nKhr7I5kAoFyFC4t7qXDsjk/hwFDgCR9CpXqrCm/WeWRv6dQn/jdkuFA/wT7F\nuMyM\r\n=mzmF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e1bc84d10.0","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/shape":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/density":"8.0.0-canary.e1bc84d10.0","@material/checkbox":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/elevation":"8.0.0-canary.e1bc84d10.0","@material/typography":"8.0.0-canary.e1bc84d10.0","@material/touch-target":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e1bc84d10.0_1596477105633_0.7715875753768755","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/chips","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.096a7a066.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc9415ce6c530057c35112b19ad9a1400f079daf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.096a7a066.0.tgz","fileCount":83,"integrity":"sha512-OhkVV3RG3KdyX0FNmIMPQxAcI+RuWkGRNmqbxmjaYQm5Ft/UETW0qg8bHDSjHtRFXtAKvxmjEduOFP1sQJVz9w==","signatures":[{"sig":"MEYCIQCIbC0txc3yGdFXqHX2PyJCjx83abVXV1kQT+S7kl2RFwIhAJTGtTR5FNeDBo87wUIj5v3PCo8FdGUS9kXGbn+wrqXC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9JCRA9TVsSAnZWagAAqEgQAJKFtE16u8VAkwSTQrY3\n/QHpP52vpFsBK9/KbDYGmw4XRQgCAKBheSXlFv5VQXX8GVWN5ljPZBk2sauy\nHq4oLVgBEa/jHjeKc/E6zvbu9UtybpejE6tQXk+OEyno3FJnvcoECczEMPmM\nC12JR3YGWR6FVhvKUPVLP/F8LlkkofLMkokeQYiTKV3XXKhKhyDoXcQwtm0j\nOJAa5ibYRJfHpgwuBWozCT6LT/5/27iWo81cHZowwPkUd1XlbQpdiuuvUNsX\nJOwOvYQEpXMcuCoZG/YyMYJHcnlZOEo5gMHD+903vQCdt24Bzp94r5alT0nK\ndREYLh7NkXpCEnoSXCHMZTyqIdVIb42mTZu+ll/+RnJmuGUp7+qcqTh71LiE\nM/chLtez4M2j+wSuwVDo2IAiTxkoEudiaAvrO/zddHIr/Sa6syLbAKMqw60z\nAeXPYHGyWwZ5WsYpIjFfH94lBnnE1upo8t21VWXcFrMonGy8TdU3HqHMhztX\nd0zOAVhXjfyj4c2s+vSA11L3go/J40HYiceoU5dHrxAPiucreV7x5jJRP0RK\nKb7/Y2ATG/Ui3vdG408mMVdiNaQuDdsGZsMfcfX+DqRwJoeTWju9FnGEojky\nF0Hv+ugVAJrBWyJrRC6ZfQUmPMFpmbQPR7378EmYL6x5+GZ3a6ofYEf66zw/\njvyJ\r\n=UmL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.096a7a066.0","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/shape":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/density":"8.0.0-canary.096a7a066.0","@material/checkbox":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/elevation":"8.0.0-canary.096a7a066.0","@material/typography":"8.0.0-canary.096a7a066.0","@material/touch-target":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.096a7a066.0_1596477257410_0.5148654498494571","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/chips","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ae6b8425ad24d6e8211f5a4b0eeb04fb58a09c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":83,"integrity":"sha512-oXBC/ABtxnlZR9vYt6NIygU+x8E2KnMJyKRUpx+jXv4lobItxyLhOJmCE8+eAb6RlwT5W7ZO26OnFEB6CDahpg==","signatures":[{"sig":"MEQCIG3sqTZWlRBJhmVLKvfMBMIXwvx1inh7pugAXBSVrnfyAiAPI7Dv139riVS2GZ6KhzH2N2SAavnh0+DiGNOpyV4ufw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE90CRA9TVsSAnZWagAA0mgP/jnHbWNgbMIauJ2bVJzD\nv9oI8dvPvjazT9UQiaoOtYRqGsm8Yz9oJ/+qpP4YiB4otRvwSrVPmZJuckQF\ndPuPa4lnrHPhjvsD9UxeLhX7rxdklDuW9gNvEV1EhgRq17AbsyTBktchtyy6\n0cVgZuZjGZC8qdo+HAJ7A+EZ2UT/GmZ3mVKsUEQ4aTAwnFNQTvZFDYKWZtfZ\nuT/EZtj4xY3KLg/vit2NDGONORhoGx1KqOmnJtGid98ye5ZURW0xh08LPV0V\nQ9FyBaQK/jH4wOXfE3gUv2oW5ppD22JGHHfmc6kIRVddaW1lGKuVQhw3rWQV\nRlrSsiMp+JIQUro5bJ3ZUp32XTvTd6Wt0jKRw45tQcSyeZBeZL3G2w7uqUnY\nFPoPPC2Uv2EoLDYlx2BoIrcIQLiBv2NCc6JBEAJk4pB2huP5pau6zryM34mI\nkmV4IIHw1QO+RrrUhRC8VswL79embUjUZr39p+5Y+rgzBPvLrUy0bijk70n0\npwokNKHzzCOzqwtRGvyyTWB/Z0APzqF7lNhoAlZCqP8RWJUXtmcFNvQS+ZMU\nQj8yaTdQp+LZzQPX4tR8RtixQ9JS2+VciryrlpOjueBbuEMB/adlalwZyl5Y\ngrtINPL89988PlN4bWXMpPGZzBqNwOZebp5Sac9tP0LAU3GShbmH/qh+Ofy1\nizDS\r\n=+lzc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/shape":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/density":"8.0.0-canary.aa3a3e5a4.0","@material/checkbox":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/elevation":"8.0.0-canary.aa3a3e5a4.0","@material/typography":"8.0.0-canary.aa3a3e5a4.0","@material/touch-target":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.aa3a3e5a4.0_1596477300144_0.3867067607044352","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/chips","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.5903d39af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"120c223df4d09aca28904f6bc2bd762af3c9a55c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.5903d39af.0.tgz","fileCount":83,"integrity":"sha512-gV22bz6Ad1hvIwG2K0AjopRuZMckJf+8WfhxZmvTG4mG5hbi7iHgSrjCtOjMWLxf0shG0PK9PjgBZnkh+9/2zg==","signatures":[{"sig":"MEYCIQDazTIH8A+JYYNTuho6qc25A+2/MPZaaq/qpfg1oUobGwIhAJTOjfAVo9QdMu56xQrUi+9p+DLMaAEsp1PPDZ2fqCj7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+jCRA9TVsSAnZWagAAT8MP/jorSASdO9cYERZalQWl\niIHGddHPtkDStK97GdhdItsDBYQ9Ytjikr+IaTNrAYjqPl38R8DR1ZOtyWqM\n/7oLNIEU7BmankvaV96loHNUgUA+nZE8RyFReM+NfsYDwlUZcL0QGCGQMZBd\nTbM9Sa7tD828Iczwr6x3DAsw/gG4DGOVIs9m/PobIJhuJA0JgG9odDB0f05j\nnKg5lLe2RadmFSvleiksXjICIeC7fVVNqpfRbGHOGBG5x8mBrvNEZL//L6sx\n6NMoidXRLBI08f3wRV5WLdecyCvIdpj59j/+tjst73shCxFd46mzs2Am77rU\nSHVTeM8eKyW/PVM6pRo+QvgZQ+TNfshhqzuLLAdckuGUsMb7Mv+mKoSRFNTo\nS0oB0ZfDgTl35aHcKB8qrdlSOHsu0+mQdA8o7EXZstr1sLLQhTA94Q5Ir7sh\nEda61OjUx149QoB4ZEm6uhc56cTRt6tehjjXLDb9XMEz3WH3oG/Ek2+Vij25\ngw7JAtBVW0qVP1jOvWDyo5F90pDfikVxzSZDvJ7intllWmKtjSr8TNcmNKIU\nWsDGtIdkJnNlUuCTmQtFN3EragQu3LPwKHLZeZa8u4/zo0TOIfQsrviid8v8\nfZXLNfH9YxSppKyszFHBeUeV8cnO3Axd9SS0ho+l/Y8yVStfc1KZbgIwJ5m8\n7Kus\r\n=WO5l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5903d39af.0","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/shape":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/density":"8.0.0-canary.5903d39af.0","@material/checkbox":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/elevation":"8.0.0-canary.5903d39af.0","@material/typography":"8.0.0-canary.5903d39af.0","@material/touch-target":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.5903d39af.0_1596477346835_0.1431595685785858","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/chips","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.72258f898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a6a413e52345fb919d3863c372b0b74ed357a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.72258f898.0.tgz","fileCount":83,"integrity":"sha512-UqXzkz0mh18N0TH35LCoBWZakRLNEC0vXrfhyMClko/Nh+Vw93FJqzB0P87ci50TK+Pi4T6ZXHYDdU7sXiLNdg==","signatures":[{"sig":"MEUCIFFlLUyc5XgQXNZg2E78u3Zi8su41DL+lzwclpZ6xgxLAiEA1X8ddVwRa112BaQSHZyKM1WFaRR+STTOxCNPgNxRoAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLdZCRA9TVsSAnZWagAANo8P/30vCHuf1Y+KOaWRB9J/\nJsHXf+OLCpFr1tr4kfoXuy31Qhn0w02RyEQEE4Y0Hp8fSTArsw0qIpcfhR1m\ny8dct79gPEI0dqmxZWiQzczWvUkaecl6yoMTBPb2YxrGu1C/MpM0h0DV0QSx\nhJhTxydpixOTZXpNdq00ISZsat5brZOcPjUa9QFQuT4EFtbTYPn0mgb0QHv+\nm6g3I+1FwPoSBxM7uictrU2BKXuSKgEn0D5gzYcmYpfXHgO3zrEHrbE2H/YN\nNX4s/LpiUmyjoAFfuWexaMoykTBvRh+NiYtHWeGCx1luN7VcLmZ6jNbt0lnH\nUt9k80/ETOPpCcXhlBs/4QVp7TLCuxHrB4NVS7zKV/N1UyZMvmPmII4whUdy\n+VKciSrpmyLx8rIhae6942XSW0Hj4GdeFydehDGUSEByAaNng/d58DceSMP8\nzT+qQLp+YxyU9uMFBsoqQVhFwE+TdGR0J8H0EYVLn9q9RKOVtrT02bJCtNYg\na+CKiQJCzbfof4jwU+sczYFIyqmkAjNRYoQ6sR7G+6itbBbxIHrYWiQc3/Xv\nj6EDnbcSI5C+TKBKQUQvHjfvcdLqCJDVZ2stwhLT21RuF28+nT3d4ZYCgSei\nJj/uHZ+++K6VKDUbjkW+WSgZBBb+Bn2176x1OXcsgUfr3Qdmz7k4rZjqX3jp\nDAyw\r\n=DMu+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.72258f898.0","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/shape":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/density":"8.0.0-canary.72258f898.0","@material/checkbox":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/elevation":"8.0.0-canary.72258f898.0","@material/typography":"8.0.0-canary.72258f898.0","@material/touch-target":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.72258f898.0_1596503896904_0.6943617520960714","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/chips","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8e1cd118f7193a80e96bca831f83e0e7bc254d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.1b44b43c8.0.tgz","fileCount":83,"integrity":"sha512-shGkPjgPsyKAH3WYKpvxunrrAVQMPxmwnr/NlFbDh61mhewGOKSDKet2h7lHQ0/ARHqxULNOVBgd0Ehu5usiXQ==","signatures":[{"sig":"MEUCIA57tCT57/v0KWJXmObqqVRELeio+C04S7MaFkvn4l03AiEAmJ8QkjsFhUYi3/MeErUlCB0eCuNfEqorvfbonADg0Ok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZGTCRA9TVsSAnZWagAArfgP/0Y8bnbSOg6wDqaJ3va1\n4ScLHKwQ3W4fWLi2KO2nrk8PaGe1SjSMpZD6FaXUJYKMbzcr9Uibe65zTmHg\nW/bwYdmPcIBmTXuS9N7MADI4ImQASZxqSuPhlEVR73DIxf7UhUd2vRHoLhxx\n70N3f8lnz6K5WK/Xuh8Ghzl4y3hgj8J1W6mS0jRnLYXBqnz56/kBZQbGEDJJ\nDQI3jOS0mFmbnh2yqgDr1SN4b+IiJ/LdajziZeGbOZB0v5jreF2KBR5TlQOM\n0vT8vVp5SO3CXZaTa68ZoWvW4B03LRVpDkt3gxhZ7UtqnCjh/InWM7TQLyu0\nlqK2uSnlYTGeBxMH24KjJNejH7pRdTx6ofrlA6ctFvX+bsGVyObCzfCtasSZ\nQ1EYP7DQGyooSfCB8xu2YVEBLGS/Y/w7OIkN4LCcDX+CIqN21230pF+DrvsU\nUm2kVQPSWCkq89tqM6EiGK3/gR4uBbifSYjT5QzT80eaVwXH9/ryyT21mwa9\nCs2UAmcDYwg9NVLyjExFuWJIkk99ElxXVibATHmVDoZaavDsE/FT6J9q4LvC\nzqbEwdqlETKUBGyGZwo5ZECN0H4dBJ+PoCvo4CFUOOUoh7MpyT9MFST41P6N\nfFTlZls+FsM3KeRgojpCahzDOILbgV+Uw+V5uEkLAOGOCUtYVr9LastpdOF0\nEQiV\r\n=5Tol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1b44b43c8.0","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/shape":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/density":"8.0.0-canary.1b44b43c8.0","@material/checkbox":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/elevation":"8.0.0-canary.1b44b43c8.0","@material/typography":"8.0.0-canary.1b44b43c8.0","@material/touch-target":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.1b44b43c8.0_1596559762476_0.29153445470825834","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/chips","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd53384bf6b86e22e6387e19aafc0d59f6d43361","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":83,"integrity":"sha512-LNnOIC0QAo0yn2j2Co+s4lCOh7o66xcVcWsQWykn21vQ23lakPOx/BPRv2ZplVWraOyibR+vTdidEJzLiTdvDQ==","signatures":[{"sig":"MEYCIQD6NWbFVGvz/u+po56B9H+ChW8MVLHbLRB24GojuDitAgIhAPVfvmoXBgHrpAxBOLJvPGVzvwJF2ZXx8C3Ke13RY5DL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQiCRA9TVsSAnZWagAApjEP/0we6X1xoTubexJN6Ldc\n7IaIw+ljy3EpMsQ2yeuh6h2r70ol9uOkKWthaclP4z+e+AkPHpqn1FRREln+\nxnbIBC/UWXuGuMfSmclejgeXKuGL2c6Hy7l5svsL5QafOc5JZjuL8tdSZcYP\nkSGqN8uAqqu5EerN99uU5wIuJc0VWR0FsyQ1K7bVGjEwVKBnpz192x1K//Ii\n34L/bwzbDkCbagg/XmEcVZoF6Nz3yOE0fH0+QWOLOxdXHjuDY4koqbd/Ia5L\nO9Mr8w+pNLM5BinPd1pTwyN52taOyjwc9DcVq/OxCc99BNcGgm5raWs1zVle\nmWdL8RanqHhJ2icd6LDjuVkM9wc1UNn71c3PABE3uvB1eHTZIXaWlanOboOX\n9L/dXK6G0XR9toCaNY9ZA70ggYlxKqRxrXrLSW1SQQszbwg/fl6I3V502YPa\nWQH9bTHoqoXW6WxhOV5LrFqrR7OsOaDC0tAVPFnW3cfrgF2ZDqAAaeuh0byV\nz54dQxW6O6avQOCu2jiRPVetnZPvo1lp5kfm/7/BQ1s+fd+X8kEGx9VyGPuu\ntbCvoIz0gLfarISg6SyWDoZPjqg1CkUKbHWJUy2CbZBuaSkhvj9K0VD/zgAj\n2TQQWC78Q+BcxMuB8e3v0otMwTGjzJpoUgRZDk3TjunB1+5+rKMAHf/sF59H\nU+0u\r\n=GNkQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/shape":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/density":"8.0.0-canary.e9d2e2f96.0","@material/checkbox":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/elevation":"8.0.0-canary.e9d2e2f96.0","@material/typography":"8.0.0-canary.e9d2e2f96.0","@material/touch-target":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e9d2e2f96.0_1596572705690_0.08570826331489778","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/chips","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82545e7cbff98e737557f84af0855a205b02dc94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.b9dff0a19.0.tgz","fileCount":83,"integrity":"sha512-O51iRLt0y2ExeDu1IeeZ72hpRfeWHwQ65QjceEsVGknAkZiXDKBIh04/PVvUxgvoO+GRN+PS3kPHxgUJWz2Z0w==","signatures":[{"sig":"MEYCIQCBaQEPIo2cOq2HwXXranxPXzyAm8GuNdZxrgLNsfqKnwIhAK2JSM2gf9Qia6KFIO1rDUzjDtm77n7kp5g/SbZf9dnC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKixcCRA9TVsSAnZWagAARlEQAILe/sIHliPSYCaqUlKN\n1m4RhNC/W+SEMoCR7jt/OwTiF9yEVJDgAyxi9ChUFrSkZ/u/9SLRxbvFPa9h\nXmMSr4hQ9HGkjfpj3EET2WSMs/mTl4qAcSyJhtuJqfnURxu/W8ZjT/xSsrZ8\n4aGrQ4zYwrr/qDpE/jf84u4R+Nd0fsMIl3K9pv1f8V52mp3JRca5xoT+cAux\nCzMF57O5ho0XBV2dvRPPoUwS55XnK94bVFrqGhm8oiQT87GKW7E9hgYSmOiP\noAP7PSjX7AYvFhn0PfyoTuEpoqRooRXiq1iFLcw8bp7bN+7P3IkFrN/esg/q\nd1HWz2bZyPJUq6H+rWXx9HlE5Zi5EbCCPO7B2FosokooJxWGNdsRhPcfC9DO\niCF93+EDwiYrQhicBnZxc5VBziFFkwJL0hWoq2picgNLrH1Eax64LsNl/MXh\nFG4BXO6GlJ7XDruC6+M+/AugCU9m07hpJbxjEgHJ43BJHjH893DQh1JP5H51\n1zApsvDT31oF3X8/jsz5Rxr/SeoVnOn0PxvpT/CndVMvEXYQFBawK359cC5A\nmaISYHL7okJVl9kCl0SLlhmKp3W5ckdbG2esdfOpazzJRadRIaZPIbDVdzAR\nlvMsz4o1Xsq5h16iVFCwI8n9piEGb9ztXv9a+wn9k4KfTXf0+L3E3xuoyqqX\nRduu\r\n=1pW/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b9dff0a19.0","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/shape":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/density":"8.0.0-canary.b9dff0a19.0","@material/checkbox":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/elevation":"8.0.0-canary.b9dff0a19.0","@material/typography":"8.0.0-canary.b9dff0a19.0","@material/touch-target":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.b9dff0a19.0_1596599388409_0.6016305162368702","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/chips","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc9442dfd0506e5e0f3248b093c20eeb58bd1f7e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2bd09a706.0.tgz","fileCount":83,"integrity":"sha512-UwDwNkbQQUuwApwa6fyij18/SKav4V+YVro199AfgwU6W2cAe0c29N/aV9Xcwwx9aReMnxYjYrcNjp10wllfiQ==","signatures":[{"sig":"MEUCIBhWJdRdnAfRUk/K3DIsfHQUXtcR/kq01q/lsonxIKCNAiEAv0fCYA90B2YvXGauwSTfPqlOJ7veAo4hfPsP+Z1Cyh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi2UCRA9TVsSAnZWagAAGaMP/jQTgkDT+xoIKr91M9LK\na2c8pvo1lOpb1ujfNz5FRTTf9DMcnNo+QMUd3nhVo3/q501Vf7j2Acedu1Ah\nPFe9oFF0zL9yAlk3GXoKvts13mve1hLifMhaJq5dtVaRj+WxjZPsg59NyH4G\n4fLCkfnlu2LVCbcstWH1X4Mq1fTEoSgDxrlj92BFgoaiw6PhpFfRESXdPbQD\ntM/w30M8CF5neW3CZmqJV0uDRlZRkYFOcPrNkNf6b0ax18a1Swc4pE3zRgZi\na/RLkUvlYY2Df9Aaw9TmzIKSCY+CInDJ9QnCwvkepWRcRl7KmBWe4RCvSrU0\nWTjgFeajTQdNqyGavxLtNW3dHiaHHjg/AB6NpLQ8lVpHxc8zVMIpd2IS6sno\nnXuPRXc3N1RQf+yeEMK5xO6ZGjlkfsxZnDr83jGJ3D/neJi/MYxUQ5riaDc8\n5R/2OQi+UcpvY2PI6TZrRvzSYJ3gA7iN7dIv77tK5AlsqWZAEjg3hiuHdEoA\nqDHm/R54WDradRuz9N8GZRvFZ6R/PBrVcf9qvtR4xdR3U94LIjG8aTlMJCBE\n+qR9I09ga4i3oBoJFmgq63E0wEWlURqRY2+iWTqoB7kKX4mTc72ObOjL11DI\nT5XR8UGZgvSF2qPC4aXkPRLHP1tlg0XNRKzGgorGjV7PfYfDNRYvjnhJ1+0t\nrXRr\r\n=gyFK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2bd09a706.0","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/shape":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/density":"8.0.0-canary.2bd09a706.0","@material/checkbox":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/elevation":"8.0.0-canary.2bd09a706.0","@material/typography":"8.0.0-canary.2bd09a706.0","@material/touch-target":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2bd09a706.0_1596599700071_0.4163949322845437","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/chips","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e0560522f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0834841cef9d7fb2bcb07941ad1e879fd3475dbd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e0560522f.0.tgz","fileCount":83,"integrity":"sha512-kPylC0+Id+our+hUgt1rQhVNgk/K3pSY/jlDO2Yuol/2zNMLR8J8zd2Sm/8VdKARLAWwRSHeHGeaENGwm6niYw==","signatures":[{"sig":"MEQCIByI+Bu086pcrFZMx5pMiLNLuE2ggM5e1d1wDvZnBBznAiBw19x1T56Ltif5AHjZM72Dou/INR4+eWmcpls6X3Zqow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKupfCRA9TVsSAnZWagAARyQQAI44q3UZDei1z0hlA+nZ\nLUkCDyyXgNxleAitcqqaMTse3UFvu0Vy0Ge91I9VAEXK12RjhNw+a8uutZFO\nWuUo76yvJUzrjOn7ghudIDFrOtwuKwZflMCjjAur/4dWiMrIcI3jLAzHA/Xh\n9IdJbwYOO521RnA6U3b1b4fb3f7DG5nTdqr4fFRJD54SSGL8JBkGLbUnwKXy\nvf08lC4mFPhWsvRRkPLbouU00HUBkyHBlQZkvfXJ9vJxJ2Dw3iMYaCNQGKge\n4FGRpz3Iva38NIKBYCUw0BLurpTE+WeomQul44MHqjjUuaYv8lPIlsaqsfvI\n7Bl55KvXH9T4uCRmlwABJW/sQUinon6SrEr6lpqHQy3zUhOm60Kp4kEY9wJ5\nYx1ogUP/+ti15hzfgTWHQzlxj8ZWUE8xK2awQ+4LQrp6AEuatQUVR74GyviG\ncbqvoygsPF3mkO079fnk3Rlf2P0R4LkmCZzl22Vd0qbSibI0lCeKUQjuMllu\nqt8gk4K0YaBdY73fz/hQFrIA8ab6fULqeF4z46BxMY4l3rRkwdto5W5mT94e\n9UeT1j9f5me9D01kNOp5njIbH9S2Fk6cL+ED2WL4N2cGr5XrzI6jd09Y5MSl\n9SQZF3W1ZxYIqBv9pUqF7fybDfUmRNR0I4hIuwx/9p6wxwzNwfUr/FdL+2Pm\nWE1E\r\n=EBw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e0560522f.0","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/shape":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/density":"8.0.0-canary.e0560522f.0","@material/checkbox":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/elevation":"8.0.0-canary.e0560522f.0","@material/typography":"8.0.0-canary.e0560522f.0","@material/touch-target":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e0560522f.0_1596648030933_0.24039612840386715","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/chips","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe93fee736b4af1ebd08b64b87693a78c18cb4d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":83,"integrity":"sha512-S8T06fAjE3iL0iHnjiCBRj+V0h0Gu7VqkgeDSOQ7djtq19v2us/yoah2GrHSP4TE//RIpfv921TqmRIRSrBdDQ==","signatures":[{"sig":"MEUCIQCD86C+pkKt+ZXRpcqr70KMmldxEB2oBFm7AtygPPsUbwIgfGbhJ7bIS+iJoWEb9RT0DJpDgxmiwrMLs5etlBHnBxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7/CRA9TVsSAnZWagAAOH0P/0fuiHPw6WaX83/YtAeq\nps/DGgZ/rqRq7Ozot2LXTwV9AMHrZprGeBGHhb18jflsPw/iwtHaqdpBnWnI\nqGlSwxnxNq0ngIJXlDOmAEqnRJ5aESEhvZ6X7/560BgrwjOPmdT34faqcBs/\njzn7gz3vyBn3fb7UyZwT4o4kdv17M4KWDtukzNlS+uvcLC59UcCJH9r4VLJs\nGHqTsscTPmD1NFhkUbhrDbKXn8xfdF/BSfruq23+9jrrdR1wYR9DCpzFNGug\nfo8pSd/dl+/KcjfFL6+PrhEVzJ9voR0ulRGTPz7Tg5w4KwermPH9pA0VfakX\nCiSSsos1LWbF7PqkauI9se2gbjbfdTIblR7l0sKn1eOiQ0bcWRvKviUXlBFa\nQvHl8b73q7gAGrb+5Y2+dftmd2HhrFFhdttqfsh26x03NsFG3lG0DJbStAqQ\nVfyonekjLi/UdAE7FcXs32vtYY/mh5arlmWN0XSy4f07hTPdw3Szy8rku9Sv\nc9qcQ6uOFqLOEURQ+CkS7k0fir6+t6dRRQC9yAC0mBhb2NYKJ7woLJRBt/8U\n86uE8xR3yLwuzafjpClJozOtL1K1DwfpsCd4ENm8YauI7SzIlRiNLA7C0oPD\nmLiSvhnCQPwK2LsGGJjh/KlSOQfrm25capM5l/C8kwoyKXGZ96g7qxwKeMum\nZtrY\r\n=fYB1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/shape":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/density":"8.0.0-canary.08ca4d0ec.0","@material/checkbox":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/elevation":"8.0.0-canary.08ca4d0ec.0","@material/typography":"8.0.0-canary.08ca4d0ec.0","@material/touch-target":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.08ca4d0ec.0_1596649214717_0.6017957013316626","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/chips","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.08090126b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abeaf56c7d1223a230a039dfd7c990c521d4da52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.08090126b.0.tgz","fileCount":83,"integrity":"sha512-KOi87NTShCQnHai+EPuEv1ykU5+OwkH7jp3g1WXaoMNCmD8V6pwVei+rZF2v1+o7iMdJWINyrhSKOoVK9E58fg==","signatures":[{"sig":"MEUCIQCOyvONs8qq62qf4l8yzuQo8p/yR/RDG/dCe0sRmeNPiAIgNb1FHwVndYCktiFL08lchsuAenYR/ejW5Q3VXcp6S7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFsKCRA9TVsSAnZWagAAYnEP/ibjb1h/fUWu8VnABQJW\nkv44QeQJO890/NR+JQVK5PNhq0UoJjtIJddBeRz4ROexujMEnAOqvmyeFq+K\nBAVeVxIpYsQY33KWIC/Fd4VY54ZNxBe6LSc5TlLYRbmXd5wKxUjXel99ClA0\nGjS5KxI4ruzQ34EOcPilrEzeWXAgpEuNW5/CFje8YY7DYLDbmnGbC7d9KqyE\nNVEPwtSPNxcvOVU/Mlh2z72CaXSAxeuRWURodG9Foh9sA1uqgbxW0Mw2mE2v\ncCVIHQ3BOmLuqTUV+mqAkpNquCxTg1RDpVyfYCTcmTffi0lGh7q2bj/oOHxH\nzO4Y4UDHaKRcaIYBe33fzf+xYj1H6j3hyAeJR7eFHeht4HzZmCDtN3y/SiVs\naUtyX93yMvCUD6aGi9itaj//PtFYOnfZ5YsVwW9FCQo5aBofLWVJ3R4qr1/c\nGTJUn8yaKkq0437QI69v7hjma3qp/0DPitj0/kkXkJk+whpRH9578dyLIbM5\nAWkGnRQhrFU+mArd41GfHh5C2dRpjFLjWAessBPYB2Q6/UG2DFldbUv54Wgj\nJfa8QIvMVNx/Efumj/8SHzcbu7h4kfXRLIgay59DjRGNJ7d7HTwTR1AxF/xp\n+POvvCPAjRfmuVf/4FlWlVVbnLNokOAOEcNrUJOzEvpwnGT7WudgZ8NbkoSU\nsALl\r\n=vMp+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08090126b.0","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/shape":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/density":"8.0.0-canary.08090126b.0","@material/checkbox":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/elevation":"8.0.0-canary.08090126b.0","@material/typography":"8.0.0-canary.08090126b.0","@material/touch-target":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.08090126b.0_1596742410356_0.32648682331943446","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/chips","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cfd7e73215d39a5af8ac80afadcaf0510cdc04d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":83,"integrity":"sha512-ZDNRtcz5Mfw3C//maG5n76pm4xvce2+ZKeHN4vF/vjOMb9JR/mSje3l8E1DITsRzqPvzbmrH0w/q8OxF9ltjog==","signatures":[{"sig":"MEYCIQD6qCoEkmzHd5yYxtbSyk+9nx4HZbekUCx4+iOFrkCQTgIhANU5wRPTKOlRPUaJqeeNcxrwRJ7YgXx7Dn3HP7fx5PMB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHssCRA9TVsSAnZWagAAfC0P/1QTfyFNbf6EV/oDLbm+\nfzORQueRrsKzv5qiz2CDgZbSty/vs5+KH5RKhW2lbCN88x7YabnY5taRHVuq\nePhM6p9OrQTNA2Mf2vdLwNcLEBAlATre3EEBN9ZDHRWnujIR+ImTMoO1/DMV\n0LcdS3Gjswkq3vGt39+sm6zbLStNyLj/REPUITzye1rZJAWkIaRaVW9nGTzB\nkeIuuRE+pyLZ2prers5ADDKWdtQjm02M4q5xGiTE/kgTpH+jtxOacd/9NkoB\n4ZdH5wSAy7pjkEE7FyVuHd4YrhYwBbVpvEPUWO4YPGTLo9nscvD5HXRujqQB\nn0TLIXKYqa1jT92S1eQy1eM1t7SkQa9GNNYxQsNegYEN37RZgIZMWlLR9Yyl\np3MmY8azHwM3ASCydVcPKd91l9aygABLV7ahwlSW/1JBmZqKsapcUAjUTW32\nUztgQrYbuKW6KBbRZvo/v/Qmcai95PsQB2Ro5WwzGh3myzaVjH0mnWW10XK7\nnMA6KewJnd4nGoC5EcS+z3JK+e0vKh8lD7XzDNzRyzKKi48HNhGNgwmggglP\nP5MR2h6tUUAUQbmjA3Shpd8TH91cc2uLpuyY6AvLx0KnCm8IwknXdT7WLTxF\nJYTIcie+T3NiQbespktGmOehsvYEATWXtLvuAx1bau4s99kqg131655PhkAB\nIRUb\r\n=B+MY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/shape":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/density":"8.0.0-canary.e8bf5b2ac.0","@material/checkbox":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/elevation":"8.0.0-canary.e8bf5b2ac.0","@material/typography":"8.0.0-canary.e8bf5b2ac.0","@material/touch-target":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e8bf5b2ac.0_1596750635488_0.2318502858290854","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/chips","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e3b746208.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e66122e4102769a3ff81183df8ba573bbbe637e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e3b746208.0.tgz","fileCount":83,"integrity":"sha512-BVj1LTAwnohKMdnn6Kzw0dJyV6hndySl440DpERFtFnJ1D2vTcLyaqDDAoUVrYdvXti0QaYAy7RUXbz+kGtOkQ==","signatures":[{"sig":"MEYCIQCgRdi6Nd5eMnNCKOTG2pYC9flE2aWW5J/EYiiPyTAolAIhANl/Xu9S1RuAsuwvfwZ5OQ/p3jxQxlBeo7dm5xHMngww","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":934164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPcCRA9TVsSAnZWagAAwsUP/jYcw/yW6PMydo3eNCuo\nzDOXNjv+Q6lp+eiqH2LNm3LHGG2xLQu/sSqprmp/W13icD0laUndrqAbEAv4\nvriDHeaIAnV2XYu6mu0NyT1jWIPbjqEGSBDX4CEU1IrVJLZmsbWsewDHru6a\n715uPnMf6IkA3lzWYO4324K+4UiNdf92yyKJPGnZj3GiQy7nYiTDjCk+3/5g\nY2ozKPAHftRJ21mFT4uzjGrl8LepStf1lVV2Bd1s1ygYKzCAa4pg8/m03u6g\nSgkPttVLec4oGSsS7Mi5Erl8dxj15HeI5Gnc6+R7U5KV84q9AVLvPwXjyrhV\nP1N63W4GY/QyV9wMkjKGCVMGff+GRIiMzJGZGwy+XzOJprFVsrWS3B0IMkP8\n3ZMp29lalH7JyVI1IPHbEy0KCb3kdVlGbDumI6UJNbIDK/vHQya4g5VxRnza\nLYfwqLfqujOm835n2NqEH9esiYNUGFeLeBqT5lg7/xFsNIgOr7DXBvkM+pnC\n5IflSx+ZjijXdwhPcLTWEFMCxUoGeqWPpvq/Giea2f+9W4/DYA7cwXELNiIt\nW0r9Q3u9tpPZz6iJO6CkabMisxxnu+RyWDsEmRh+gO7fl190pTT33XrTc9jO\nG7Z63KqxilPQDhMrskFLmsKC9XIu0PGdWR6qFMk1rdhQHbXx4CNrMLEzzj/c\nzSOv\r\n=mjB9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e3b746208.0","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/shape":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/density":"8.0.0-canary.e3b746208.0","@material/checkbox":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/typography":"8.0.0-canary.e3b746208.0","@material/touch-target":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e3b746208.0_1596752859271_0.7263189225575604","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/chips","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.96a640534.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59122d20335687f03814ae080da61712c9226c14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.96a640534.0.tgz","fileCount":83,"integrity":"sha512-JgpvUri8e/uaJxlNRGh6JY3iklxWyf6TAo2lg2idq3hSFS3GAyAMQJou62UM+Y/GJFALF/5uH/dHUaG9ftn39A==","signatures":[{"sig":"MEUCIEf+Ac5BsASNdYR6kUIHBBKphodWISOQYp7wfHAx3mlgAiEA+u+ukkTP3M5tCFA8pS9hHDeKTAhKlYYiD5ulaEuGbtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIc6CRA9TVsSAnZWagAABEoQAIHV8HTa4ENrBErjqN76\n8r5HI7keKL2D26k1AIYv/jjBiMpPRjUpLi/JNRgxshCPsT5zTuNmAS70kIRX\ndGrQPxIVTr/tvhv2LOIIY7f2eNIDNGYAYxIASvcxYScY9FOPi5IGXMcMmRiL\nNJmPLpKcvQnAssgH8hQ7igXUL8YH1tBLyce1N+rio8vsh6AI1ytfuHDIXPfy\npD72+aRQkkM2sg6Ev1YCudnT6xbFBgFZ4B8bIt0rpDtAHqDMjeZq5AoqTJcL\nzTLuCwPcMt8qZXbqfeAMGhG607vYMH30VUyh5QME1hpyxJM5c9fiYa/aOEXJ\nbtxcspEN7guwU15HsdAYXKgpXoplUr7pcVN3dz3jg4k5smAKrJa7c1d6DfKr\niR6sjEAb9gdhTwFY7YiV2Ljsj5PsFjhEgrJhJkMNNNBzFtUMHHZ6D+DpDLF7\nk4IFFCbZfix4IMuSjYp4TLYC6dLnyjejxdPgLNuepEoPBluiaA8xxsZtcYpl\nolhXSeDBH6V7Oak+gysl1wFCJj9jbiRfeULYAr1NMD9rbVWHX4LKohvF4jLh\nWydauFMQFe0J5JF6Ja0PuDcKJWHCO0OTF1EDLkjAjw7YaRU0NWg5Yhlljv+/\nb8Tx968o+nHSYgBqHWdBqDfZqkh+Ba1AkA5qgtDgCyIJpmLW9m46TX1dMLuI\nbEx1\r\n=IL2d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.96a640534.0","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/shape":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/density":"8.0.0-canary.96a640534.0","@material/checkbox":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/typography":"8.0.0-canary.96a640534.0","@material/touch-target":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.96a640534.0_1596753721780_0.5087026669241126","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/chips","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e24ed31e48e2699466a0c58b3fc2e40b1742fa9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.9f9aac825.0.tgz","fileCount":83,"integrity":"sha512-28QPvg0EuYZwTZcIT9ii3aQtgoiYbhRnSqFNo0l5Lu/jIrkzGAUUo2j4oYuMsZkDwjR+dU9+jNyzapOTsl5CfA==","signatures":[{"sig":"MEYCIQCZYB8eqPnr4CpG07K8oDhtBlA0zbAMOwqYICyp6IkovAIhANUr89X3B8P6hvmmb/yKEHfbHafWfdwmV+/hZcz4NTwl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb8ACRA9TVsSAnZWagAASK4P/0i7OhaWWAvKp/PGgJkf\nxVCclGbUAWuXHxq9e26iZH+US587ALGSnUN3lnX0/aPcwWG3gQOPJUFuQEUV\ntpd3QJEUrt8J9lV6lNaZex01Y0r8aNsQYTFZ6B/b7Ow9d9lGRhJAhqe3qnkx\nhQDzo6DvSAjCDX+tsnSFdYnMANNZQprGOj2esiMaIbSqdrNtjOuwWoImLKhA\nnmaIzch+9sfZZvW66nGR3Tm2cc2gw4O2JX/+EORMOtpqhsjK91ODhkU3TBBb\nLKkVG72AuXeKOMdRWGOW/7nlOROogeBjwXYZh5+NMc8i1bdEwKgCKeYr3yRp\nUml83GmwdVmw/cs9vf2Y3eBvl1ns0ZIEgd7XFh+Rw+E4XzPDtyk/TD4Dw+4H\nm16x5vWOBLPUOJRg0UmOBgM+sS/TWxSiXXGJwGqGfL8HypRyP/Vw44pshQWb\n5X+J8SAEQNXTxvour+Jbh04VUSC5X0MPAGsTn9aMSf+2hBvFg9nKD2bQpAuI\n3Fb9vIgYEA0bKkmW3kX3cNl4dSDwoiwA5qAldIJN431QBvliAghArH46iSM8\nfq76PMyUdQ36wdvAFS/DJzQGnBta4lRZTZnySktnVi7I4GIhyWZQIWGNMYBo\negAIm5bAZHH0h5yecRni6DmRfW3F+NFxul1vjjZnnQnBdoSACCC6OdcE0oj8\nkRur\r\n=jbYU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9f9aac825.0","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/shape":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/density":"8.0.0-canary.9f9aac825.0","@material/checkbox":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/elevation":"8.0.0-canary.9f9aac825.0","@material/typography":"8.0.0-canary.9f9aac825.0","@material/touch-target":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.9f9aac825.0_1596833535591_0.8096965752886756","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/chips","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d1b306a8e200bb210caa1f70e51f42b9b3695f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fc65fd00b.0.tgz","fileCount":83,"integrity":"sha512-rLCEprpTho2oAp9YkS/1RI9V+vkW5UM/Q5P3367aSHYa6ajzMveVX3To3fHhPiPHM0usGRLlfJEYXa9++qg3hg==","signatures":[{"sig":"MEYCIQD8ZBzf7C1Tl/BqPlojfDI75qE2cAz5WQflQx9zTYHx0wIhANq4JtrLFGBtrWeFtPzDjusuJ8NPJShNaPBzBNDdsEPU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWYRCRA9TVsSAnZWagAAJTgP/juKZrddIaJPm04yBXbb\n2zE6MoYvcLZHi8dxO3tPtaaRg2QFw8FPwRLTS3PhgSg4ZGdO8D4OUTO0wurC\nkp302rrlHyuL9dvIlIvG511M4zFun5dZ0I30lPIkN5csikwYNYutP9mFrULd\n8cw0CsCIKwRt++LJIcATvqv/HfFCdc5Vc82/LoAwLNrVx4jN7I4TGmbu4qNK\nje0DWIT67EpYuQItbcr1ob7uIWj8/6EjyQPfGQV7xF8ksSM4Tlmo5zS5GmDc\nnpz2GBBAu9z/a6kuRFdcYcizFbDWMMKDSouhxkmUGlvLHQpjSJ0k7M6iLkkj\nZvQQxyNnBBo4LVEgrMQWFdqD682ygRjgKTYwgsb7uaozrzwfv1JRQ3nGr6el\nUWyKDm62hY3Yy9HSnewmSUVuwZbdIrEzcnwiDDl39lXgNLhlwdmp7GA/5nol\nVG5SgdQVWMukyZilmd8Qjio5L6ZYDrR6Fe/oa31IEqxx5Jc9kYyflLPi25FR\n8pDH7/frsDENKsLOZE3dupLN01ry7IypqboBQpoX51y60ombYakAz8JzEs/i\nH7iQIV/aIkl/7FW14MuMKEmTmQz8ZjVCqFrMwzH/TjbQt7c4eAWOPyGKsXzN\nFod2GvWuizTrHJP1wewsu0DpFQ0r3U5ZYowW8vSV0Lci4nZT2slRS5XSn8Oq\nOW+m\r\n=yKTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc65fd00b.0","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/shape":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/density":"8.0.0-canary.fc65fd00b.0","@material/checkbox":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/typography":"8.0.0-canary.fc65fd00b.0","@material/touch-target":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fc65fd00b.0_1597072913337_0.9724571175308476","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/chips","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10720837405c5593cfc7cbb37c469d407a536a3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.02e372c5f.0.tgz","fileCount":83,"integrity":"sha512-gZpriWxzGv9+bDND3L7a5yoWpbc5JxgJiWXIorMghq3NPb41rinhL4z/7TnBmt5sOIagtRq+sG7hvKX8ZWEfHg==","signatures":[{"sig":"MEYCIQCYr9uz42ccZuX6Qn3JvERKAlyDNnFoeLhHvblw5/BfEAIhAO6ncTbnJtd/qLYy6ZqzOwjY3pU52CbFvV+yQPYZ/8Lq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWx1CRA9TVsSAnZWagAA830P+wd6kVbHec9qMcxWfDed\n2C1VrYMfts0ppnyaM+JmdiIa1HNbplG/EnN5eniN3tw4dZeIsyJMpCYn8tom\nGp4Db8zO8sFyf/iORyYEmL8es02qqAwQVg8d/f/pHpmoDEksjka7HaP+pu0F\nx+HlQ7z7Tcwkx55jqzQuhnCv1rKUjMqVYtlk8ayhcq647Jos3Ep36xcbF6Pp\n6MTJULV4rJi1pIGtLVTWdiFEk8DuPXnDSO38LHVdZvTFTvjG8nFCUrJRb0NF\nprI9uT+C/hyefVTt4woWOYN9hQmsybw9KvgPFW6ttmJa1l2YUV5+Ig8QwgKU\n8aZFmH8hQEtNlfdU0Yf8GgAwR4dXWu6NFLbnmnORsYYK7fmoS0UyyVIO1vlW\nluZddPojsc0VPOsSaNq3rxSguO2PZkq3vOLNK7v2ggfb4wNEkr1+ZHYWJOSu\neWuub8b0HUe6z/A3Op5jovBKjqbjJwy/jnXuzV0ZuCqJeLWkASDU27gZDF8F\nrQYjwXasvaqmPSKuG8BfJ+CazrJcR4n65lim09yCUB9Al76uHx2D/6oLwAeO\n3HijsgaAQ1vMZPWpr78rXelrkPY3hzlRr6RVZCK6OKx1rPb8xRVInkskkf7Y\nCnWbsWR5CGeGvGyQRINQCiNNxmpUdqRwNWbPLAnAyk5UkpHPBbeqKjX7oUuK\nzLLm\r\n=7jMU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.02e372c5f.0","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/shape":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/density":"8.0.0-canary.02e372c5f.0","@material/checkbox":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/typography":"8.0.0-canary.02e372c5f.0","@material/touch-target":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.02e372c5f.0_1597074548843_0.10436229984552092","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/chips","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7250777dec3c42ff053f597e424091226b7f517a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.66669e3b6.0.tgz","fileCount":83,"integrity":"sha512-lxI1nmJtgc8OOCpQHE2B+FoFvDupGbpNsrVR82Gg81sN1tDblgzZ0KIN2wzugaRTGoG2I/BxsGUx95kMV1+2Ng==","signatures":[{"sig":"MEQCIAg4n/iazD6FPIJ6WxHh9lWkbEBRFvs0SHcKmuakITsOAiAwIZd/U4M6MddgnWD/7EaWSuCbWwvgrMzRQlTxmGjD8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1+CRA9TVsSAnZWagAAOfQP/A6wlJP/VL0Xresa4L+u\nmo5bw7vwiAGVDPBpCDCIkZbLUvaA/bZ7/ic3KouA4UQf9GMWm6FyjUNYShjQ\nB4gULen+aW4FGaT0QS9zovZ4Zku8bgT6TtDvpkmZT5jhD5+UrFPM8CeUr2uN\n2RfTVAWELSKyJX+eG0AtBn0LK7WjkKhROW+zeg+jCPQCFGyqWTwT1HtiszIV\nJd7oNLemsTVDxkD8k7OeidBQHU3bshwg9wdO4U9sfGt85yMz/NzUyFKg9DS/\no0SzjMTUWzZdhzD/GXEBA7lcDBb+stluQP8y/oq5/7o0eGFr1wZ918FB1TLj\nuzcohGCE3lDXh7U80Spkzb9AlXEWy6axY4cjquDirvj7QKSauWIJFc54Zbak\nLYf6HBcmhFrbiga/brgTxULj/1lBrQcI890YRLLdyW4q4swMVxTXMBpW6t/y\n/b1HZoFAOUXHd/rfciixP6DKcmOzFsb8mjgmCH+R6an+XKV0nitKLx6xKgjR\njywIrc1p5JHfNytZDOc0nJVjVp+k9YuqSmsIJ+3SFStPZMuHaHeqhlYK9v4f\n5Zto1kyEJ6AU1GNN1Qe/lOkTEoYEzluwpfNx6HX50Xgg4hmy3Hs+/KCLamJp\nSgUQQIg389dX5ruSCJW76M/fqQ8hHlC3tI9zrsu1Z200j5Mg2hIITO+IctYo\n3AFJ\r\n=Enbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66669e3b6.0","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/shape":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/density":"8.0.0-canary.66669e3b6.0","@material/checkbox":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/typography":"8.0.0-canary.66669e3b6.0","@material/touch-target":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.66669e3b6.0_1597074813674_0.2416143672177351","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/chips","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5e0cbea0d87840755c9551986e56f243a5c42d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.6d1ea9761.0.tgz","fileCount":83,"integrity":"sha512-TeKxacu8I4dlwSOHaAUVLID5oltilgQpKxNKdvm/tBu74pw6iAHcMNeDZrq1/3Qbm5NdmpWNHtx2e8G15oR1rQ==","signatures":[{"sig":"MEYCIQCq1guNuQqWsh4CM4tCbGeqoD+ZYqbbKXFPHkwVd3bMIwIhANVX0W0ddFduJRMkNEIqRccCcsd6OqYRgU9h76K5+I/U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqu9CRA9TVsSAnZWagAAt50P/0MvKbntM96BPm0iWo2/\nX02AKB7GXIIM5XpGj2+le3hzjx0I+Jw17nVgO6r9IBVsaD3ebf2oNROcDTpo\nX70SBDyMzC0bJWUxZrmNhk15SgUDF3PMHM6Nf18OA3qR8lqXBTzDJrjUC0cG\ndt1ialtNNhiVFf1JeFfB4Tu0sq8ShJv9a7aTK9hKqS009h5Hyma2FoJB2x2Y\n3bbAzQ6s/NzxRNafV0hHh06VT6m646CrzeIfQZeSGwEY6ulasXEaK4yYI9j2\nmeJQzeQWV6X2/9Gaz/Oc1CHk9dwJ26CyskK1BRdSuUribuj+UGRINvYpEWbp\nJG2E1kpV9RgkbWs0iwEuliwroN82lSpSmtP7aM0VdacYDd6smu8ACGm62Ut0\n0uAbWjm2Kgfw0py5ZtXekuMnoEZb0NaXpPKs5i+DkrIQ3S2x3VFV/cJ9eAKe\ntKmUbNpO+A2x8DhJPH56NxzQ6Lj1rKHuF276a6P2XVLbRfV4uxnBPWrzbjnL\nkbBsvz1dvvoQne/ygQYEHo7UU9vpmisoJ+2dYbx9XJA2bJc3CmgHgcTDJ35f\nBVO80DiN39ySO0udEcv57EK703k6jVV9zSaNwg4lBJxzrqybedz2ZXlOuQoi\nP/1LJ7zSQ8lRyORwDG1GodyzjhtLC6K0JhLQC46xTjcakGaJMr/SdJ1ej63c\ngv08\r\n=0Hpe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d1ea9761.0","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/shape":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/density":"8.0.0-canary.6d1ea9761.0","@material/checkbox":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/typography":"8.0.0-canary.6d1ea9761.0","@material/touch-target":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.6d1ea9761.0_1597156284730_0.8610752502163741","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/chips","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63fc8daa73b33cdfc4aac536e40a53bfc9fd881a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.79414bf9f.0.tgz","fileCount":83,"integrity":"sha512-/koJIfqldKqdHXnYoa2ll1Xe7+VI5qLqJ7YyA++Mk/Qlvf6ZjQjjUyjBOhREHbgd7DcJiFTkq829tNfhuDNLRQ==","signatures":[{"sig":"MEUCIQCeUjMq3OHu1ANpcrtmKQWecZBywKrugPiD9FEdcaqg3wIgVHk+WC6wpJIcbF5BFVO01Zlz3IkSHplqddCDuH9Kc2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMutGCRA9TVsSAnZWagAAXmIP/3uQ+vDborm7WvaIHsta\nsYw2MgC1E+2iDY8yEVan96VpM03Ac8+13FIT7MsSqtM8zbERab8BY+lkeY7e\nyemAVG+cYlNYC7oQ8eBvZjeSUnkSoY9Vdf43ggkTDnekbkaWOMrCILc/qeRK\n/zIDB517PU9Uti3uC8RtU8jWzppVrjMzGcWg/za/mk1XL3OsxZeWEy+AFnor\nKDS5mcsIKRefABB9EQu55QMyXlDZwROh4pUtYWOmqZN+wt2n6oT13w1Tcuwo\nZM1gw93nvbz1pjS0I8vMDHW1yQhNlKZrEVfGpnaI2JiYrtRPxkcJkExUOH7z\n8cl7UkHCMB6PZc5vWMr5C3cSBX/gP8K/yvTrBcL1UECx7cowP3z699IsLjGX\nuWtEhuaJBblYzG7fkRU/wunobv0Jy2X3LOt+CSGX42p27OQ0E8ntIejo19oq\n79C6f4wKLv7Pz2Ft+S53XFUCSpUBEYGxLAEJe0kk10eMhvFRkM0N9AyxDzrx\nMnoVKnqWqaWGrc3hHNPORGB2Eab0KM0EA4QKDFAm2Pngj0/cZJK9zYCUR6X5\nuLTrnReRGzpg+df14AzfHTQNU8U+agv0O/7THDKxkBZ5rW0tZ1oOLTZTorhC\nPlVtQrpokoENFSHKyQYl40rz3flB1K9tEArFRHgH5KgX6xtv/w/W4hpEiKF6\nKF8V\r\n=s3ey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.79414bf9f.0","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/shape":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/density":"8.0.0-canary.79414bf9f.0","@material/checkbox":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/typography":"8.0.0-canary.79414bf9f.0","@material/touch-target":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.79414bf9f.0_1597172549943_0.5749903218595056","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/chips","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.85a5272df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d36d868f08cff8d5d435b23ac65daa23c2efbdf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.85a5272df.0.tgz","fileCount":83,"integrity":"sha512-6MzLakktp3KtllkyjG40tpPIrKhAnRbRp3MblSXp/EJXttShkDmIj7UmjbxGwMIUWyRMFSe9uRO30rLSNM2EhQ==","signatures":[{"sig":"MEUCIFQdVZ2Lx1HGmrivrVHdxpMhonoQWNc/+1ZlCo3g5heqAiEA1feWmBe9jbcVDbf6ygCLkrl4PKezGH55PvwZikwx9u8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvriCRA9TVsSAnZWagAAWUsQAJO1X3l1A9jA/bJxP36m\nQvObcSSKdlXgljrBbXtdvNYWhh/ddbfK4aJi6L/i0afMOFqCZ2P1xO09Q+Ok\n/r93bPcdfNiE7do5Ff0PNNd23KZgJIqCb6omF1FNLXN+wbI2cxGDfXJBIWrb\nQLU2+jCI4oOaoawToJjQFPy1JBqlHO1E7GRsiAHeH1fas73/2tsbcpnRd1gi\nLR+2TIEHNJ7/LwnPqNIigfKuRO39+Wyrjc+P4WqxffZWXWSy6X0cSo8Jw8H3\niTBI/TZrrlx56jASjzavqYS89qaHzeLukXz4VzMWc/QJRTVXKc0PwcwGrV7L\ngaYd4pcizu6J9LoVOdOos3Q5QNsUFQuZiYFw7mxwE7DNzrYQYGt7fUlpFpsP\nIqkvFtunIybTt9vj1j4CV7v5p+NvYggbt0aQdPz6zY1Pb3iANi6rdWSXg7NV\nKmWXiDArat6QsBabrLtu5mpo+KLguyzsOvPRZGlRrxvONjBoIt9kEG5ymeWB\nmExE/82g3ZgL0ty14EKJ34wUV61gbOp2wVS1Bc60/ROu+5Nufkq0/j3R0dXV\n0bt0zAPkO7DZypt8lF6jBtjQLSXqcv11u4Mx8ZBGiOeVeuupYnlq1bGaQnIN\niEAS3hFgWHZG9OytCKf4FuDuZE6+S2xn7it+FwoC0VCc8o4a9kW0oflXuQqy\nggbT\r\n=c8ty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a5272df.0","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/shape":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/density":"8.0.0-canary.85a5272df.0","@material/checkbox":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/typography":"8.0.0-canary.85a5272df.0","@material/touch-target":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.85a5272df.0_1597176546002_0.8407755305800857","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/chips","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6436de6835cdc563901127214b4d520bf384c906","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fda053eb8.0.tgz","fileCount":83,"integrity":"sha512-wql72UG2xH7uicSrisW+v7pKizrBcO60ANKnEP5aMp3lqlViO/m7PrdVY+7ZmfQPZb6PEXDcDq78uKS/ALnDvg==","signatures":[{"sig":"MEQCIAU0FcKfKvK1/l0zymLBiEFwd5uqaHe+/QW+9WB5eJVyAiBj7icGTzOUCOkW4070YkjIkAr6LAgiZuQsXiGfXjqyYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEtxCRA9TVsSAnZWagAAfyoQAKF+iFVGEHI9DUeKcHvf\nOIpJOvDT/0DUjEr6d7YN2aTFMTDqkdQIKm8+GxoFSHQqzUQZPHtvZVIxW11n\nTYcG9EWxgOzQvPF1B0PB9nzn7Rj9srR4Kb92pKDM1npXErlGIka25YT3tLyx\nTdkk5R8PkG00vRwjY+dRfvQngxEslMR3zhzVSNThGoDDT/mR3dAzCjk2CarO\nr/VIqkxU+iefuep4lUe3YcecggQhekicU1rFJIs4k9d7fDJp61A8W+Cw47bl\nxnREUph3XIkOLqXeiaD5nFu/9VfYs2Ref8fF0oTMIPfhV+7K4rFoARuTqvNQ\nKjRHBEJcnlJ/+C9bJDvJYb9uPfHrzxQh41uFK9K2eqgmwlgqFnxa2SU1QQrG\nWmkLIWDeM/i+jUIoRStxDvzYngWYFNE3/fGeP+zCDB5EXMyUxiQHkhgzc8R9\nP4WcjD7/dNj29HtRsyVTyNWRunPeV7yhIsb6oz1s99WVniO2JR9fzJpXMxvF\nEBMNFqNyMKVwXIPbNQc/5Mf5PqAq5QLV45vO8faQOfnpmCCt7+8y7tJv/lAB\n8IdErn8n0Vn1+OllMUomvWDiGq0XFvog/tP1fQzzdwmBofaD8zlgMzsuA404\n9tsiHM6TI9yPxLMPqgQ3vU7/bhH0QYmb26xNiqbTd8RtXDbFvnHtwqCEFk97\nuzQt\r\n=kT6Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fda053eb8.0","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/shape":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/density":"8.0.0-canary.fda053eb8.0","@material/checkbox":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/typography":"8.0.0-canary.fda053eb8.0","@material/touch-target":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fda053eb8.0_1597262704888_0.11598777079019951","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/chips","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.760873445.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c581885a0cb6628e39f5865cb9a0be8c893c94c2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.760873445.0.tgz","fileCount":83,"integrity":"sha512-cS0cBtVqIUrHEOQYNAk2KRSrkaH+HBM04ltTOfIlYhxx8zxmGFrfuyvTFwcFOoWQ6rsopWdaTv4Nbz7zV4O0qQ==","signatures":[{"sig":"MEYCIQDpURZuK2Bkd+Hu4f7nkcS+RCZq066rFknDY2JSu7GQkQIhAMJ2OWMdKzUdVyDEDMr3VYy4ySHS2WV7EngOPJd0LRd0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKnCRA9TVsSAnZWagAACeYP/iLXm/9de/uBFyFI36xb\nBxR1y6jmgMYwRPrlWueaOh+pNCmkk6q8Eyroy7mUCNOtuAaBTlqr6lldbeSZ\nTv3SCUQRDTOodiiX38FMGJ57/BsWF8kFMX2zH9CTuWkj6soycD711xx1+oCp\nR7lEgz28JowVcG1zTILcVCcj8X3Dft9xxXCPGcwxMMSxAJnGOTODVsArGtT+\nlCIwcR8CRawW6kwjuNwGO3Y6qs+7ZSeO26dSXNYOUjJp5SWQUd9gCEH8Gw9Z\n+i97w7AGXN6gWeIncvei3Fa7w4jJOa2CMv4jLNHPHvCOL5aJw8LzxDHieh4m\nifB8DaYT1eAIbkvY22veA371OPx/7I7pfvTZnwVfKYV15/ohdKLtlXlDpQ8Y\nGy694I+c/D6aeGwnDSfx/PIk/bbiB6nVFiPf0RWSL61KC3BZ76dBIYTk4p1O\nXA4yGKAcnjMghD9h4TyMRj62AUXPNEViaMW8jOf4GR1XF4YFivbrhn8KEUNL\nLrOQ6KjbUL7DCR2L/bhoLV6goh270Xl9RDx8dZunz0ICvlq2BJl5iqdgciQ4\nePr2qxTmDNw5lk/O23157aTvwbnX+tFDUsIVgYZ9TakHcBOLMJhQsbIGlzDj\n5Foty/GXqgoxYv+BrCgpl+YYKBqUXv9AphDtxkZDxpT4lGpwlHJuKgUZhTHT\nh/1L\r\n=kniC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.760873445.0","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/shape":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/density":"8.0.0-canary.760873445.0","@material/checkbox":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/typography":"8.0.0-canary.760873445.0","@material/touch-target":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.760873445.0_1597268647296_0.6111522408341601","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/chips","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"670d67dd2d249fd7de25e3c86512f441e13663e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2f4711a30.0.tgz","fileCount":83,"integrity":"sha512-L9njXA9W4MYtYQDpkDQcBalG6XkC5Q++BgYixy/6elaScFPBNm5ZPpfM8PjTs8vHTMsaNRg/DRtbII4Ww0sBmA==","signatures":[{"sig":"MEUCID8htRpBYZ+NM4FubzJbPz5BOAWRMXMPefI0g39XXMiIAiEAsHMxgAq26xwhMvHukgwBtnA1S8XGZ8aZtR1V5FsG9e0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGUBCRA9TVsSAnZWagAAqn8P/2pzWYfx8ljTJ+/BuINC\nzfffpbDMhjkFuRgOwBPzyvYO8B6jwUfXvDSd+Bz7hURicX+XUp6SoHlhcaVp\nMMLp2e9Kr1IhTug4+abjXZyLeGRbVdJLhMPe8mSKdpYund6lH+WgOy18jW8O\nYX3ysvfdRvY0Fgw5OMANul3nd3DQMI+yDop3GK8zVFPxht3E127IS87ACLNj\n4MCBK5/VMz2jS4p924KdamJDAyoyZj3vyB37hQCXyUwvmdriHr1zTvpIUw19\nzLAbaTfXBpAsBi/6Vz92Xld1YCnfc9hpjOH7uBsDB83glBpnbno6O9kMvUVG\nCLI1bRZuY7JoPUeyAWZIb4d58vYGCUqdx7Hd0+1OO7/4+eltq8eAru67W+cX\nrxtFpqH4twiT1Q9DpxjkK0SkS6x5dYLOGqlEZdo73SyYGPWC5a4uQTQ3AzPV\nRdbo+VvuoI2/jea7xI9yuNWywxPaRK4RKsM+deGz2K7X1zeLQzF87QUHskg6\n/F+6VSRRf9VgunQkH+stcMeWVJO+m9TpKb+Pjem6gZE5xZPmvBqicnBQcbzx\ni2rP/yWLdgH4wZFfKsBxomyBhu0BV23oqTXqvTegyhA2LQLspUy2ZdvfxGin\n5W5L5RHtNBMKhe+aNXtLUQHpadJTDkpu1DZ3uX2NoFb3gdXkGDZvv0xBefh8\nsjYG\r\n=5j25\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2f4711a30.0","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/shape":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/density":"8.0.0-canary.2f4711a30.0","@material/checkbox":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/typography":"8.0.0-canary.2f4711a30.0","@material/touch-target":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2f4711a30.0_1597269248488_0.6616259752503177","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/chips","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e829ed09eb1aed9bbec1e60967f44795e6549bb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2d72f3659.0.tgz","fileCount":83,"integrity":"sha512-QoUNkG/K3AvecrXDVdu1Nz8P7ZuChwzGEATdMMM3Z5Rvs/xYCIrcThIl7CL4sVOp8VPlw9VTKXk/SmH7jPYGpg==","signatures":[{"sig":"MEUCIQCSUnany7YU79BnNIJRpKSoqDtmHNFhmrB1Hga0w0X58wIgKMxbpGEqkgK+Vkrm+c9A8MRSzwL/lJpZFnWUfLnbSgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGatCRA9TVsSAnZWagAA8sEP/35Y8eIGuUZvueoaDxYt\nC+zvlEOmKEYbFeqAFE4SJscT5rozmyMRdQ9x7yd8+MOHRpxEfbxnPgDiIGRh\nIZ76uHkVAHNn1cMXJbmpwO/PFobLGf0BPz0aG9wSg2WJIpGrFWhL1ischjOq\nZiAbNdMANNA88KBr3M4q74sJjTGrAIqeU/v7g3bKVeNGkFr6VfP6Pq5kPoW6\n7ekKoRuvrtTOFsNXMwbaadGzTJdrGSYVwzJ/8lITXggl5gmHw6AS7RU3i6zV\nVoG78Bn/Yg1p9bbMhXg5+wp2oh276ORh2jAu9msgRHGNTAqwAP16/81MNX3/\nm87hcYRHkFFyW2+TEZd5HjM4RmLU/i6H3SH4Tr/0Lfw4odTOpBUNw2Mw+QfI\nQ25RiHMJjW3M5/CeITpfis5m7EN1+mGNRP5rxKuii670vvyUqmPb8ShQWu2i\nYoU2t2z+upeORKu5bw9OXIucaIVoAw5Vqm34A3pTCjEAk50uxLZJVpoITrbo\n4sVyeNUe/qGxDLLfw9DyRzDHr5lK5A6rsujKp8NeJJ/QQAlXBm8n/KjeLXMN\n8oGZ/gIuOqq3Bkw5ksGoGdW9wHlwA1TMkWepJXVe+sZd2eu69WSwpP25ODt0\nqKbsbWADqTxAXoM4MAIUb5dCUpR53uXbWEkJ2yw4dXYl7DSdqEfggW1IBYUl\nwr90\r\n=cspU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2d72f3659.0","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/shape":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/density":"8.0.0-canary.2d72f3659.0","@material/checkbox":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/typography":"8.0.0-canary.2d72f3659.0","@material/touch-target":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2d72f3659.0_1597269677050_0.736957210088202","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/chips","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9319731b110e26e9dccd98d5778df470846c5130","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.1fee70a5e.0.tgz","fileCount":83,"integrity":"sha512-87IgPYG8+u1AiMpNZjP2gKa+pxFBxzmKDHvoszXUUc7fpO6RVGDLx0sn3WAHIz111IPB17ZySusU86QjlngqXg==","signatures":[{"sig":"MEYCIQCZRmpr3zb1CQIdjXVwG8FgAOf1tQ0PHNC4fjofIqyCfAIhALGU3MA4ZOsA1052ylcnVTk3+dG64EXuN1JSM06S4T9a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtfCRA9TVsSAnZWagAAKb4P/1Gx4qleeYSc/5+6uLve\nJVfvkRB15DfBhiSRUjFelOu5xph3VqN7g1IvlZ9Kik0hnyVGpwaXfweVASYk\nY7M2X2HnsPNPScCkbl1pNE4Stk7BAL7yrzY25YQjxvBcrOcSBoDFNwTl41gL\n1Leq135FPefB0UtaGEYxd0/OHrixHjsOUYpVvR/bFZ0mXtVt0AtyfjRvjgiG\nzmNls2lAS5j3UJcEfhdd1fCDss7R4U5qKMAbNeO+HyNpFj7qqXOaGsHBlZJc\nAv8oGJ+pirr8XFLvjX9rNUPLsVeHUQa3EXz/TsztbTFEPEA7+DbEpaM2/zbJ\nWr+Mn3QYybYc122Z1xUncinYaodLl+UOspoKvIIoPCJWdWhf64ri+4DRqmM/\nELhX29rVlJPdRUguzRS3JELAMeWvvvuXLK1G0XrSRFHoeT8OgXSWbCWps7lr\nNfL+zpvxI1D9B1hOj9X4lVVOlTT5oIsOTrlw86DB5MYEKkIuL2XkOv4RHtIt\nIMAPoQDZDZ7TvOSjzubOu6yEI+jhMlrUNL3Kcg0IGQtZuKQvcmd1TTZyi8XU\n209oXY1v6QGG2FSEEN0X3dHm+JutoHNNveoi06r2026QX/3JUgIoTsxN/1Lt\nzNHduTxJMQD0qvIDqXCjPoMhPp1hYYAgDdE8onqe5Jw4N4sQwMKKKnUf5IVx\nWGU1\r\n=ki+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1fee70a5e.0","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/shape":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/density":"8.0.0-canary.1fee70a5e.0","@material/checkbox":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/typography":"8.0.0-canary.1fee70a5e.0","@material/touch-target":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.1fee70a5e.0_1597274974965_0.8018069802842831","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/chips","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"203f2ef667fd25e06ac35b803cff6af8903ed2ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.023f3fa34.0.tgz","fileCount":83,"integrity":"sha512-ZRJSp4dkYFAMWr3xfxtN/asGyUtREnzsX4WdXIEcNtmwSjzFdgHMU4FUaPHPly1dPH2UTAcgzBAfbC9RoN1wIg==","signatures":[{"sig":"MEQCIG0RmEWGn/DF6Ppzf6Q2cudNS32OPV2w1THWx+c5/mDmAiAGwPDsFxZxspM9gBHFHbgjlZWDP+rn6q3/fCMjeddEvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOtCRA9TVsSAnZWagAAh6UP/jqoB7XSAk4N/QbiXzei\nQVxla//Pt6VbVA7WOKzfqd0/vWKOlibSznT9aLPKP0gub+pk0inAfzDs+sgt\nBelJOU/n6Oa7EQiXqDakbEStLwZTyAT7BABTiIej6VMRO6qjKdZAXewZUMPn\n7GFCFVRLGa4Grg9AqLmAfFswVDDzATEPXHzhWf9MjwerUaZjZGaTZ8S2BVlR\nYKOgop8DXwYvFQDzB1mxPoQ4rSNPhMD09TJ/FxplMl5PR9VTWp7ijWT7axHQ\nBjvOAAHJAe6J75+6c5Q0+r5qaAoBvHHN1AHhCNDn90+vvfWo9lUnt39qgxgt\nuHNBMDgAef5kJKieEyl3Dsz1gjSyTQNX3OQeFU0mXWOZNV0kZeB+tQrdHRGO\nvr1nXg+BzR0cYvdlcCxkxMkp9GB+ZHqa6DfUpL8JwYO7WUDiGF8nqiitZXWR\nDwzsIHDBILySgWL6gZVd2fY9TmbyJ8qvDY/jCwkptY1/mEQLFwKjDUe+rqN2\nZzSeCoCRg/wPypV4K7Lk6u34nycoPdJlGDON5Kdxw2uJkQskvMcmb2nvQMFN\nGd7az7MpDac/wYZJxsU1ht9FJpcOj6i7LL8JKaTq0Laox/kB2Gp/eGaGQjoA\nysxkAAfIpfWtyR6mnRQbbM7RcntaaE+C30mBjR4VuwvCeCAFuGcFAmlerBZ5\nK9D0\r\n=rOzb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.023f3fa34.0","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/shape":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/density":"8.0.0-canary.023f3fa34.0","@material/checkbox":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/typography":"8.0.0-canary.023f3fa34.0","@material/touch-target":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.023f3fa34.0_1597281197108_0.002393071011529191","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/chips","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2e0b6553888eb9ec218202dccb42c1b35985610","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":83,"integrity":"sha512-GK29Y+53aDOIDvFnzOifpyMw8l7t4LaUzSRTDmYnpAPk124QfCKS1NUwgVZWFgQZxB71kDJp9GEAMdRuNDf0xQ==","signatures":[{"sig":"MEYCIQCkVrbxJ1beYxA96LFQnPLziS5X5G8mvmyiG1oo7rdy8AIhALxXGQ8ZWEB7O4Y3wTrWSLKD1fsRyE8pBu91qB181q5o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":954911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJeACRA9TVsSAnZWagAAcQcP/10MRnt2g/SQ6JbrPG11\nPUZAIA/DNVhEr4vdqUaw6eEVo1cy/0K1wL0EjPEFl+txuCTeljdcH2HS/zBW\nq4kVIqLoII3j0Lr04xQF1MAkSuwRJzO+R5PxPD9rGWtW9Wgl/AdRW0aectsi\nvb/vZvNpHYcE6Xo2eiVrPXgjufyuAK8Tp8BWNZw+RwioXLANXLDiNP+I0Iy6\n32/0pqlKpQHmiyE7LHegJPVO3McToRbPUcQaa9zSMLng2ztkaauFWjFpQubc\nBiF3H7SE3hqOVhbSV396+RRfOX9FIFqhVgeEVWROGqaMumq3f4EkyzVxuFhu\nOgB3DUSXdYbl19ByB23D7gBboBUlMwLb+Pp8DKUWPszF8E7Z6JyRNP52Yxiw\nYS5bBzMngiZLtP41FUZpNCFct4nnj5Smwpf0blnczj2ADT4P8xbcwPPCIYTm\niWPanX23xKpSwDX4brpQmr0pgmV+kOvfDvT7MBvJm6P1oNhH7J4uJiCTdy/b\n/hxPfe/19LY5FZlPRBnYxo+a13O6HfiEfimkvi0B6Cew5a++O1IuuwnIxMTP\ncldbhBs5OTVnvk4EMayu1KrOTXRIUD1zxlmr8+OhJol99VExLbDZIyA0tFIh\nWOnLDpDdeGbufB0tKTsO1RvsVZRyd89BNhPwH4agWrUvT/Yc6bJOC7gI3C6t\narWj\r\n=mc1K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/shape":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/density":"8.0.0-canary.80f3a9e5d.0","@material/checkbox":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/typography":"8.0.0-canary.80f3a9e5d.0","@material/touch-target":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.80f3a9e5d.0_1597282176337_0.8081520923907579","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/chips","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d910978cb0c99b18f39ee9163b9510657eb70e16","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":83,"integrity":"sha512-pvT2/4NnPVXojj6KnM/ryxyq+GxlxgvvF/bi0B1UnXOrOdi+2KNqugcG1yAhz4AS/ohzdprenpDNG4ki7ui09Q==","signatures":[{"sig":"MEYCIQCbnHyapJM9RwR6x4g65ZhbPyxM/VJgFaT38l+fS+10KwIhAPPKqjIAoq/MmqB2avIOprYeoxcTpN5Bwz6QwII8hVIt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP7XCRA9TVsSAnZWagAAbvAP/0rzPMGgQBoCdZ4jeSYP\noLXPvqu6I8QnQcBJOYY3tRVI3bXNhzw84PjND/StK3h0ZhwVJe35lHSL/rNh\n5Tm+VA+5ejOIf19oK1vuS+4FmMwPh4Vb2Vekpbmw7N8EYkrzXk4LBHlmWO1W\nkME9cMHTBfJ0olgo+wvHz3Hu1fTYR31z/WTFILoAMvFtOAAPU/lNWM6/FT/E\nsIvVebvBvyj+wT+PhO58QtFa9Mv+Bgw0P3Do+UU7AnrvcJBc9Brg+3A7tREQ\nL3zDff+5AaSX6VJApucpXvTcBBq07G48QyN6Zn+TfbJ2NasHpWBUfTAHQlF/\nwnhG6OVx9CTQYe8uWa42+0lInvQfBTN8Ozg4wur4h4qw2OU5IEWP3U81dC0T\nXbwY6pe3BnVgxzR1TwijZfcHfxDD47+87uf9bekc9eFa6BX366D/Xe+fOqOV\niSCVbOLZHDZvqUgz9/T+TXhTFYAnt/gIRNdSTa/MrVogSVVkmWLSfMByuZig\nwI+dZx/T+4JJHFrJQooJmkq3+eoJxWbr+CUsEDL7h7kt7ZpZ8uu8Qw7h40Rv\naWFsE/ldqnWxs07CNiSZwml8bBhI+t8blp9PSm13kWHsOWu2aMsWe+yuXZQ+\nuEW2CnCmfGJn5YZ9NV1d60iluiBXx2JsX4AoTnzF4pvjS/5dK+TjQEm2+Dig\n57RJ\r\n=Vwc4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1dcfe97c.0","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/shape":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/density":"8.0.0-canary.a1dcfe97c.0","@material/checkbox":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/typography":"8.0.0-canary.a1dcfe97c.0","@material/touch-target":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a1dcfe97c.0_1597308630483_0.8991799485045777","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/chips","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.af332d5be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ed7ca09a86c2c79228b226052d6eb8cc9e92ced","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.af332d5be.0.tgz","fileCount":83,"integrity":"sha512-qVm7gKL8GWGAq3mPkgana3bC1Q8+Se5gk4jHaZruAEINMbe+bLfjOu2vVtp/NhC2RCJ870rrwHu8t4FruMkOjQ==","signatures":[{"sig":"MEUCIQDBPhRtyzk6W9Cv9SmYHz3g6UwxcdiP7IvlMp0QdzADCQIgfqffR0N0ithMrgPJ101+UGMqujkEVSK1tfCFi4wULW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":919070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa4gCRA9TVsSAnZWagAAIjwP/1xSfyyzFIUD3+V73Tvb\nkJH9u223QJNgUtnnAJ1CpeaKXTOxY3HBoy1SDdl3qKfLKKkY7CxhGoOIoCbQ\nyZEY6S16Ssv7anWCI8cAUzxsdlU57Bs+ur+cKpDnuLfsRXy5XppaeYg9p7E1\nCx/SPJm6/mEPQjAUMHGLV6WydvnXbjyyt8goO/b67fObQCWOaNgDrYzBYYoK\nyvsss7azLPOPF4+4bnp8R22aKX6DBi3YqJC/84IQxteECz9qy0Qg2D4inE+Q\nsFMivbC3xYZjAvEo9aZH9GmU0wihtcTLoEvJ7JRR8q5chAGM9hMT2KptlFFh\nirXH9UXwBPb31CyFJtgMhidY711f22gchGcIndrqWXxdCjL7Ym61qQnu7ID/\nx7Ge7nPMp0+lTIZhUcZUkZ/0DcDf9CB6Zt4fViX3T+/I8aqRwL9troXNy7GZ\nd0JNR8rwRGcUbPC8PkqgwcqKWtI/k8QgVq/4PlIIKaa7W2/TaQ89lYOoDV6l\n+Zl0qvABsQgnIqQhB8ojhjqNxdkL7kH9p1Z+KmmcuZNIN5aWM+O/2E8hZduL\nKQyl4GcWxGu6LsFJ4jJ6ALUNEJAuKnIx5At2Rjwy1oXN4Ij0PVaZy+SK3UXD\ndsV3LGJ/Lrr6VIVjXwY/t/q6VAvs+kTgAKhmmDzpIDvYBkaXOEvALBIhodZl\niV45\r\n=8o7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.af332d5be.0","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/shape":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/density":"8.0.0-canary.af332d5be.0","@material/checkbox":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/typography":"8.0.0-canary.af332d5be.0","@material/touch-target":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.af332d5be.0_1597353501327_0.6712363096176897","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/chips","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f955a1b8bbb86d177d84b03a0525bbcd6eb74948","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.7dd4567c4.0.tgz","fileCount":83,"integrity":"sha512-57Ois2RYphRxg0Uje06oG3JeS+OUOqNh0yGsk77Rg5YaHdVYlkfqDy1s/fYK0zQYVhTAdayY/BLsvoJvAvrA5A==","signatures":[{"sig":"MEQCICKm15ii/aswjYZyGdbV90VnZP4f1Pk4YnJX2ZMgwroXAiBaHKC1WfRYCJyAHbwDsce8sYyfXJNB5XeE3K/uHpbS7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":954930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeAwCRA9TVsSAnZWagAAV3UP/RivGME3wn1VSYWZ3vdO\nEC8JqbZky1N31STr5tU2wZ3M2FbsZA3jNav3CeT41rC03G4px1o1DYVuAjIL\nlpeoYR/WVES0UzYciv0y7dedZTi2YzcZbLmv36Yo3cCql7Nlu6ozZwrCYZz5\nyzIMwj0F5agKMatck+0H5fJ97m4Kj1MwqPq6rAG8LSklEQH6VsrRsFGPyCjt\nnbItt9M4sXxJ6A0yjC64SMQjx+hLD90xZHnS9KIUfMEyFcco1O+NcAk/5uB4\nZ0wIpnVPdUKntiB/8ddlkydz4KRINPelmtk5Qw0Dc55vl/SjeOLn7AupDyAm\nb7gO9BlhzvUtyI7Ucynn4Glmuqypqi7CSqKgIV8WKGtc3+RKyyD9S+Su9W73\naT1UTYFuXi8ovwyoOZj+rsASeNGOuy33wuAwh7iIZ6gxid0c5yoU9S4xjviu\nB+9/7Vi3lvQqTFkhGwQtdY93lQcxT0gAVY5R/bgs+q0olHltJRKDTkLRGzS8\nWz0PZ6slSqjArqUT6uert705scuz/EmORopBkmgp/8OQNnLfZ/8nxV3yKeBB\nYQwRugMhlnz7LeEUBVwZOnF1RsmkHge0XJ+qai1TnRUp5EAjDSYTDvxTQMb2\nmvd8ZF1Kd6bstQRI3r4BccBW5xn1naXnaLTczeWwLj6+GblUJovx2k7Rz4oo\n3+3y\r\n=PPXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7dd4567c4.0","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/shape":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/density":"8.0.0-canary.7dd4567c4.0","@material/checkbox":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/typography":"8.0.0-canary.7dd4567c4.0","@material/touch-target":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.7dd4567c4.0_1597366319580_0.6585183763845377","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/chips","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.ff870005a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbb6a46eaaeab7b8173905f95410d41c2a54f319","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.ff870005a.0.tgz","fileCount":83,"integrity":"sha512-OvGOPhmnYULDN+dd/wXY84wI6ZcWp0hmUy2pEeqKNT8v8N/4/jWy/Me2ZvokHVOxk9D3rw1bmqICjAZ2HkbG6Q==","signatures":[{"sig":"MEUCIQDi82wGiDDclluCXWW/fc9j27HXvJsIJw9NhC8AFbkrvgIgD5xUyjle1JGqxXY2AoTug3TqLcv9JDmsWe81Yhstvs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeYQCRA9TVsSAnZWagAAvBkP/jjejpOuLuzmivVfZWSG\n976fuQSksBTFMSZmLbGGFRZuZYB2KjDqO54mhCILLXWox5GCYB6SZNbIIpNh\nIK5V5mUoAci6G6VIgBbuyfgGsuO909nZovyiTUJYzHKuU3PX5zhpzKh8JPnB\nJwKuj89ZGnq6tOnYzGy16pk7VMfysLPm5ySZfi24J20evKpSXQBmNWhVNQfc\nchI4JHuSv0sDgxwiKL9wOVqQB3b98Ta5zxWz3ZwKNKmv7oWObw7s0MuzEEEP\nQAY2xaIVETLtTslVbTMQ11khUcadFslnjf5EIjI506SuCgK1eHAyzyIhlPv2\noaNfmuxxexdJ8++/SHGJIlVuacP9RjaZ6o39L0eocLIPKPyBWsHxY8rJos/B\nZ3yuVAcd+fe+IaaY4LJ9b9EaMCI5q9Yg09LzwQTigOOBSTYRZ2OCVko3CY3b\n30sQEoJO17olkO0RSMmbqD+NJQAiCbMqgTnhsF4/M63NgN6GTrY56CrfBK9K\naoRSYjq8ileSOzpe1VLjGT1Lv829bGCpGkzJ6E1BJHnB9KBKnnAVFNk4lAQb\n4eWrzEOYSU6y7FJpXFfH5gTuOXq5IjtD1CKU4sR38WP5xixTwX4/qiowYG0H\nPNCD15yshTPIqQuvqJv3pA3MMnRKUiO3Uk+ERY6u5jF3UAf1JwEfaTxiFpGO\nQMtF\r\n=95WM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff870005a.0","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/shape":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/density":"8.0.0-canary.ff870005a.0","@material/checkbox":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/typography":"8.0.0-canary.ff870005a.0","@material/touch-target":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.ff870005a.0_1597367824038_0.14341894169138425","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/chips","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.150f427a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd87dd0fd5c4dbb51066689795351619747df67b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.150f427a0.0.tgz","fileCount":83,"integrity":"sha512-F7KuTv6gT3gAhlUfMw0rVrfims9nWUizt1/DOGPw+YTzQ1GVQwsWceougFmONNINd0JsAt2vXaalKilIUXx8ew==","signatures":[{"sig":"MEYCIQDFRrGYxRG1AFQYzVTXU43rZiP7WQjygmtIseXqHx5jTgIhANEXusScf014N6OFeOTGjKIKSpSn2/Fbm3GQdrBudsNL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":954930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpHyCRA9TVsSAnZWagAAqO4QAJze384F2o1Tm+GWylzW\n3f5klWg3f4wXH8ZED5svPuHcM8J3PTCMpTlHsMQhGWV3JkTQKUXX3coBCsQU\n1XvRylRJOzue2ldzEvytTAxewq96HkhOk7Eb/0aRsSjlDwouPZk7f9qFMCF6\n7vunauqWLEFWn/2U+UiPK2NSaxXgLC/l6XyI3hPKs9cRqyI3pMv8BRzajPON\naiDtSyW4u+98JEQsutP5bAN/1x574q987mqfxIWMsUT5gvKLrrjztCpW3gKp\nTudAt70oI88OOEFzwUhr7gQylCA+OZ8kRPZ5ucxO6Q7B9x02gsdSh/D8+f2q\nNq0Alcb/yYOq27yz4Us2YkRuuobQSP4OIRHmgWA+INtrFGcUphgqKpG+D2UG\noaMWG2kLGc5Blb8Sj1HOreT3RHtUejOpMUgqRqapxP/K+DaGryLD3wTjARB0\nmKC1/d8GhnazC4p3EM9DkqMIocNIzkHrqWA/20HeXO21AX4eO0ElT728i/Lk\nCb5cxphsQWzhkyOuhnk5yJg4PDKvKZrgFybmAcNmn5O53q31usJlGEhTvWFe\npq+lIEE/Va1ORJF+VGJj/4C2SxoOg0q1sR6EsSsgGogR6oCHYvfFB2sk+1jL\nhagN2z+gNNIXHqLGplj2zsbhvqNFI2ZSyWeXY2bdLje9FUbAJAl9GnJe837U\n7E1A\r\n=z311\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.150f427a0.0","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/shape":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/density":"8.0.0-canary.150f427a0.0","@material/checkbox":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/typography":"8.0.0-canary.150f427a0.0","@material/touch-target":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.150f427a0.0_1597411826222_0.4270062667223764","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/chips","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e79470285be880f41cce414d846a85c852c7153e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.bcc58290a.0.tgz","fileCount":83,"integrity":"sha512-dDmWBC3EWCiRg5tUEsXIFooOU02FVVEJtoyD9eglxq0U1eN1sY1FaW0xPm5albGEFO0JRx45gwMdFMVVsX5UxA==","signatures":[{"sig":"MEUCIQCflUw1hudC6Ot5Ob38WnPniFdpkiLY5mBgZTJu4cpSMwIgczLfpU0Cc4uObOixco6gGNvasQfIg/fjgRoyrAyWO0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":954930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzqCRA9TVsSAnZWagAAL74P/1LbcD9DsYixWe7kBPOl\n41pcbH1RAaJYwrEZBn41gN12Z+mOefLBcJF0YUdbM0WUmhKVwa2AHrz89SgB\noEo0tsmOR1yVjZ9vcRHtPaEgfGsocCd6PF5G/BVUwHFrnrpHPX3K18cjhpKU\n8hIyUhht42uvi5kYLT6bHRvrbVvtdbqErK+nft1hN9n3JNxYnVboIA6WdpcQ\nuG87AZaSRTk3k0scn+83JFCRc7qhbNxqNmAlrKxNZv7gv2e5grh2j8kRXtL9\nlIyj3OO+KQvLO1BM8I9/OfzT3n8k8ManUMaQ12qtku0HcHLQqHg5OtAuExVg\nSYB61t/Mtiv/4ITRHur5fGZ0zxV3l4gPWMdbU10Asa5jIjytDoSlqE+iMX1T\nF1SAunyD1oRaUPevZx0oExGkb4GnDcdC1BnQeiDxEPEVPm3BBagnXJKfjujD\n19Zg0yD03a1LOtgtJqUTyIGe+HL7gUeIm3w5EZwUNFjNSh7gciiXiZAYWZ9z\nfWScNKTDet6Uz2AUx0t0dtyD4+PKUz3rkfcvWY9g4Hjdu2FhH+OyBH7EW0MO\nSi5rgMw9HFhgjKooJPiP6UpBjHSaCjqwUveYffjGbqFn33wVOGpDnaPLu+Nv\n74JDrY+uDLxwkiHoTYFkh49+APKz/nP+1W3NxAwW8cBYVH9nqmetzkhgAC69\nVSv7\r\n=XysK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bcc58290a.0","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/shape":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/density":"8.0.0-canary.bcc58290a.0","@material/checkbox":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/elevation":"8.0.0-canary.bcc58290a.0","@material/typography":"8.0.0-canary.bcc58290a.0","@material/touch-target":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.bcc58290a.0_1597447401738_0.29191576044067635","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/chips","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c1c286bb92248303728826e577693dabf68ebfb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.4f55400bb.0.tgz","fileCount":83,"integrity":"sha512-ETn+h1/T+P6NJGJrQXdizaxFFXz7lcQxTu6g7pC3FASO40OffXxwM/cnErl043A3/c/t39vUXFaBmZfTuHRkew==","signatures":[{"sig":"MEYCIQDCut/euJ7QCm5TXHgix2mj9MoN7XvW5kAkQkqoBk2ttgIhAPg5xlIPVI+TwjPBQVdOmH5Fp/BG7tz8YF3XVDeVKMKO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKkCRA9TVsSAnZWagAAc/kP/iUUJdU/5mp1tUrDnsbR\n0D+TRHdsDB9agJe75GB/h8cL6hxfDirA6dnRGv3G9mO2bMJtXeUhPawACmXs\nlikC/E9o4pD5Vma082Rr3Fo5DK41dBR4UBVyBRuCZ+s5sBxqIpfNCtkdi4LO\nihcAIpFSN21BTLLFHBYlRRF+gyuhBAI9imajvGFx36c/zS8CqBLhhnRB8lJL\nwO+pMRVQuVOIUlY/c6TwOs399eBkncz5l/jl/56hI3+CbQhok1Xe8wEVlCfi\nc2Mc/teBgXHqH05zoVyjFJ0f6a/o00Z1UZain9zE2rjNJqZQXpLJnNRbluLF\neow7sBMZcZ9HGTnj70CaFx/rst4o6QttDF4V5EefVvOxz9sZcfLB1O7kY/7E\nsvVzCn+REiTv1ZIfbmciVRJJkktgFXiN+NlGbXKxDUfUco+RV+K7X2reugWF\nBwGI4e+4KtnlCPknllFS7zEy5oPQM2RgfKzBPqWbZIlJbs2wK/JYqz3M09Sv\nzbW58pM+eBr/i80+DkN4TadQJ0Yy9+WJHGZH0GyFyO/1UfeMYHoTr3FGjsrr\n/N0U401lgbA1bHwqhBONKHVPe8UXplXoTJF7lywXlE3jckNDJKJXwrd474av\netxbbOLUmJ1U6kQdIi0fVusQTe6NFSATBl80zXkrNK4eAUCLCr9yaVc/Gxw7\nY8lt\r\n=8eCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4f55400bb.0","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/shape":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/density":"8.0.0-canary.4f55400bb.0","@material/checkbox":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/typography":"8.0.0-canary.4f55400bb.0","@material/touch-target":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.4f55400bb.0_1597682339897_0.4690432488723135","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/chips","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.000d64815.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b61024018a3f0604c3214cd49e446959143ab94e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.000d64815.0.tgz","fileCount":83,"integrity":"sha512-qdKZnaGvU9tKSYnAvfmRcxXW4+DuGpW0ZDBrtuzGo82BI4HXyEq9dIgbNf0VoBEx/1ERglzzwXcvLXn4JtRy4w==","signatures":[{"sig":"MEYCIQDcKCgYdXM2/u1BLOczHjHYjOOFpgYyUkhXNw+bIumHhAIhALGpFrZ7fUw8XUN82OupxJCoV4V34P8DSKqiGDkRR2oN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrjKCRA9TVsSAnZWagAAqBgQAJn9itaHwdXSXdzEhwPy\nKiMLk88sDd9UjSg5YtcABqdePB5PJKEPm6sBxVlVBRwXVshPTmA2pi92D0bQ\nJ+n2Yw5wh3oGI0KpaGFw0cmTNjJdzl6TrG6ichbtVMCIaO/Psdc5k9w1vK4J\n8U6274XPMceJqDtIvPteuYa6JHuuHnMgs0oE3YVcPSd0mZfm9vkz5gZVrFRS\nQZZuzQvfbVXYXdyQ/c/o1E4SV3Y+1Je+Xc0Be9WmsQExhZZSstTuAO+Kp8DF\nEwGxvWRzwyuanvBMLWJLCJvWe9oAkxqYA4Uubb6B+zBV7uCEOHkn4JxFIKLF\n7PC5vb6ICrGOKoFkpRwlZdzJty64y37wglNFHuI4LT92G7G5t2u7waX/SAEv\nP7yujl00deAGqFwbHsBHst2KA3aFMUDs59uRwL3hq5W5loBJUbFJ48yC8p80\nu4hcEiTtLuvcSdSsxbPTwqOs8KVMAWTjj15cQqZZn47Iz5GJ2ZnsAbBmZSPn\nu+sT+esL9QeeAO0zRD+5/gaGqaIq910csbx1yuSWD+ZZtFuegv5g1WS149By\nn/hBJTYM8oo7TxRCnYM94QM7L/0StlmzmFAFFZnWvk+ddLwaPaOJw/eMpkms\nPwAxwoAkoJnZDlgBvkZU4B+dO2grgS1+pUxQXQF/sKI8jHhEzS1SBicPkcSw\nKdm+\r\n=NBM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.000d64815.0","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/shape":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/density":"8.0.0-canary.000d64815.0","@material/checkbox":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/typography":"8.0.0-canary.000d64815.0","@material/touch-target":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.000d64815.0_1597683913977_0.3567935448587567","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/chips","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.defa599a8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9971e5f6a439ce34ed8cb84ed9f1416a7e3a19a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.defa599a8.0.tgz","fileCount":83,"integrity":"sha512-5a9EyhQncoYyOp/jCXF6sI9bm4fpL+V3ml3XZX4XAc3OKasYZ4oDBUjpd3qoAJVlyuIW7VBYQ55vNcWJpOVdug==","signatures":[{"sig":"MEUCIQDBn0MsVv//UdlFBj45XcN6hjBlcyD3H2Pl+uZ6+knhWQIgaDFOSKeCsIXXhkzaIQmEPiOv9kN5My/peS8WieJAVhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOulwCRA9TVsSAnZWagAAjncP/27q3RegwIGMRVY4vGRu\nhE97fvYKo5j8D7mkuQ6IbE8fqDJNKxnvAgB1gSr1ij/9/O7CdsE26Sy7HEHD\ns86d5qkiqgCHjOsa5H8qqywRjxBb4Rrb58XAEtcJKp19r/WnIn1kVEP9qZ5Y\nRi5lIkrO8afX0KGo4A/5f7eACcbP/Df5vExbZsFTYoin9yxEEVnvvcSDLhSp\n/b74GpRGJw3s0qnAwiF9OdT38Kz6fAX1N8mnSo+CzYRZeCgCZFkCgFOJAyD7\nWtYY8NCmyi5HgPgIQBUzHD8U1Xi820DlVVQPMKBgJvyGFEFQ0crM2ZHqfmnm\nRxuw0CkGQCkSPCQMIIRX03LjwMd4uvsH38YVoRybrTQNCWKcILPRYNfr7Emx\nzI51Z9HuZNKoocT269Xn1m95AVJeEbo/SRIm4Fict9Q87EHQ2ylB7kK/Ff8K\n6Zrjt/v3C+FDnih5VDcfDKIS2w/xHTiHjU/7DenF/BOKNWu9XAlJP0aoq+Ea\nJOWkyxB3eFnubsPtKr7LODlCYnva5KsFYWl3kuQOx5gaGb5AxCwti9gHQN56\nFtfmwSfLgFhHzqi/Df+KG6T9j0vz4ya5lJvAkwsuavxrCtB4SWEHizVZ7AOK\nhVVYuJ3Rl8O33UOz3Lb+zh8OMCT5xH75djBeaq3iCaYUc1G1ifLPJlwyXcak\nDyoM\r\n=xynz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.defa599a8.0","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/shape":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/density":"8.0.0-canary.defa599a8.0","@material/checkbox":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/typography":"8.0.0-canary.defa599a8.0","@material/touch-target":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.defa599a8.0_1597696367652_0.4424059920533623","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/chips","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adb950e9020f2cca75571d56d3ce768217f605a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":83,"integrity":"sha512-jCx2Bm+zkQ6I+42ouHnYI8eBV4AndY9POKtYhrdowuXZO1nUM+GP+BJSOH+5NRGS8h9kINaiMsxPMi0zAx89fg==","signatures":[{"sig":"MEUCIQCOf0ycPFRQ9V0fOHXPl7Vb7twQD111iMIetLzPFXTdwwIgFXVhWlfUQ6YOzwUdG/NSvPwXY14lNRGu9fZykNrapDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/4CRA9TVsSAnZWagAAuz8P/00wq5naJuyxHniuPSox\nMYBPvOxgkyqAdEXkvXtXpLL4dPFejphsKQSJVdJ8Di9H8WTH/TyXEqQPizGO\nuvBtgdG4BfvupJ0+N51agfLAs1QYvbK1fDfZyqIjUiwPskkDZUZ7cvLHFhZj\nnpslgJRM42KnekNE9csgyo6AoQEKR2Ypji6f6yOOSh6wTyXU4JBxjHGtSFvt\nPjlVNFCD1DmWamZtBUggVJXacEZuTVjAAbD8VDtZKvBZSK8YfckAAbH+3oG9\nG8/8JOfeYTiUdV1Hp1etobnLxoAuXQt3kAPYvmmeGlrtO7sA9JEhBPUmm7TX\n+yVnKE0vqA+0xaFuBhZljSo/xbPhFGkIbvmTKguwG98uZ77aWpR82AQHnDew\nshaB5cER9nLflQoNbHmYTPZhi1n8+KrrglkktrvLQa3O6x6pU6NInEXg1ebc\nv/wsDdpr5H/1eQIFYIhAzXax/m82yQWpOvevNo35sJ0JaGEk0arscJVLzhYF\nYxOLi7W59StWS2vplhQV3W5wibI8v1lcnKUxahK5Aib00cb07R/In44qgaXW\nP189Ip4geloB2KKl3Q5sRc0hRa2QdRwY/40LR3oQdcdk2UfK+AdCNPnfkHvo\n8fQy2TuzV2ywHjafDWxKRAZT2J8mMyY/qn2ZDhw6KDY+j04oTzxUZJpBX+iP\nbj/O\r\n=6lLm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66b8ed7e6.0","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/shape":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/density":"8.0.0-canary.66b8ed7e6.0","@material/checkbox":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/typography":"8.0.0-canary.66b8ed7e6.0","@material/touch-target":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.66b8ed7e6.0_1597775863920_0.23778428885668101","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/chips","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0dcf55e9813814462cb2c23a6b0be3f0ce93fff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e2b1033df.0.tgz","fileCount":83,"integrity":"sha512-5CL5xfDRZO+lmuUNNgedZV/9fvNTMmFV8hosvg72SM9YAsZqt4SwdtSbD7p7hER7T1N8WtkgdefSxdOe2pNx9w==","signatures":[{"sig":"MEQCIH3mND6w266Uk3ea+yUsme7z9JoZu9DeaV1GezQTFzxQAiBpEbEo5s8D/SWgs+mYxy1SntzcWB0IYe5/ZkiJKb1tzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXKZCRA9TVsSAnZWagAAS9UQAJGljZ/3ocj/yFsWK1gQ\nRsq6Mr/t/dqlrtVXCNSo5TM8g4U6Mm4ZlmEHnfX0psfwb/4v47QdQZUdO/P+\nLzAVd7LPwVfIIb93X9k5sAs02BJDg5kCbd85pooHspsSHBlvXS+HnGIcJV3p\n+Q9AQuQoaju/YEAyt5NB5jSnPbHHEN/U3srXlA6i/XuG9P+QlHwCuqER72g6\nrrJ9vTVenohuznUnET5B4on2XC4PN8g5DSg5OqpbWRsFyZrVxcYZRIDw3kZy\nrsz4ywLz5qrhhBXrbO9QywuhJVQUceLZhDeOl7ze21SvcXBMOHiFXUS5NfUf\nMQXSH0zGZX4IxELj9zm2ZXUvp38MqwuFoIdFf1+fmetxBN+PHbodi+kPAerH\n6zco6V+g66SGyPGIqUE7q79ZYBY0v0i6c2TJUNCMP62nsTBVX+u3us7naKBU\n0MR4AoUjPVV8ZKaDoLXq/fzcMY5JjEviwNkIIHDIDARwMsVw8c+aBgwdYnz2\nk1jsfExTQzKwUUkwvBUo73/OBDWUs92/so4dv0Xk4qT6kBh17XqUvcgnKUnL\nm8rjSKY2T84Z/vUwR1md+9mz2H3zujPbDjWfGzGxANvum0U2C5Mm3vI/y657\ndHkEe9TsXdOrU6J1p3LIts4MnbQGIMq1xZ0M5g6mu81DZj8s2WVOaz9vapv/\nHR3+\r\n=S6uT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2b1033df.0","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/shape":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/density":"8.0.0-canary.e2b1033df.0","@material/checkbox":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/typography":"8.0.0-canary.e2b1033df.0","@material/touch-target":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e2b1033df.0_1597862552577_0.8681781904928221","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/chips","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5de86c30b70cfea4a7ade0a7e78521654007514","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":83,"integrity":"sha512-I0xhowC8gkF+069to9mcG3rmJKRyCv51ABq+gSPD7YX8oUMUTXkSNw7u5RCvtDGtxlw9hCy3zkTw2Sick07RFg==","signatures":[{"sig":"MEUCIQDAQ7wF/aDPROLD37wAPTYwEAyIisRCQnFEl/9zS0xaEAIgXnSnFr56vAJMPWfhtoc9DJtUONWhoAjpwLiZ+j5aZPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXyACRA9TVsSAnZWagAAcz0QAICMV+GhI7H7b+BqHceT\nHzTVloORR8oKako4NWpHd1QdrqsBvzHVgsS4ijQUvaoPmvR16b/i9VoS14Lz\nIkOD83rITcHyiJwq4+ll0usPiv6zPbypqrRStc1H4geDEWtKM5KsqXWW9O8f\nFjt0QpAZkmdrvR+KhKxOid4MMQzyignKoyQ3zOKcxP7MP0QuXvOK4UmuymIL\nPWXJMP2iXoFcEos/OowEhoslMt4vYPYpp0NUpOBIX+38DUtmbMi0DDW9h9m/\n7Tv4mE+UvXs2D2Go8wI1nr/uJHaz+3UzhhFsBGUBRXXdfBhVvkbJ/CFSCB08\nNxpxmQcWJYM+TOQYjBMadwbDCn90puq9w1g0OlFnPzct5stes8fJSy/IZBDU\n3xrEhRf3qwTd/yKtDDJsI0CQ171s4HBTxeTp4/f2DmbI3kd2XDIBSFfufW2q\nm22nj6tIjhtCRdaHQjdmLh3xAV14oZhXHWPeDjL8l/w63LcRtJFMYKjHibuM\nKnOaINMTHxf7S9l7fe7pbrLDrrH2UErX36rc8z06QcwDrwGTwJxVQW1B1rEM\nHiNf4yA8pvrrKJrSJClERICoIosIGJhXxdr5LJwXmTwPWoGgHEDRxcTy+pmB\nltiruTZS1+ZmUDtsew1F4WM5ZL3yhOMb9YjjRfG/0EJ7jWvY9qUTcT84tS29\nRmNJ\r\n=A1TB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/shape":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/density":"8.0.0-canary.2e8c3dd2e.0","@material/checkbox":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/typography":"8.0.0-canary.2e8c3dd2e.0","@material/touch-target":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2e8c3dd2e.0_1597865088378_0.9159927097386904","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/chips","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"817f0ad5422a782608fdc33f65b9fdb4fae67425","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":83,"integrity":"sha512-YWnpTt7Wip7rusVd63YfFmA761jqlji0SjBImudzg0Nwu745gCvPPlhCAO9U7liTul229tVTi7EX/e5Sse2LyA==","signatures":[{"sig":"MEUCIQDlyvmcBz4vIAdbzcdDLSDZEv6EcMo8VO8uY9IMcUo2SAIgftCppN2axmgweZ6NSJcVpPIiMxsYYlmL+YTn512cq1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaYECRA9TVsSAnZWagAAqhwP/3q5hRKErhmTvCP2kMYz\nFcSBMfTU3fWoNRR+EwKdyuCis+MIHTEYdZHOniYRP9usDGlAXAwPMWxEePHs\nFfDkPLDmd3CvAmOY3dE4q4z0Sth9HmeE7VFG4DIMH+4aij72dvXvzKRe5Ctm\nrveJxCrx5WHCLK1nbiehvUyOHpp4Bk0iOcjJvHtV4xgOW4Ca8l1SkgvhXZgZ\nRh2En+wjOinrS449YdCwCUD5Ma8Bm8kdWkhkT254GhOFgbFxhh05BoqEN3OS\nrgiEyAvhMlsIJ9YS+xeaLPczwyj/4lUkrs62N156g5d6P+r3gruChN1ckbQo\nMbUOnMJpRhnnkqwghZW+71T5r/p8wArOmcxMs9ybJZ8XT6nqSAiuu/nVXcj1\nO5N7Wngab0Fse6NLJlreX3aOAiV6ZbD/6ABmk9YwOHL8Gz7hjM/lUfYmk/6H\n+nuwH5sxJhfqkb5cn4VN4UCELrvkh0WOojU33eY8jQ2RtVxY7oI/5j5sZHwu\nOThWTW5Byl6e4Ovo1WpjBMWeSXHpU/FshJPANA9Fjs3XFl6rLjKHTvC0bsHT\nM4KhPdmSgQTt+N6/AlOGR5e9VmyxrMYy6QWi2wKCUUGNVRY5lzsAMwyUsMAg\nAuZcGY7fEQfOQ0zwGsdSlnEKUoxQp8qF32wKh1BjQzv0cVDFuXmRdiTPLnFI\n9lQ5\r\n=CSlv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/shape":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/density":"8.0.0-canary.b2e80a5d9.0","@material/checkbox":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/typography":"8.0.0-canary.b2e80a5d9.0","@material/touch-target":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.b2e80a5d9.0_1597875715548_0.786538404172028","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/chips","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.ff88df637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ce8457aca94242dce353c128f12e486a0d5c96","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.ff88df637.0.tgz","fileCount":83,"integrity":"sha512-8Ktr2ucZVLNAULbAmz5SK/5SoqzFhQMwA4qHK3kl7LOzHhbljaAcmaldPPBuzr9yC/P5azl1t1v1iyRKYp/igw==","signatures":[{"sig":"MEUCICGJYVrdraFNuqwnkb5tbiaLWqkysdzYkUbAPGE02GhDAiEA3fIdEoJP+iRAYO9/G6yNUbD7pvuvfyCy0r/Lw/SXwNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPajVCRA9TVsSAnZWagAAWJkP+gOSYqcfDmhPTpkLvC5l\n2MDlIKv+dftxp7q4Q7zcn+hRXH/xC7pM17sfXDLVQeDa/k3pNNJI619lhNIn\nHKXfMvyseAxd8Sg9uRlIBynU89WeHB0MHi0iR8m3CY2I1Sp3rOh40UFOiv3A\nwnpT1lpq4wh2uUECph0QwcrfTS0OViZPxaEv+C8cGr12yr6kMpmZfLFCiDE+\nqy92MwbTBjP1C6W3QNpRRo4ttule0iIMeOrGf8FbiP+rGuLzuAbil5Yil+PE\np1f249F5p3dacLzi+fM+REDLpVj6KfrVaRTOABoT8mXAVI1nJEfsxcW8nA5z\njM5mcq/9hMTrSjR/kHdHsl1l4Ul63oQueFsjd9pvCbx/nHmTYDMqfXA98DTK\nwMVuasc+X2T0KeAsR+Iap4Tdgjn3btWc3ZQ0Zhpn4n2ZJGLLFunp0FQ6s5gl\nrs28CunkIC+0DjKuWNzSeWZ1fuH3Ic5PQVRGQ1CzoC3ZNXK/v/vRvfgqbAJp\nwKsY2lAExHzjIzjBwgVU2sToc1VYEensQ30zpzDyqvLSWJ9yCKb1WKuJ3vJ9\nvYYEbgqAFjlXrWE0irLV3uWMU2Nog9cfAPauhAYZJK+rFFQ41NDU5rQEgPFX\nOrG02GXW3v5Spv84SAMzG5/3L7kC91NBYVtv0DeTFoqNwu2M1ZtbyfSEz6yH\ny4fc\r\n=YqKv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff88df637.0","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/shape":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/density":"8.0.0-canary.ff88df637.0","@material/checkbox":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/typography":"8.0.0-canary.ff88df637.0","@material/touch-target":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.ff88df637.0_1597876437019_0.8876493500004299","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/chips","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80d0ac7f6453da9d8964596e8319ea2de7b9aec4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.32fb314cd.0.tgz","fileCount":83,"integrity":"sha512-nAEkD3aI1Jkn4Rt6kl6TWICKf6R4AqqIdQh2TkHuPb9NEyMKjGysJMonuuROWXwgH/aHWuzDsXar7SnJ8JDWEg==","signatures":[{"sig":"MEQCIAf2Pc3ku6GpQE/Dxm38USVXpSGGXmKvJbgbprp4OerDAiBnnRbTL9kP6e8Vd4sqfFsH1R2wCTGRsx8AFRtXbzgOtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlKwCRA9TVsSAnZWagAAmqgP/2W4wcUgs6bOqe5lMPn4\nRHKLY1p5gRLYwASlVrlB0cB3wLY31U9qDhU+yyKguigAZGFjcjJdKgz4OaPj\nAe4jKb3sGGUUlHpOM1UQoJFjiACEfohxFe2ZwlM/eJ7mjkXqMxd6/ZEHtW7j\n4MoUYBtLGvroOfKPJ5CmAeqSpMrZKuM+7DX4KLteIPJFGTfQJsYYFhWRuS1t\ndrKLloa85RmmiDNxJlkTWAMRnJni8zsBsF1NhJTxSGf3TRrOk4spNrafNOsP\nVImTzzxm7yyuKe/CbXulweFheYiu1KvPc6IofQ2N/Fl7277d/aDqSvz/J7/M\nr56+jT5dQU6q9wTfekQ7PnriU9/QU56z2diW0M62WpG+YGDtGkjOQs04zcOW\nloVKa3yXIQmtDOSeoa7XlVHyYwneY1MEJe+jJ4YvCjGK+3SCwr7ZZ4wS1yLj\nh+8UYtrMIIZRUReHEFYbOx5rmqVTxxVVktNQ9VFKX9mmXr1Qw9eKeAQ4IhwW\n1Uynky1P726CGam1BICE+VWz6HqdjL+8xmF628cTUG5Xe8DDzl1SB1DwoqMA\nyry4agBEjRrogp9UpjmcY42b00Jb8JXEVlPGGE2aT3KE0uFyx9Ioxg4+h+ev\nxfjqnPhKZU5rNI468jbBJPW+5GKz5HssNDohLbBUWIJfWWiy5RxCU6o3JXP/\n/YyY\r\n=xXqb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.32fb314cd.0","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/shape":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/density":"8.0.0-canary.32fb314cd.0","@material/checkbox":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/typography":"8.0.0-canary.32fb314cd.0","@material/touch-target":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.32fb314cd.0_1597919920455_0.39632704589406575","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/chips","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.546277d32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5cc373166b147c2e61f94b4bef0d59873e495ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.546277d32.0.tgz","fileCount":83,"integrity":"sha512-q8ii3Py4gWoxszzkcV+3kPGtgUKnJ0LosEfux4M0vM69LUH8L48vB8F462P773zKqdFkQDhSdLSRec4lEwbP1Q==","signatures":[{"sig":"MEUCIHQiVR9NZMpGbYBpoWtGZLR46sjwXETv/FBGv5pNf19KAiEA5xXB1m9Qlo5o5HqpgKn0Y5pGlFFWs9cylUjPXTY8Vys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqh/CRA9TVsSAnZWagAAot0P/0Wb7Hidcq26q1tc04bo\nCtB3wYq40BaDr6y0SZcUN1vMvKMokmqXiYNEBCUN27hdE4IFdrtSADMZwtKV\n70s/cXvh+LAIYBp/YBvhb0gM/eo30Kjaqg7VBzEuKH7qyRG47ctLJ1xZYzqo\n8wVcBtWjhrTm7diZwBuGxExySi0WDoOf+RY8XZO5T2snWoPbLen5GefiWFp6\nJB6lBhI/XVxtwGJsggv1Jwwehp6WsoGFAkm4ocNhVvP6n8orjueYvsjysopF\n67fY26qERA+BGwXnXwNadXWELlzKbUHnKY/mj6/01NuPGIouBdVXmtUr7Jjv\nA2Ddz7kn8Z27ksyoHbe1qCH4n7AlbZcH8SJ4HF2xPeyU8cBlhp4kpHdyWUr6\nYBOhEd8PegXXy+ZO2yor+mEmh6mS1HGfNuYjmuyghBDwulsSEm+mg8mm48xa\ngsnrTI+Bn6F5aNJIZNNVr3q1PRgnGukEVqt8dF6GJVL6aGl8+ToHOmaaYiBE\n67J1Yza+rHxjjKZ1PHSilanJakeX7EYkRunfrigRynfdsV/GR45NOzVAVNaI\nMtT4dk+6KNtr7pR1c0SdweQKOqdawOEqv4d9diQVlpqDkscguYPPV7mLI476\nX2CeSiX94YkZDorG+/A4ww3HnazsIKVMH1fVEA17S25hMVa3wNBw6ko+EZ6s\npo8G\r\n=TC0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.546277d32.0","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/shape":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/density":"8.0.0-canary.546277d32.0","@material/checkbox":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/typography":"8.0.0-canary.546277d32.0","@material/touch-target":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.546277d32.0_1597941886775_0.44871955644611417","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/chips","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.da72839f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0ee80a266f6cc0b67f615ac7bc1de9188ae73e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.da72839f4.0.tgz","fileCount":83,"integrity":"sha512-SnFUk7jAXB0VKQ2a9qexvxkbec8u8dZUkwgCoM6oALs+/wlMyOHyyLNk/ksie2+VGs9f9YPuUsJV5hkk7lADIg==","signatures":[{"sig":"MEUCIEsWBuA2bf4MeSGO/rdygGi1+hI1nIMcggaZBi5ZU1AIAiEA5Ps3ke29RjisNgrNm1HCk0uLHAyEBXjUojkvHK6Cldg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrpbCRA9TVsSAnZWagAAQgYQAJnIB6yBw9N51boVsbBZ\nT/NtA8FLpRA9MCQSF1U+SL7P46uPfW/jKQCQoiSsT61uV8M8lNBhKLrbeWlH\nVErpzR/CMaIgKtWmLN1rIc29ou9sWUr1kVRfUUeX+9Rxd8jKbur8Zaa0jH9L\nLZjfVJT7vTCcM51QEk2CVDvATaFsS6bO9cA+kZAzXPU2xwV8PsmJ3HoP7KFn\nISCvu1tm3ga2GH2H0o8XaEbcDju95Gg5Zfe6QvvqewZ00wQMk3xw+T6Ff9g0\nxD1assHOUpAv5uvYxBCu6Ofe9UZb6ev/3LvnSzefs/qXeGOqL7GEeLSvirFX\nLEe3o0KWa5KwWSBLmOhcWlK9P0sYTi/7j2MBfljo9o3L6OL4E8tBS/qbCacz\nvxMqlVx3rSIZi7d0Uo0hwEUVXKAKks5c3IoCv8gQQMlO/OhfdWlQdxdWnWfF\nk8dyGOh9vGccugwitN32QPL2o0JLQ/lxdBy775/SM+IitzaW1l44pLjAbVtu\nWoxJWjaxINHHlrcYMfkcwKYTiljBu9gyN9rG8yO0pzgEQ6EU+Dx0KJk5msQo\nu3hAkxAA7xKxGFjWpqZE4I2ms223CgemL1isdr97A1SznloiCbGr/UrtxrvQ\n9O1geVlDhHU4VNsbXWfJLzouWbVb5u0mQENB1OndngqP6RcBEc5nNxCt+R6e\n5jRh\r\n=OCn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.da72839f4.0","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/shape":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/density":"8.0.0-canary.da72839f4.0","@material/checkbox":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/typography":"8.0.0-canary.da72839f4.0","@material/touch-target":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.da72839f4.0_1597946458719_0.4620116640109715","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/chips","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.346069ccb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c159f0935034c077cf8baddef9aed9c2278ea0fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.346069ccb.0.tgz","fileCount":83,"integrity":"sha512-fmqUPEkSzaRZ3mFNdM1E7yx0+uitjbfkHDubAMNsalXJTKXyuuuUw+QIJsiYMCpNMzT8l+G7FJlD/lrW24oj+A==","signatures":[{"sig":"MEYCIQCEE9j2YQ/3+9JPsolQ0G1c7ornc0+g6yndOKp1AON16AIhAJO1ZOv3iGUYfwUxTqA8soWj3sQB+tH3FV45kOmimR1q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr6YCRA9TVsSAnZWagAAH5cP/jZg80llYccPOHjFw029\nUioLzuuAx5YzMYRTUTuDKWZ4OpS3C72S2JYyaz7lpwwQngauhqLJizacoh7c\nr2a3c3oaz8WxgC7BYq0fJSXJB6Oh4Ev+ETXNudMsb0zO7yqo86UtFLhcJwML\nmdtxaaGAD+PABF9O0LxwBZNF1xVnpMYfM6QR7HeeeOwGR2iVMVv/jVlPHInT\nPm0LSeepghjWKkd0d+JQhteh4vf+zOVj4wlyEnwGiuFPFgvpDzUDZsepqGgY\nWTXe3V4qlN4eH/KTKBHhW4JhCyoDBmUtfatTHyAmZ321nJ81oV6S+IDdco4Z\nWnNBYqw0x8phGO0sstqA09abpMV4r6wUpmq6PKPvGHHhEUr/7JgHaSk4mdTz\nbR9ZTp1juVJrZJuFx7Z+E33P68bygsqc7soFjvQNCWQkcpRSlDumdIDh2f8f\ndAgnUsZTgXcO8YNpftNlKQjqTEAQ4oRFixSJN9LeOO6P1osvyhZLTNE6P11M\nQSpKzJurY1+LzM0P38wu1THxjUGvEx8CaF+SnstRuVOD9vJtOQ40MZ4P/4Lx\nakJtaJzUAitYosrPyaihR7Vt9pv75IcHFF1EkH/KFqKpyOC8P6F1jjsTG3cp\nKYyQ3VI3rAVcKeCi+L5oJJ5vijQ6DDA9ZxPoT7TlBjy9O9BEss61e2B6feIj\nKhdb\r\n=zWAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.346069ccb.0","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/shape":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/density":"8.0.0-canary.346069ccb.0","@material/checkbox":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/typography":"8.0.0-canary.346069ccb.0","@material/touch-target":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.346069ccb.0_1597947543689_0.40512146970007645","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/chips","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"000d5af183125424138231b8a0f94776a137e0c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e27c5802f.0.tgz","fileCount":83,"integrity":"sha512-1Xkp2m6lrEM/VtFQ9qKxkptrDafvcyHmeKdfxFzyZoUhhXO1L12yRPW+W0d49vQQ9mBZmxPf6CprE/6zNII1tg==","signatures":[{"sig":"MEUCIQDGb/9Z/UxNHAF5j0cwZ/nA4JJr/RbSDieiIZ31a2DtywIgHElD2umFJ0sHPXm5wIAtKMBRgE/H6Z8LRYw1x60W6QU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsv1CRA9TVsSAnZWagAAqAcP/0cYlZs/kktWD63vhpKi\n7y3ZvP8gG6ofS+ztobuuHoObZLRSNUKNOW+sBs/QGPLHe3aXiBzPvxhp3XR6\n8S2bJsdB/i+dMqTAe32X+eU+nEKOZ0E7XP+/TyC128eh+euO0hIuCSWaNnNV\nbiz40ooyTR5OOWpYZZyyVr/kje94P7gzdAxU+YMwZZxgx7iXcdNXCnpWydTn\nmahrD8TiYb2tsv1pvTYgSGY428I4jrQpRGpmcSgrCKJvtTX4j/JSnn5YH4ER\njgqOFksu/CEUTwA6s9GZcGRYHyLRWACormkiaJjeVFmq/tW/ty8oiIiWn95H\nva/nXtohzWLHBBbje0hbq7BJjtiPRtLgds9lXcsHKKvok1ZtJOC841oW/9Lk\nLSjhI2ergxdY+oldJSSKlQGbZuIvBIp3/N9WtRpTFnYShpwiNOt9juAGFwQS\n94yNxJmEae+BYDzJsFab3NGDomom/jUotO8AE6VgOZyHB/EfoRgk8ihALDvx\njbZCq6+clrSOw85TSIdTiz00gyEwZUxc2Sro3ZlpiOZqK/uBGc6cUAZCC9wj\n6ud/GUpJEU72x3t9hSw+KUihUdTqL+eSjr3s0OfoKjrw1x3gWmRjtlzNnfDK\nuiroIWmB6zdna830qzZcoO4XRVM3sM7wbl+LqirbKBf7MpBeFvCEaQyzN8ez\nNbIL\r\n=cCPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e27c5802f.0","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/shape":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/density":"8.0.0-canary.e27c5802f.0","@material/checkbox":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/typography":"8.0.0-canary.e27c5802f.0","@material/touch-target":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e27c5802f.0_1597950964782_0.47653289374115015","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/chips","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"455d6009f70f2233d20fd0ad2cb8a4cf22a4821c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.f4532b9c8.0.tgz","fileCount":83,"integrity":"sha512-2PiSOJaR3GHMwGmcEZQaOJw8v9TtmDGa/DhYb3i0zBItqlJzK9uQhi9JbJvhUUQvIyL/zDzI0so6kwlWwl2cmw==","signatures":[{"sig":"MEUCIQC7llY00v1/GO/+aL+XMboF/U5zKyv8Ld0duddc2+xX5gIgBbGjO66YVpJx/ZzGIFYe25dhbW+Or/Fn1ejpCiFCbbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtXrCRA9TVsSAnZWagAAOm8P/jeRPZ98ut19ShMWhLMY\nqBiqMN2RpPf9Qbj2aXrV/XnY4gHyqqKjeHqKlx+aZuHh/hiu/hJJxzQMVE7B\nEop+drpcHoy3UKptq5Nrn8ePoMgtd2FOYAEEoECQENXOU5NiKmAy9geuD+J3\nih0eSriZbhGL1KQ27PnkSpAR4nRgmwFsyCGVlCNpvCTnwTjSfHUx4slSJHcs\nPz97Z1NMgi8Ok0opNsaE6DZlVRXOUcgGWOyi1jPBRM4FIBIGCktTq9PVsFTV\n93Foh3IAYht0GKmic7UA6p49Mmh3OpGuzbsioou9E943rPIx+ZV17pT+8eme\nK1X4aFXt2JMz6S+TRazmir5v/MU+YWvU3lv3o0kYy4bXB1VF5qEh/d4w+1sq\nnT9Oc/IbfYeT6/UaGxM5DBRLFvJaKNL7P7nvI73p8uWYr5rpp5ldbYFLzABH\nxj70p16C8T2Fg5Fi97i6GDDRVzPz9Kyeu/WBGGIuqxOlW3yyYp0argzbicc8\n+u1IFwfYibPQGc57E99YdWIDCTdVZzeLvahH9rgBU8IB5Z/ajyMvXdz3KoPP\n/pmOp2n/cm0APw5pyG5N5vOUxc+c9iZz/PYc2EhbWa8EMEj9xc17AEkbQmsb\ni8MNHyWv49Ou3HTqoqlaKux6B1nUDoE/UvRAbiqsAd/3rsdfIwrX8gMfmDHL\nW5dm\r\n=j8sE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f4532b9c8.0","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/shape":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/density":"8.0.0-canary.f4532b9c8.0","@material/checkbox":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/typography":"8.0.0-canary.f4532b9c8.0","@material/touch-target":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.f4532b9c8.0_1597953514674_0.18037534541378286","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/chips","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5174720269b8adcb236ca43758d14c3d27648a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":83,"integrity":"sha512-oFBECkXUtChBhPizLZx/vkxoj7u9hwMgkKLJijLT1xocmSjGAu3sh9nT6T9L5uvCfz4/R5scoNLuNhCUUNkMgw==","signatures":[{"sig":"MEUCIQDVNgt4MhD+uuw9BuIfe3Ey28/QEvvGGJyBGsDA+5B2/QIgZ7jU8Fv5rWuZVhtj9mkkduya9ipAyN4RbUU2js8072c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuYLCRA9TVsSAnZWagAAYg4P/ikR2ZAGo3U4G+SoD3bi\n42nnG62V9C8fSNeo9gTNhYKpMfQp0GC1JQGHlBNw9HlXBqJC5xsGrKQAOjAY\nsjHeB00/luOmBPW1tic10jheASmQpJB0aZ0WKWdANbEga4k4tzOVwvoKjn8/\nKxveKpV2g/ZFbaO/ItO1jPqkawnPwSaoHpsJbGDcbo0SMltekncAdLatxDrK\n9fny/YlP+Z+091HXnSnQPYQSRlQmXAf2Uy4Tip/LKTHiQBuxyPAfcU/znBEx\nTls/mWQI+D8r7vOtBk/oHmlY3BHkWa+fGNwOgcVFcriTUA2zFwj13cqCugaQ\nYSXK+rmQ+FkMOjTtkQFMsaPfuIOgyt9hVGlKtzF/UlBA6LSAUJoekFo38FfG\nBOAqvKlaWBcstwv9ZvBxMjDvtF0u4dtHLgqz21Q/ew07P6x9lZklEqavq4bS\ncd+CfZMflBV2o8fP09+QpSLsmYWAvkmE04JwATpaUgaVytniAqrIYAAqHmHk\n5ZW92ukotAWYHRViTQsdMLlTrzZgDuSaCJjCAAqdTuXwEDU4ps/USPvUvvXv\ntWbjT3Wx8oHP4JIPgnFYLYc7S5//QO2sNJkxnprP2xgiE7cd0SDPufHE12mV\nQg3tVylfEEa8ix8lgMGeQA/VnXrYvOsVbz94XlaCQtg+ueZlsSrt9aQy+Lpf\nwZao\r\n=Ovk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/shape":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/density":"8.0.0-canary.fbf73c2a6.0","@material/checkbox":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/typography":"8.0.0-canary.fbf73c2a6.0","@material/touch-target":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fbf73c2a6.0_1597957642582_0.6955733991414166","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/chips","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.cf800124f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5500fafdaa71b90d14ec4e3c09d65c4b571584c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.cf800124f.0.tgz","fileCount":83,"integrity":"sha512-Du36bk3PFAKdDPM3vleOBAOD+Z5KJlt8KtqR8LM5YWJ563fevGgJyfN9F7srqpxhpzQbreiM/bYjL5U3YuZp2A==","signatures":[{"sig":"MEYCIQC7rgRHx5MX+NpRJ11lAcdUT1VT0Vz8Xqk9+aKAIG8QqAIhAL6R7wJlaEoXg4SvJSVFtgmjKuZg7IsKO0/231vtEghC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvDhCRA9TVsSAnZWagAADGgP/RaTxCSil/DvDowCr2/x\nVC5Lyw+R3zrDjjED6TVGfS0EAxSXfOWzA6sOxKtpQvqQwG7P0XWiUcHK1KJ6\nq8X9Gk+5Vo+5o6XKVXMqQ2uW1GDIq+OJ1lBt1JgP8l6a7vkmC/kUUIAGG7ZH\nmHn3Lt5qMbING5hTvufkQH6/dbGB2t1fn0W7ci4I6dML/QwetDkLNcpow6oq\nlOXea2VX4PMWlKYlwiI6Xmyl4lGfW3ijwy/ASDYKxvXFmFAfeGtUtz0gYy97\ntnGA1GR5L5wf/rWfiApDOscxiEWM+8E3UX2RgXEQpqijYp8oa96NkG9BnLDY\nu2c/IFeCgdUXUk6+Ovo61YtgHEASL9iwI1+OcW1oe/7zaitrjFlV7fqyPdwA\nKHjHQjTBvUOVenQXSkLg3B3Y77d9gB8ZdKyoiQt1yUTBCEEy8E2PKaB2qSak\nzbMXQy7jXcj48W8qM6l+NlTJ/e8lVzFEAMEmkSgYBuWubOcTc+LyjBtnlNlQ\nurEtDv9dQCX0YT0ONUoRPlRi00OlY702NYt9Cvb/qw1iq12vX7X05J3u2SOg\nUI25Xa/s15Pa/TFXA/QqaKjfzsRFa3Yc3hQhdMjx25K3ePr6Q9KXZ3H8sHls\nWpO/dbSWU6a3Ti1ioXKFRdkv5eq5LhCMLK/z6G0Lpyv+LHYHuL3bRulQiN5A\ngpsH\r\n=JskT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.cf800124f.0","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/shape":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/density":"8.0.0-canary.cf800124f.0","@material/checkbox":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/typography":"8.0.0-canary.cf800124f.0","@material/touch-target":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.cf800124f.0_1597960417051_0.0412424116395389","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/chips","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c97687c21b15e4b04dbfd9aae4394dbf16b95810","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.95e4eeea7.0.tgz","fileCount":83,"integrity":"sha512-sYhQ4FrlFtj/O783cFYBdvsGoF9kng9/FC6F2RVim5SzgZF/j9W1Iy5/fwJwubIZ0MpqzrRkA6GFT6Ee8kbjFg==","signatures":[{"sig":"MEUCIQCfiatMaFTx3YIP551/GvxCYI9S9eIeEWYqQi2UzU7x/wIgUz29gbKUvasGNujMn0SW7r6NiUMMRrmaAJ7SncMdHtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdoCRA9TVsSAnZWagAAT1EP/1NOfE6uzLvv73FytZNT\nR21YqbKV3dEU3/ER2uCOfXIlNm7IN1iG0fxuTWdrwfx7C9JOj4Imkvtilbyw\ng6R6vqxW0/tnn0nfHnhJFXq9KyEvi9ez2dHAaC3AI/RBVgyKAIfQYim4S6D9\n8041rcRNr+9aKlAU0VDG7ioKHVGPIVS9TnWDMEHdI2dPF0bA9UoSZZ46rAlT\nUmRpTB5fDFSVvUA/fZzRIdjpXt3Uw3fe/v8XSQ9xv3oUeIynqtF4f8jRRPin\nfSrwi2wvL/GjO0uUciOWEc5/nR2+XO/I99X5vdjQayullsRdlse+2nIMZ65r\njCN+jWfLvZv46TXxlSJvFephzqBcM7zGpaBGmf2n93FBc61pz8ovA96wOJN4\n4PBnow7QbQENMB7uCa80i/IOAfD4qjo5BjpUykj+CahbuzByXCwXPdvAwISW\n0RQe3lkSo8f+iU9pAuNGNVQ8RFT0qYWx8V10mihNaxsvef5NHgGnXZik2tBv\nvKYIIflh55hmqT/easLKEdhZAQuYAE7494TbKJlfaigjnUVifmxXIEPTgDon\nDUnnQMMONIi0MT63noc6M+k6U9UezgqFN+DlqjgX7lcha0xTrnceLybSRraU\nhwfL3UhMo8LZkqIDJtykzCPLXB1CvhqirA6uHRHswdcOr9y4yv5QgxoPT02f\nDs7b\r\n=h0j5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95e4eeea7.0","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/shape":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/density":"8.0.0-canary.95e4eeea7.0","@material/checkbox":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/typography":"8.0.0-canary.95e4eeea7.0","@material/touch-target":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.95e4eeea7.0_1597966183527_0.23988594676037933","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/chips","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b64fd72dd35111fdb95d7a726a47479d045d0b0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.91ab1c62a.0.tgz","fileCount":83,"integrity":"sha512-N4MUptqcqy03K1SpaZxGaEG1sE0hdbap58Fc4xCEXjWNpd/un63feFJyvr/FhaocuehWyQJyNNDqe3bhUfwL4w==","signatures":[{"sig":"MEQCIG5sO122Xv/5FBqwsi+Qd4rz8j+6Bccw802MTL+d6vbtAiAWKXFC9ol4v7VB+bdPPwBT/ZLe/GEwiLVxmaxuNNYxpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":955932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+RmCRA9TVsSAnZWagAAoE8P+wba+m2v8kFAWT7zZAO8\no5aXav0rAVk/mH3+sVWqq+IffrCIABq8fXXxawEoWVZSM+JqDyrOcBogEI3j\n/MQ3THfSBSo0w3S7bJ8PJFX8vHO7vH8mLFE7geSyiMFHX5vo+OEMbGnP2YKX\ngQ0U92Ax56O4bcKH6MUhN740PVJ5AygFQRnIxKgjcPyPqN4iYQeNT14erHTr\nDQ3mbk1cf5LMyLlDfpIGmY3PMT0ISKq07fcOtx5x6qeD3LX9A7esagqc8Utn\ndsEwhhLfamDkcN8CPM78OD/PjqJTI5QCaB4isZgEDqqDiVTGVnnrPs1BNEmH\nGz5J6vhH00sfspL10kT3ZiNVhjjv/H8OfLU6rpvWnnHgtMBD2O/rN6nEdDqr\n/FrNuU9Fz6bzIlNOoAvnO3GXjK7bsj4A3rb+QW4l0SpqlSFaY8WMJfGhmPvX\nrBGFfqy1g3jkHcayWA3M4xiGwPQmyMqlvv9zK6sgfasVrq8CV/55A/Y2FreQ\nhJGusWFLRQNhWG9d8lh5ecC7GJNt84RBN4dqvUD9iRmTv/O+ocN7WFdlmAJa\nAxvfBCGyi3nnsnLL4lonic0G0RTW6IHGf980PmpBFvnoV7yRCDvD1l9q1Sah\n8OgygCSjpbOMPrfdt9yWUqpSdY0/yhaheCr2BbAvLcAqe569BqcndWbuGTsO\nR0eX\r\n=1xUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.91ab1c62a.0","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/shape":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/density":"8.0.0-canary.91ab1c62a.0","@material/checkbox":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/typography":"8.0.0-canary.91ab1c62a.0","@material/touch-target":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.91ab1c62a.0_1598022758355_0.9653481770320622","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/chips","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6e6106ee5fad5babeb454a01e2aaa46b6d5bfbb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.58eaa9f02.0.tgz","fileCount":83,"integrity":"sha512-hxzsPwmcAtntD1mFOxaxCtas0UJ9c0HqqAtYoAdh2OMhdmUiMbR5BvwZiZfOV9G+u4UgcPZlyHzjW5rZjVKvmQ==","signatures":[{"sig":"MEQCIC8V+UuM1zjFa3yvBKxc/gomLAakHRCdhrlOT6/XTQt5AiAc2T+IwiqP+JXH50WrBI6G+HrMFVuqwz76v0YcHhoNwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":957638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCgMCRA9TVsSAnZWagAAqyAP/1FXY49OTZPa9Cu87RD0\nbKZXWwNm5oqTss8wFn8wQvjYQYEtI3ZBCtDZ6QUmptsIEGqbsl0mcysX0Q1l\nlywjAxRc0qpBPXCFi9yV0Z7tZfYBUfcJ7U0PmZRUnE6U7tLngQhOzil6sod0\nElpcrRRaF071o61O5nsbsWmw5/y2YlZ0FoTMHeHznG/Jpdshbu10XyGzbZjj\n1IQBYw8ka0UOpSIeeyGlI3Oyj/7LS1eBempawBmUIgFNIilIwsOdR/AM7mbX\nu1EO0PO4LZsU4thnyKV5A6w2GQaRTQujFfWgzoe/25f6s5b8MABLH4fe7oYy\nae+TgYSnQ1YN4MKI0PmZMMrS7Pb5sNj32JoNpbws2mLCnehQRdb7jJD2tWvY\n3VUQdLKUek2a6OYqQf2405Dlay3S7kMvNGBtxxTKoUi2tQjcVjz6aGrkHTkR\n+I+oPjkixsnjqcox9I6uxbK0RdBEAasEVfAdhbvintRBYI+blWGODL0nMSWD\ni1/sWutWmduy6Dlc5kI1X1HMto6bHArVjtAjOp8LMBdeB/MBkZcrhyGExgMw\no1ZWXXU8GiQXuDY++Yf1RiINuSrWR9hdVo4S9KcDt58NPs04LMpzKsI6s7N2\nXLk04B0BDP9xVlxL7UrarBY+36TKdVvGzBECYkgBya7nJouSgbzSI4+43TA9\nyQ26\r\n=Jryb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58eaa9f02.0","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/shape":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/density":"8.0.0-canary.58eaa9f02.0","@material/checkbox":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/typography":"8.0.0-canary.58eaa9f02.0","@material/touch-target":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.58eaa9f02.0_1598040075698_0.9091876228981097","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/chips","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.238216fc4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7799303f435447862d41e3e6906926f8cedf2960","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.238216fc4.0.tgz","fileCount":83,"integrity":"sha512-g+tLED8Gq8lk2BoNUMOnZvT4vFGzrl8S1OCzlr0LiMKn1KHXe6JQOQCOXn/I6Klw/mFKkesbWQNxm2kXTQJ4QA==","signatures":[{"sig":"MEUCIAWKOgRRfDbxZk4zifxKoVxtrVZX91I7M3lnejFBL0C1AiEAuicnXP/RvNIMhlHPQ5QEYW+kiYl8ZCvpcf2bgazZBlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":957638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+4CRA9TVsSAnZWagAAneoP/iFNdzd6/w/uAd1FxZTi\nsZfghPQ6ZrkReZUqzA5nPf4bK9FDkX6yYZL7aCTdtEYvwwnaj6QRDSFgOTkx\nQTP1BiKnzTpYCl2C2RS3zrJuzFF8CuQlZzkGMh8P3bEO+DEzE+LW7dmljOVp\nzsI+1bgb15qC04d2ctRtOQPEBpGnVnFMnl6UJi2yL8f8NzHwEoD2S5x5l6VG\nQjB9wuqFOPzB7jK1FIUToSMX+JiFcZgt5OOgQZKRClcpi8arAT0KuKlKY0P8\nrmAtGB7ZIidqCjQQUx53k6OSBaRWcGz+/xh2eqB+hXVKfnvCkfSjzCxHDcnh\n5X9dgBZbVr8wenUcH2r7ghAUGR0d+9G7ZDrmsKlPD3qBAqMatT0Ce8k/dUAT\ntIZv/VKd6nrKmx3uQSPFvMVbnjQ2vSsF/mKg/SXbLrRayqt3T+i1aWBVzVj3\nZCLple/qDe1Fz8+rA1Uwm7vc+x7kUTaneegvgxyINOc5CptLp4UrM3zfNnOq\nKxCblQ7e7OLxItQmYvfOg2lsJYNmbxDT038yd69RaIHgqqv+1eBF7mof9wMV\nu7JLzF/DiCszNBRhpjPFscYsL47qH2+YrPbEYEA9m712JMrhjPm2rUapSIxB\naNMYeAIllgW2Ajw0ItdFLCZJIRSmS/dzRtXVru7oB7W8GFsK0EjLYpkEAII4\n2kIB\r\n=Jn4r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.238216fc4.0","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/shape":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/density":"8.0.0-canary.238216fc4.0","@material/checkbox":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/typography":"8.0.0-canary.238216fc4.0","@material/touch-target":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.238216fc4.0_1598283704088_0.6060063952478894","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/chips","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e731428201b6aa47ef410b4a66bb1f9590a84a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a1c65593d.0.tgz","fileCount":83,"integrity":"sha512-mpi71/JqJX30RYKtlZKH8XBxwN26YhKiIVK45aPn2riBPxsRh21sFx2lP5fUdWluHfV5Eu6JuOUskn+7vaMOeg==","signatures":[{"sig":"MEUCIETYvjc+5qi3S9LHy5LmwGV/nLxBx56gBsbDYAWnlPKTAiEA/AImoi9Cra7hGLZFs/XRdoTqm9pFnxQ8ZtEX1sydDuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":957638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH/KCRA9TVsSAnZWagAA5osP/1ta/lHVZsNTip+rcWmS\naeOoeKBtlcEtzHH6a82lC/jSCaaL6dQyGFYMGNmFql9CTRBqKvAf89DBqmZW\n+Ed9OjEh8B4dB45uh7MNhG+UjZ8YS3kckggdGReq+XYZ1LjpftY7j25oAMba\nqzP7hshYKHPaG9bSYecxLsI90bsQncie/EErGwWvOHCa+gDNc/DSq/xx5SN0\neGuIbd/b1faRgKDT/m3VSJTPUf/0HugsZMv6oaH5mVp3bHyASI1h1yG3Q6LI\nSfMO9+283t0RUNnR5SY2+1G3rN9YZBV3RqYD6hoKoKGwFlRUZQXEvE4SHfG6\nHiA5QjCilUDfe5FlTe4BYyuLhUNfv5tL5w6vOVu+oUN7nDHhw4bBXAGgi8QH\nOF7u5jsJB06Hpher3LkNgDsV7e1WW3RyWFFFHb/l5ajMHAnHmoj1pQ3a/mRu\nLWJEuLHCvudjQw0HBHeZz05a6rGWjI2Qh1Qxf4Wjbhx3Qi4BMOT6/styUrvV\nJhhOgus2f/orFeNrCvqojEjD2IP57KgH3sjJfrCaZEjUG8HeNqz7c7MknZb4\nV6s6vk1BKdXjeCW06BaV/0w0a+pwbgfgIfCul8uChrmhhMCW5ELThKOAzlgk\nVXK/bduMmu4DdNvPutloaASbHneXY1L3BwQyXQ89n7hOiw1RM/PC9dQ6vhuU\nwI+B\r\n=4LPy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1c65593d.0","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/shape":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/density":"8.0.0-canary.a1c65593d.0","@material/checkbox":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/typography":"8.0.0-canary.a1c65593d.0","@material/touch-target":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a1c65593d.0_1598324682040_0.5866311424285329","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/chips","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce06af0c590aed16c59786c05707b0bf7aa5cc3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.708cc09c4.0.tgz","fileCount":83,"integrity":"sha512-vdnLFAlzbE1rJhPDsLlzrLbZXltTIGuUZ4GrHdxOYEFnTXOVt6T5ZkWldrvRGXn36Z7Mm7pHk77l6VDlODraeg==","signatures":[{"sig":"MEUCIFnEe5ZJspSGFN48gs3z3JHGkV8Uog99Xw52YoLnK4xVAiEAgLIy31KgU2I6jGBwPrhP0BD2wEuQoh7l5TeEo0EBLds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTTeCRA9TVsSAnZWagAAV04QAJKfFr7tUW6ThcDKQpVz\n7meFz0hQgPLcsCvIumxaNY/MMGtmGkG6gD60+FwypHCwueE8dv1B3wjU3LnE\nijSzNK0qufVkWU3qRdLcIn4WU7H9Iof+tM0Eprc8xx9s96oIYRjXYoFcsFv5\nacDeIUsIeNhn7K4NTRuRfv/fJ1YNGib2+UwAm58gaCzhjZaiJKZMChPN3VTa\nE4H/qK2WbDPFj2i+7VDkliBOmNPYaH13hzt4UazuHCbAzuWe8ZjxFlXmsjVI\n9JPc5rnWxVLAUPl2epVfdsKidNkgiY2c38aIUzMEv9IFzaMAhjufCCue2xHd\nIB+Ryeqt/qxMhOKzZEBNC9iH+hDMhqD+1GfO6CtHNFI4fs+Xz2MGs4H2OXIx\nPdNl0ZMx/sOyNFqH98rp6Lrqdhb/9oNPRUIbBiFO0Wys3BYCFNK5H0K4FTdb\nxhQR4Zu8MkpM5zuGUTP19fcT3u3qdJbePOfL6ILOx+qtny3PLNCN+fp7w59+\nYpjLQ1BaWO9leadqOSyK6ohN8TfyfVk5aCqIcgNuxO24p6CVxQqXY9/KDrQU\nPRp8vVO9jsJ0IxrbvT/NUAZ6xV4bFgPv3HH7gkAwtHlDlXKnsjscr5iEiAIh\nEwPQ+ZC4jLgo7A+wIgtlWY62s8RdvgFviQo0P6Lv/yfxHa8WvVR0WC+C9ePU\nQAF2\r\n=AldY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.708cc09c4.0","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/shape":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/density":"8.0.0-canary.708cc09c4.0","@material/checkbox":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/typography":"8.0.0-canary.708cc09c4.0","@material/touch-target":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.708cc09c4.0_1598371037716_0.7418553398014465","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/chips","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e35c2c9088f2d7db8986d6da1ca6ff0eb4c7d35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.19bea2ad3.0.tgz","fileCount":83,"integrity":"sha512-FjG4qFPSb3p1dMrr4DQvHKLq2yO3PX4j7ekWtRzIbORHkGqGEoQjj8mTFApVB9h8GXDnXuaJ5a3w2pHP+f4xgg==","signatures":[{"sig":"MEYCIQCZzZoDJG9fjg7Y68m2L/86Mxux+Q/9Ibj5MFfHN6mTUQIhAP48NGNhmP4kygcu8gG+ekEpOy/CNqWpLogGB8Ne3efC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7qCRA9TVsSAnZWagAANmYQAIXRTHzsR/pYEN94WCHm\n1sbQu801xI8mNa2J7loPGcO+3DMzX41LUxxHnC9iCipzVI+zhDOVe9NJ+6io\nPsCdc40Yhw+7biYqIOJrcEaBHBv749hBtV9S5Fi0AXmQiYLIETnDTRiBFTMb\nQkL1ZL1kEDzfGkOpPSTpT1VoAo4CmMNo8pM9gp1SXf2o6YDykNaHnaW9vvTy\ni2eXsABN35UuE8Dj4wwZBe/gTz8m5q/X1+SNo876AFE98jT4q2JC/ulUa+Dy\nroi97FeqLUG++/iMT3fapnsPwMuL1BeViqK3hH70Gh77gDHmIbPJfxZTg3DM\n4ed/NE1CMPwZizu2EbTeqHcq5at6lv8SVxGSubaAWpSa7G82ZPwoSAtn5pMS\nd5Hsu6wH1/WfiuTIl9MleWdZDBn/rvnsP5m1UT4ayZ8xNAXaL6ExNB9xo38o\nSLl4lBUz/IW9PaDih0GDkFTHwC93SRGY0vXtuKB7fSFquh9GmvK54WROGFD8\njw+exKwyAzvhJod6SpEptcz7uj4EeJb+6f6MF1uPk82SzVaVTpCn9aV4tONZ\nYr3xI55EBbzKMu1245kRfPMrhwLGvIHnOD2NtLdFjlpINp0Udfb5BGBSGuqR\nu94xsiyJjr1jC4SvZ9ErHINwkd1RX+5DGCDF2lIsyx+qYIHfzn0ZXOv7VrJP\nkCeL\r\n=LeHU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.19bea2ad3.0","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/shape":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/density":"8.0.0-canary.19bea2ad3.0","@material/checkbox":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/typography":"8.0.0-canary.19bea2ad3.0","@material/touch-target":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.19bea2ad3.0_1598467817598_0.47648739757814873","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/chips","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.911014711.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c6ca31c7539ad18c04d81e25089c82058e59e6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.911014711.0.tgz","fileCount":83,"integrity":"sha512-M+NJuwuI+5vQqedBDSS/nhWnDYRPNVljR+fHLsndApqIGYLSfdxU3yf4haFcwhaG0A/aCJxpp3n5BIB4po/0yQ==","signatures":[{"sig":"MEUCIGlz7SRdADo2B1ib3za+EayC9QDIZ3ZuCIrNVZ5jG0b3AiEAhZ6TBDZiohE4TaDlk7zk2H6TzKeYNu63pRiB1ecn1eU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9qhCRA9TVsSAnZWagAABpEQAJ2Xemcc6iKw+Nb8wLIZ\nxil4+911pzqgXYgj2U1SsyaMFZVkqHGDkIISoKJLiLeD063VRAX6uOa9Hqrx\nApIc54cbZVo+M8ai2fmD5xKaPPISGfhe09DU/wrhVcaxlOuxkMq6zntBZBmh\n54iCZTV/G4QQ4zvRO1nadr5xal+PwxUJnDDUStYq+o4ArwbKCSrbTbaqoX+r\nbwoR+gm+iO4i86caa3Dmhs1TbDjnAiLHHUcPpglsLSw1M/fwRLVb6XDp8QVe\nU6y+HSdJHD14+czykppzHQGMUSd2mjFjqiuWKydCHcEECVTB5tLk862olMq0\njOQQJpxHMAIlWZnP0b4WSrNDGfKGbA4eWTAladh7+SV0f4j5XjGRSYnNCOGx\nQyhiXe44neoCc8zZW9TwqMVrxQ+X+FPw6urJNDJ8j5yJ+unYJ9os6ZRHpygO\nUI0IfmkhIwV9v+7BBBW21Mxif6PgEMU0qrlaemilMAVaAeVRbWR5IycBPp5g\nD3rf5bdEZrjii/wG02um6E72Zc0Hm6+eEwsQhr+pcSHFqBBrZiuNEeDn6qpS\nvEUusDuExZL1JtEJqoeXXfql6BPxEGr0xxRO6xEvbl/aleVho8mCvr21AEjl\n83KfyrbfcykITw7e9z2l6b9+VdpSXKR4149sMLOpfZXbxaslTHxdz7RVhmBJ\n7EtV\r\n=5owy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.911014711.0","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/shape":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/density":"8.0.0-canary.911014711.0","@material/checkbox":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/typography":"8.0.0-canary.911014711.0","@material/touch-target":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.911014711.0_1598544545283_0.28426167920935685","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/chips","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4348781403fa2ace09dd789ba53933f01274c34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.d3387f54c.0.tgz","fileCount":83,"integrity":"sha512-wsaeT5YfYbgn8MNVg2snvEd1GroZ5BPna6KvtKeyifhCAO5Su7jb2tft0m7USNRpsWX+FbBxbFG5yPZlYxy++A==","signatures":[{"sig":"MEUCIHVOKlL6iAyomh3J2EYwsQ0KFQz9hY0Yead4jcssnsGZAiEAkGxD5YsnrIe2kxqC8CWX8xT9JdguXBcdVXehRNAO/G0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhvCRA9TVsSAnZWagAAw30P/i2w4nA6vMCUmm519pBL\nn7CR8+KQolpRv7RU2GHs3FmReY+eRPaqpC+PeijCcNqGPAlnc5iIK9hXEMHZ\n4nRRZWkpfBZS9GqetHUg3JrvukEXiF2oYQ0uBq82N0AYBgZY4+PQaRR1aOQt\njKIUvw9l7uHCM+YL2eMYvSEuVoQrLFe0OGC+qinlG0x9/IFcpGCdnSUyxE/I\nej5I8wP8jzjblZbtsBzRWanbUvbTmQ+nxz+Yv9lSrgxe9H0feOv3gfrdZm+4\n8X8CkatiT3fnvDUCR2k7eCEJz9Pj9zYy/dsnstuy0CL5XhUTxiCVYsaePOr9\nu4pM3fcjPucIfRiy5a6U6haByfDIb1He7jmLX7yORdslXyH0pfoOxgCkUXYp\nLVeJCLXBbI2DXMlxgKe03gB3JXrph9PYDlHL3Li+Vaxgd9sgIbMA+L+kG28D\nZANxeefQxeMvBVJUXtOAQQyqY8SkRWKZ7z9OIadilOlsMEIDeg0d5hwXlFCL\niD21Nm8nMzL5uI+gWOFSE6oLeIQL5uxLRJM0Vuq5thVQLAGg9FC2Q1lvUyOi\nJd66eh05NlWbHWqjZoFaz4xX60nVtDwTYYELmNdwPPA1fVxZHOX8sqwgKylO\nI7YHDzua7Pt4flM4iYC6xqTrLvrm1OhXVmTQ6GK1LVOQTgXjJ4eEwR3/SIm8\nI1mV\r\n=ilsz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d3387f54c.0","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/shape":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/density":"8.0.0-canary.d3387f54c.0","@material/checkbox":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/typography":"8.0.0-canary.d3387f54c.0","@material/touch-target":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.d3387f54c.0_1599166575111_0.16276203980152038","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/chips","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6727f90a276b4df30d21d2c568470a73fd68a70c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2ccf996cc.0.tgz","fileCount":83,"integrity":"sha512-ZnKnybV/CkmACRLXEI55mZzB3CjZ8+5LnwOYHL/lrZAMmJXPC0tfyzUzz7kdD8Wx8/vgCKCIXDuOtS+vmFnx9g==","signatures":[{"sig":"MEUCIFWLxESzAEgojbO7sJzFBElvnmJF5tKJCReRfzBR8kzHAiEArZ7D/l6LPL8VCdQr/NPe/zIZtZ/t6EYPfPFg/iaBeW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVipCRA9TVsSAnZWagAAmOQQAKO4m0PgNcB1bnHRG1j/\nEXcc1Cj/vr3QSX7OfAm8FuAI1GioaG4YZkicW/FDUAJRelVJGMm8kSU08785\nhLp9df2G16yoM47v2bN5Q20nEsyA7F8ILKcEngUoZItNwqumcfFfaIiHJLZA\n5QXScAn39OdfsACi4bnWO4kb4HrDYzFXrppOVMpn824pDoSl6ImWRt82BR9O\n6vq0UvpAWjRgROvU7OHlHqq5+n9j+cK44jlIwvfTd94NeTQQaoduPZgmRDiB\nJsQcx4xm4gDerZyzZWDu+/2QBZqbLnVQ9uFMCGqOLoH6zPHiZTxk+84WTaKc\nczueRK+GevGOcDr75/bf0uCe2gjktOUfuMJS6ZsQHOUe1jmf27nM1+Mv2m3J\nNwXlth0cD6qS6w9uvv0buXbS05EupZVNu3De9AoMABsemDq5pDsBm6N86cVJ\n7kEJCKO9PYL4rWl/NRxwmYO/UaB8JmALVdqLfO0EAWdcFoRuPHgozKHmoiS0\nEkIVpIHei3+5jSoEbUdwrJVf+9cvNMlzfF6iYwPHYmq9jyqMdJtpjvtI5GwB\nyOh99QWETrxXItYnIg8qlAW70sDdueA+zOy6YKljqH8dWvgZ6VN9VFR9Qh+/\n8a2p9QgPw8OO/L7itgIjj6GO6hnAccWgewdBg1xm2J2mJAy5VbSFdwGTq0sM\nfwZt\r\n=aaJG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ccf996cc.0","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/shape":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/density":"8.0.0-canary.2ccf996cc.0","@material/checkbox":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/typography":"8.0.0-canary.2ccf996cc.0","@material/touch-target":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2ccf996cc.0_1599166633254_0.31363710190246796","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/chips","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fc6daf2c58dbbc1ab3dfe56404c10c366b50592","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.744bfe5d8.0.tgz","fileCount":83,"integrity":"sha512-O+pRPNbfmqu7ncBxO5LImcHQQRFEqLiAmRUExU2Pz5z8KW8wURXLqzmU4l4fm7IuDf0xdyugsnYC6X3OXSkKkQ==","signatures":[{"sig":"MEUCIQCyY2RRPrlwyTnqShKeGpKSZ3c4qDKiKNMPr69E9P43jAIgCjhSJHqbAJBnXriOxKxxcFwYIsz7FYY05Oe4QhqZgnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjHCRA9TVsSAnZWagAAg/oP+wZaQWzWfgftEI3dlUD+\nloptDduNioycXF9xnc8vH8qqrcwpyN8uxPKe1BLwJi4bavVPgHcXfRZTYqfB\nmgnyAuA7Hc1nth42NACZsYXY+vD3ajWT/YJxzCiL4XBixJuWtK1he2GvTlzF\nZatwM0yQuPm1kP8sBcDduyY/ukx6lkEua5s/oQksY7KAeocoFwy70wxmQQor\nX7o5ESaz/eijSidgLAypRnUZ17n2Huxqv99nNz7j8tRx6u/9GgNjSSB/7n3P\nUinA1GbNaH3oqmOLO2f2JIIUHr8vlSr1oVO0D2TaXA0kjLQ12yqJ3YrxsvgZ\nJY5IGxxDY6EsFQ7IM9HMd1mwjlDu7I/qcTUodZc6TWMTuL05lmrRV+K+4o9R\nIPbJawjpDcldeL1+23snwS7MG6/7klppbdnQ/Sz6wojJ40Jlsu90G1iShn2H\neYoJ/ierxbg+vLpvHRDi4j8yERVJ5uZhImytx2u493bifbSet48JzaJ1sw56\n9DsotgOVdC3kcXG2sgzT4BqtZQj45fCwpvGUL16chx90L7YwPj8czOEGXjTn\nhGw2sUp6ewtN1pLT5ltHuRXYXlkQDHumiP2eZcqINhcvK9PyfF+X+W1BB7Un\n52+otg2JF/FsOWaJ3wS8YtWFNzDsFR5KlFG5fspC/Vd5hj1xMBFePDV0YOLW\nt2Vv\r\n=ae9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.744bfe5d8.0","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/shape":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/density":"8.0.0-canary.744bfe5d8.0","@material/checkbox":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/typography":"8.0.0-canary.744bfe5d8.0","@material/touch-target":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.744bfe5d8.0_1599166663104_0.7065131527555437","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/chips","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14ce1affa74013507fe7874de6bc194d8ae8fc6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.78da96eaf.0.tgz","fileCount":83,"integrity":"sha512-8icuLTUH8o3G89TsPmnwv9A0J5EWbnZZx2j6tvvMxOMdpJ495ncKnhQbVnDK1fIjH36KzpLOlAesVirFU9r/xw==","signatures":[{"sig":"MEYCIQC/Ig0YMUg7/jnz3MfWsBljiGa5/5CyuGFBSu5ixr3K7wIhAM9Y9VCFL3c7nlX2zuItVUT1xKYvRqUbyPEAbaW8GA9j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9foCRA9TVsSAnZWagAAXXwP/39Ber2rIi5Yj3Q5qATP\n3fMyz4l5HL8eaWKE1VTu3F9ag+iIuLuhDPRhLGoffCasDeQ+hrcGVxbvIPcY\neHrVoRpbDokTyDiws/AUiattB327aD+cyWL+XBcm6aFSqBEapzt21xZTfKg1\nXfX2/JQfTAuamVhqiFuiJw2KtR5dAsBg+6R2gaYTsgbbeTfp3HS6+TuzibBI\nknhIEiRPCqi8IXehUQ9HvqWepS4aKdubfXETNzT+efulSN3oPh1G6I7SlVkj\nMZMfQi7gHuCFqr+mUpDoNvkM2YcFQ1N3BNMXNKUoZXgZ4C5MoAGBphLKEyp6\nyXgz5aa2P5xXQt5tTcGNSQM+lHaZdb8xk+YShbgRuEz0hns4+CtJVMCGkpJq\nljZlSxHXK+OVumkYRHWPoOVgnJ1AEOrbhybhjlJgQWUrbzlkhHoGZ6xtZLQ3\nKzpo2AZCFDJj9ZDDe+19mRYyB9yozwEMyvDgSFuGmxaxsMVLgRA6rQOSOrf5\nXDic9zKGTVlqveoj/Kc9QHNcll4tMGw7zcEsN130pTPxrr+d/5d4vM4qvsZO\nBBVQdh6BXcdM9AvatsO0+yqH5jMx2vXlo9MkBpMcO0ah0vO+7XPh7D8bYB8i\ndkOTR5QR85lbe7S98FGJIVLWUFsiksEA6FYWQwv6AdXm/j4I1Bd3hZwIGHQ3\n0vQx\r\n=kVKV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.78da96eaf.0","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/shape":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/density":"8.0.0-canary.78da96eaf.0","@material/checkbox":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/typography":"8.0.0-canary.78da96eaf.0","@material/touch-target":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.78da96eaf.0_1599592424169_0.033532289376216884","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/chips","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b652bebed0c2d97eb1dd967bb025accdcee9d10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.b0ed593cc.0.tgz","fileCount":83,"integrity":"sha512-lfUWhu7HwNJ1dih+qTx03p4z6HFRuDePNduBgMi2BuRiotTiyu1R9a9o7BFFc/29FJXZntmnk/TCEjRBvxStag==","signatures":[{"sig":"MEYCIQCjZuoJUFpLhbTBSsPb7vAzBASu5371+KY0S7f31t0kkAIhAIA87UYYHacr3UKbPPSd8MVTrVw/G5KEneAavlR7t8SR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNXCRA9TVsSAnZWagAArycQAJiOhPAyLBnNaxzC9dx+\nqfEUi+TebQcP0ulY0xX54XcJ7eOY+ukL1yRMf0VLoEuwleUENdKY8NIdXeb3\nifg5lMXKPlrj9lZKBvoBxD6WueWanE4nMb3Q2OCZG5SifPGJyxrI0e7d96cY\nkn1UgVAXSYINrh9ENmb/y/oXBAK3cx3vauP5TtOzpGCFYpb/mLq1Pl8BbFnp\nWBME8zrNNsyIEy4F5+BLEeAoy56heYzVADuwim3XFrWlsrW6MIa0KFWCggiF\n0AHWNm8SFoquJvYUn4VhS3Jz175rJ8Au7UoPBgGQkUghgoUMCRxfzpqa3hRD\nZ9X8M0qciz0DQCDmmhJnBlYkooIr6wbw5mYFYGHfQpkDAbGmq7e3/STd/eBk\n3AXNXV0rOe00s8VPr25rSo+7Q1nzK2+3GkljIjQBERcOmUuXvRjH3DwwoOlV\n8bVYZ07LtRqhlU0nhdZ21NYx9bfv+FpdpM9yHgNmSLjvvS9kmrUeVBVR8mBN\ned7JDUwFtqCqhkiZZRXs2WNdMqp28klcCsYbCuEmP2GJcbLFJjsrr4VpZS7f\nmdb3lSJtDa9AyZZu83bl6dA93d4FzMGhecwgbjBPoeHt+TalJMKK6VsSjCSR\n2tqHypixxdnQ/H51DZANcEyHH7h80MyOjCN9TM9IH/E+38/UAzz7ZWAczhPC\nvGVe\r\n=y75p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0ed593cc.0","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/shape":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/density":"8.0.0-canary.b0ed593cc.0","@material/checkbox":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/typography":"8.0.0-canary.b0ed593cc.0","@material/touch-target":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.b0ed593cc.0_1599632215555_0.31334402690091423","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/chips","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdc2c14619c62e9dc834b4fd7c51131c67979cac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":83,"integrity":"sha512-d5oVH1D4qxfUEkLXbSj8rdp83N6U2RZKLsJprlydlF7Eo7RLKcWMTrSLOf/W4WwG/Gt4rQk43GuZkX3sIXYjHg==","signatures":[{"sig":"MEYCIQCESQVaECznQqiZkh0Xhh2wJ1uQ2RjQe7Z12F7mecFKdQIhALU7IUctlDR01goBYT8UoxnvPseZ5/P1Poc+PQmuGC/I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZtCRA9TVsSAnZWagAAMBcP/0ONPg1k9x6l21EjzieT\ntVH74LBxHjdXgzR+tOiz+ecW/OwDK1dWb25mHyxHNNI1/lPj6W2iuKRLybEm\nAo2IE6bs/fs3NYJbsp/lTCR+Yocj/WXBhDIt8fDP1VgzVH5dTdIzyH/pt+YF\nnbFcBBlGYdq2fon5HvR85Ii/xXuC1ALGhK3kGgRjD6pKRgfryGoaP1uHGkDQ\ngTYfZzfXp7E9de9AnGoKojsuaHo5lezCBBfRGVvCc651a+yPKJoPUqdW5gnv\nBWx9FbRDl7Zx/QkZTzVYyscRkfUiRXI55lJK1ggomFDsjm3qbe5aFwhnRQ+k\nxtOiUvMcSoTVvD+S0kGfzT8ikNNNDb16R60MhczehbbEPVqxvX3V8SRtHgf9\ncYTTJHufucUGF/qNw3Uyj//AcUjqaTnDeA8nELuFoTkCy/x7Hb2f8cMgV6Rr\n3Jxya2bkiLMtMrjxUO4B6Y4i+vDVwokKYcwQYdar1zmQhFXd41gMrGbgtdA2\nx+/iCkEpdbvD8Ey3pUHekQHWlRz6Wp5wpIXwKRVRDIuA8CrYPYqhJDU50Ghw\n6ibH8WvjnVJuUm0CulCd4CD7+dkjx+WZwko+RhO+wcmS1KycjTiJO5TO6pUQ\nucfLGIqKXowIDqejbCVjMUynUaWIj3GKi8ANkQPQx2PDjJt3wQkbwb/wfF6p\n+p29\r\n=qFY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/shape":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/density":"8.0.0-canary.85a1fa9ea.0","@material/checkbox":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/typography":"8.0.0-canary.85a1fa9ea.0","@material/touch-target":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.85a1fa9ea.0_1599772268808_0.5749346221058964","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/chips","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"999a9f2e2a361f998f7df05fa3d2888c9fbe2f71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":83,"integrity":"sha512-lzGxju9QaBY6pX5eh41iG//1+bToqDp+7AMzQlHB/nAI/4HuSfz/9knIf8yjRt5E6+BP/y2q3z1jHwcjFe4GUg==","signatures":[{"sig":"MEUCIQC7vNINWJd3PmsUOWzXxCKWW4gOapFkJwNjm6/1vY/5JQIgIgWHO68f7IiXfzgO9I9lJWTOqRJdGrwGNtZWf4MYHqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7j5CRA9TVsSAnZWagAAZj8QAKCb8HKmGM50hBrsimcl\n6/JDjD05FPSOoYR/KbbLWzy+xA5zFwlXVypKZ0yjAjZDNBxWlN9bkonrPUUf\nX64eNN0uyS41TTBn/UpEJ+87omksmeoSl3nmudpIW5S3mJIewyahkiUPTmfc\n2JLn5jv5LtaX6NEM56zaU9QS/qMsb7qTkMymvmX65SjTwQK0zsBnhUNUAhmp\nBhAt/wBlfchN96OTUO9OXuWnX5TWnIR97nI+qkBTcfzxF26vZbr6nBH+aqoG\nQ0smdYS7Fq6mYS6bbxNMsYWiGS5MlYwJBPUmDgoQk/GNW3wtIzGcKH49EnTu\nc+lQhKLvIh3izINATtnpJrwuoPTk56KZXieV3TpLxnEr1yny0xeEzV55iVa3\nQAfJWDHe9k5SkE7mcPJ3W+N08lHlJucEOD/Y+m5civizP77P1/NygyQGkkuL\nov7Lcvivvx7fDB1tyQB0EdNkHByKYQlhfZFshXXNxT8YBvk53KrDlWOOkofi\nnX9/x6YpmiOQlMT4TKsBUlzu41fDlVdhlhmkzrQO+bhLbkcOTwBfmBXzfjk6\n1+f2OvbPhzilwLvtOM5vSK5s4vd+54aosd0pQ4VzqYlYNYVb6JJKA0ChbqTK\noW0IgD9iYOfSah8GRE90gzA8Sra7goOb5U/uDyvswmbVPLoLwmlgxlur4d3d\n2EaG\r\n=TJFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/shape":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/density":"8.0.0-canary.0bc41a9c7.0","@material/checkbox":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/typography":"8.0.0-canary.0bc41a9c7.0","@material/touch-target":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.0bc41a9c7.0_1599846649273_0.11287840553659034","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/chips","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b45d09c794c32a05a07925cc704594289f8aa872","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fc0eb5013.0.tgz","fileCount":83,"integrity":"sha512-6Wvr71xE4Xn54HdiRMi9tw5tBHhChrQdXGbbSObi83oCt78gNQLdgUsmwLDQc17RgdLXpPtOg191DVVvgV0TYA==","signatures":[{"sig":"MEUCIQCtLB0tmL0iUa2lZevT4k8NyH68A5wx9V6yR5MciGLmhwIgGpZx5MFL9KcXeTumO09CrjP4uRa2bDAV0kt/6hP+jJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9ZdCRA9TVsSAnZWagAAplIQAI6z5HUXoXGoMnt3gkkm\ncf/vPHvjTf0Y6lXnHP3hymKdMZAs6xfsEtzlXj3/jBDxJ3BFiAkjjG5UT+5G\n4WGPJAsR3RuXHzfI8JCvbiY6hC12xp/otHTfRapLhiHc4M2RQYiVXKo/ZQzg\nOd0pAkbmhMugt7HQXSJLgHVWStI5yKGqmtbK/Cv63a4n4M0/uBMOTZ4efEqJ\no3nNeXZDVan9avtPqboELvNXC7PP+YW0Piay5rhX+g8NTUl7o4StgqbICN1B\nzJx+JZW7AuMyDI8NrdTMH7Vzz4Dn8dEEcPxfhqRDvcFMIPCxT4DoJLLkU+Zo\nfiRp0ROnOvcV43Mi9BTpD/6M4QnFVB3DK25/5dU58Q2mMS+g0uON+C3dgeXY\nATKyheaNmKG/drq2AAcWt4LLvqdgPZ5SZWrJHZNTvSdOWcSMeTxpMiB9H8AX\nmSN84nt4j9vpoAaunZlCCm4PSEXBHNqPeaEZEtMs0mrATXP1eDQvW6R5XOLz\n3aD/AFAONZ3Pd5R/fZiTPmuYTX6ft2srhM8bblHJxodX3bg0cDZT2vf5v1A5\nhbWDsdp5CyC0OxSwXJeG3TikkizPThC2g84+efdBE7a7f8ENhKwGfQULia0Y\nnQ59Hy4JHNAVXo4tmT0Lv30GI1S12oh1ZCBw8LV0mx4rNfeMSTFdkflsz+Rx\nNYXK\r\n=mbsS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc0eb5013.0","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/shape":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/density":"8.0.0-canary.fc0eb5013.0","@material/checkbox":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/typography":"8.0.0-canary.fc0eb5013.0","@material/touch-target":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fc0eb5013.0_1599854172779_0.9742085144316113","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/chips","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.319bf66de.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3897a23b9cc2481ceebd1283ef4841b864e10552","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.319bf66de.0.tgz","fileCount":83,"integrity":"sha512-pJII+jXDi1or20UIt1VDV1fBPDg8bdpUIDKrPtMab3k/JMwjcACU/oqfohJuH6Ni+R00L6Cwx82M9ftFNFVqJA==","signatures":[{"sig":"MEUCIBc/3VYDXYIWQkuXQfYO6IFz6y/zBgi3T04qFBV2Ch3pAiEAqVWOG/7HibP66iSoNxadAkyaBB5jV7YZSmyLz9KgTl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQSCRA9TVsSAnZWagAAyZoQAIPf1ZHiECd/hbflmVDn\ntARb4AvVq/29SmZoZNyLDCXpXCdYB1BhdXuRNXzWzY1Lv6tb7yT+CBw0u/fw\nWJfiI4JfZGbK/4iItG3sBFq58/oiFUZOh1kmKxydfC3yYPBFMh3+cNbZ87IK\njlhxViDDtW8mNx62uCBSoTTvP8znN0J5nPr0gUHctG9idqwqjpGBS7V9+LvZ\nmNOZ8pXu/vYSTO7JiUXD2luTS1ylHsHx0DXcB5GQl18yhay4ZzVkFwIoSCi2\nRAOZ4pWoh/dZX1zGQP2uFoiot0wCtz3rFIp8BJaAG73EjYrjae6ilCEmysFQ\nvYdK/5jlIknRhGscWHDKLvHQUkE9Z61GSNhpnOLfegtnXHq1RnC6fhFO0xJk\nNOgJ+j5z0qsD5SMf2jAbJ3/WocT9LtuZXSsbK3Ua6H/d5HBlznqA/PgLpmsQ\n053Wd4FilDV4anfAZPlmEgIM1CsyTPXK1yjwrrR8zU7SimftexG4KNmuk9ST\nqT2EMUh5Yfia7VbcHl+5E9hc8fsUHTQ6PTveA2g+y3QzGlH69m8kczenGrrF\nz86zpdgHehBljPTGnzDOx7STyoixVIDYWvP4Cnl9Ikr0ld4QdAsP8/8tvc2s\nMTIQ/vQgb01lYgejtH5nCrrgkLgVjVJUezrgj28nvpiJO6me4DffNbSaQwMQ\nA0Nt\r\n=7nDC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.319bf66de.0","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/shape":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/density":"8.0.0-canary.319bf66de.0","@material/checkbox":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/typography":"8.0.0-canary.319bf66de.0","@material/touch-target":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.319bf66de.0_1599865873833_0.31801128396698775","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/chips","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"002a5ba500c4d98283b131c6568591c7f9872a9f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.5bfc305ec.0.tgz","fileCount":83,"integrity":"sha512-ZdymyX+azLLt6zyuZsgIN3cEyVa6JwVjMkUxkiVxIdBOnULFrCF8wdgHcdVk1w2DH5w+uPeH0FC4Mthalt5Ykw==","signatures":[{"sig":"MEYCIQCNxCsDsDXW1CqxIwfscqxaURWKgycZwvThpqZaArxtBgIhAN4nQw8IbtkMzOuay3Xb4xAIrb8s1rzMmNdPoM4/clsx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqS1CRA9TVsSAnZWagAA7WAP/2zve4a2RPRutW6ABXDA\nbiqs1+5LpdVkXIbMX5zLhVgt4GX/tmR7VZIcE5clLDEiRmzDsfrAnkmpRMeT\nWDrgLiFgfSooo3bOL3ujUvfE5nFIcG/d5m+ITTutl0WUyg5G6LdOs6/O8Gqw\njr4LRNjiEOz1V9xFsAvpYG6TM9gURkOVPUe2LUYp7vEHviTlMJO+HNfrNqZj\nHMocxzYUDxK83pMt4j0Es4NF4a02TQtTRQZlrq0EIs3qy3L5UVMXjoMfE+cq\npHJxBDVGZ1vagiRMsEvuVj9iKgOGynCfIKKsW88eWeIIgZ3e3Tbsl3QYrifC\nSiUU194fWxIGdWE7Sd73Z9GaJWmtVWtOgh2xXIKGiTuSrMzeqYQUOXrO9pf1\nqxVzKMj0j0xgDQOqq/sjEaAllc95RFHEw11ToV2txq0lBRGdQMQ2viNSxdaq\nSKfXMufiNbivdrK28b9kjRDVDfEaUHXnK7ND0OJIe0LHXHEf8yhHOtennYNx\nJZ11HSW3WgugoqiHp5UVJm4aRT/7foxb7z0o/8Ai66sK1CVnHsZLQglbksCb\nRtHzjKiTQ2Yj9O41+RcxSsrB4pDD2eatYSVnDRPRefUmgWaLbSkII2d+nidB\nfKwe47usaou5X3o+VblZEFC1uOi0EFmH19W34Tcyuo1nQGep5Z07aHSpR4Ie\n3i0x\r\n=K2p8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5bfc305ec.0","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/shape":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/density":"8.0.0-canary.5bfc305ec.0","@material/checkbox":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/typography":"8.0.0-canary.5bfc305ec.0","@material/touch-target":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.5bfc305ec.0_1600038068443_0.5925792033736184","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/chips","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.83d83f131.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5ab45298a685c822fc6cbc431234d77fcdeec2d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.83d83f131.0.tgz","fileCount":83,"integrity":"sha512-xzOZc1LsWyiTRp1cxZTH1ceIUEXmw9LIQNHGPCtoF/6a4In4SwFL31F1t9+YCrgvn9dNaMMjs1VdeQU+O6g9Fw==","signatures":[{"sig":"MEUCIQCqw3nIqjKp+I1AjIy0WAZfixfbzKTc5vqgFwPUzTos5AIgQQ26AEYK8wezcvTf11Y5Whjd6+Uh+zqJYZD8N1PNags=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrpjCRA9TVsSAnZWagAANBYP/0nxsVNYSdZc0YdLV236\nJ4jOlRkyp1VGWxdgpkBpZWMXLsoQ7FL0G1dP8ozNcyFDrlMURQkr44Mnnt/E\nKTpF3xkquA9jN7jBgwzsNF81T0XFCKqixBgyLEw+Q/rVafWoIsmGNsYSRPaB\nCwI86sKAiIjv48Zj2QUyNv52hvYJ/uVCLIij4m1S94+WRyTnquHZwlX1NOYw\n7h4WxLkww08q7NuilTex0NG3uyENcFkPOWThc2mGTiUlBjZuH9UgEUTXRCAY\nZlIZ40tL+ahgKlLI7OVL3eo/YN4nLqmpcJ7BrBkfNnPz4pIYXjP8JvXu2ZPF\n3PixGWOQs77sPHza3jve5rOsjoreF2tiSoENIob2r25tbqSsK0aWUlLp7u8O\nmdx9RV7tOKCoBYg/RTJJ71eqzpvBrASyG/fkdz5SYp59larKvPg6ZvVdo1BF\nMm4zV4gf9pxaKS2NNlJkdJUGIFRJQMEmyqibmkJd2YOiBuCWekyLOzwuzZED\nI+w/OjBcbrQK/z9Kk/WxthmZ4LYxjrOFvSd1N1q9IoAL6JAFoxTgVRGuh/vS\nzWtGGmpYAsdGxRCCvmqJx7gjdVON/lf7m1Melon4w2CrdXplMG0N2TNbwDs9\n2hxMeSGDWdDJu0s/bl9IIaKP2YSiIdk9R2JASTwshazFnsyMrXpQd6NnKO04\n95d4\r\n=atim\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.83d83f131.0","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/shape":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/density":"8.0.0-canary.83d83f131.0","@material/checkbox":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/typography":"8.0.0-canary.83d83f131.0","@material/touch-target":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.83d83f131.0_1600043619472_0.4630068261167941","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/chips","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58891e3d8cb7457007895d69728e8161a6f49b80","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.d52b165b5.0.tgz","fileCount":83,"integrity":"sha512-d9BgTIgRGQwYuPQ9KcPvsmNm/CA+W5zMsyvaCXiXqFF9fjhuD6EqA/Ry0V2KVP6SONYF9kn6Wi1xcWn4vEHFSg==","signatures":[{"sig":"MEUCIQCGmbrqXe3AmVes9PEqLVTgxeorMWyWHahMChJrDiIAPQIgT42UprllY2iML6odFUwrl+IVWaR1Bg3gftLCrNXcLto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNXbCRA9TVsSAnZWagAAnaYP/2kZz2c9ZOjfykjMOijk\n36Ugz35jW7/EWAws0quk04O8lf/b4rLkp9e9hSi+aCN5pRbwG2uo3Qi13QY2\n+2crET5qqOmc4alx0t9QjZ9mgaWsn++DmfbPEWPOA9l/zxTGV7uUNZh/E/Dn\nDG803t6vPIvQynZ/DKuOsg6S1wUafxdVYVrNzt+eRpQ4wJjnIadimRJG1StA\nXsjbrpmKkmvTNqcL4Y2ncg3r2bwqSdsunpcukLqp+v/rSCaKiRU9Sgn5re4m\nHcFMujtbDCyFOFsVZL7RdHtGciYKwCWlQIAqK+oaj6dnnb0jp6Rzkm/UcS1d\nWZzEZG76t1HJ2y8GTay6KwdVFWXk3ySNYD39er63YDFeukzB+nNDOT69VtX0\nDWiXCEcdbdpop8V/txXCXet3kY74TU6ZjVFhI0PGfsSVOmAkbJ8TG03ytdM5\nSkGw5JW+uQi4l6xSOeELehwfl1WljtkmY2b15uaSFrfzPArzXxFxopwM3p6z\nrWa9Q/xX27r3PetMm6QzWtY7F7E29xu8hcFl/pZlktDBKNaWmuF3lcnziOtG\nwOEw5l8Khw96K//uVPpCly1GPpabGawneoGgFd45Yn7IM50z0OfxBJsuGqe2\nd5j+GGRrHZmJuW/ygGaFrQyPikVvnthLVeq8azVnmx3RbYbwbFT5tpcjwNEf\nRYVo\r\n=DeHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d52b165b5.0","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/shape":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/density":"8.0.0-canary.d52b165b5.0","@material/checkbox":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/typography":"8.0.0-canary.d52b165b5.0","@material/touch-target":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.d52b165b5.0_1600181722888_0.7961884334564375","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/chips","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a831d4799.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c52ccf0798da1a95ad35ae41fb2a34a9462db53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a831d4799.0.tgz","fileCount":83,"integrity":"sha512-l4V9cyg/MI5ye7UfHgORAL899co6HeOpSXmDpjIIzaZdfZXYmqxERGUifTPWvzEd3SskdbO9sQbSHG/hZ3CE2Q==","signatures":[{"sig":"MEUCIQCZQcpVlOuE7/nlezINhEhT3damGtsGSLtBQ1LYcOj50gIgGTENwuu28qTNLjv5qhemlVAbUy5vUGPFhYGzptC/N5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP9yCRA9TVsSAnZWagAAGfgP/2ikmRMfHl+I7PYQoh7c\nDKbA0pToUBt8gzlaqyRPu/TD+r3A42ARKVb/4fd2Gt4R/hDDDz5XKMc1Xcr8\ngppVaq/Dxc3f29DpzADr7OuGqnZKoPMFLfeh0dUkOTYYl0hw/ahY9YGKQQOW\nTCvuXcYdAMAlZ3Joy8z6cEucx1hlPmtjDkEtjbS3DyxNHIRgUJUlNGe0vFlM\ncpn4LQqTKsFrp8E56fnBJyODXvAAuApkMfAu/mHRJbh0OGqiNPfQx10Gp+U5\n/IAK6GvoTjElGP3BGHag6Bjp+3zLFl9v2l5c0Wuhq+fBz2hQ/7AxfgnFHJjZ\ncwiXmJJN1Mr4RiYFuXUDGXCPcn0MDmxIP99XifZ1kps7xZBd0gE4mhMGaYxm\nmuTbjTSUstalI9XYwbjNI7eqwjYcw3Te8RG0uqsy16+cHxdUf8oQNwFH2J1f\nqUzaKFzzoQu5PwptzVlmQ/xgqz3d7xls1//TU5yHvOSut2ZGdVi7R5vHkarP\n9gzqJxtquMipucSUEUzIwsRvozy0Ec+bIbnTnUWnMuL8DwRLfNgzkvsli6ns\nlMttJlDOretL2hRykkavbmIavtOF6oCDhVBbP0YQHD2EzJLLLRqkCxr4WyN+\ncrESGP5cWR2UF1eKM1Z2Pi/9nsrjTUs6WBkWCJdp25dwo7dYMkndUY+qq2o9\ncgEO\r\n=Twrh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a831d4799.0","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/shape":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/density":"8.0.0-canary.a831d4799.0","@material/checkbox":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/typography":"8.0.0-canary.a831d4799.0","@material/touch-target":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a831d4799.0_1600192370381_0.4137538362983384","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/chips","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a306aa488.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1e8985008456cca7e952abb19c5cb56b1d406e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a306aa488.0.tgz","fileCount":83,"integrity":"sha512-savRVHl+xGtsRPQH72rzQPzXE/+2vu5XTgCfqETXToS56vm67U4TR6GjO6jxU30fpXWMITpf3nh2oKtmSx+8rQ==","signatures":[{"sig":"MEUCIQCo6KnRCbHCKkeiL+3bWkpsiBqv2jAP8/QcL/v7WlXfZwIgXbL/ECgD0bq3ij890hutpJ8qoKvH94yeOqEWhKHSZpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrUDCRA9TVsSAnZWagAAW8MP/20TKVFhMT+1mSKXmTQV\nXgXC4tGGIx5paSKTSmjsesoY0WFXrqdr2IAbE5r5bOa5tYampCFGo0a1RCrb\naISZqWyfG3wewf0YOeOPOm0Sc5DCCR+EY3wyl7Ih19GDEqDjN1rJ2eEMf+e6\n1zxCz3jBRKPgk6YC2gb8SHvWq4uv8GK8/lRPwyHyNm/BPFlWBhV+5XRODOkk\nXnwAzXAjc1BQI0BjbzBKEF3+LsDi+wlqNlA3RIF+9JESPVLkn8HrUeNW/7Zu\nEZcH6RRxNO+ho++62CgOPKMJHjzvh1a47eca7P3QDYYSJxCL8vjXDXlxNxz8\nLwgcR8x13g7l4dgWNzX1jHCDg40wK4vaL2ks2/OOodjRgxr+GvA4mWv/TxN2\n5Zbk98uUupmT6HvymLm/ZR/S5eqPz8r9ELu7fHDenKxX4yJa2b/9plA1q7Zv\nlL/ul1L0x3ZkZEaDh+Ec5vxVKq7eYk4JGsqvuPUtVsdDxN4cQFyc+dkf39AV\n7RPki2syOTNoz+vnsiHdzKPedr6TyxLwWWWfF7Q9L1wEMo9OJFKtiiCdP6gs\nyQ/LCi9JnJOzBdJSgLVK3ZFUbdnr1x2yiPJmJ4d3OWnrcQXtulIjFacUlc9c\nOrezj5Suux2nh/CVxiOd9Cbwwl7MuB/RSbB2tF/mCmQON0Hz/0y7nZtDkhpN\nV8II\r\n=+IE1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a306aa488.0","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/shape":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/density":"8.0.0-canary.a306aa488.0","@material/checkbox":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/typography":"8.0.0-canary.a306aa488.0","@material/touch-target":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a306aa488.0_1600304386558_0.7612572174943399","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/chips","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e54061f705a817cebeaf10bc6b6e0dcae639fe9f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fd608ff66.0.tgz","fileCount":83,"integrity":"sha512-6sKVDQRT+16+65y/AGQCu4LBzE8VYRHk1wryJSokliU0D7IoCD60PozOIs9ywW0REHlIXpkasDQ3DrbUN7VtzA==","signatures":[{"sig":"MEUCIG3ozcjwDIlMujVfwelRz7ac1VSxK7jI4R8BSyrtsDgKAiEA0QA1k4UFTOP7lVI0oSdLpWidaDurJXP8KriJvh3+LV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3IRCRA9TVsSAnZWagAADD4P/ii6M7o+ZZH86VmJ3i1t\nvFcZk80UTeobzLptTVYS3XkI4Pb48879YCoQ26I/CyloybcA0uVuoY0N+0QZ\nNrVkGwBP5Ajqj3XCIIej3Y195yPjwS5nwez/9030BH1gXZuoH5vJhu3LaeTI\n9J+O83m2eFdqV8+5AyFvZYZfJlWBF48jyA/y2Td+6/L/PS7lncTyAqL44g4X\nHID0+yGd1Els4qG4dufo11cr4qArecOGzajWU+8ofXqfeVxkOpkApYcP4sLZ\nGJp2ex6dKN0MBfnvuJUVVs3XPmMcjSMA8hzDyJNL5+ioyr94uF3EcqGj5w3n\nPhjW2WqUkKKDBkBqvZ8cmrDv6qfI9VDNySb1rILMlyfKeTObOw5DvGP5HO/g\naCBftkV9jaDT9uwfoten+S6G2yPQSRS9niBchKRNEelikPac2bztKA8r8VE5\nuRFjXoUCsU2PV1KE6TfB9a+MGB8GQEOmhOeTSOpqAr2RRXTncKsKo7mBI/jv\nG4QR62Ao0/aiVi1kh9+dJ7qOsiLPMmbovbhY5wRASdHkydL1eY2tHB3MvZHW\noGHETS6GTNuJWlctAuraYK5o+KZsKRls7JHnyWEgK9b+G6Pr0CHF5ekqNRaE\nNoGKWwD1A6M6xR2kYWhFEbmpZ70uA5jQFZ8soQfg06rJsM5NGgFkL8x2ckcc\ntv0K\r\n=Q+Ef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd608ff66.0","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/shape":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/density":"8.0.0-canary.fd608ff66.0","@material/checkbox":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/typography":"8.0.0-canary.fd608ff66.0","@material/touch-target":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fd608ff66.0_1600352785079_0.799268468178044","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/chips","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d9dc1fd6629e667f3f390ab9285696c7a7f0ee8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.3e435ba57.0.tgz","fileCount":83,"integrity":"sha512-UnygpU077YAzEBQdmzFwbA3MCG6EONbPlfw/2YqGnauGbzpv9T/J/Uz/Zg567+N8DHRaZiLI35zlQoIhLogC8w==","signatures":[{"sig":"MEUCIQC9PTa90NAmv8EAywht4ikN7yVd4WhK0VNYdysSMa2m+gIgY6/V1qUZJU1zlPphcLu6hzoA9M2LnALek8aMk9EZP/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3Y9CRA9TVsSAnZWagAAXm8QAJONy+Q+IG6BUy40DBlP\nQ3yn4tTH+ULBbcMQABGAI7siE275L4NF45kRYQnWJZ5LQVbZemyp4q6K3hjH\nWIfkTDEnJ6KBLEjypRM/+yD4P12UjisVl8BQsPg4iXLKPtVZYneN8RGdPuo0\nrc7LfYqDVrUp5ORkPyMu7YVGwe+AwEpAbHRdqZ0SoXN0tBIQImZg6WpEnG1T\nqQQUZekv4nQ7E8eRvmTBQOuWkBOrHQU/zqxTHFXkPkHmKT7JlWnzwIykZJYU\n7JypXFTKlGoYYCOQ00xXra86g6OUb5BgFmwBAhTE7RKiNc6IId0acMU9M5o3\n95A5XJwwy/sBpe8DeelNtMeUFtlXNgek/Qt9ESZRKQJaEv/I5YBzVO1T7Qkv\ngj5DoCvotaQ2k2v7mXo8DyM7niirBiT5GxL7qhbfGM8WiV8HeU7uJMuZ20yL\nHu9sm/APO2GS46mlT8wa9KExroalQB8vUR3X6tg+dtkZi7vQWUoumqKLUpKc\n6E1ca+Aa9XzXLx+HgJZxyuIXBwZQXcibjKQ5/466AlAWz5QOLi69GtNVlrGO\n0MlYYpmf0KA+ScGYKLnw/bBGYtpwGwfFeAfySO/7GjIIKrIETIiY9cTdXXWk\n/j/+KxUPjjrRl+SYPD2GhkNuo736PXtnXvjRFb3hjNMP+77JrcOfed3arxrM\nnPOB\r\n=Rt7Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.3e435ba57.0","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/shape":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/density":"8.0.0-canary.3e435ba57.0","@material/checkbox":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/typography":"8.0.0-canary.3e435ba57.0","@material/touch-target":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.3e435ba57.0_1600353852646_0.8695370015490527","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/chips","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00ed668b24c1d2c6e20a7624b932c60987cca9d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.c250ec52a.0.tgz","fileCount":83,"integrity":"sha512-28bPGY4NmhJsTguX6WyCJhrrTYmX7v+FiV6h7SaCZAcs6kjsROVwkcdSBb9SmUucyYivwg/NDO505PO85MKaDw==","signatures":[{"sig":"MEYCIQDuaqFTm2DUsAHsHLC3hNmjRJmHq/raai7XyEqoc3NEagIhAJRJHFmM8tTTeNEG/uh7bP/uIdrFof1cJdMPR6gptM5M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8LxCRA9TVsSAnZWagAAIAwQAIH1u1QR7OBPv8K9UQI1\nh83PY/FuasX5sIhnjnBxE9UT7+s1LZNXse3R72FKM+11hAcwn3TumVSkYkxq\narxOlIoBKym2fUfNbX1Ps/NB8EhlQDz5kUiaLbew1AnQ/qc1AuWUFqAjbcGu\njcv+FfW4ulnReOcPBh/a+/zMhVIQpJUjDrGAg9AgAzppu/amR0kCgwGLRVN5\nvip4jKbGl+H6FY84/bQl6hEyF5sHTqo2eETD462blMIoP3Z913MppnNpPD+p\n7U5igiuCr+277R+MhVRjPVQZmkvo9tbP7QFJocKIJVBx3yVqyCI/PtcTvnWk\nD68lnKFyZBhGwsv402wJeRshF8AYjBO3XpLIDEoIR12e8qefZ6fcZGcrRYTx\nM6qPZHI6thjl/YEHxufI4ewR1rifcdytGe+2T9rZdAmzHu3+JTVo7pIST3wN\nHV8LaiiqoJd+l31kp1ca+RCNGRpDzSizR+fWRkLzASAL+aKXcdBltKwyCTMo\nSVZcNLRckqNuphVQ53CC1i32ZbClG+TwKdfgWmkEhSWowqtFjobsRFeIiCik\nGhxrnhrn8XpZgx/EvASQ1Co2ENJvU6GKPiTMywa3eoLWEpTYImSSQ/lC3scS\n7HwJqfah53XQAfQL9bFfsffwTIL2IadNB95XxWh/s0MXuzaP99gzZGSS3Rc6\nfCzY\r\n=eYIs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c250ec52a.0","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/shape":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/density":"8.0.0-canary.c250ec52a.0","@material/checkbox":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/typography":"8.0.0-canary.c250ec52a.0","@material/touch-target":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.c250ec52a.0_1600373488992_0.7259826786223929","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/chips","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3905db0de182f8c54c3e7a2c056ee895e7e07670","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.e34e411b1.0.tgz","fileCount":83,"integrity":"sha512-gO/i+94w9qxCuXX3f3ZB66GAzs3aaYLHuAaUf8QiMJn50iolS6yscYpTM5O/3P6jRkozenVuovj6+5y2Q9lb5g==","signatures":[{"sig":"MEQCICIaXcNKea1AXVDxOn1t5NZIz202N6rGHaH8xO8bwnNsAiAwramBXEugqzZAXJOircfrZcQlrvdLhia+Zd6mm7HsxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SpCRA9TVsSAnZWagAAb7cP/1cOSy/lmU3FfFbc0nYw\n5LeRnXY3xRhfN2sv+l1Nh00tdvNDR7eloRCjN2xhPIoiEpSteRJwFBzB97XH\nqfvGlXsEyeanbHiFSDLBMQUkQR6x92XMWB1f0c+NgZ4RKmqVexf1nhp08tyf\nZeY8zcoIhhIfR8Sb9uOnFYHS3PLyehutSxwzdl4xbZc+EafSHD6aMZXyqCaI\nq5RTMFNTyAQyU8pbkzZhejA88RZU8zDFlC+s1OaBTXvLbirHSvOn567fydjq\nBjrBAW7NwhpKqRRqD2QwVC0k6AVlhMl8OXF2Z7unHVhrkdXLsHYsRo+ocN9l\nYhLAZdSqIEcxjc1ACvVaz5A+qobU9ow1bWhWBeXzw4L61OjFyJkeEPbKQuiV\nqgmoEaI71WLd2gvSvZv4PDIg7A2L2tzQ5ZSMG9ZJuM5joLvWt7wDd/XLRaQd\nbGEHAgQeA+Txiioeiz6chakcpKR8QDjdMeR3lEyc3okrlNq56r0i6I/lAbZc\ntcIkwjyDzd8KOGRq+P5F+yGRYyGzt4QhTptNphqM5yHXlwvrOrEShVQmsNaq\nyQhHKenbY26fH5Emn+sO5cuEipsMq1d7jGk6snh/YP9Z+eTvW22B0BgWufY+\nxw3dQVl9y/QJcRLYcV/Q6vUA4JOlRx74N9kDL2OyK9zHooNTA6WXeBX8KJc1\nZm4c\r\n=R0N9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e34e411b1.0","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/shape":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/density":"8.0.0-canary.e34e411b1.0","@material/checkbox":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/typography":"8.0.0-canary.e34e411b1.0","@material/touch-target":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.e34e411b1.0_1600373929439_0.4580882310087995","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/chips","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.4e9343929.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b3c37bf0325aa6e52415a00f25e73f5e4a6d2e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.4e9343929.0.tgz","fileCount":83,"integrity":"sha512-WLrua0Joa1O4pG6CaqljaoTAfaH/z8zKLOj5mJziYQ7lWL/X+4IPw+FRIr4zHm3FMDalVrn/6VEWDZYVVrOiIQ==","signatures":[{"sig":"MEYCIQDJSkdcupXWwDiia1PZ8g5bBU3O6QpzfedcDqaoETld3QIhAIy00ri4GOuQJ6qacKUQDBkcRJbjWqQpvLznSG6PB3kt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8qECRA9TVsSAnZWagAAzYIQAJlz49Yv5ybM3GHgkX9f\nLkyYva6+kMAnhEGPw0WifTfUQSMZDfhXigV8J6nxTtNx/Fmg/lE3/kcwi+GD\nJMCHrT9+2zZyLIF5zF/WOaaCAa/W728ubA39qznq1CGJI5JaujmOrF+jfG2U\nA6vC5THLZcS+Tp7uPfYfCkYy9k+BQy32/cAQq6aEC7rNCkd1IeRVt4azBcaf\nCP2IRQylfe3E85wMCLYiBoIhnFIy4SqUNn+6+hpFLhXH5cXw1QnZ+IWpjNOj\nZwSVf3o4z2JJnJODypl5uykTdeCM6tmzWbIfzxmHR7s/LHItXgRzi/0Hhb7+\nXaLrhLyQ2tyradx3xtajoJABjlgZxXIEzznKGTSj+8rnB6/F2rDwHhyTKayX\nJBj9r9vifQEwF9d4rIIzFgkSk0aOSt0S909j3tHZl8eh4ThgETqc2TFFJSX9\n6MDpg3uwhMnwmvt/20NsEcysoceyTFJTxL9JZ2EUdVfJDBli6OVXpE/Lb8F3\nlCRfoRGSzlkcwDRxiqJZy5ojpDStIaB7Djhmy3Oy9ZJrwqPyS9Pu4ykQIKB3\nLQ4gihSiGhcz/8zqNfTCuyT0OcE87CdPTuR/jngF9PNaiYLMFZfoWA/AHnLA\nykhBi6NRpTY7I+TXFTmSP6VqtMJCPhx/XiaCYcE4noIMpRD4KhZvng0cj1An\nvx8w\r\n=aNI1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e9343929.0","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/shape":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/density":"8.0.0-canary.4e9343929.0","@material/checkbox":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/typography":"8.0.0-canary.4e9343929.0","@material/touch-target":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.4e9343929.0_1600375427211_0.8474814373696302","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/chips","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba6af2fc694ae7cd20750006668b0d1750e4fcc2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.4e5c350c2.0.tgz","fileCount":83,"integrity":"sha512-c4pHUC9Z+N5sVIAAkOt2ATRGwKsRjzoxyB3NIaaXU4NdjrdLvA81/nexUmAOyqdKr3Hs8TRq0OZTbSB3srz75A==","signatures":[{"sig":"MEUCIQCgRakgKgzowOfGgYuJfEJqyrQJPcKA2HZIvdy3krlKUgIgK6mgCHqok4+QU6YkRUyYtnirecGRP4hbXW76daIlFpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRffCRA9TVsSAnZWagAA3p8P/RyFe1L/htRtDvU1sEXk\nfNGYGt9x90kwXpNoMTf9rHQYwgQFxcQYPoHIaSBOFV5n9MuVXKR0n8colKll\nGGZf60DIhrbst20RGaHoOcdpxhKaeWvAZ3WvvicbEmRSkM7hAzNbiWh1gx4G\n9aGOmzy0LduXd84Yy1Q8gJOMk7Drz8bFKUOPxjk8fX8yhmxphI3rDUnPF8Y0\n4c9PuaTaytWQasDCrgFs5H1HW3NTR0RqXOB1QcB23mDHxTqMX4MubXDPilfd\nZVzKPxWBZ9KHvX1rOWjpMj6UmlzpSYqG3Od8UH0OCI1A+AC7iqdNZDNlz9oG\nVl6iT6qK0BYt27Xy/H8uddGshiztPgahv48x59jnQ+iRCAkYx+MP9DRWJRZS\nyk7X4EiKqGYtwPsrC8ehyE0JVf5glczDMO6ZpoVlx5emAFFGdwcbW1P5GPf4\nkK5/t7G5ggoz7iltdFhllG5WkbkNqfUwmM5grEmGov8rVBC1J38NrHXzOZyn\n5WA+EgJqAm7X5c/Lr2jYhABoiccZeg0K9UqkvPQrv+c2/187Bwv83wx6JAsG\njCIks6+Sehbe/VK/1VrVM4IyX0SqJUCmDY91JhDzctrSx/Mqj2rdqdFOPSco\nAyYf/EoUpdtx5pikaxlrD94Oh9B4ZCVxsgFZXlHuRDYWwnlQSUUruvT7hNYs\no4jZ\r\n=EcR2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e5c350c2.0","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/shape":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/density":"8.0.0-canary.4e5c350c2.0","@material/checkbox":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/typography":"8.0.0-canary.4e5c350c2.0","@material/touch-target":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.4e5c350c2.0_1600722910780_0.033091623862482544","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/chips","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3364b78e95b8c0c15e391cca6d40dd4736f8c6b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.16c563ef7.0.tgz","fileCount":83,"integrity":"sha512-vX6m1IMEPz/YkrinBPEeZcJ4XHi69NUAdfpdcBlOYFVz2O3Wa9QiQHxsiaeTt9H3s/yIdhN8SY+Wk2Qg4LinDg==","signatures":[{"sig":"MEQCIA2gNMJqLZJG4kLDoEn2URLi2xTIoJvi0sBstDqb4QCSAiA4MaxL4/liEutq2h94kvWwStf8xqh+9salhtJLSpy9iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalTGCRA9TVsSAnZWagAAWMkP/2AMxJPUk5qRHsRjn6L+\nsQWv1M2910Mfqaph8nFvkwHhvjtR3IzUzDb2fY2peU4ZnKGwYE3DgiCv/cyg\n0uuZlMQy+kkhWFidBzRTq/OLeHFaZ80MHgGDsOVgiyIP0YcQuoxtIWke6l0P\nq1JaKfYkX2ICU/2G/yKgQ7P0+xoynFdEeUtEO1Z/rIJruNLs/QXAu8P/zIV2\n/YqWT40K/NPWRoEM8U3UI5poUB9Ic2gSxbdiFjjnaZm2nr0oZFlziK9jgbUP\ni89cvH+kngCs/+2vNsfNCv0o3FtgEUg/uJSeYeaPA+s+G4ia6HajqyJKinJ5\nu+6SvO5ypbPjcRQOaBZ5YkUiY5TfijL7/tl4NonQwKGl35fsIHNpNbbk1WXZ\nApSTw+rFfNnmPFoL2q3d4YorirzGxuhGMHJMUiut+0Ts/fP5AoAK6wvkofS9\nB5utuYpVDp5GeLqi16M6/sprODnX2Iwb7aCZ1JxKIYtJWtQqzSsnMvi43kuj\nTwUaes8JKNN5CAf1pAw6BJ3l/zLK5J8r3DSQu1kKzdx293Yma3V/0D2o31tw\nl3d5rFhfQoovBHifHBIJ7xQm0zsZLeidPTOn1FtTqHRaMqxA4f/OyM8OrUjr\nFLuJWpUTXe80JFyKUIOm+6agDGcmiadSVqPieG8zOEfzrK5krqnTqHGp+ouU\nsHbz\r\n=VUTD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.16c563ef7.0","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/shape":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/density":"8.0.0-canary.16c563ef7.0","@material/checkbox":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/elevation":"8.0.0-canary.16c563ef7.0","@material/typography":"8.0.0-canary.16c563ef7.0","@material/touch-target":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.16c563ef7.0_1600804037681_0.086615981637433","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/chips","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f8af39f8a750162367b5ea3c389f39ba894c9aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.fd8af3d43.0.tgz","fileCount":83,"integrity":"sha512-FrtmVi9ikT50Jb2hiuAsd1ggcRAJO71RkmaJGyopVzbvdTCne/wmu1Ap+B87tRPs3vCE0rJT/oH/la/IIYN+Ng==","signatures":[{"sig":"MEYCIQDvyBOP/loycoXXFDNkLcK7oeQYNRvAq1KnPCLaHbpR8QIhAK9rgzwXqQA74zqVuzmUYbsc0+mMa6wsfqWsxoeQL/zP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6MBCRA9TVsSAnZWagAAmqoP/i1Yfuhz6M5J7HWOuNG+\nIasc12lPe5X49VjRS4BMAGxuVHZ1lXh0ahk+abTVxtbCyGXIev7TvCyA9EzS\n/cpn8zwqSIlDb+LLUof44eryMhoNCAftnfTP8/l7t+qSfk4WNxTJx2IgnyxN\nq/mTHU0HXqtGHMj79aUPcTya0pWhDSXCGj5qlh07X3GmzfhvqI84WtrZ23Nd\nG5QfHbyyUk/JMn0DtEsAFZy01gc7fASovH/SOn5z112dZtPLkdEfs4PIqZsW\nzXdJW5lRzn17MRue09b99i2z8uvfv+C006faoqgSUQRAzG7dietIUMFxBMEy\np1mMquvIidREVbdMiF0HzEgkXTOqNQ5CANQ/ymDiWdPs5VkWjq5rJli77OH9\nIG0eWZp0gkgyiJ/PMFLXeudKkMNUNr0k+oGyj6pp06FOezGIlFaBVTaw8t3Q\nlMt9b/TZm6FJZvyOuaA/ot+ef82IMMzDHJJRjQ/PbqPA0zim0cTTmWuoycjg\nAroOONyL7LaaZxK8w3vAeHZB4StOhqj0WwcBC6pJhlrBcSOjZkfVvRb7vm0e\n0+VmPgh5SoVCVH1JKzoh8pQt2iBrkb7BWznGweqBvhw5tKuPGomWvjjzrCLt\n6qX5hOAZxdVl+5YI5lcjOetG8DZVnhNdPsD4yZjiHt0fYNiz2P+7ZJsxtqJd\nksDo\r\n=U5zm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd8af3d43.0","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/shape":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/density":"8.0.0-canary.fd8af3d43.0","@material/checkbox":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/elevation":"8.0.0-canary.fd8af3d43.0","@material/typography":"8.0.0-canary.fd8af3d43.0","@material/touch-target":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.fd8af3d43.0_1600889600603_0.38731278261360647","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/chips","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5ee9de5044f2c58430a0a8007e694eb928fc6e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.d4cd83a85.0.tgz","fileCount":83,"integrity":"sha512-Kyn7EZMnkX3gonKOzoBEFia/b5+BApfsEGjTTrshU9CWnuWH0DOS+7IEXEcNUwoc16Y0WhP7awgvMBPfG4/Ing==","signatures":[{"sig":"MEUCIQCXh7+4tkbitxDGREkwmYckNBPmvVAU8tPo58xN2AnA8AIgB271gqR/8I7pG3d21hIpDDlDZ+8mzk1ZikAO31y+j5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTuHCRA9TVsSAnZWagAAQakQAIYFHMqOCMkS6den41/v\nWMbPnsPMJt7FZMDAWZL+lvfrM9MRUkIu+hBoX+BXkcKXZK+5i8d7uorFo431\nlAXfSGc9aFIYmg/M2Ek+IrtwNqoZC8bo4hGW1fupRqVz+h+eC47a8AUIM8xE\nd74TitKzEbfBN1YypkqII29c7ehJju4afJ4L4KwOwUYOkCm2QKdTUNAcvLsK\n4F2KK9wrgIqUXejKV7J1svu7pne1AnlaEvA/kxcYejL9Naa+WC2GPDFwJ06J\nlt3dOKXlimexYNrASS1jUE0GKmsQG0PPgiag1Jao2pClIw03vZVf6VR+YCYi\nB2/QhwLtXqPVO1ZWvngPsnIN982eP+Kzx62jFQ0IrmkbpqyUpnVkoBCGOejB\nok3UUJxxDlUr9Mtu5R88LApkpMsCzqqI4yzQeCtI/MR2iVXCGHYgZzRJVeQV\n2LQDBQJ6rq9i21ej5GWQ0w4eOtOB8W8B6xeWXRpIFKrn9uKuxXC4B0UAGvy6\nu80e+RRTuRPnBsn4518BaBbkTTnqnfN/sden4hCTKkm8+d9F8GrKu+l3MTk2\n3rdX6D4p61rJ7VV0RRXrh79uEU2nNwctUI28hvDO9lwpg87ovLhZ23sG3Xh7\nLB/LJROlvwvNWSoyFnzO6yTXrwZcNwT11HcAZcI0jZNCIbRiQZUaeX940pFm\nNOmz\r\n=YPMi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4cd83a85.0","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/shape":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/density":"8.0.0-canary.d4cd83a85.0","@material/checkbox":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/elevation":"8.0.0-canary.d4cd83a85.0","@material/typography":"8.0.0-canary.d4cd83a85.0","@material/touch-target":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.d4cd83a85.0_1600994183247_0.03981053242964627","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/chips","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a112890e7126491ec7cc1cde185ba7058a75699","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.199aecdfb.0.tgz","fileCount":83,"integrity":"sha512-rhIVmzP1u1ICvzTQamnkWIYiL3csG7zpLEys6RIcsbih8T4qI/YszOodR3H5vixL5qCCeg275F/zJoHAkNTGVQ==","signatures":[{"sig":"MEQCIHpy8VSuH1fyyIXRVMk5lHyN7g9k0JtzvH/U0n4nVjFOAiA1J9fy71xFTAq0xTEsAcIAUT7JepO/N6XdaGgfyuRQRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhIgCRA9TVsSAnZWagAAH9YP/09nIqlWZLvAGEF1DIU1\nET9G3CDTnQifCWWK/+IyjHCddeixKe/Rfe73E8S0N7+Duxi0+cny4m9WrWjk\np0Ht6ZCQgzvqMXmI9JpI8jq4yuLmXUG36Swt8ifHVkTL0jSXbbtiAE+L0SuG\n07gWfmCHbyHiqsG+zcHGLJSYCxiQgFFN0TQjUuJdNbiuFefPUDVRbxjDJkiX\nLjT/npp0XMKGz7z7bpAoeKj9PErKG6CNtxbRANY+VX+tfKQoyu58y3wwuylT\nWL3N7zPiSBEt+PP2GhL4HKgZLriuhym7ji/wh42YtWCfFnSHeK2lbNpPpOyy\nRUWqyjFmTXS488oH1V0XDbk/De262Dqi3f6b6tfP6xqgBZfM3qxQz5cRctVq\nh2DJDO2/70tVvItWXoh25UX626DvUp73/ZkVXc1ZIFLzWSzv+Lgqk1/9H3Kf\nWL2CZKS0pzTcqf+uRb71lPEwF3vNpQjHMWJ+ZcXZq14hom3/rmjpvCaxlOrJ\nlx1O369V1IaFcPWvFsACv3EuJ8yFv/9fLaXgQyWvCS6ZxvPpI0+iy8kIgM1i\nD8b6rCjvmbtJ628AUoi6+7vEQBXWzlPZfs2AtIYDhywWEyFCnGl4U8AQGrns\nskGInErv5N6MAvZ1oTj5HP41IIGuv2eJF2e7mLlZ90b3hpCHIYvSe4lOKsqm\n2h9H\r\n=cFGH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.199aecdfb.0","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/shape":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/density":"8.0.0-canary.199aecdfb.0","@material/checkbox":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/elevation":"8.0.0-canary.199aecdfb.0","@material/typography":"8.0.0-canary.199aecdfb.0","@material/touch-target":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.199aecdfb.0_1601049119812_0.5698513571745216","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/chips","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d732a76abad1dbdab0f0a202411f0409fca9752c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.38ef4501f.0.tgz","fileCount":83,"integrity":"sha512-hZiq0t2H4W57oorPODTUbG9a45u7drhmlKKSVbK92V1HnpXZsIkJbMqAwPFHKWrIY6LZkquZxDEB54zgaskIBA==","signatures":[{"sig":"MEUCIGKGDUXuwJda1oqAOOQ8HFpOYZKkxTj845nHHvLiz25pAiEAqUtFL0k361Uvg/kkSYaW5TdhFishEO807P5+HgTvVvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM2jCRA9TVsSAnZWagAAwHAP/1xih7hiX6h+MRrjkLv7\nyVuf7uRGqq67NyltMvX9zLXc6S5Y2eDr10Rw1J+f+o4OyRpDEGz1nK6xEBQM\nffelFeMZCfcvOt3NWbg1sLjv4/vitOeNs/bP1Y+KUiB/mBFxMVWemfbu3jwE\nG8zibyuGGUIk46EotdRzTqkqXW8DZBiZaHK27uLG5iLdDnT4hNdBM6ZkwK/j\n3d8ubUGjkXu6PwfdWcinYcy+wHBtD+fK1Sjwiblp0DjPHRRdakhnH4VvCxgN\nt2KDWIhrAaDUgIL/3Am9vFvj8GKTrQplUhQv3huyjMB2gPOOPdzSLmG4iMmR\n2P6W0/3c2Rz1AtE+6cmLFDrofaGI3jI4fQ7/kq8kq7VEJ5dEWzwqfdSMf3ot\n5bxizFs3Fjo/QLXJ6sZqK1EeJ7laC5UPyKqVTwRk0+7dTSjtKgEDRazKSJaQ\nevb/ELZaHXR28wLXOa0XhyOeeFy5s9P33wq20+CEB6eMZv5Y1vaU3EKD5moi\nklaQLmNy3FNpov67FPUqoLbPJm7XnSJ//JxlWdxGUoRgthQSw1pfPjN1kl+m\nA4Uk2GMs4J44+unyjo/l1wk0p/j5gcbrvxeKQtIbCTQMVbWCm0ce6xVAK+Gp\nfZssaQKmBEVmP1u+tM20Eja79t6yTfmgyTOZi39kr6MgReUWhqbg/6QZNcff\npXLR\r\n=VRvz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38ef4501f.0","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/shape":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/density":"8.0.0-canary.38ef4501f.0","@material/checkbox":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/elevation":"8.0.0-canary.38ef4501f.0","@material/typography":"8.0.0-canary.38ef4501f.0","@material/touch-target":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.38ef4501f.0_1601490339207_0.240441342064466","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/chips","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45332d182f804414ae56b7809d484c0b266dc11e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.774dcfc8e.0.tgz","fileCount":83,"integrity":"sha512-GtsV1FnOgNziNTFZF9qB66zQGLHV1GlfaEccThMxju0a9tgZl9hVFF+ahcc9/IlXoks4aa7P5JeBcc3bj99+oA==","signatures":[{"sig":"MEQCIDWS5XfKQgVKkAJHah+sDEodNAV8QoRqTWm9rqdkZeoSAiBuKDTCTmswKgL7/1nnUtQkRSrkNsVJsx4YMUS7FHL/jA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":956176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadtCRA9TVsSAnZWagAAmi4P/2+rnR2bas6S50KHW2rx\ngPIQx56M1lveh7XsPsAjHHG42xCGAyDgSI3UA/WYC6ule44EKFQ8WC5Lp8bG\nwAw8demvBjbDmzxbSfOezp8CBynkQkGYSBGOdB7imHyPN5pkrUM3XQTULU+8\nlUCCqWXiKx+WbIcVK5hlGuw+cJAdrxLzHzm15eJXAhMMi8ZzFwnjpeqFarwt\nkjQc2nmTF4E31Z4JOPBSYQHGHJ83KW6ieSBsgLWN6SBqIP782oWelFT6np3c\n4rnaYnYFNpqB39n7KWted67OScT+AzPRN2ztWrEkxtWk0WsBy8q0nhnClKk5\nopOTgBP5JKNWIXSDMH/9hNcSDGsspAIbOY7CUokjj7Q+UH0sqFBglbrGa9Pp\nVtWgjeDYbftjOOVIwFNWiBRGu/8JgCgdae/ievZnuPc9je1H85pNu+exaezs\n+AYn1SiGUGlMLy0D/ZZAyLTW09Vm/N1xUOvorHmN7dpkisTQ3Ap4v5o+vIiG\np+tU6AbPaS9oYk1MgFfyINhJC2Rtwt3+mDlYv6qSMI7J3eFuwLc2wvewwtdx\nOmfXUwxbBYud1uTi4wChbeuhTXJ64SU/K3pmDvhKJ7PGRqy2ETFEMieZEVdN\nwTBw9kwBAr6qQLl3Jf7r8OpOCbtR1ciCgjQ7s97p2baQTNq3ALgN6HzJzHPq\nnEoT\r\n=L9zK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.774dcfc8e.0","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/shape":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/density":"8.0.0-canary.774dcfc8e.0","@material/checkbox":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/elevation":"8.0.0-canary.774dcfc8e.0","@material/typography":"8.0.0-canary.774dcfc8e.0","@material/touch-target":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.774dcfc8e.0_1601546093399_0.5751411330399248","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/chips","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43d875c92066fdd61d06682d48ad10f65c9aa27b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.0f60323a8.0.tgz","fileCount":83,"integrity":"sha512-IUr51akDVxonLhGn0Pc/IQiAKCtheifC1fMDDnPHh8MlW7PoQgeGUtxC/CxEjBogc3HMHXGg4ZeC/CB/v+rwaA==","signatures":[{"sig":"MEQCIFffZg5RqWYQSFFK/fnKrkyBS9f+viho50IOqf5hSWagAiBAXTCEJ0r50qII+zr35OTNoPWk2IHpNrVIyEImtnYRKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4BwCRA9TVsSAnZWagAA6sEP+QAV85fPYtVpycVon0Ws\nx7TrZEIsPW2o6M6mmpJeddY8PurZQQw8nG4F3XqueNOJrFMQ6JRjweE9kock\ne1yGdHrX0LDh5odi+Nc7YfFBJk5rGu2tnv6KOKPaEvqXdgndd7aIJG6IK8wj\nA8cTTYUE3Zl4VLPkSbjsrBjBN9RiOeYmgBUazRg/h5x+TyELEMVV7SWBR6QL\nHTK5GQ+kLruuzK/KsFdPH+UFUWFlKJbdi26yHzYX/XbRJsN+enV9HAiGAgOK\n2uCMREumXkp0NKZ3lvguf7lcVlnVelCPgxUfRLlauaz4CKgAuTmITN315Srg\n1IzR7167mrdO3cNXJUtuq/r3sNuh2IfivRpeSyknYAKN2agxsh7qQj0vmwFh\ndr6xZ5OgU05g4t+JgXrBw7HsNsp0A+44F/obKbZoWfCXTli5OzxMUIm9i3tX\nHpdcFGB5KXL6Rj0qIM5T++zY7W3cwgzmDgpbRzlNa1kR9BZ939GudK9aRneF\n/SglL37yWzXjQfutc7JM2iPDDg/Dnpte/u9M+JtCfZ6YivJz+aHuh/7s0pFv\ngm8vv07hVcoSrUPOBGtNivQqmazkY8vpstfExP1iWmrZEe9cPu9lQCi4oFkp\nojitE9/TWmcHaAUY2Zdq139TU7/XE5/TcF8Nk42zK/XyxEBZvt+cKQ5VHz/k\nu4ZJ\r\n=zkIU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0f60323a8.0","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/shape":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/density":"8.0.0-canary.0f60323a8.0","@material/checkbox":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/elevation":"8.0.0-canary.0f60323a8.0","@material/typography":"8.0.0-canary.0f60323a8.0","@material/touch-target":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.0f60323a8.0_1602191471328_0.02406831179881741","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/chips","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.d71622574.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4625073ccc2cb9ec8f342c4cb635e6a39362366","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.d71622574.0.tgz","fileCount":83,"integrity":"sha512-H4BO5u8Ii/XwoZLz2y6Y/tDniQdu8IvNOO65CYDvchvo2ual1qqbPZI1nyBhzXrUnC7Zj7hjWxeRUbKvAK0wpg==","signatures":[{"sig":"MEQCICQcYjSD2p9/GWZOyfn5gNxztt+6d+w2WeurOiVg/OBDAiBgyhn0Dh7oRo+wkmkf6/74giVV6bWNQOh5ayXEobMhZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJCdCRA9TVsSAnZWagAAUhcP/jSFtDylA7V9vciuLuFA\n1jyS4Z7jovwzraPUF8NeJ74YDQ9yzNIRXxc2Ta3S5KeguA7pQJTD8Nfi3AD7\n6YAsfTx/Ixf0yBJGWPBvPOCBJi/SsDmC2lGUKa6cm+UaRtohEYlOqDUDJqO2\npCSiIWsx8RgNLx1S1tBO3CqxivNw5wGE193Hm6ma+n7PJ7ZPX9u0Di6mS3zg\nuhE/CXJTBYY+eunkPFG3SX/Pq6rDZCmQBX3YQPKfTGKkI/AgvHsMHNQoILaN\n+pMVF/S0/SDrgbXvC8baEh9hWGLCCeiYzvRc5ARykD3R2yzfCo3xH88c2aAK\npmY3wdfrKuucVN6RSKo6nTP2VLCI5rEs6wQDJoSIvkBMlNQN3xXoHWWH8Gvu\nMgbE4PhYuTHjqW39LvSYzlvrQk6g3oyzmSdJaQJhtAe/nBuYiGAIjzicjHKe\nZO63Zk7wHz3IUKhGPvkUmutp7fcgsQyClg1edLw8tQXKL4v/xox2OQIuyTMV\nhDS3kyxv2QloF0qfVx3aL7sXo9HKdRKel5WhcFM0EX/cz6oDT+rrp5GNh5KM\n3SUCkLcImv8pUvWvH0/jwMi4pKER2OcRYO5/dz+1otqYOTv/YARhbG0i3RU5\nsrTiyLhz/KLhiE+H0g52rq+lFgTFG8/Dm+ho5geEl1mBYXxqYtbODBberZsW\nWQFc\r\n=0lAj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d71622574.0","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/shape":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/density":"8.0.0-canary.d71622574.0","@material/checkbox":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/elevation":"8.0.0-canary.d71622574.0","@material/typography":"8.0.0-canary.d71622574.0","@material/touch-target":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.d71622574.0_1602261149221_0.7323103335851935","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/chips","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cb2e9c712ea10678ab39672fde1216ad9e584da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":83,"integrity":"sha512-UuvEj2VlClVT1HrP6hDNwlbMPWbMe8KxzUpYbUG4be6T3VqAWWoeiP9WoKkV7+cXi3c8e0wbGjrUQe9lY0V1VQ==","signatures":[{"sig":"MEQCIHvI9V7QcS03xk9YzNn476QLI9v//Sff0V5/ypBdV8W3AiBlgyZirYQmcw7rJSv471A8qRZm62lH2Lb7SH/0GpLoOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoyCRA9TVsSAnZWagAA0XkP/0Ao8Z0CBCIv5GfX/qSe\nkDb1OBS3a1ksMbKPAgp82DRUrDvg+uePbP8r4IUR6J9PiYvaB+Ucgy1WA3cs\nKI7Tf1w96LCH52mwYmi7sZJI/dDiqTvA8Goap4VCE7Txoq4dHAfGuAR3Dchi\n6FsHV0yldD/wQQfkfXNymur/eUfH4w4PPV8Krot1MkQ+1dLB1awtswXXdX0S\nvJ7P82uZVlUPBjqW1xs83I3TCtMMibCRx6+TQNyBRA1r4XiEXSAO08ps7ezP\nqreswUPqBMfSxBGJdqvFmLnI37S3AnUiUOkv8+MkwxCptXswocsYZDtAYnaj\nmDWa4aO/8zHwYw/azXnSeV7QCHhdJMyWSD6QrjNoSffLn49oDQgTLgIWGbAR\nnXjX7MNzdnEbfKEgyUCSp0412DrErGpx5FDsmTPf3zX2TEnLmd/DNXjSgptQ\no5lxvfrxjulZMjMqy6qhkYdcL7j+mK0G2NqqzOwEteUXYO5UNFL6kN3YEGnS\ndkBzXg4M75ELLKt2hfiXWAincMvqMfJQmP9hBnxk5GBa6BbTCvzrOlKrHBAz\ntV0rSNbmU/G4pY0GCVXKAoKNQGNEZA1IoAw3eZ8EiqvRyl9wxnkYUivp4jly\nFpUi5t20cdV1k7A5VAtpEm7leK6edn5ngXP3/X7b5cfKQpPA7kUsca4N11uN\nGd1L\r\n=ptRG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/shape":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/density":"8.0.0-canary.7a9afaf4b.0","@material/checkbox":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"8.0.0-canary.7a9afaf4b.0","@material/typography":"8.0.0-canary.7a9afaf4b.0","@material/touch-target":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.7a9afaf4b.0_1602284082386_0.9260543307707452","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/chips","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c11cdbeeb0afe7451338c1febb2a7f8d5201ad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.8a39352c8.0.tgz","fileCount":83,"integrity":"sha512-Jup8otRqTF7EiUAjZs29n4Pt3EJAFeJtFCvlo3wvgVz0E5RbUJN+/vd/91qQQHLaQZao4gJ/d0UL+i2Zm+Xmzg==","signatures":[{"sig":"MEYCIQCaIVhD3Glm3lUHzNPGlAFLxw2NUM+qTh4CcfJtsIujeQIhAJL1wGDcmN16/Zy1Luuwmms1zgcdqIOiX0gUJQVxLbzl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJazCRA9TVsSAnZWagAActQP/1mZtdTQz4pzqontRj7M\nOAEwov2uARjRHzbpDJGoSc/8+Se4rzSQgxUbj7tsPqZHBu7zYRw6oEComCzO\nG5LU7/RzPrBuXMmR+mBBcEBAAx3XLHaKRoW0/PcVjo+Qclq/pxUPE9s012x9\nxvF+ojLjSUvgfE2VjSHjEpeizMfqDB+BGWpmU8uGSiseF4abS1YmRY/Jbsnz\njUHRJLNScyyMi1Jv4KX5DKejq/xu7ERXtywLDL5zYQtMTvC2Y+RrXMahE/2M\nczlWQ5RrrhYb2lQ84fwH34oxxyx3c5b+HZfs9oPu5ig1kUotv/cntTNc0Dvt\nUDxMHp52APJZvy/Ym2Av1L3+To3UYBSqc/weDP5h4aly9BMPZxdn86+FeHh+\nhrjSBZ/Q7yq7ceHfXlK34BzpFH2Bj8WmAW8QSL79cNjvrwIJ8ejtMsPI/6iI\noX5qQu2hP0Do+LzcGB5Ev1NTT1R1ZXP2aORyrmeMKrAgEeRpf1Ix1N8+yiEK\nxx2TyxcRqHcsaPdfK3OvOYRNimh+WF59K98sbzTCAhXxtJ08TVjN8Kr3hgNH\nUsKgqFd8iAwqMOi9/9X+ZjlsdPn4rHRee6pzjohxhoynM2UyW3EOEmc6EWAR\nwxFX9ZMFdxJcJIYLA0j8OGosxNdeEp93qp036cTTffGaQ6wfNCgzEYTnIQl3\nFikw\r\n=GzqN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8a39352c8.0","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/shape":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/density":"8.0.0-canary.8a39352c8.0","@material/checkbox":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/elevation":"8.0.0-canary.8a39352c8.0","@material/typography":"8.0.0-canary.8a39352c8.0","@material/touch-target":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.8a39352c8.0_1602524851328_0.5586073757597028","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/chips","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"476e77345de4af435473d566fa382db5aebafe33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.790ca85fd.0.tgz","fileCount":83,"integrity":"sha512-LGAEH99pXACJD1KGYxRDpKt1BbJ9EDNFk+RkJdKODDKWuJuEkVJ6cz9iaR31zLg4BjJ0PqxR+KCVLQ5x9kpTGw==","signatures":[{"sig":"MEQCIHulJ6Ctj/NVvISfoEPemcWD4a20y1zQP1A+OdIeFgDXAiBkvKh6HG9Ajv2l/uGUBk6YZtXLad4EIPcQ2YjFdWDbcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFbCRA9TVsSAnZWagAAdgUP/0NBCnAdpjPjvxWsMRHr\n6pl6SBbgaoms1MBFNWl7Iwy9fJh/hgP3XraWVcTG1BesydBSTg+aIDBEna4i\ntC53250UyFykuy5roX0Sigq6sfQT0VYBHO2FU9g+712OS2BKo/Ntae7gEj4k\nMOC7D2HziTaU3GPIZBma57I369jpuSvp/6gXQehpgYy7XOM+yeu3gDk0MsMx\nI93I2gXnRV0iL0SCuwaqR67ytRT67HiBwVCgfcNyezknoqkW8ZoAGyUD3i0I\ntSzymxEvFZ7kKIeV5XrjB0QZF/fH8f5LMIAae/NfxTffr22l8btpEN/POC4k\nMVYEQO34VulChXUo/Nw+Y5FHB1RVOH+fn0bEMBM4lpLGULDtUtQi5p/TNuHR\n7pkh0m8qM3hQwnmJA009G7ZBs5AsUYIYy7B499nHRoCmT0xyybK630Shr/vk\nbbqfwud4jUyNim3GKZySoXPX9B2FJWaB66gwesbQrjRjcRNfxyXpBh5FrQvw\n6y46ev+g7AUzmo0LbgDLjXdtIJSXIAl6WEj4tizSUGKbzGBB6ilgHTtBMoP7\nRlkaXlE4c4/i50gAUUBrpevNEiWdY6mofIrS8kI6HrlYjPrd14rkOSjTP3kD\nYPGkX/FsuHmQ6XyqzbM5nAkWocjhvPtEno0Z1zjc/lN61G1GAADcMyet4o/C\nTyeZ\r\n=FX3e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.790ca85fd.0","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/shape":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/density":"8.0.0-canary.790ca85fd.0","@material/checkbox":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/elevation":"8.0.0-canary.790ca85fd.0","@material/typography":"8.0.0-canary.790ca85fd.0","@material/touch-target":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.790ca85fd.0_1602539867468_0.43325455069398844","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/chips","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.174c0becf.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfe0534f6c73d9d476577a5f602176ada94f8178","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.174c0becf.0.tgz","fileCount":83,"integrity":"sha512-kUiWtd/P71cGPpnh4veo0BxCBV1bwWMmchIdkjGxmxL5FS6e1C6iTY689W/L1ioI78OtPhgCtpcvImVBZY1KhA==","signatures":[{"sig":"MEUCIBuvfhPMZkc+IkGynrKYpxLTlnomLmlJ9lDfkL7tGjC/AiEAjWgoamU2Emm4RnYVg3Mii9Guy/fvOTfUxkRjrVnLwUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl+NCRA9TVsSAnZWagAAWoIP/jhw538FsPRe6cVL4d/T\n557j2p8jd7qa0E+BdvkUL3INPGCZU22FHFVnVgzv8HJE3gOL5KYdsJ4nzkSB\ny2pTkOalaZgZ4ghZOWGS+slMMszVKUXOFR4XuN0KqSDND7zlHDt2CwtOzcDx\nZuvIGS4CE53aBuWD+dW8/5q8FNS49Zj9CWH8O4dHCUNklnHNisDW98wyKjRE\nkSrtHOOsyaw7xCguB41fC7LezkZvSfcuDiTsQ19IlwZiVccxoX2pAgg0ptxR\ndCqpBQQ1NjoevrTaj5VnzSf6kCuWE32BOZZkkZaycpQrpz4rEmrhyC+Gsr3P\nvOTeKkJpIBuW5QD7v4MyHEb3f/SMe13MGTxZl0Br+palfU4nazWH3JN7/fMe\nlo1KVOV4JlkvYwYSPP2/SlxX1FtncLTRfPYIBQADlE9gEnYqLqOU4oqRSLz8\nDG8Gp8pCffon1MZ7xWTQylPnT68V8aJbL+dMOJMBipDx+qc8q/BMm2glRhl+\ndPmUFSsNJu6e96fm/Neo9LV5phL5UdT8byd1+xdhpfJ4p7aWz4bpuu6xHwoe\nVNPA62+xMiJO0ak6K6k20xXHbDLKMM/u8Np7sSVHrADkV66YsFbNruoe/SnJ\nobSAb9MROpuY4FUPsMopLjG3tUibVizeYMPr8RVyzvPFFEW1LaohzQpDx/8c\nPZc8\r\n=noTr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.174c0becf.0","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/shape":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/density":"8.0.0-canary.174c0becf.0","@material/checkbox":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/elevation":"8.0.0-canary.174c0becf.0","@material/typography":"8.0.0-canary.174c0becf.0","@material/touch-target":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.174c0becf.0_1602641805416_0.11366371156214794","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/chips","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24bbeba0b3bd99b6d4e5910a2177b9e186abb1db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.c71ebfa02.0.tgz","fileCount":83,"integrity":"sha512-3L2QpUsjgnRYf24dc+JpL27suCXQRqzp8hcnVn3JGFy3z5Fibhnc6B8XvuImM+3jnR470y0n7pOMfrbSM/OLWQ==","signatures":[{"sig":"MEUCIQCnz4vpAGMwzX6LtJ7NI0HuE1A4qjyZfdb+nbd+04HGXAIgMaLrK+sLb7W3ibQnweM1sOR5C2yyQx3H59Yq1EEwGhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwLCRA9TVsSAnZWagAA7XQP/jJrh1Ov8sPnGXDZrYYM\ndk/ytD7yqrN3cg+5KsSaNFvv75q9euQYutuhhpoz9j5myuvqbJ71SrM4UjMX\ngcJAt+xF4ruKbP9RTSCjCs1ZkFwxcXEY89mz6/g/aah1WwrZjnbr5Y7AAgM+\nQ10S5j2EY9RcYEwLp9f7e+sKFiHMMGT+GeF8VtW8iTLhRK0jNKBY7aNWRUTg\nxqTWVivs7UbvMDA5bPVGSHJECOSa0urrsJXdmdverVTqkDw6qjvTnVjkxjhI\nptvCY09DfptSvtRQNNV8Zw0GLfE5uu/P4kNdoIzRVOf+5ITITgrQK/BxkoG4\n5bvAW5VyvNN4tGTBV31QIYKlEZd7s0SzmPxHbEO31KuEwOjcMkFlZv8FOVVb\nIr+C9NoHY+S2oytw/b//pmCblDFRxFgu2A3aesii+9m4jLRu4Lefzbo8W5oi\nkpQCeCtzs2wls0+ox2THy3+EJI4Lp8UQt9wnbKMWNfCmTwArRwHyyIL59XzX\nEEbtfdCWNOc4wVRkYjBiLSdZLkAgok+ce77IyP7/4IctgOhhBCMkDU5Fy8Bg\nTHpEWEIutVX8XxEFXJwxvvryepETidgDaOEMeIm2ctbWP5l2fiNC6X4FgBnr\n6tor8kOjDwkRhPCHwAw5mpJcDRR7P0ku50dsR0JdW6DD38kiVaNJkCTAY4Gw\nF4/k\r\n=1lwR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c71ebfa02.0","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/shape":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/density":"8.0.0-canary.c71ebfa02.0","@material/checkbox":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/elevation":"8.0.0-canary.c71ebfa02.0","@material/typography":"8.0.0-canary.c71ebfa02.0","@material/touch-target":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.c71ebfa02.0_1602649099232_0.4210335004931618","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/chips","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6daf7305f8902b68c927657ec6c66db48d671611","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.2ab716cbd.0.tgz","fileCount":83,"integrity":"sha512-XSGKkwYHc0mvqXYO6azcUyqKii7NsEs/do9fkYHNOD4WZKq3nR8IKZWft7oXmDbcLor+Gso4shvLL+g85FIzbw==","signatures":[{"sig":"MEQCIF6906tnGlkSXpdub8oKWxCgBd1sRKeq0loO2LjhpWZOAiAosAGmx5rxwzwOKGnWo1Z3iaf73oSdltH4i7Uz1mthVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOPDCRA9TVsSAnZWagAAZp8P/jv6zlo5JBN/E2AYDnWy\nVGI1PXtVj7qgaXu/KHJ/nm85w4anYjHNVor9b4sILD3eqaBt3f3MLN2f9CGX\nGfTbstPZkcJlxN29NTvj6h99gOl/SjWYfRJ0mqEL0BbOkAXwyP/ZCgj3guhZ\n7eskRInk3DgAAC2PE/NhILJ+MUSGHG6rUi3BedCFBBGPfnJg3+KlAsHlDojZ\ncvP5Sx1KVfMduqztGnDiLrdwm0699HVediNQwI6851imEHJthn0pIJmwuQyv\n8JleQhHZ/G3x4EYfzroq8hjIozHbwgyP5yPYu1PRR31p7Oe1RIomVvjJirxm\np+QCyrXQ9q8TuduYL6LW2VvTz85l8aWprAEV/lxZQp9kOCQVkqc0d7Phf5IP\nCOVZY97LwBsfn6ZaKTEFlZ3Oz7iq0ilyz6FWSfkXsGsRIBP+7cLQvUodciJv\nAG1VznyMT8FMDm77TL3nw/o/rZ5WOyKp66aVkGdWr98+g6RbUh9oxKkMXVki\nlo2FZL/LnjLNQ/DXi+pL916+eAgs8PjWGDXDUBCKr+hoOV1k+CRh9mZYfa+F\npsw4qT8PPtsGKrsz5ppxn+EqfkO6Ia0Gimfc/7I1JMjqzKa4bbakWUd94pN0\ntaBEmZXFaRYxz5v+NCR5ZFSracs8Op7CoSPMtqjOaVUgQ3LxWmJy0GaZy8Ap\n/A9q\r\n=axFr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ab716cbd.0","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/shape":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/density":"8.0.0-canary.2ab716cbd.0","@material/checkbox":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/elevation":"8.0.0-canary.2ab716cbd.0","@material/typography":"8.0.0-canary.2ab716cbd.0","@material/touch-target":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.2ab716cbd.0_1602806723208_0.04622061818046075","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/chips","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b3e4ab3bf0d32affa903c885104481491b83d1e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":83,"integrity":"sha512-6Vcu4xTr1SzHY/tn002BZn7t0DO1Brak24RNDHhxCSAe4qHRySjqvJmnllfEuSTQbSXNCSezZsUnMGm4vrYPCA==","signatures":[{"sig":"MEUCIQDjY7Krp3t2X6JwFRF2fO6fBs+B42qiFR+MHDhjaDUzTAIgVl2Z33iWefMGoU9TAX/A0yRpLmPhCjrXSK4ccQw/9hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ4NCRA9TVsSAnZWagAAOLUQAI8g1FInQnZlKf6rUQ7K\n7Vj2G/eP/z3y+aDVmgajT5yfSrWKrMbwG+N4YHyWI80R5W26cyq/FMAjIuoj\ntpUGm/cLDvrZKIKlnq5UpAvnIoPqE0p5uM6Pirf/MhSfekru1BZ6WpWm8mmC\nTRSZ0f4H0YMxHNktnz+BFbDKNnHm2jG4skp8p89NJgSviW50hvGfgCMMJuqo\nimzsZpKISJrU1KvcrFbP3mJGmJbmP0bGu8hQAKX132ueBdyN07i0lJQg+gVZ\nduUzuadVeHULGB4yKgVm8phH+neGLCldgqcrogtBQSzHTXoiRpqMiTuNPOK+\nEZYZ7vb4hbpWXSO3anwChqCg5kd56Qfr6P8Yrbjku8xZuyR/5pxBKsxxf+0t\n/w+hM6idabnks6tSw9CfmCU2wXA63XDUqcaJYxut9hkXh559rK0BaVplEib/\nlhYwDgeWsTmFwXB1zKTtrb+d/Ye7oITzcnMFVhdQL8ByUKWirsXK/xQXkoLx\nd9UTwlUW2CIxygq7mCbbh0q3TJ+AMxmXNA2eRnVEvJ3VhOYBjncH6mARKKIT\n9CDLNxdFzl/iJgO7tU+EW4GovPK6P7ypT/uSkoNSrIysllN2pqpQ5Tx0of0Z\nScaVzVEx83n8lrh+o2q1d7QAqOtSQPpR5C+WviTKhNGOn/DjqQ/aCG+GnKY9\nJEH5\r\n=qckF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/shape":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/density":"8.0.0-canary.43c1c5e2f.0","@material/checkbox":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"8.0.0-canary.43c1c5e2f.0","@material/typography":"8.0.0-canary.43c1c5e2f.0","@material/touch-target":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.43c1c5e2f.0_1603116556684_0.21078781170576244","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/chips","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67a18043102740bbc19eec317ed2a93241b901fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.ccc64eea3.0.tgz","fileCount":83,"integrity":"sha512-AgylD6z0rDKugrQVdtErkpomc5Vfn5cGPaCmJQfzGF6fzm7548LPxli1UPWz+T8bWLIIsvnZFoOLyVmO8zvDXA==","signatures":[{"sig":"MEUCIAb3u6rczIhYvTbxTHcqbi8lTwz7RRUf146JuzrY0q/WAiEA4lPLtza5HYk7OXY8zHdfSc7nVqxiiFGieGkH9DZLLK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1M3CRA9TVsSAnZWagAAMjIP/Rxv3rPWXOFPycxpgK0T\nGlb38HsWFwx0UWpTroElvANnZXMyznxYw19m/MJrsvSq9PoiI3oMRlfgXBlh\ncx5aS448fjN4umeDIbWJqbt9+Nzamkh7/3krXkfzaPIZjgopDUw2mR7rYStf\nyY0ZIEMlE2Y5NmKExT1EYn7IWpunwBgMPH4MnyWDQpmyAUtOND42pQ1/9Ivn\n80i/tDT4vyYBoEHUrbqxMk2ijQZKC7uWc77/feNofzt2/he0pwM8JuXXusi8\nuwLq1RRoJGGmW1IvN6+T9G2MfoaXeGu9Zqzwnj5I8g/GKKVYbfLmtRkQgM9Y\nvmzRJixt9LcLqDUlLRzTxhXWfZmZZNaPl4N4L7x5yTIEtBmQ2apaO/GpQY2Q\nNut+2jc74fYHip9pAA1uTGRL2zmsadLj1CCf294lF+XPNgZApNmAVaA652/k\nQy+LXQQ/klLS3XeFD7tYsCK34sZTBvOt1qptJ8zDK8crvLCrWgoTB6jUVEsV\n32JJsH0UXgS0pz8JlNmNftFg1VOcxOExaFHpmxkcu6YSFM7FBwqFILs23k9B\njqF6UNow+vNeqfR0CeC8Jbttpe0S98mg7dnucArJHRhKXvrlpDR1oHfUxJPh\ni8kPMyz92qQA5QqvpXO5ocbaJARKL2yVZTX9Srht+0ZEYq/uQR8Axj/aNuGJ\nPixJ\r\n=miGP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ccc64eea3.0","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/shape":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/density":"8.0.0-canary.ccc64eea3.0","@material/checkbox":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/elevation":"8.0.0-canary.ccc64eea3.0","@material/typography":"8.0.0-canary.ccc64eea3.0","@material/touch-target":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.ccc64eea3.0_1603752759329_0.07349110276192738","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/chips","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"343613930ff69756da214f1b7acace0a84ba5415","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.a79cdd019.0.tgz","fileCount":83,"integrity":"sha512-RwefsE/IYAzKf0Lck7ZXPXY9RzARyZdMpUZuL5NtCgKRgMO2hP8tcrwaB/1t+f6XdQLqdSCw6qBxSgpBSpUu6Q==","signatures":[{"sig":"MEUCIGSpm7SsSym1QoQXdG5lgpwX1PzRFDSVQQwyZpIj8ASpAiEAt64WS2Tm3WyO1w+BCgxEEHj4xCm0/Kwy8om04LHwtug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEu0CRA9TVsSAnZWagAAo5EQAIb64o/HRdKasdlM6tLU\n+dVUAI8rCSzW9ArwoCkuh/5zr73aJvMH4agu6IY4HaEZtLBA6HLy5nbe9Wva\nwGKlB0XCklhjb7THej148JDQRR1Sgp7aUXvEl9z+SXm241C4qlbqadLE19R4\nxofszbBnPJE6r6KQwEJsiN8wksV48BtfpjjO+KGyxeBL0TW3Fn6bTXpXB+vx\nWxICYhSAIXxZQ4Lz0FeGQhwoOkVgS8SLFN7LsvWOzqHJCtATGBz49b/EHxyr\nmksKSnO56eJTGAVpFBYKmUEj+QFJCkzIOZ7CyOl7elDx0a9c9dbSvMId0z3M\n4aU3sVpa+zyIVnfZiXERFiyeBUoG04Kg8Sjqtx1uv8Qy+/lYYZ7ZsaZ69Z6h\nMSn+KJ4xMTLUcm0GDCAKosBxST/TW0vitvZR30kUco28XUF8KTMk9NsDCXPe\nrxDz0fF2JyuCkXKAlRc72BGI7yM2mHLFYEp+gc/OO4tDj9FTubLGac4+NFzl\nobDnfjS6kkdPYShf4i4xvW9nx/DQXntb2Av8ZEay4oXAcQCdjxoAhNAs1TLW\nvUcyMRZZ6/JOcehJtg5zOMi1ZDwP5S3lqW6fNO1+ymig9XACLHtDsHGN+vhc\nm0y/rmb1TPqm2hvZd0lgzMThXhMn+zL89Lw0bvJtUdS2V3Zit+NnSuZiV4nK\ntebF\r\n=vRvk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a79cdd019.0","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/shape":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/density":"8.0.0-canary.a79cdd019.0","@material/checkbox":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/elevation":"8.0.0-canary.a79cdd019.0","@material/typography":"8.0.0-canary.a79cdd019.0","@material/touch-target":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.a79cdd019.0_1603816371619_0.44645873407308967","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/chips","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.596e98424.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"662ae6156274d24d22c4422a799873578bf2b313","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.596e98424.0.tgz","fileCount":83,"integrity":"sha512-Fe+jllWXTMwDFn6V+4DDuwFMgF1gcZzSQ9G3CKvzKi3qTXX1xYkpHVTmEa+Yq+EcpM3Vp9V94IoL1C5/ClDUzA==","signatures":[{"sig":"MEUCIQC1F1+F7MIzcjVi/JjbPAZk8j9gHOIDZ5ZxlZMXggnCVwIgMn4j3CrQ43k/qn1R4khb89ICwxgkkXlkPQjH2GfREeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZaDCRA9TVsSAnZWagAAax0QAIMs7hNCQpX5XNPATabD\nFTQErJe7GgyPj/m5ZBc+sHA8glOA9kdDyLnKoJqoFtO2Dj5AEmma0RuZprrP\nWJrbLUrN1HR9LgklnxFnkmnATGdtmFU42JdPgY1DI7h0GjoDwKmG43+N4pNW\nEwto7OLH3jO9gGUlGGAW8918udIGlvcv555wMqgNNer4noxHLfhzT+EM/AMh\ntCo1AQoDApvPbxNvR3i4Auc+r4XEr6RXSe297gA2H15uh7Ykhvj4DAqT6cou\nEf74voRDvPgU/0zAn304b6cU8RRAXaKwWRAYy3EyjsKBnUl/2UhuyUjCka4/\n7iMdGA1DxSJU11knBZG1kN08NeWva5M4NGXYGsAWq2EBBp5c1Cj+Dt/QqDNJ\nlH/fG0DDLIVjW9nh1vJHZoE/2VK+uIGzW9GqH0GvnQhGZJTvUF2YJj7D0Nfg\nykfiMbxnrqSKtHUT+VsAc9qcPYkH1Sgxx8p1imIpyYHBwSEnvayaK8lU5UUg\npseEldxL+E8vfyFW16xAgOH7yeRGZd0uWShTl7/W4gREywnuSVSGbAIrcPyC\n6/SKOObilGU6krv0IN5JxWwV7IK5u1GEm+3JzT8i7Ih9xstusUGcIPd4pK70\nmcWgmlWUWy3zwZ+MJYxFLz5vxxs3czj9Jut3U6cu9SdO7sjTwRVkcqJ55iLu\nB68M\r\n=HmB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.596e98424.0","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/shape":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/density":"8.0.0-canary.596e98424.0","@material/checkbox":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/elevation":"8.0.0-canary.596e98424.0","@material/typography":"8.0.0-canary.596e98424.0","@material/touch-target":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.596e98424.0_1603901059231_0.44631785150410375","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/chips","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f600ed26229406581f3ea5b8dabbf04ccc3f64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.05d5facc2.0.tgz","fileCount":83,"integrity":"sha512-ncm4X/ekkiX30K5crKbCem0piWEaYpj271/VWG0n5M/p86nL+CZe7YhbR8QiiOAN6a1gIg9DxSdxabRnWz1dyw==","signatures":[{"sig":"MEYCIQCbxrWk8CXpcX/AMCLsyRG7NvAUEBCYFmkC9C8USyEjUwIhAMQO1jUVCekg31FXcYze5iU83eB3VVhCBCj7FxnELkYe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZiGCRA9TVsSAnZWagAAXyYP/Ak+6JyrCaGziMUG+vWR\npS0mx1UhqejI1CDq6gjH6ZD1YlE/Zn7I4i/aKwi+Pm2BJZvZVTkA34V8op3s\nQY4OIh0UY01l5RjniDl+KAFmsMTGKXUo22akTEzmllGEN9TcJo9c3j7CJBKS\nUI5KXSVHm+Bf+VFEqQUYEOXkOCKvC+YmW2FNcRuvWf4OSH54qxd5FuyZ3rOX\n9F9G8MAENVEhLuLfMzI7ZxMSof4/oHSM/3XYr3OIZx0QGwbBpjuPxAvikvHm\nRtj1GDpC8Ubj/XqPxT9eQCnqtoL0vgnp6JBkeJ05DRFJV69AGA8S5zZXzwfA\nzHjSvW2NBlm2t6cioIQkUhQOwM58EQfE/++EIzSfZxVbzhCi6Pz0OtKDb1jy\neEV89GXalhCWXHJTEzijUW3sjfYmqDpq//14tOgXeYrH4c44KQIfJl3mURbh\nxqZI+KmmtcSyNYzMmn8Dtd/+Y+ABRiJ+2C0ugJJu/EUG0WkVwYZreJSPRdFI\nB6LWcjPRSqHZGNToCvKSbemuWJejgphaEeOQO60NYQNdLpscg3+wscP91GDl\nSh7zPNkVxHpY7zohbgtmEcS8N85WLxLM6HJhTSlM17bEy7IYBgn3eEUBVS+7\n5T2knp3Np6ej7klXcfIDwk2kSIOgsQfunzGEeQ4o74b3pznA9Z9GngOtdTqZ\nG4UU\r\n=u/D8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.05d5facc2.0","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/shape":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/density":"8.0.0-canary.05d5facc2.0","@material/checkbox":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/elevation":"8.0.0-canary.05d5facc2.0","@material/typography":"8.0.0-canary.05d5facc2.0","@material/touch-target":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.05d5facc2.0_1603901574427_0.30187289961585395","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/chips","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.291b3553d.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5c3dea1d85ccf12f92453548cd9a28c15b83bbf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.291b3553d.0.tgz","fileCount":83,"integrity":"sha512-0G4efSMfYCexBtg2aBNqsHVfJUqEaIfKkzPj7aB2iwqGPrIs1F+nQq2ae5cHo286/W5bwWiN834hyO4Z9WXEFQ==","signatures":[{"sig":"MEUCIQDlLEcmzmYB/rq+dATvllCh7RMWdqJRsMpxbouqfG9zPQIgU1VXMW1hY2+2oVNPgQCiigmbq3BGoJNlgAvzm78W7Dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma5lCRA9TVsSAnZWagAAqYcQAIIKGRnpWg9Jv3YhyuXv\n+06pTbaGagjX5lq20iqneIamDxepPj7xios+mDstTxQrTAfzKexjrgDCWB7z\nRNNcjOlPc+KPbHdxhh4f34EH81dvkTt7epCuF9xt4gHB6UtAMWkQakbmXpok\nWW71VKG3Nn9f2tWwFPSh+08emyLrr2m7nnkQmHDEIHenFX+tlyzFWOWm2PHM\n38zZ3a1q7EKU0kFjhAKlC9uxNaW/buKo1eSFhKWBSvNogxu+j3hg/9Kbstk4\nLVESYIeIcX6EbFNpGA1O3K++H5zjQRRrlB06KaEIW2FhjBHQnCW/t36cP6//\nv8yZv3bPLTvKY9z6FcL5bBZIrzi8wNQ9VGsFMof6yLFw47f63ptGfIqc3Xcq\nczqm7d0ETup14jMkDhzE6Z36AkXQEInBxtz1P+6tAEmakaYApvXsNki+vjta\nzcynI9b+LjXrj66dEg8WYqzzxaJMxY9dkCo8tLwfLQ3QlbS8ZoBRPW+YJjuJ\nH53cwaTBR9FSCgBUYq5mC8RXRacbAShP5tpzY6pp7LJLbWfsfZNBzWr8IRSl\ndATPFxTsiS7rxcg1AZ2CNGbsK3wO+4GC11sB2e+QQZqKRQ7duIPqVlX16pgX\nDtIcLov4qCaN6QYQr72hEbF170SjGIzhedkS4j33DQAJeWpe3A3bKSrb4qzm\nW2Mi\r\n=N4Sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.291b3553d.0","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/shape":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/density":"8.0.0-canary.291b3553d.0","@material/checkbox":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/elevation":"8.0.0-canary.291b3553d.0","@material/typography":"8.0.0-canary.291b3553d.0","@material/touch-target":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.291b3553d.0_1603907173171_0.11384039172877669","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/chips","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c5265b90ced562cc0aa078043c87b995d373580","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.dbc449b09.0.tgz","fileCount":83,"integrity":"sha512-NsQJGVNDWi0X1QQM7gopJ0x6446kEOxdkr8/4RAq/v/OOlalM8YfWkZNHT9Y3QFIdZLpqt8CCBb8vHz1jqk8ZQ==","signatures":[{"sig":"MEUCIBpWlrMISLmxs2XTg1PaGwODv3C5UCeLlEqiAZt48BpXAiEAmT8HE4x35qbdrll760atCS/LHwyM1O1LpMuBlAOil58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTkCRA9TVsSAnZWagAAo54QAIsX8S2E6o1JzFCjzg6A\n7NKAFp1YN8zbM19t/KUGmkhhI8vKKYGNw8uZwvkhGI8CSujWR8KwztdlSGRq\nGp5GXR32n4GiBR+Sp66Bs46ayxn4tGon2polGOn2+uqVwOvIbnCduIpusImN\nMwTv+4AZrmXwqqUqbirKHdkxfTRVEbPG7SqgXasiUQCX18mnG1kUFQ70ZV7c\nuq1+9Eoi0TzeTAFJNZFAYkpDDSY4tifcB99T3CX4+Z89OoIygZ0qkDzt0i68\nIMDyQuejH8F/b+QlZc2tHC+nhPOguPnZIzp8TX0WXTcT7tVLMgvkhf84kjxS\no/nvjzFdpIU4RAjCCtGd2wig/RsCHjTktXtQdeLJWl0+jSAq5Qjf2FYhl+hg\n+v5VTbo+h2kJjvvvqWZllt2ieds3gVltoc7CPt9n+estvENx+gIi83ushsn0\nMjnRSMZIWTlTG2PRn39IMEY/gG3TAqriP54q63NNQR1eZmN4PPU4qgzsxtdv\noe4R77pvmdhZ9ff0gzoTR1n/fTBDQ4rOK6Jy3QueqderX+ts6rL8zbNRLHTm\nmX3kxt/eE0aZxJWcz5nH4nsSttVTkiZOobAM7tXPd3rEReBL2eVOZCMGCQca\n6PvdZdyd3IXCDNINjq0+OUURhlYaGHWN/KpEbMfoqf9ErzB0ZyFjzHnlh1xN\nhJio\r\n=3YjG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.dbc449b09.0","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/shape":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/density":"8.0.0-canary.dbc449b09.0","@material/checkbox":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/elevation":"8.0.0-canary.dbc449b09.0","@material/typography":"8.0.0-canary.dbc449b09.0","@material/touch-target":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.dbc449b09.0_1603908835683_0.7850035150818335","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/chips","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.4794b25da.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69f5a1cda4e427666f7222bd883b0db730e1cec0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.4794b25da.0.tgz","fileCount":83,"integrity":"sha512-oI/Dx6NJ/7qWio1Vhqzktkm0v1uzS6e5zUCvKJ9cyaF7ay8tnqV6n0nPbue4afyoJGEG73BI+N06Ygiuslm2OA==","signatures":[{"sig":"MEUCIQDfh9e3FdRl8RwPrSDze/D774hihoFfV6qUNQ1XPOdcXAIgUxFrZlquV+zL5ERZmGUUM+qVPC3x56L/vAdEKBQXo9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbt1CRA9TVsSAnZWagAAiiAP/22sgAsZvSfu9qmM13Mp\nsVuNIi8/s/B0f+aAvKQt0xPrE23ZdIcixZq0BYh0o5rMzZVUYjox5XG92/wp\nQyMiGakrTB9PPuyBwEa4MXvUhEqxGudCnkOWUPP8IYlruRyKGNqakCo17cUA\nvTLq6x2faEcWYYgpQ+/ctYoTZGYjEaUxDLfrFKz+K5vOwKRitBdKN+orTh2s\nd2qeznVJmrrA1g03P0NXSx9idRPk+i4OukjvHorltJsWh6pAVEYgQG6N24+l\nMw7biQsmvi0oPd/mvBMzsGh1dQyL3FvKcKJyGMpam1rCBIcnxisAHdkOZDqE\n69haub1EhjNE0saKh30N8XRKcsMDhPoLmF3/np2hjFFHskPJ3S9/aB5+20xi\nN51TSp3FOP+YUe2VxegbYcUEiImfzYTQiwyzf/1S9meoy8vD8Sa+lRieSrpn\n7SPVXALIF4RjB31BnFAy5yKko+7a5dy3xCXxqKto4KHUMOCjp6eliJXs6+LN\nk74Jb4d/WVJQBal9Z8QGaUypja7DeuSOQ33NrG9n9vt6CFMARl9WMyx4IDaO\nnxpt7s9v7UWdLAVb5psbERZVx47SVR+Zoh7ZYkOBOaN9KZJjHZ5HknLqh8+8\nHfdGEWWmMuI5ktEoYPI/Q3QOD72HB3Jh+akp6zUEq1iRcJYXMdP6sg7mVeZe\n25lM\r\n=KgzG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4794b25da.0","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/shape":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/density":"8.0.0-canary.4794b25da.0","@material/checkbox":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/elevation":"8.0.0-canary.4794b25da.0","@material/typography":"8.0.0-canary.4794b25da.0","@material/touch-target":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.4794b25da.0_1603910516513_0.4643070461361225","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/chips","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10f7e87db4a8c265170182aa85dbbdc9e5ca53a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.c61db90a5.0.tgz","fileCount":83,"integrity":"sha512-9gz8G1TAiutdk3AKDj8645xCb9WXr6FGFLnyhMzp5oKZmR4Dth6iyJK9JiinoX2tXB7HcNIRnl1NbjdUnKd6kA==","signatures":[{"sig":"MEQCIE0scwWNPsx3ZXc1MXKRfDh/kYDe6UqmBwwR4PuL4NBRAiB/GCvH72L4sOqekY3gcdsU2MOQ0gAxJfCsQkJHLanOHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb/1CRA9TVsSAnZWagAAEeQP/0hldJK7fCjyH3G8hOQT\nlXuFx0qPe0JV7ep8+Ukmyfv+jMuih3xYgWMjlqq5boJOYv63qDGF2hC8EALI\n0cum8/Na+3RgIYuWIWKLd0QuKET2kXzdfQ0bMWwQWlmKAxcC1+9qMmJHGHqi\n6TREWv2vHGNMP3RO+dH2g5egCwuuWP3q9N+H5l5YZuVASXCMhLY/ImPABd9i\nq3v+ihGW4fYa+kZ2WQpHTXQArYzYym88giRhMpA1wjnn8xiEsFb2VhvuStEv\nXBgpDnfXKGmbuxYe0sdMNoXdtgx48nDJ2CwXBdfOJJ6MZa5qQk3fHu/EfR/4\nJuVQkAQm6wf0KMD7GyucKPS2C2+mzR3w8GahXDFJnsLlrQSl4maBjgFo7TtU\nOQHmIOb41GFOXPMWhY/7JGcqZBNqu4Tqq0y6/orvQWVtGZaxP8qrcNM/ym6Z\njTd24n7lQ52njyFrC29nqG7bJF7Qt/PdvSG7QLNLp4c6umDToWeNcZt8hMPA\nt/eE5tCKcYfh63TPDHzGljxlL7KY08SvAPI9DYYHHLO2jtCWgvl8hVoE2HfV\nejMPuA8Z36rYe62fzfF5UmZlcj8kUxJ0sZpnlVnpk57Qt51mj/Sy3iEb4CSF\ndR1wOQk85Iz2gYKcjZt8YwtzK7jKOdqudaJS3mQrzqdePOYVGGJlAlWYjpLL\n7CRG\r\n=qW6N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c61db90a5.0","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/shape":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/density":"8.0.0-canary.c61db90a5.0","@material/checkbox":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/elevation":"8.0.0-canary.c61db90a5.0","@material/typography":"8.0.0-canary.c61db90a5.0","@material/touch-target":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.c61db90a5.0_1603911669120_0.5415660368094284","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/chips","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7799f88506fba245e5495ff9da8c37899c8e1046","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.6d9648ab2.0.tgz","fileCount":83,"integrity":"sha512-7loaDYCTRW6kwSb7YdHKG2bkVdlIRe5hbPhAF9rWhk/Ji6J5JOoYQ23DuLuvtYkvL//akdmkbUZ8SqrSTEdMxQ==","signatures":[{"sig":"MEYCIQCbnMVgXrLZgoY+MS8Oli6oyD0X1sKsS5oyF6l+mwZQ9gIhAIZLKK0rAacWncof7T1qssn5HRm79qUwi1O8NfEb00Mh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmycrCRA9TVsSAnZWagAAoHMP/iyvTMCHcnndZPWZpkv4\n0A9iT1aasgcmLnubOSuaHYgsckek3mcQRqJ2Cu3cTkQGl4QRXoNJqQobjyTe\nC6EEQmZHh5zgK42hfOMt2d6YM+H3WqJyOBmypO5Vev+1QR5Gtmtom7gESHYg\nOseaQ9ozSUo5a2loXFE/+e1AFoWg+H1a9zs83E1FthLLyPOSSGndWOZ45F+u\nn5OD2NVSjswD++m/7Wdd7E1Czm4OexjH3GA4xE9k3vBpjUp7g7TR5j/Ftxhk\nE7RIKFGORGCHaCe+OOimldl4TMgEDqYK/hK/5engAiXGl+0GWZJ7PYKKBYra\nCXnKzKN2WVjxU7oRyedoDrloCzW4+aiOpaOF2mzpmKRzvBwRqS43o+Rj6hL4\nNDXz/k+q81r+Ft4qc1Ek/LaocromE3YC4k9+UnDjsXULd9P2nRYbNO8IMq/o\ncS4iPiNwbHYfW4GXQTgO0Xb+aijT42koYcYUsRulioj5w1XG9haGCfM42fz0\n73c8txfDy3kX5FwXWdGgsZRplfmerwRvAPOOs7x0x/Ux8yRKMdU6ZfxM3o+Z\ne7ZMTm4NM4XyIvIkIoi/u+S2tvz6qcGuwoneI8qt01XyySKpG02ig4hk8PP/\nLqBBkjJPbPEdgH8QswgwTQjDXRP5CDHESSaQPzUtldfJNKHKy2GJHgQl/foQ\nqdR5\r\n=J4so\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d9648ab2.0","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/shape":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/density":"8.0.0-canary.6d9648ab2.0","@material/checkbox":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/elevation":"8.0.0-canary.6d9648ab2.0","@material/typography":"8.0.0-canary.6d9648ab2.0","@material/touch-target":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.6d9648ab2.0_1604003627105_0.2517226956676075","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/chips","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.5511c5254.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03cd1549a525f90f66e9e37dd1902d5ff525917d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.5511c5254.0.tgz","fileCount":83,"integrity":"sha512-5dmGmWiWrpipwsOyElV7x3c1dVUw6wl7duEnCRuXe4EhC1nUorWVkwtSTN48bkcXsnCGjHfO3BDUcE76mNlMog==","signatures":[{"sig":"MEQCIHiaH3JmWC3E8jalyczPqRYopsaewMVYHRcVf5Xgiv9DAiBicgA2DwymP8U4H6YoYuCrUBVaraOzCa8rGveBGwzADg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFTwCRA9TVsSAnZWagAA0/QP/1pjYlCD7Xarzo3pzPsm\nlB8Yg+gpBtDi8DXhiXkr8bOxtQH4bsg8O6Mwfg3tGL05MGH37kaoAWKNXoJq\nB+sVN57jWvu5ZgQpEpBIAqkpjVcCmaLb5+fssxSOe6eD7P1esmQCRQ2IYobe\njExn8PMmz7LBioDXgLpq/DQyhee3bnJBLPFZoQVQJzvKtAsfg1/53jUNF4Gm\nBMVKPNw5krvQ3BnwuTdO4imGOKifvSivI/P24lxd39pHH5sLUaicmXXjU3kA\n4tcKhG+UryJfy5x5yYiRTwPGrs6KHM6j29Ep1aOPyl5t0P4cxawppyVCtpnv\n2s/6JNiKoBdeJarwnljw6bSM3xB/UyBHYX3ZmQSeCijxxi3GWXMEASgog33n\n9gNds/u/DThLBHKRFLPqYkLG16EiZf+/CsToIBKd+ljcHKCo65J1ZmzwF0wn\n0c6KY1Co28LfXTnbKEOpb2gq4yZy+xyNMClxlv1xyYbds2TSzi+zzS68pTIQ\nyX9PVXvX0d7y7ti70aPAPfXGrA1esM4thF49KZpWVPevgnt73T11fQaw1QCC\nBd3yb3wwqcKpMCSjNV8uViE/UTCsESwTgOTR/vwI7ZSKhnln6o+TOtB/az1w\nzXyiItUbSNT+kwzn4EjLqUkkJvGWRi4U0IuVtb9NUVrF4bfJCsIhxJcvykRi\nnh+R\r\n=waCV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511c5254.0","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/shape":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/density":"8.0.0-canary.5511c5254.0","@material/checkbox":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/elevation":"8.0.0-canary.5511c5254.0","@material/typography":"8.0.0-canary.5511c5254.0","@material/touch-target":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.5511c5254.0_1604080879866_0.9191325625084596","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/chips","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cfebb478eab43bc3408a25d95dcd70c1574d70f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0-canary.bd6e302a4.0.tgz","fileCount":83,"integrity":"sha512-s1rugo6mVN0ZWf4Hqyazb9J6ijj9J8aRUj+il8Olc4G9tSXvngKwwIm3YonhHPikx9AacSoipLppJ2SkYkAInw==","signatures":[{"sig":"MEQCIFONey0gcOBdwY0C0MjYEJ56nbGgrt0uCkV+JxQWfBCzAiA+FDNHy8HMRg4eQmPiGLYzqmLiAZl//QvPfZHixKxMlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDx6CRA9TVsSAnZWagAAAJkP/2t7LCc0QvTxgsQxEp16\nYH0bwIy35tORI533C2Ck7IzsRC3xEqac6Anb+n+3o776VLyN5Lo1M6KvnjdN\nK2P6l7pfRcT8iWZl7yWU1fxvx5ZYS6L+b4NlMUFhGiSsuMuIoep/hGIiYWbF\nn7G+Ua0OOhQ4iXiKv9ETI8oZunxM3VW9owATMA22pMhZ5MIo9GkhoUlVJMvd\nSNlyK833eTTVV2vxGz0p3YPKyuUW8MZltcOegUsEW1DLpnhfIiLR3dCTVBPH\nzI74Mz4P5Ojq4LT2cZ5pSiyGVSlPykSkLj8Xsb+jM9jpQNj69IUwwD/SfE5u\nnALqTgNBIJAtIQNjHs8/IoPvCRnTqzVmdmbXHtXNLaMOhQLNRAGhsBBbVGnb\nraf46u30OiW4TSZrha6scJwxEXm+wJ9HqVJW3G8KzjZMdLE01BVscUvhGSA+\nHIwVas8+SQXQTnOnN6sDp1gTIcNUaoTtNo+LcgbUc6AL6pARzi1oDRVm0fgN\nHUmw42J2+fssA9sbHPTH0gLNAZtFKAQZScZXu7Gpc8azDlvo6nG2ousDthqc\nk7V+zNJ1Zhbc5gjIyyAYA63vFMNyx8VeySZIMp6rkaWKqkSbSL8Z2ZIKBqbN\nkXs0Mv0GB7btZE9o1nY/09Qp3TOYzrmhMdKuwGRppuyyCkmBS4GTjZixvNai\nX974\r\n=LnH+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd6e302a4.0","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/shape":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/density":"8.0.0-canary.bd6e302a4.0","@material/checkbox":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/elevation":"8.0.0-canary.bd6e302a4.0","@material/typography":"8.0.0-canary.bd6e302a4.0","@material/touch-target":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0-canary.bd6e302a4.0_1604336762380_0.13420837434874633","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/chips","version":"8.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@8.0.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59168f864409311be67b4b7623b34dd673b14d10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-8.0.0.tgz","fileCount":82,"integrity":"sha512-olPfOW5hU3bIbntgdyA+rFD2uATfS6LlC9Azt2hqb2Ky9KmcOxP29SJrHcb5ZpoPYirUNkB/GiCqR9sBwND0Aw==","signatures":[{"sig":"MEUCIQDRZdtZZJUxbjftu0eb21C2YOgwB8nHlGOt74kPtsJ+WQIgBjLR6hzIvKZrdh1tLeGkDv8pOXxxA9Gzwq2EyEsfnsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":957604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+DCRA9TVsSAnZWagAAjWcP/iA2pOLL8IjpVl8Fz6VV\nLQ/yvbnohmSrA58yNIs6seDOBFHngrB4YdbDd2fNoHcPGiJjJJhqRB+km/1u\nyHAE5LEVS/QARYnTF2oua2cV0KvEzGUN+2D59yUOglQwMY64VoBJtzY8fuGa\nQIb294IQBORIJu9983pj1TXfnvgfrvAvcnLO6YXC7/8CaWbgC1PWeKEbtD+u\nOArt3RSRWw5CCoZ/bMkKptJQYtd0hoMgQXKRhd5Z5wg55lMtfiBs9Ik6YiYs\n4UQxkct9IntN4KlwQBlrMARUTrsgB/bdV/7z1t4URIC3tPF5u9xGvex3eJcm\n1jeYDsdBywlxxfkdTut4SgERb3mLYmmELsbsBVZUwQhT10rAZJFuF+FB3lV0\nF2GNYZ0NW5lgXe3gf3u5BfNwiRTM+HQnsbe5MXZE+ed6/wS2vNTwmEzh8ifx\nQ9CwjszU8pR9pCFEOzBEWCGnVt2zv6bJgKEf6c5+vNTHO1cbPqW/Yx4Nka7G\nI0gb0s51oxr51+ikMywlvVItwwY5HCUabbWwN1O1Qc+xw6yMPmjFZpEdfrxN\nHaz8ZyvVFLEUJ+bZkWFezMF8uc3a04dU8gT0BWfRB0WumggBRgvoCUdvxhJz\nezJoa23KRePnAbNH0F2OSR7vGe+Tl91oVmzDYx059FFENtx3aTzp9amGT0ib\nGE8X\r\n=ueaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/density":"^8.0.0","@material/checkbox":"^8.0.0","@material/animation":"^8.0.0","@material/elevation":"^8.0.0","@material/typography":"^8.0.0","@material/touch-target":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_8.0.0_1604358018596_0.8406603218323039","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/chips","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f61e591fd8ca9a6a34e0cf2ccb43b60de45d7dc7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.d6b5cd418.0.tgz","fileCount":83,"integrity":"sha512-Rj1o3Z4UgA4TYo+LMqjcn0MELdicqRu8myx2EywMf5QlhPNI9VIeaXhG9GZ7m+4iOKM2k7WODmdam+EcB2gJFg==","signatures":[{"sig":"MEYCIQCeIRM86Yo/Dfl+3gkOhiwdEBFw1lNSyaMtDUE9KwJo3gIhAPjOclRyTuo0cHJK+pXP+VPkbxNvoYdmrn3Hg+KZBfPN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+fCRA9TVsSAnZWagAAqWAP/2Xa1KXR6/UK4FETErqQ\nhUsmicPcJXGJXhx8hwkJ3Yv/k98v9/TbUJvXBXsslKghl3b4nglmL7nqz7eJ\nifTYLD3zuIXmalHVO7/ejoxcYEbegrBfMZ6TbGUaLXLQ6LM+Uor5VO4LStUp\n5slH5YjERmwvJHYb0YE2Ai0tR3Vs5fQpW4HF7qHopdWJ/rGBZJnWcciDX88I\nzceyZ+EW9gYcHlKH3SkQtazH+BHzerGtUJefgA439AbOoc5kR0vUgCZ+DILD\nFwkQ1ncbM6bv9/uA3iDa0rWqb2mmS67V4Ip6+JRbQcWqwN9yn7bLFabS94Ao\nJGp258zX/08B3hSPvv5Xdr+N7dic9bDCdwwkVPIuZ5iCec+TViWoZ74Q63s2\n8sjdQPFDy0UorO2V5f01MJrbpbjGhlvzxPs3S7l+wJn+NdkEinZQ1k3AMQZH\nCBl9sNHsLIUgCgri2RdDvMHg90g5wuSGXIwYmjo4Zuki43AtLuNDkLn37Qlh\nEXBCeF6BjgxnqowD2NLz9vxw5smDbtBCC2J2HstbIipxEp+Y7X5ZjlgqvBBO\nYsemDA5ET5adffvq45ijQFqJm3jYPSuMwiuWnt/aMh0PjGKZZtFn/Z3U2Nid\nGT9u7TIGLPIb7t8aGO9XrsGLBjsfVcaVQtD7vF++TrrcXhdESo7ia+Nr2bYD\niy36\r\n=vgT9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d6b5cd418.0","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/shape":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/density":"9.0.0-canary.d6b5cd418.0","@material/checkbox":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/elevation":"9.0.0-canary.d6b5cd418.0","@material/typography":"9.0.0-canary.d6b5cd418.0","@material/touch-target":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.d6b5cd418.0_1604358046908_0.6243749101883291","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/chips","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc38762060d657050899768dc03517ae062ab23d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.fdf9a2634.0.tgz","fileCount":83,"integrity":"sha512-TjTarVeJAkWXvmJ7x9csu3HiEA8wyAMA4+6pdgEkHGgDVR9O+I+edICs3K3hj+v3BYhWBckOPMDiG+tOOFVWXQ==","signatures":[{"sig":"MEQCIEn1eWgA3rYAIoElOy539O3QIIlowXwpFBFMI+6Hz4TGAiAdsuH3LCfgFLjhKNk4GHE19KYsJJQNRcKVSL20btkrgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYjCRA9TVsSAnZWagAA3I4P/34HwUyyBQ+FKXU+w5gM\nwIkoxbHZdkBpxza2f3wMSokna+lTH86PLdUHaDsznXphbptwPzOWc0jLmlOQ\nI809P4yegvMP6Vb/sL8sshlcaUSQ1JgvidDOQD4aBJyoSA/+DTa67ljkBFIq\nNtBI7AiUaJNIRn760h7j2ED5ExcKN2mR8+rIka286hoYU/QBKiWRJT5h03pf\nmo6PLZFUg9u8UbtWxpvA2NfTDZYLDjhVQxLP+G0diCWyhsIezKS3dd9mDXrU\n6OHWsPdKWZFDDAt1zOgTuHY5C+UVPjPuf1dAOe/jbR4xk9/r7XOEL0Rhp8r7\nVO7kFN97QwWBNVgS7Pm2lcZNasp1XaAjAJYyust1sxaIxUzDvyQmB4uJp6kt\nmLPD0Pxl5Gr0/7NlmLkCRhzmkDMRg4w+A0Ah+KLFuQzRZPw60EoVAK/AA4q0\nHro8DSlKE6izyCTH3y/1CFyZTnWTWqL2oQdOUsvQkgWPoZUWfEzhMkrd+2pw\ns8cZj1i+rl6Pk9FBi0RU9BSQuVjpxybsuCseCpN1K/uqmlBbFhJfVo2XRHo1\nqLW4505vOI59i4bhbozw4Zf3tDbuPcJNsZKB+/V0/f7+aYRllHtd2PQEd2dR\n27gJOjXA9iEUtr1O0nxeT/+SA+YZFc39gxUPIU5vpC/SGO7imROE8Qiv/b1o\nPjSZ\r\n=w13x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fdf9a2634.0","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/shape":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/density":"9.0.0-canary.fdf9a2634.0","@material/checkbox":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/elevation":"9.0.0-canary.fdf9a2634.0","@material/typography":"9.0.0-canary.fdf9a2634.0","@material/touch-target":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.fdf9a2634.0_1604445731185_0.8488305352367791","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/chips","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33dd75f8b93f003607fecb177fb363579790a629","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.4a86f30a0.0.tgz","fileCount":83,"integrity":"sha512-eknRw3vhN6YVajcp5Dz9QPpyCUCSBArnZOn0bnIDxITQL/Zn4jm5LnJ0TNWJat9Y1qGR0dvo1Kg+Bq26CpQR5Q==","signatures":[{"sig":"MEUCIQDSIHkWdmFHcqBZBbEAYZk0lehHFBJF4O1tvA0fixeN4wIgSoLgtNRgjsGBP85PTmwg7GLDu1davLK5iCcXH5Xs+JA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeevCRA9TVsSAnZWagAA0vsP/3EgJiqYJBFiwBbr/oKt\n0zXlh3ZAgeOMkqUiNrZe3pJpBZWqLQocKEvRzUoSDYSTt8Aqn53GWO1/8D8p\njqTD+XcdyJDQRBc+QAfxSN2q3aKHW7bSXLJvoiU0FjY0DFAPNmq8TiCiCldR\n21cpsWUeqVJj2XcKydTIdDipTTnUMrGRk56wgsCZ6j6PHXs2LRmDw5V/eJB5\n5dQqeCwsjc7jLl6SY4eOzwjs+uv52w84i/RYaJ0RmoitDfOVUKaTmiL2bnAV\nszp2qEU23MpQUt0HOKpm7DoSu9oi6oMrb0DeAQHSGnbdFixFmtOvDDx6zPiq\nnIgk3VAGe4gLWU3L+F6azKzrw/rhlF6Xm0lMC3hNXVZDVwSwqMr2dW3OOa2E\neZE8Rqndd8flT+QRpJX8YXNr9WiZw4afsdMzfWhDyER4pZTsNwgs6hEONiS4\nNJNjt7qdUVvlmEFlFpMoxZsglpAdYnK3ke/S+Wl+oPmdGPG+ItAQiGju9FXP\nEvZh8eZUMzCfw+4CCSVg3hBNG2dSvPgaTXPlKDg1yNUcVjkuX5WHvUZFN4Aq\nAdyazgBrAITyFSrsaiStSpiHWbPTzk5XgKkZx56fdFbuh55rqeYLY9RKmytT\nWBCHpmd0rvNQC5vh7rE4cmNS1SEAr8g1eSSPjNqICBXRi3UF756hMBuooDzE\nITiW\r\n=RTh7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4a86f30a0.0","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/shape":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/density":"9.0.0-canary.4a86f30a0.0","@material/checkbox":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/elevation":"9.0.0-canary.4a86f30a0.0","@material/typography":"9.0.0-canary.4a86f30a0.0","@material/touch-target":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.4a86f30a0.0_1604446126431_0.2792750968105293","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/chips","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da502c4768471d7f8eeeceffe55ed83be0969578","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.fc8b045f1.0.tgz","fileCount":83,"integrity":"sha512-YVq2HNR0wqxJnEcsqgcSyFj5uINfS+mltHUQolZ4cpXuoQG6dzbxv7vH6SPGjbaVGRaZ6TvquHInHaSjkOewDw==","signatures":[{"sig":"MEUCIQCdjmPkhQECaiW3ss6W5YTzIyySW3akuDbM6nOV7jXj2QIgA+L4sPZFQ09B84TCZBeKOpIZdxbMPAmtnrV93Wy7rOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoenlCRA9TVsSAnZWagAA6YwP/1go7eWCiVXphMjPSWOZ\nboqLksSGFVGDT1TRLoUx586vve4NMNwzRzW5+62FwJwGPQ8zeVXZ6znT2RRB\nZwMwr1kwnPvUpPWxgt/voOvEUT83G3/w1vAi8RdbHyblUICrOj5vum/yF1Bo\nVeDQ7DlFq6ovjbw4MPdLLAANufW98Z56L/6KtIkJ4tAPM56FY1VTSQCmP0fP\nHANIjQlX7/nkMgXG5Ozw1JbDNJiTZso0SiEbCYmtVqUBw6fJ7d1h5rmnebbP\nWxG06ZMWh66v4VZ5DgOGJpTU/W7vXztpGLxBQg1zBnwuDCqWaPi6oJT5F5AQ\nebbVO+IsqpPvaWS4y7R1s91MW6ECE1FX2MQVOC5a/3v1u7FX4iA/8YNkNghK\nFai6xDo4VnHRF77jcA+AdAuCrn3tB+LmDgsOXIjcslBbiAHUZWwHOwFioge/\nIjnZz5PNeEALmft622GjtQ77Pf26JSiw4ZUHIlxadFeNNYBf6c+98Cb/5ffB\nhI/oiPrvlgNyzpnZruCfhuPeRGteSBUn0gZPNoo9KNjki2q0qNsQ0FmjcIOD\nbBhoTMadQb68HZj9E8x4czpTLCWgtu++OxFMg9zxXLvxp9ZjAgy3CsZBCUXO\n6+UYxAFahRUoTczGMCK4pcSfqPDGT75i5PJjf1mrhGquLfnAJH0FCWcZio1S\nXUhH\r\n=J32L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fc8b045f1.0","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/shape":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/density":"9.0.0-canary.fc8b045f1.0","@material/checkbox":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/elevation":"9.0.0-canary.fc8b045f1.0","@material/typography":"9.0.0-canary.fc8b045f1.0","@material/touch-target":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.fc8b045f1.0_1604446693401_0.5251680260485416","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/chips","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c66402d65e054d143d61d068aece9de0dc564e6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.a0b2db26b.0.tgz","fileCount":83,"integrity":"sha512-aaYKmXUCyGLvqLKAglzm3Ml6lXsWKCKQzXam6Bsp5zt4DFvCUlltrg/j4g4V/FzihmHZQ5nSjtQYFumx7xZ/bg==","signatures":[{"sig":"MEYCIQCbZ6Q8yi5FcBty1JvkEGWilEwBYPy/TeaT74ToeI8IjwIhAPPLe+JdC/LxuNH8jAqqsGhDvdhJWJt/17wsPkwqoSGx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofFYCRA9TVsSAnZWagAA+P8P/iokf75iL9zqn9A250Um\nXJEF0TOhQl9NF6vuT2fNiJXZje8/hYTudHRtQnV/W+pSdQnx0zHr/bA0rvxT\nxfCMGuIsiUE9Ea1fz8bQKIabxBcvW8zceQiHuUpqBnDFDMhpAugF82etVWGa\nIU8udJdsMRhrLc4NWMk9w1cSWAlOLjfXjc4GPm5gmi5nASfNDdwBgbmBFGnm\nI4AE/DAcHNSqnA4+55TQmvOFDCd7dzz0941eUbKFLcT/aRtumotDeuIkY6WU\n16C27MyrAlmOIK2WAhASjRMVbbv1wrXoUaFf21i0yivhBm4muDGxBr3nB6da\nY1Fpu/NpuOS7FwOUQZIF+3anmMEEeAQLYEF7ypVrUWFxTHQR3UEp84Leoq9o\nO2oMa5SJuC8ffVI2KK6cBuw0AXTbPGz/6GS22NXWrbPDbDOD+rAjmYZRvPlY\nMjCAXfDQFVTXqkwB0crZcW2j9VYNtwJrpZHCqIaQ2lVmbLJTLlrdZMaXzXV3\n3v3XqpWfwey/f1HfstJ1hVYY5d5Myn2DDKczGRpAX2JqVkT42kHjZyNUayR+\n4jeIVIhBNjDK0QfwsDc7aq0OgURlfv9VtTBJWE64BxtPYcHBx8C80zdpZc2W\nwpkoS29Ske25NLYb6ymp4r+9AW8Zapo9g/ZVWMLU181ijsjPMYxf95wspKEK\n5dai\r\n=Rq7j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a0b2db26b.0","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/shape":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/density":"9.0.0-canary.a0b2db26b.0","@material/checkbox":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/elevation":"9.0.0-canary.a0b2db26b.0","@material/typography":"9.0.0-canary.a0b2db26b.0","@material/touch-target":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.a0b2db26b.0_1604448599683_0.024391478398297917","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/chips","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.419e03572.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"483cacf5e12bf23d6c836dbe13a85c7eda2f71ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.419e03572.0.tgz","fileCount":83,"integrity":"sha512-raRU4I+vQbvOyyMnMVSMdRiEpeN+Y/qnNAAYZcqH7/Ywdbk7JHxBCYhiLn6sJK+x/RA/vvfvypgnKec4wTs5ZQ==","signatures":[{"sig":"MEYCIQCFJtxkQDf59MPmdcp6v4asSO//4d/Q/tM8o5Wqj7e9FAIhAIXz/Zt3D7v46MXCrODKCmqvW5nemN7wQW0ctitvH1bA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogUQCRA9TVsSAnZWagAA53IP/iSAnRtbcYiEUYJVc0xI\ncpZKzSiVve0cJapzyMElnfTtGLjf2+/H0YZk3gN06ur22Z3iGdCjwX5zQ/pn\nOQJKnyZyU6RjDWAiBjTL2InNnw6phGbxxaYuJxB9Dw3+3DP1at111hWt2bDp\nSKB97xohQTY74wNDG7sXJkRXo4dHj6Qb/TQmnZG894oGvCZ/bQCf/wVWcQHT\nSxw8dqnGgTn6SU4dNdpMMVc+iSiZo+9LF9mrK6CDbDyg3CTiAnCNEwAND0dz\nJCSDJA0pxP9xj0hAFw11PMeI7TJaD/pY2lsMyLPjd4ylrt70JXoRVHNH68w8\nwzObbNG5AuEbeFf/UGfrzlvtzVCkyE6XjIdKQxWgc77wTs8TGvW5ogcjw/Cz\nXibNKEquxGSVFvjd+oZ0DQPDJlm4U2Aj+M/NhXblkwe92QK8H6iL8fc26vKT\nL2Xmg5uRnH8LJfvakSc/Z04VLRsvJUgVrd9D5eay4fLAQalSamhFblwNkMJl\nqLzhNzdjYAFfwzX/UyKrpXS3yLB0YUSf9ohb9oKOiOUO69CszQhxFdwZuUaW\n/RCAPGc3vwaPHsFodl0kq0VcQag3m58npcy49oZ3he8Z2XA8qpa7uUVIa+cd\ndJnoXk5JDHgYMXLx87qZ4cZnSxuwwUdTQf0JuYO+q9HwuofbUdPGNRGgdkgL\nPhdf\r\n=dF3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.419e03572.0","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/shape":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/density":"9.0.0-canary.419e03572.0","@material/checkbox":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/elevation":"9.0.0-canary.419e03572.0","@material/typography":"9.0.0-canary.419e03572.0","@material/touch-target":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.419e03572.0_1604453647559_0.9550830640568406","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/chips","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.a432ad542.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"117ca95208aaeb6a5b6eb18f96ec46f48c4b1f74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.a432ad542.0.tgz","fileCount":83,"integrity":"sha512-J+5/Zs7z/OokoNY+SVZxn6vGc01heVJbHEKcUh4f/fs8ooxNyvt0Q8voKk07aPfTPo0ig9RKtEqSoZQx8A/kaw==","signatures":[{"sig":"MEYCIQCLI1Vx4jWaVVFZ5EkaJFUGxM0NCwUpoA9bChGpUagrLgIhALWNVtgLBsdhZfMV0Bu3NNKfHAEXvKqWIec5X2sjP8Ww","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKsOCRA9TVsSAnZWagAAjbsP/30o2saJuNvOBYH9Saz3\ne/C0SSU62ERoxndvJJFL2hxn8Sye2cH66ivqI4K8Xk9bsizyDRb+0gE5piei\nRUqZFT3LcVnxZEVoz2xwyDxSTLlVv8wjBFmyGllWRyaUZ/HCnP7xjf67GFSy\nGpXYp/fjhvdgJ87VrBY1T+0rVuR2U+hqcA18lbx9eFDl1c9rY67W3pohSYXA\nMEofPRbmNUNee0bt0Q8b2C+3W9r1D3wh+J+0/QZXiu9B4bDp6ifAVWDxSsF5\nARzGnIZYBohmdOA/NUzO+NLw7OM9LeUc2Zb1Do88o7pkUdKkMDACRRdbQPco\n9t2Mo9ZG+K1cJyMRj+u/wWznBU1w/J4E5mirJzLWqwnF9NEtmzgaAGLTiq/d\neg8B7FplSjzJWSyCP+X6bD+HFvfP63rTJVGHDN8dQHDl/fV3csP6LwGgWoFt\nWJCbLxkHRUzf8D2MXPz3bhbVrpZwTO10DlI3IPMUEaAjP7SxT42zpbNyX8Zy\nSiKtd2MFynB7F46O73a69ArX0QXUOlvawUyDbzHzsWdgwPZ8YrgUF8As/m3V\n7luSRFfSqGnoq7tEvSwKFPtgN3WgProLcS+5W9uyVl60iEPGZ52eekQVYGXy\nEx/FH1RdINAk6lqAvCZ9sn9AFIBzQLq9YdTIOaki8xvdhlmWHdjmRrvuRl7o\nuUzD\r\n=17YG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a432ad542.0","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/shape":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/density":"9.0.0-canary.a432ad542.0","@material/checkbox":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/elevation":"9.0.0-canary.a432ad542.0","@material/typography":"9.0.0-canary.a432ad542.0","@material/touch-target":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.a432ad542.0_1604627214041_0.39565150078312494","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/chips","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c8f56556c34778ff6aeb79d886b20c2ba06ff53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":83,"integrity":"sha512-YZWkuxcYgms2iZOXyOTmCIyqwHlLsU5KACwiyiceQB7tQi95uNLt/jKQ/L2yJSSpssBRvDRiQrJUAhngYHxyfg==","signatures":[{"sig":"MEUCIBSNKkRTchD2o0078+K7FptS08uOLJ17zu/Aw7etWmiFAiEAzZe3Qx/ypgJQMLXKDfglLT2cGx2W9AsU8tO9CmRzvHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":958230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+dCRA9TVsSAnZWagAApysP/2WvYULJPYOjVGuogeLa\n9CwoJ+2xd/7WWAx+A9Q57an3piewlfMBWWYaZuaalVZUy73+QU16406CKIJx\n1SHgxsVgo6Co3oGi6DhqCb1WMsTvd8ce0zQYtNgaWG8n6hjGjnmpAu5mdORp\nBLZ2BHh5tHxukqZNRpavlfQQpWITVXc+2L4kumeCp/4Kpyr01p0NO0GOMkIn\nc9spIe5jZpe8bEFeWgg69TBMKqaDsx/U7qvOPX4eL63ZkeOHd0GEum1Pcby9\nhYqtQJCSEN92qvxpXqGeTzxMQpwD2A+05rypxv4LEjkRJe7fnX9ayhR2nw5l\nzArk5THtdDvkoRPUdhff9SIhVrMnT848YtMToHIygIYCPSEEPRINU6z+Fi0h\nr1VzUxlXRDPWMn73hUxCKqVVY41lsiQs1SaFU7mMiNDGxe1f5JCje6e57ojO\n+PAT1yMzvltNfJonVlKas4osEDncwtTaPCf9jEUuQ7HeYTtYxn+g8WI3Hitz\nA5dq+7FU5+kHuWQGrpZsvYo6EtcWn0tyCc5ScFChPp1I6toyuvEaadQiTglN\nW96HDXKosa5fHydlacWdjobrle13D8sp0k0dhj7zjKmjzezN5qE9TJKgrkKI\nQxhHFcAcxm0xfiFG91kl+rmsRjMh51UWCDHWJuzHSdQKTRZC63uOhJKWprK8\nasBn\r\n=318s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/shape":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/density":"9.0.0-canary.e2e8aef1e.0","@material/checkbox":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"9.0.0-canary.e2e8aef1e.0","@material/typography":"9.0.0-canary.e2e8aef1e.0","@material/touch-target":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.e2e8aef1e.0_1604628381277_0.19860043288732343","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/chips","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a5faa6afeb8fdc37ba5cd0686813d9dd46d3d1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.ec6b68b34.0.tgz","fileCount":83,"integrity":"sha512-22nV30B2xdsgOh/4XCxCyitSMcizPof5OYd02/1RJY8b/CjbbP6OgaMSuRys72jUz3pgbfKZApzEaKmBl0Z2kg==","signatures":[{"sig":"MEUCIAbY7i3iKG2/0QwUSombUGcZjOsJ+fejf9n3k77AM86RAiEA95XNn5KrQMIL1LaF1EDjo2bv+FAVZG5RXcqbBciG8lU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZyLCRA9TVsSAnZWagAA8wwP/3OUFbiBVYO0k26507sB\nbK7Vjr0pMFOIL6vH5bEWXL4g5BHmmo6aBJJPsMD/7fldo8SjxwCDrZs1K31n\nbPYNvYFBUFtFRO4hwN+BnWUuph1OD46d3LJn62dRqaGuPZqF64YJAz+Qpv5a\nsnfZeCLhWAoNT7+hMK7WwCyGEoXH+MrmXQEeUyhcuqe3XyYyn4/m4mXrAN+Q\n4inOV9jqYzztDL5w3DWPe6EgL0zUr6COATBvFMKe2rYb1/cVgjgMjHwNhdAD\nqH7KGs4Wnexp9CLzQQtNR3hGgv56l7jyfOCl5qkunfgdorTn03veJZoYxKRt\na0NNJQS7FXC0M0VnzX0D5mAaKdtIP/ZRIq2FFiN6rDrE2hxb3WpU4YzrH+A6\n2uSvuSEIynEDsZLjZCfa6WYEQkXR0ZfBCSRKyi8rJEV80cq8gCftBNviB/vY\nA+Ufg1+CqQNJHMtQcly5kvskkMc5xOiBvnmslpT77tVUwht6bkZ6ASe4LBp0\nCXvxw/II7shbARtc0+lyez+WYZvzy6+3Oz7ui+44stoVs3PjfswQqT1f/Jj3\nrt302QgSjFVz388dg1boHoE5yH6vmp7L4TzuVrfnUGogxf9weeNadrFiASIV\niKOPUUgd/FsGuKyXUteVzKTA6ljm09Uj9JT7Ax2oRHNHhfHbkm372ovxt0hk\nhGpO\r\n=Vojl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ec6b68b34.0","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/shape":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/density":"9.0.0-canary.ec6b68b34.0","@material/checkbox":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/elevation":"9.0.0-canary.ec6b68b34.0","@material/typography":"9.0.0-canary.ec6b68b34.0","@material/touch-target":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.ec6b68b34.0_1604689035146_0.6152580319283798","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/chips","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.b39094d14.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba23977a871b5c7d740e7752de95ab61201a8307","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.b39094d14.0.tgz","fileCount":83,"integrity":"sha512-hFhb4XLIYDMKmnhqoT3e3cDF/y/DWCfXrOeIrPiPxVHbKjBczu0xNJkguMP2Ex2tngX/URicLTeIoUBCjjfa1g==","signatures":[{"sig":"MEYCIQDLjfZPpCNO/fMvCzBM3XDsftQu0NfiZu8NjepuKMeTXgIhAI/5GO7l7LDhuxFsGo/5F0K2pf2sMw/KDvp5XA93aDqE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb06CRA9TVsSAnZWagAA65IP/1GfQtcpnhHY6Lw8xiWc\nd576fQKEWjsJSa1hkUtBzcNck23l6T9vUzKIz+6joSo9/18wNLqQdLbhV/kR\ntVhkFohSzsMVHY9stWCvxiAtECUflER0/FrrIU831icXWbmG9FN4qWp2PFBT\nrdwxbmCl49gfudd4BjcEDS6rfQuD9gfVTHM3TP6sdX6C//dJZQFYjKhCCmuh\nBmVCLbFmTACuwJyeoNhk8Z3QhxRwGxBMvn3C07tfpcQkHs4LmaavLV1YbMnJ\njldmA1Emu5EuX71AaiwPj9Rd+1oF8X8i6MlhbuTbWcbnJwvqaOSzgnVDBVTa\nMs0hDRbQoRIbHJNKopRYCijF3nfW+gnxkJv57bCYLYsOS2C70lPbk6vPu17f\ntrqaW8O578aE6VMdLnSQfpK+iscNQ1tbOyIXfdcS8bwNJeek/q8U4bw8lZNa\nffF2KZOPb3hMVWD/B4SIQ4S09/pFYiZhjP1OIoUrNFITYcmsgdkE8BMsYRK6\nfiPf0NK5I8NDMvELoMrJvfaJJMOSMaSafKZzc1o12EjGPQof5sfLu60oSr28\ndVsvCAa+MetIiWVp1PymP0Jrev5Xn2eSAPzYsDs96y6odiI1438aVgPiEUjv\nyhzuxsQ15F0+DGyxH7kWrDdTtaYF7bnqmIF0YY+gPzw41TMPRM311BTo2+dP\ntH+O\r\n=8M8t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b39094d14.0","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/shape":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/density":"9.0.0-canary.b39094d14.0","@material/checkbox":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/elevation":"9.0.0-canary.b39094d14.0","@material/typography":"9.0.0-canary.b39094d14.0","@material/touch-target":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.b39094d14.0_1604697402460_0.017280646762033003","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/chips","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.8648b8258.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb1ae3744f0ffa702e214ae2c5741f9ce9a3c3e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.8648b8258.0.tgz","fileCount":83,"integrity":"sha512-yUIi4+rJXy/3JHSzl/Sr1RV3GXYqxJRUKainUwUzdwT3mEIzwZb6aoEimqRkpAzZHEjmykIdS3ChoTl16iHMlw==","signatures":[{"sig":"MEUCIG1u/XlNavr2+15zyEkXOBBAPSaT8r2NqjQWp7ze9xJrAiEAvkeQwctqdGdlRk8TztD/BhVcAeNkMe5uwC+VfX9x6q4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRJECRA9TVsSAnZWagAAKX4QAJqg8F2aaR293HmEKff6\nzhSatno9D+dgXYy2hRJXmQF/ockZ+17x0NhfWSkaW4ALuuybe3VS6AI4YLfk\n7KXLEpWhPIlLxhrlCldMxA/PntODr/gMqA+bZMbiiapOfuHW8zEnrG0CHyWQ\nVCVd9yvWpCRYq2FMhf9ylqqCSM2xFI2gJYoL4hu/U4DOJL4YmsQvjda2n2nC\nVXdfhe01XrenoXzbJ0XPtr9EyDbINsgXIysdby3ib1ywWUXJLnbjpST0adbs\ndp4FqPhJgXH0b0I2KHlFgaxq0u9iVTKSE/gx3sKpvNK+jcdYxwg/5LWCj7/W\nZ8VT0jDf606FgO3KCPQfrnQWkraX9bkCWdNCcCWfFRLxJ6njQBiTvdx+uodM\nqa5Dh/IQlmdfxOndc25q/1o4pmgYCbTABC6Rjhx1vVU2rZo5/lLfJ9maZVs7\nF4LvFolO2l8NgMSOu8XLvx81gq6JxAyrqcykYv0/7Ryx1lQS9jd6/JCgUDX3\nQGG/uWIFZFipIy9NnDcGH/5vlAFflkuMl/jbRkTAIBwC8GuOPUQD2UiNrZ3L\npOf49ubkCxyD/OeZ8Ck2jANNyAzEZ9ByjMXDbrXJj1PSNiPvzFlXvVMAz9qe\nvAcAcaXqF89MDndwMlRrXELimCx7DX3sfZkz9P+wNUZob+H6XI6DmE0R0o6F\nTBwF\r\n=Xo+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8648b8258.0","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/shape":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/density":"9.0.0-canary.8648b8258.0","@material/checkbox":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/elevation":"9.0.0-canary.8648b8258.0","@material/typography":"9.0.0-canary.8648b8258.0","@material/touch-target":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.8648b8258.0_1605177923968_0.6749085779787112","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/chips","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4501ff11a96939381eb3dad9714ceeea21b62ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.240c5f74f.0.tgz","fileCount":83,"integrity":"sha512-IUHgNv+ZNrXM+9W/br+vIGO2YZhI/c3TDnkrlZ7YlDlUBFRfMhKJ0H+sHnwmgEEiH/TcvEHArkVgm+sU3VM9Hw==","signatures":[{"sig":"MEYCIQDogFosw8Ll2uG24FSZAFoT73HQokoudXDUmx8QpIvQygIhAP7s/ikDVdQOYrbu3DjxfWHUhrQaZ/ujvkJJyVf97M/o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZlJCRA9TVsSAnZWagAAkc8P/R+H+YfcC/XnFBsboRHA\niNh9oKkq7Ih269sKMTWKEN84c/I+fq7+0vj5dg+mV0i6ycIL0qD3YjUaAKqL\nNf+K8Vvl9DJZYP362f8p9jXJ/rEpFCq+/2sUpaxY6YVA5mzil8AVh1ILMhnk\n5ufpMrTKanqsZTs5soCVS9d0XOdpcQTKECKXg2+tTs6rBSHF0qKgH2kZLwrZ\nemkmH+R39NknUMAHVRCPGwzAfDw4x2CHpOKekX4Lv1+04JES/Fmh+dFUSrxP\n9M9wHLclJvC4sAhnmOYkNzUJrvrzE3yuk4oPEEoQ6DAqWPEG4taK6sa+ClUZ\nJHPm8FHQJxppR0BpmA+pIzSyM9WOpAOH0YGnPoKRBbqg0CuHt+lSVA6MMOBP\nOovL7r93ul6QPkMm2cnVNQnnUQBGas51XAMwBdSfMJ1dTXvSJF2/Cg0BVuzK\n0Ms8LgnKElrucPhmIEi83dTqZqtpT0mcB9Wpb05okjHOoZg0+cEuegwLWwE+\nousRUIxYnBgWQgqo38NMGseNwK07AByduTFSCjLX1UG1+9OoRx1/1KJgsYwN\nYhNWrpk7bkKPci18IW/uLoU69SeDQkFQRxXcJZVQNtn60Orc0g2zf3jBRUk5\nS3YngG45slvqoNC/EtNvAMkW8vSTfZ1z2ZwT6syvb47vtchiBWuCcOZe20fJ\nAlqq\r\n=246r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.240c5f74f.0","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/shape":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/density":"9.0.0-canary.240c5f74f.0","@material/checkbox":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/elevation":"9.0.0-canary.240c5f74f.0","@material/typography":"9.0.0-canary.240c5f74f.0","@material/touch-target":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.240c5f74f.0_1605212488903_0.5207092591385702","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/chips","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7878efcc96aecf5386f7719014584b4cdd15e06a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":83,"integrity":"sha512-7xAdnL0+7nMD1H3532c8r0YsoL5T0WujzYl12c3VlWnpBDryMAwvpJPR++xLwRa1OcYUthr3FpFOBON8zIwjuQ==","signatures":[{"sig":"MEUCIBMakTM61vKqAGvdG7serv4I05B3eBShR5saJRikmFsOAiEA3L9+BCQhbwUK3HCaWZPLA0yvGRQhvHsRciveHH5j6TQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssofCRA9TVsSAnZWagAA5U0P/jtyqtw1ikDFXbabrxrT\nOJosAgtmAWKfii83GjPb/8HAbpvC3IRBS4NmuOqeksGrwtvX+rrOpJ3FvmjE\naBZvzNtP2pj8bBOs/ZRBr441+lcPUne7/JRS029kDy1ihAV6Z32/Rgr4tGcN\nm4on5bxSN9ijRh55KESNDu83NBZXuC7yO5RjdWg7KRyAD374jkYv8hjs7vsN\n1noqr7xRr6x50Wwy+XVLlgVEhEbJTNkDAFerieUYfSrJoJuaHL6NoKIU7FEp\njOzP92ZrJomNC4mWtmWTdPLGJPlcsRq7iaLcy3j7cMVoAlPQj60YMtLiu0/z\nZYi3gnXjqmgG65uWk1tUpPYRJCphQu3k5GA/Bbt1Bh1xcmDKl/Z5eMwqQaY7\nbLSySXLL8zUK2wFQLufBOb5ALR9LOTxUmvutUpWxTtkdfAsxc/nN7baGm1dS\nZyM/R9ZtdksYK5D8kypjLA/R6gPTCZ8hSKuJabjFhul4JNkjwulU/LY9y6+4\nTcgdcETO9zPaHVXIBU0/NYUMhSddBA4nBkFy9WobP/dkXgEewEzDkkvSRcZs\nPy5I3Z7uw/tpi6V7uVIaticn1i5afQeAM6xbjTa1+HR2eEHl8uqyf6/iO9MJ\ntYDPSrGrBMnPFRvwkRLop3x9CVA+NZd9oJRoT/tIsLv3Mknqx6AgL7FAwfPa\nB9Ca\r\n=AjUa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/shape":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/density":"9.0.0-canary.6cf6ba4f4.0","@material/checkbox":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"9.0.0-canary.6cf6ba4f4.0","@material/typography":"9.0.0-canary.6cf6ba4f4.0","@material/touch-target":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.6cf6ba4f4.0_1605552670922_0.13032579188536553","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/chips","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f085295ec2c630392e01db47a7d4dabfde7b118","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.07f3e01b7.0.tgz","fileCount":83,"integrity":"sha512-pfX9RYi46nyKx28BkCy6C1tvy/j84n5nyNbNrdtJ7sbwvZUVAi7opZjoepyOO6zmHGB9rwTixP9CmHnSjtB12Q==","signatures":[{"sig":"MEUCIHoFRPLFBOu6ln/opO5q8TY+UcNm5pVEaZ7xskVKmH+eAiEA1bbVyibAdYDo2Lb49if2M8nQF2PW7C2fT2SyJQJSkCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvNMCRA9TVsSAnZWagAAbf0P/2oMvGrhrm0pXnFSJdEO\nlY1Hj8jUdpz2Bw46RaHIvnHQHOs+ebJkriHMH4sclF7Dpin/eSwfwN8cQO7v\nwXRYaW/eaqkKNrtPRcUXdHmhNm599omiYE16Lxu48JZM9sqi+A7OESalq+h/\n0rQMktQqtRFy4WvDPiApOEJwEujQJjhwJXApeHQHSF+K6jMHiuj7ep7kLWSG\nswCEwxjE2r5FuIVXymT8h003aL2An22I26NcWeuyTqQtw4c3Q+mcw1gvHPeu\nmT02NyFbD6WikrhZLvyG4w/2RkuqMApTpfMLngrqGxLbNsyzwLStQ5stuNuH\nxeo1YuzF1g1/femAtF1aW2POF9lYT9+K65AHkdpfowmmqEwI+RiQojqY5jby\nc26l9YkObkB+sZHId5tR9s9FGLlaVwpyHxA9PqyPvfVjAyfFD3YmfAhpg64w\nMxkneTT6Lp4rM4AGo4Wk58uPFh5PVehoRAarkaHs1n+1Nf3peUu3Wx0pKWKW\nb50WIMr9NgOh9fFK+TV6XL5CpB2aFqPJVzpehnTPVXjnc7reeV7d1xccetpm\nGDzo+Dzw/UUOdNG8DolNEn9KtFS4adIvXSPfptdUYu7Ssu+Zl2do0k2Rouwk\nWcAbmGpRnFoHbyjtwjazYEhTbgxlbBbfKptDkQ2aSfFxKzAG+sicL9RsKHxf\nU02n\r\n=adU+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.07f3e01b7.0","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/shape":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/density":"9.0.0-canary.07f3e01b7.0","@material/checkbox":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/elevation":"9.0.0-canary.07f3e01b7.0","@material/typography":"9.0.0-canary.07f3e01b7.0","@material/touch-target":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.07f3e01b7.0_1605563211535_0.6255899119248742","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/chips","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.23491cf85.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4884a27cf820cb75ae2721dc103a0fc0bd5f74b0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.23491cf85.0.tgz","fileCount":83,"integrity":"sha512-Sjc8iRMXbNJQh35KLli5UqPgKxN80oaWH+1VVx5WRiq/bo7DBS6gRW+zEAShuWj3jWRiQA9iuk61qCnkpoE3Bg==","signatures":[{"sig":"MEQCICH3JirMNAeaQyevy/b+uWqHteIpYWlSfk1lXblpalpkAiAS9skaDPZQk73znmM5YX+sFefxqypXxh3+KP72TA0YxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxbKCRA9TVsSAnZWagAANUoP/AoTxd9bkUZemLbSBPWb\npqxKDt6M7LfOmVCXvO2c0vwPpj9dnqr33x2C2ARP+tkIMLiLizPl/Qd315KC\nDd4U7E18DONFjONHWKUhGUZ3ySHnsyE2ssBZVd1/dxLn5VTvJtNm+IRwUhui\noyacn+K86QpgT2sg6NfzG/dqv8Oap1Nq454Kzb/5KktcYExFVW6Le1j4Kbcg\n1M2SDdOgPhpjDjMvHCevLWpzunP6uVSvLn1ZoSRHTbTODyO0MY83MY++O/tg\nDaXsw9GG8qs7hTYmYtGcW6q03D+7dZb9n63uemS9ugVSgHa2Oemhg8yzJQUq\nUInHW4N2OXU28tGLQP1U7+MP8vlx1QTHK7u/e9RKIQFhH0sZD29zDAb7nHnO\nNLfFKX+2WQRUwn9xbH4VwrNchMXzFvHS6theDtCktU/WxO4wFig1kh0kdX8S\nTDv8/9I4sH0IjkcKhFYIcPYK5WqOl9MVSmQPzASK4vdgxRtVCNl7k6ngpDQn\nelX3DrQ1uZ0fVtciVHFSi+bcfdjV0qqRUDQ/OKDSEVUl+gzKhhQ2IOZnlJQv\ngZZef8JhRHRULZpujmTNnhTLuokbIPk+TYZph8ReQ1kd0Xqx76hlKICDGn3o\n8u8bHLiHhFnIl70j4YXQvOOSubv3xOnQns4eeFWnW+pxQ1vuSzN+YSK4g9AU\nONQ9\r\n=RklK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.23491cf85.0","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/shape":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/density":"9.0.0-canary.23491cf85.0","@material/checkbox":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/elevation":"9.0.0-canary.23491cf85.0","@material/typography":"9.0.0-canary.23491cf85.0","@material/touch-target":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.23491cf85.0_1605572297689_0.019215759246993036","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/chips","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20f5755e4febdc13e84a00088992ffb780732d36","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.b659d4fc3.0.tgz","fileCount":83,"integrity":"sha512-F7/r23OGjrujG2x2O8mTgfbC06jCXgCWAxo6l3DOjrCxOc6S4vSq6MoCq247n/mh5TwzQPj6e/DiVuwSOm0Ssg==","signatures":[{"sig":"MEQCIFJQJM84MPnsW8j4k2XeqGwxirN70T7LVpKAKgObU51FAiA3V35NMquNDC2Xw7Q48ZSMQiA31MUCB07rdBT2PWwjHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxihCRA9TVsSAnZWagAAFA4QAI0vLhYI1mPJEJm5rZG/\nIis/IFipdPB7UZ+yJeOB2UqN46Yuxp5Q+F/s9S4R52kA8HUNJ+e1tLruMyKQ\nrXkA4VpYxWJdPX6PCCgP+JRGNtR7AGs9Zd16xx5NnRDBHVBQ5WT9mupbWKCG\nyQE7XTRnyqx7cDf6HBjOfiSVDgv1KV39p6iMqmDE6jUNB9+94pGqatJuQjQw\nTGyhyy9BCdrDbvowEXxN80Ex8SInvhbOxcFK6w59pSTiEY0Kmq12dcIgAz9C\nd9v87uBXMaUqSj0sRXQML28vey1vYtXTKUXFxTbckeaI5wJDUFZSXxEk6FSF\nm+PRM/qYXgXunR4rq3KPD8IXKkbwaTsFs8OgYoZSFD/FNOMUPhulQAbIixUl\n6/uSt67PP2umVvh3Mv6+rL1BtvV/qUSlm8cedPk1DpNG2XpB9021l8O61aBz\nrOqZnjC4J3JICg4plTNbz07aFqs1qpRKfZq9ZI5643nH5Ky6Sa9C/FH2XTzs\nMleMA3VqBAC5aG1lawek5ZLlaarHvs1z2gZNmN+hbuSW2Vdx25toOzQCjkGm\ntVVTUsJXBH7OmcMbYiCWq/2hT1k4noKFt0P602QQER0SOcYmWkSddPi6KD7f\nmBdY770nuLpXGsiC+oRV/oJ1WPdcMgIOupBkFpqDmBx9kdBuyOwC9FidGC2B\nSgJr\r\n=cDmd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b659d4fc3.0","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/shape":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/density":"9.0.0-canary.b659d4fc3.0","@material/checkbox":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/elevation":"9.0.0-canary.b659d4fc3.0","@material/typography":"9.0.0-canary.b659d4fc3.0","@material/touch-target":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.b659d4fc3.0_1605572768312_0.7031227577134489","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/chips","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e790b484210b3fcc1a19ab7f50770f16df046fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.d8a3aed67.0.tgz","fileCount":83,"integrity":"sha512-6YixmXm5GGaNZJtLwFlGdKg2j8NOgfNXAS6hkT/MHWogAfHGgZ9RO3O5bQba6uKiha2ET5pT2cTt5Kfk/D6kJQ==","signatures":[{"sig":"MEUCIAheAswmTglqSJDF1C6BhJGyFwEfUloZHEK8kLZloFfbAiEAhQe7yLxHZkFsbM+mvtlx9gglZGpcPD6o6jMPUbUhNG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+wpCRA9TVsSAnZWagAAPdAP/R2CZfdv/ovKmooiJZda\ndsrywAsUFlLh/7jiVagvnSmvT0VsmKz867Zo7ZHjYlpL3uGPLXwySh+/QrXS\npvMQtatS44nR1xAIp5vlXCX9J81krbqjeTKV0emVmXft+fvjsJAJ5B12lSmH\nZCpfVRVOsHUf8G8CPbQwK1dIoFwQOFylrr2XfJeQSGYbDZ+YgkIrQ2ytSCqd\nM29EAil7rmTbyuZMZBDx8c2Dqg6dn0NtltIiPVgaFfTvYE7jumfxjbvpG6RN\nL43MeMHtRvYAp9HJ98lIPLuTUNgB6z33QXARmSZjJePxoUlUBTcvCeHVhgXa\ni+4MWm4o0sW1Z25h8kL9RgvRMUio6SNqt0Wgv2yftHPBtATKhinmthPeNFIc\nVc4YikJ7mN5LEBe5Gm7d2PfjUHvOuxgIZF35Xiy/5bGcr2oxBM3t6f37StWk\n9B9GaFE5oAS20+xbofu1eH4wfeiEzW9VQMSOn0bZwc2dWdhVsuLcg6bgjqTd\n1ss8Ajd4blr6mFibVnZOW5p+JCIRRRtxKfg5k574vaq8G7XJrKjllmB/BeG4\nEkfQyeZSzsIcBF9O87Rwvlys3cFryBeOQv0a+FIia3DDignCWhMjpeMINJYi\nxsTJweTILMJ70PIeHUWRBlYYPqdfz9xL06g2rctOUHlUGHZ1aTbk0tVYOa2m\nNbXv\r\n=PdFL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d8a3aed67.0","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/shape":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/density":"9.0.0-canary.d8a3aed67.0","@material/checkbox":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/elevation":"9.0.0-canary.d8a3aed67.0","@material/typography":"9.0.0-canary.d8a3aed67.0","@material/touch-target":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.d8a3aed67.0_1605626920602_0.636255223523061","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/chips","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.482ff9091.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"020f8eb86e07c98ea31bf3410fb1139e4e8212d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.482ff9091.0.tgz","fileCount":83,"integrity":"sha512-TtU/6CVicYlntOohhmuaqvpo9NzH+c8VhDofYjrE+Q5P9xgUD4Xji9uNOjQH/pi4l1wvCOEVXJnn3Lw0mE2eLw==","signatures":[{"sig":"MEUCIA+2yN0X5CIUbWe0hoQ6ZC4ay0m9NJZ+f8Uy/ZdR75SdAiEApSXQEakt19AdjiuUIXGaQw5MmnpI8m+fl1sVJ26yuco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA9wCRA9TVsSAnZWagAA7O4P/2/0y4lbSN3JDLQF7N0h\n/2mYdg6KmgqIVYlW6lu0AUePoDp/vZ1oPlbAXqCoihsMITr/HPBao+tOFjX9\nyGcX/0LcYNXiMCUIEfYvA8sF85VJUwiSaeHPS7CGuvL8m3pNOxlLSI8kcU/6\ng8Ccnm3NjdSEOSc6cuYIgvPexUuGXOV/TlsWJIMqaONfnxx4fZe6SX2avodG\nXBHvtnmW7V93AFDb9Vv6rltACpm4pB8VqXYRmtejmWfyTvlSyi+plZNZZ9cu\n4kki2/vTAMLmVCyQx3IFIm1DEKih7l2u6nKM0vjBzYy/s2rkcvJPpgYa+WYG\neVDAjU0ZjPw/H6szfCAjy7BEq4yJSjE1Ko9yK6zhf9hPvqbQxf2/9ifuFXMa\nC659WpUoXXCmX2ytlaAul5xS1z1damEEdDi91nl95U6Z2wKFBUxLMWZ7fEI5\nu0WUrXlbi/WQOt/5eSDhNj9L9OdMRBTnPSmqs3A6aBWM+SBYvaYfEy7v/E4m\nq/UZ0wtce5Cd58fmKgXbeirtLeVUFcxoYFRZGIbazf2b7LCjqAg/aTUrqSYf\nUlmVSLcix6XB713BZxAnLKLiUdpiAieaQMG4j5YZYeki1jDox/+XHmcEgkI8\n45tj1OMq8j7RwP1CPUr7Mla3znnEDff28kh5xO2GHGEPHzRBpLE9tweZ/Utm\nw87b\r\n=HtMH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.482ff9091.0","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/shape":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/density":"9.0.0-canary.482ff9091.0","@material/checkbox":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/elevation":"9.0.0-canary.482ff9091.0","@material/typography":"9.0.0-canary.482ff9091.0","@material/touch-target":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.482ff9091.0_1605635951565_0.71873872820051","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/chips","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e09f9de64280ff48ee71ad3a510fabe3d220aa4f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":83,"integrity":"sha512-0FPk+GX6ayH+S98uoWoAKdQqMVIYloEwRyis1T9x2YfqTPkcRnFrnoJ4AqHQILQuudb1CwTW3bamheuzkp79mw==","signatures":[{"sig":"MEUCIQDyZdIJ6ydHEqEjRVIc3AFx7EFIXb6FwjOkM29ahIXmkwIgDRtLJcNxBhtkufyRatkEoVkDzjSQKSSjVhPcNIVU+B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWuTCRA9TVsSAnZWagAAekIP/3RPvk8EBsctLxvtRNBp\nE0YNGcLU8sExK1zSgkL+/BXeAZqBr2e7xo9nNHMLx9oCqbTohjDb8EbD2GcF\nU+N9iQn8E29HMt9b6y1OhPlbWHyWOK5fsuHcw7j5HpYpmgM+vL3TbG07Rflp\nvraSR8SM/Mg1rvEMZzAoZcQE75uph1d9/foeAUQ/GVKgyaGlcg+PhCXCVuQy\naDtbLw91MV1yNiDqH4YTg50PIhuUihoRgWIG/1JZsIDCTYqOOWPNiB/dnHQN\nITNgHvWzY8c2ZmxALgAWjkYF3lgimsEF51rpur7e3zaeh7EcDw38HcFof6AR\nhyvq1j0J8T1Tg7ALK6E76BrkRe8ggX1KJrv7JdCqTO4pXkEEUBKM91/hBTYP\nvehex5zGOR5CtFSsBbdsPRtsfgjFZcpVOcKCeuUVQV5Km7GMcjBDeCAHeASR\nVIUDklej/GJcvLcG379h7Cs8O++2paaS3cSC2hBc3Z9RB7EpbVqK2KO8GIk1\nAxgEDOHLxgWINB4DoMfktHQeImzxxchH+7JZksh7SChjZm5MDY++XXBONbi1\nEov0a2uUFaCJZIo2voBkjBnYwUlU5WxuussK2tEaVr2WtFFuDS90xn7k771z\n0P/e4w56JE3mFjikJqCGsluDUiO87sR5kjCUNjZw8XoFb+lmVBhZ+ble8u6E\nXYfT\r\n=zIB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/shape":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/density":"9.0.0-canary.99cfb6bd5.0","@material/checkbox":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"9.0.0-canary.99cfb6bd5.0","@material/typography":"9.0.0-canary.99cfb6bd5.0","@material/touch-target":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.99cfb6bd5.0_1605725075018_0.6686059856666791","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/chips","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"478e435209f71dacb7059d3a1cbb303deb82040d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.b98d15d90.0.tgz","fileCount":83,"integrity":"sha512-hdWdOQ1D/+40MuiWX7YWtMtWieruAFhUyBuB+554kopV56T1JuorPSWrTmMBfQNRhM0MShR8+hbBfeeAYFscLQ==","signatures":[{"sig":"MEYCIQCT7mm1l08kpOTdGBf3Q4bysstBr9pMdYd0GnjANcPG8gIhAPIOnez8MW9XEvQkekjchoCHOYV99E1VAHhaVyjXkKqH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaHLCRA9TVsSAnZWagAA87oQAJfgHN2rn4Y+b8QyEAMT\nic7iZi/lei962hQPxCuYyHGQWVsRQKiJ6SvbMDHNYRWKJdYtMMsnoYbBhzt8\ngLAjU1CYcsoD+9FnlC03E0fH/p1PH0tVvMHYJ16f+/3Fv8jH1NQEM6H0Df0O\nXRY44GWqew7Q1wga4eWBbn3tjmLBOqFvGUfNkIrs3eO+dpZXyg1e7n3M6CI7\nHxcEARrlbztGYnOC+kMnfijIBYm8Fpl9fFHenU45AYoBbrpWJQHweShZbiGb\nWPY+Z/LqVfmkcePzjqgR1K7zSECBse87kuKkGOntjuQd4ijAR9p5Tsr+HymZ\nxnglmBvebiOvC1fCrZM9Mdo9nVptB4l9eh7UiZYffHv0krPQIfkSOTGN6som\nJLRnCHzJyyJ6ioDLfOhtBGdHCjkFAmBwBk/FUDQxI91np0xWzJKgxqKQPXmN\nfYJpbvrIdYuJ2YhLV/it2feLH/Pyd5NUzHtQrv28ybNk55PqqkJ8sn3bxNCR\npm6DIxkriHaFGbpXXg5A+XeOfRulRHJDF2JnX53oXryJe7A9OOV0F1txvIL4\ne8zjvN3Obfh5ZT44BtzyQy1Bwf+WxrQ6VMuF+qtVuK5Lzv65ekZ3T6XxH2TI\n1PP8Pn3p3skazEi2n54C8OF0CIVv3DOElmMGLVcLpvPfMkvDy9fJJanlFPL9\nz+g2\r\n=e5ld\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b98d15d90.0","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/shape":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/density":"9.0.0-canary.b98d15d90.0","@material/checkbox":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/elevation":"9.0.0-canary.b98d15d90.0","@material/typography":"9.0.0-canary.b98d15d90.0","@material/touch-target":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.b98d15d90.0_1605738954685_0.06696582971561016","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/chips","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c963658d68ca77dff8bd01e647f071056f278f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.30c11bfc2.0.tgz","fileCount":83,"integrity":"sha512-TYZzvTTtSkioKxV1JAdYOMqOC7yu1O6IvaCmpkcuEjIHABuczhdrrlbj+uqZXmnC1eN8sSvj9wNP4nxJYuXerw==","signatures":[{"sig":"MEYCIQDc4krwR4x5OTtAMMeuqVunU9bSmLXLHQmYaqCQW4RuOAIhAMOt4tbbNgIyUzw6MKIsuCgJn2a5+MOr9zKl/7/NDCAd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcntCRA9TVsSAnZWagAAAyIP/0tRg7uX8nz857G27KVb\nyWfR5FJirDbCb7LPixDIWq2g35htsM3OKW8I7kkbJhoPU4G9S4YVJJwogiaa\ndX2e8KQWoiLQ8UYff3QephlJyXz5Nw2CgeJ6+po0deVf1n/w8YSXYj6fbe4V\nGR5owUlOBUNzCSL0u7v92W42IV+jTs3QqED98z3EetHPI0o/P3Wyrl+XsTrW\ncNu9Nue0FaAvCovPXoaH9WByNmezHd1JZhpc3/JgR97FactrgoVg/J3LNwww\nk9fajqdVXdXzio1B/NFrjJHaTL6QL+vABTXIkIzVgxZiJQKIm++VZPK74UN0\n7gXtCF90RZ4S/Ay4xEbi2y6VCMtcqLGHVg+h3CSGWggJcho9ZgfnAJvkfoF0\nd17Bx3zEWbbWyi3J6yB6GOj5WzdtXSSEiyqYnXUmmG/+KoPHXKO4DMolX3X4\nsSGIpYGBBP3GUeQNWGUphk596hWi1wqTL0ctMrV82UWRH1HrKrvQEK91oHSQ\nQciagm7sd8mkW1rsbGRUNHJyrqHfkcHSEr2xaizmJYv8sRj3ue3edZTU8gIg\nOBc0bMEhfpYRIjvkO5oO+Pa96qJaYUGxbubyGEQoSpY1PjCtDT6bebk/hxVF\nIRDPha0/EKK2N+x3rXGhH0G1UCaKhkuSYuotWMe7ZhXWQnNKC0gXaURiehvl\nSSp7\r\n=qs1T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30c11bfc2.0","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/shape":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/density":"9.0.0-canary.30c11bfc2.0","@material/checkbox":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/elevation":"9.0.0-canary.30c11bfc2.0","@material/typography":"9.0.0-canary.30c11bfc2.0","@material/touch-target":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.30c11bfc2.0_1605749228484_0.6159746972684301","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/chips","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bc3c86f02ab6568970b1118ec860aed672c1af4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.1b731d51b.0.tgz","fileCount":83,"integrity":"sha512-r+Q+MrP0eLa2KXisjJ7AFyh92wevJmiA2JK0sWdeX9f0d4IQ46K4R7uO/UeUz1hqJJspy7uc/e5NrHzpY/oRKg==","signatures":[{"sig":"MEUCIQC/xR4WlTnIE9BSWfAcm3xwozzN4cASTMRdFIng1qcmVgIgT2KSzdjqD5tEeaCQLBmjVhMPuJZTLBEQfA2aMvM3J2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr8lCRA9TVsSAnZWagAA0mkP/2S0/BrXwIKD1jz5NZtc\nPBZaO5at2khvQx7LH99wIjzBRzH57lrd34W82iLX/2McyeDXeRXT98a4vQLa\nFzaRNDYpqT6ZsVrF4hKf3aIhE151pxC64/mNGQsmd6V2lHAF2Ql+AP+Lbq22\np0bQMm7py6r4YGo3UNdpRopfiq9ZTk7uc3Qq+zjlRTOfnuSUF2RpWjvMyqpR\ng8K2CXhCNSTe70dG5MV1VLFGxy1SY/Sixq3Pw/T700fRFE1cZHgoFn1KBjTA\ndVu3a+7bGCqiXoxa/s2jbY0KrFhk6tu8c7IF1+JCCTMLLiJ0j54aeDfeoNfT\n2yznjKcIQktHJriJr22vSplR/qkXa3U8pF32UJJ1GBHOFeoWLnw/YXQ08z1M\nxI2ORq1wP8KtYAIjvm0JhQq1IvxnOgiOXaUkgO91bZoRMlC8S9L02P0uFW0v\nDKJB/epe1l0tgWZOZ9ng7SnZziCKfvBqTlWansy0eUvvLNqUzmOdIGBNjIUh\nOTP1Cfcr8NWOnrekQlOwrj+S2DTMRrB581UDKwshgTvafdbY1M2onBb+BoD0\nPP8VhlSJGRztNVGhwnmznVAvPsGkN8oADX2RoBYFQwg1AncUsWotkIAHdQx5\nXGoa1BmEZuHXUTZzpA9XPlHkbfoTjMiHefCoYOyZ8VB+KnlJGAURSyxvyNT/\ncMG6\r\n=KVoF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1b731d51b.0","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/shape":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/density":"9.0.0-canary.1b731d51b.0","@material/checkbox":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/elevation":"9.0.0-canary.1b731d51b.0","@material/typography":"9.0.0-canary.1b731d51b.0","@material/touch-target":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.1b731d51b.0_1605812004729_0.07825112201434692","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/chips","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f6132042d5e43b2281184ffdc5f778ac4affd10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.4ae94ff78.0.tgz","fileCount":83,"integrity":"sha512-Ng/ZJeUC+iTugGTDlUD/jxl61Wfotgldsx6YaThSpLEMni/XXdJkPAP7ubFlBycE7ju7erXtJRrOlYSYxB1ydA==","signatures":[{"sig":"MEUCIQDDe26KcWQcOgxb9b3Rtnpn7KX4HRXGPrzRUSMZPWHCDAIgVzIKEWLOZxlZl+PUgA0tyAmBl0/JzAxvtdUJ1EAuiVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+/CRA9TVsSAnZWagAAOfUQAIOvQaZGHdVfkGYlxxQn\noaj+f6eSBYFB05DTG86LtH3e45WkykML6RSdvEa4uXNEwDsV6cNjh7BWHmyv\nNdAiWI7l94SgNyJXE43Tb1mu54bCgw07s8mB2K49hk/D7yn3Zq6zA9We6nvK\nyj/yjIbGAIYcIQjFcLFZjWKZUiQxlUPtcXg1dMNbhFr68KZrAaAxVzS8E736\nW2stbHVlp1Ypad+RSfyMpkI+kH9SRQV9G2lmGZ3pOtbwJ/UOh0ki4iO2qdyH\nVrebjjPEHFDP/NVeGUo1gbnmtZCMtK4DW07uztfkviiCxDD548AkFarne83j\nH+daWKY8JGtSAZKR/rudxFERSU4WekmfmqOh4OdXPvsiZ9t5x7b4zB+G7gr1\n+xTO5YPcWq3Sp6nyD9djAhCrVHfnQlpZlwVhPNwUJ3xqAtfNRBJnOhhCOka9\nA0VvP3ymAiNYmY/+j7z+1eroF9rmWBV1066yZPenjhWm5xLpMSEh+rDbwChr\nh7oLTPJrvFj1dh7JJGERXG5DuQBtXt/uDtjRCKrmwmrtEG0wZYpD7vJF/nnb\nKMuK8N5Lo4QIlV+yuI5bci41Y4Xpl4HHPVerpgUWNFnEtBCjutgE2Tuli11h\n3IEgFkSiYWPQ2TStiwokPFrijwobCzTsNBsqTwt4V6TB0u+1uoqccHjNmpcq\nyljb\r\n=3dYR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ae94ff78.0","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/shape":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/density":"9.0.0-canary.4ae94ff78.0","@material/checkbox":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/elevation":"9.0.0-canary.4ae94ff78.0","@material/typography":"9.0.0-canary.4ae94ff78.0","@material/touch-target":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.4ae94ff78.0_1605812158649_0.743635308575372","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/chips","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fda013db013b5b3e50ecc1e52adad7f1dc2f445","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.7ad038e1d.0.tgz","fileCount":83,"integrity":"sha512-zHkjZ9eZnwUPHs9t/2A0i8Am+Ulh9wBjxUL3hfe/6b7dg/uqWd5VSgypBvcV6BNWnZ9/M5VlmFaVL4KxfQ9qjA==","signatures":[{"sig":"MEUCIQDCawa+bPk9S3SJEP9UVKLHpdj9TmMODWn2sDWUiIUZ4QIgP54yTf68DS6CE5WPwMDArLlfeF39DtToadF0D9Ku15Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsUqCRA9TVsSAnZWagAAGOwP/36/pn/XglT37CCIMXdn\nn0+vdQgwSZ3NIy1j6xr/QQtsg2/rn9cAtumbqCTsvz5oVXHTZgo5sBASxEf7\nygqoBGAqKkfDmkfO8owhaVXLl4L6SBpeGoROeaHKhaFD1IWG1Fd+4f3u/sqP\nM2dBLxm7z7Lp2N+HXSgVHjw3s3DVYG5GnMsWhJmVK646Jd9SPr6HlI2n21E3\nRcWTYMS9kdAjGSogE+g5u9BGwM/eXL22O2ymRF41fBs3PhDw4ulXXbu0DMhl\nq3pgrH/pM8Dk0g9joFvhAquAH2hwFBUZf6C34yZ6XulHApZiFleBmVJ7vXZ1\nkcvosAPx6vR6x4L/0kvCITWBu4xEo5bo82osvSI7lSSx0PJBYw1aXznOdaIU\nrkwHChLLeNvqFAzQ1zuQWougTAUZi2PILogL6sE2qmxDkbqSFCXZAl3lewX2\nXXqFqOh17gKsXWOUPAJxHsnFHVG1ASwxHyCe9/DPPV0d8J3TG2e6oumF9huG\n/1lTwgHn76ySrqQBsMjoi/5oqP6fkTgtk7Dz/gyOnFiCytK9vqw/iEhVN/5W\n62KTKoz3WJMGSBm5Rlc82VFKLAbQetEKNRAnSKUj+Wa9B/Re9ynawkpjWyy1\nKuNDgbAFDPtSVCDcG9SmjQNWFFQaugD9xUnyDQdeo9ItWma2KYdASM3Rt6Tv\nIG1g\r\n=aM9e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7ad038e1d.0","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/shape":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/density":"9.0.0-canary.7ad038e1d.0","@material/checkbox":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/elevation":"9.0.0-canary.7ad038e1d.0","@material/typography":"9.0.0-canary.7ad038e1d.0","@material/touch-target":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.7ad038e1d.0_1605813545881_0.5935755078018499","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/chips","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.a41527604.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f0b6c576e3d892e97b97c477a5785b69a13b741","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.a41527604.0.tgz","fileCount":83,"integrity":"sha512-v7bhgzjGtSCwBOP3OB8FWOQ3zcf3yZVopDZgllygq4xN2cQi4IA9ziJlQcdiWiWPC9hkRlhWX2h/cNWgIwyTXw==","signatures":[{"sig":"MEUCIQDfRwiWPhA2hQ/tTejZUte5vqrovz9hz5QlWR7XgP+S3gIgIJM1fdGHdMFmUkM0tWhBAchaZYR/DLobwAoOx/bRIZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts9LCRA9TVsSAnZWagAAEN4P/3zd11Iga5KPY/jd3m5d\ncEe2dPebqz7/ipb+I8sXJT0pKCl00pq5DES+8ZLWz5VU8YPpiuNjOuzMQRkB\nVoTSd/QPg8oRkGhpx77oAiVT6GCTv/EDrUyiLwB1KRufyuqykv4Sa1jVcQ+1\n3SxN95By33/rF6fynSkUw3lCIlS7kMHhZUuNRPHW7CA05zZuzTT6mzkFNhr2\nk51wjZDLW6ahNMRfTJy4MD5lieCe46IpXDy8djPzrPaOxlAeJSmO0GJttyke\nnGHeBhoOX+LPe3cbeW1svYFrjCzsRe9Mk/f+XMbpcpoC1A5PMkXUIlAye9Er\nqZ7AyJunGy9u4ZPh3r3reu4+C6W3tRsi5IBP41fTOSgXEbgiPTT3OzgfpO1j\nt02aQYUj+uv4hAQORwElQzt1js6IJQZbvTYXStovIlw+6ybna8Jo5IbxS/Q8\nS9r40Xm03SBSEZGobsZxtndtAohkFnsAFW97X4ZUkB8D4MXWy8eebWVrP0FH\nrZvDyUhttuhm1iYuKarqX4Vbp7rRxpdiKPC7k9W4pceFWWXVm/k0aMUj/NxW\nQuZM3N24aLa+GPTIGatFL5aGK9U7UEZILDopKBxlURAFDOZEdm2lZbyESzZQ\nGS8qsuNP32MPT09vKjeEtQEPgUUsAEu5WCX2Mcv9DS7vcYTd8pyVtq+aF8bK\nUiMs\r\n=qHkx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a41527604.0","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/shape":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/density":"9.0.0-canary.a41527604.0","@material/checkbox":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/elevation":"9.0.0-canary.a41527604.0","@material/typography":"9.0.0-canary.a41527604.0","@material/touch-target":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.a41527604.0_1605816138967_0.09427417758303225","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/chips","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a936aaa8277e74008a15e14e524df18e0b8e2db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.7b0e2b377.0.tgz","fileCount":83,"integrity":"sha512-aVMQR1nHiBxDWEKY2gYPTsBT9W3hUAk0TgdnP5XWZHrS5drbH0RntBaaYt6hPxuCP7mYVpyJeqXZnpLf6p3RKA==","signatures":[{"sig":"MEQCIDdKsrncHqsyrJetWdOMfzNAXuSYlbCGE4Pclrm8sZ8DAiB9oypxi0li/FIP4tZmgMmw7CqwO/xbVb0tXXTmR8w1vQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEm7CRA9TVsSAnZWagAAf9gP/idjToSIalk6BLthEs64\nxerHDPBPweGtGKhj06kyG+hZR/9xb1YPsHPeSFrGvBTUpLIebwQrrZE9qYPN\nXXJAMoa7d0WDOmFolxMYNQJR/dwyQMROXDI+cYOcNjQiqcJUMw2gZMwsqRXU\nW0gOc1z1+sdSnKSlN1x4qh3g4rUPCZk77PvXZzkkfthAZWzPPJystKZjefzX\n1rCWgR66Ovp4tNx/nWc8VsTuR/FbQMri5OpVfHWaVdhunMEs11DP5Yo5KwLu\nsNMztWV9lqfseQVhnpMTNbwYfgMjyn8IfEyFTBb6QbhONZ0XF2Iza5KGhx8N\nDqs3W/AnPVp64GZs48Ljcjo0/wuq1G17/uVTzdeWengLez1KJ7PAsjOQcJ8p\nkxAZ7zcKXS0QXNodyN3fj7K3WfiEmNmw0uRFcF/ujjDXxfYfQIh4pgjeoGma\nAeIcbpWLteHdoBDhGhHVqLMKILxgNj0LiZ7cO6dchet4qVS97I8/gj3A71cg\nzA7ii4AiA4FHjYXGQvyuuMrbnvI1ZctyDsIP1GiGgsHPm6O58MtcAMmvujvr\nU/ne/3Ho1z8m4WEQ+7r2q/EYVrfYjfUkpeBWeoCLOdpmOmXztv9LotXmftFs\n1gmQuHubIQLpocs07lYLnN73AYWPttqwZMuhx75TcyhQoduMa2cBk7TViIol\no+qx\r\n=tiyM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7b0e2b377.0","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/shape":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/density":"9.0.0-canary.7b0e2b377.0","@material/checkbox":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/elevation":"9.0.0-canary.7b0e2b377.0","@material/typography":"9.0.0-canary.7b0e2b377.0","@material/touch-target":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.7b0e2b377.0_1605913018533_0.8792403261687507","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/chips","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d63c9dcd174c470d381da396f70ad2ad850a3318","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.c927a5d05.0.tgz","fileCount":83,"integrity":"sha512-QnO3Q7XbCs/Dc7iCgPkjdavZJ0lngnaDZGhxoupKOvjNlNDbBBlJNFSTnzuq3HCeELIbrpo23Jwdcd01evYeFg==","signatures":[{"sig":"MEUCIF7J+hBGAsrJTAfw5UiG4BDN6K5PQbapOMCp0Iiw92xmAiEAkWJbGc6PD+29aFZLzvLkaOd6DsIGBv+FfoXMTYLFKGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBH6CRA9TVsSAnZWagAAfc4QAJYPK3O6yhW22aQ1Zb66\n7bf3RAO9k6Og5n/jgsY5dwEuXZjn5I9KBxsKNtIJusEgLYX9uiqO1yfTdkYG\nshAC08TT03zUpO6/2/HP1H56HpAmM6IUJTIBuYjQtmf4q1AQE2FtqENffjY3\nhgucDq5DqDAOb6cp3plVbjmR3hXlOgttWGsd7BDP8j3t7/LVqM96qzgLgxou\n4FcGhdmLrhXIxLbtuy+AQBk6kjT2px0ls7aSmeoGQBfOjbyjoPjrecEFezr9\nn1BUUqgFbcr73OnUQy1y00FUp7UeTcLbSKJpopn9UlmG2sCTBGPkxNzMPb8Q\nvqUD3K5+36tla3b5p3E7BmYmLMHl8yaDcRQfCmMQkroXGzcU04J+CH6QbMqH\n46i/IAH8ReOz08UGfKzd0Nq99JfSRV+cJ+rMaThM6wQSzdUyRrK8TVGkvuC3\nbjTziIsw90+Yu8s13JNurt7G12UBXZzPZ5couPZ5rgzIOzSfcx8UwNgU5PPa\nv4GLALzjXAhxQrxLQg3I6SNLBn5DRL2SAlVcl+jwIda+9j5Z8I31Oxxl7fRr\nmL0u9fH7Fe+lcnMq54+SDxdm5mNs1S3/nMF16w7S/Vii8Xq/JMb+jDccv8Jw\nG6Cjmq3wX7MzgQJYR6pAe3gTLcz5Km5Qaucb8UxQzVo9bRazzZIjkJg+RTbY\npst9\r\n=KAGj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c927a5d05.0","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/shape":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/density":"9.0.0-canary.c927a5d05.0","@material/checkbox":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/elevation":"9.0.0-canary.c927a5d05.0","@material/typography":"9.0.0-canary.c927a5d05.0","@material/touch-target":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.c927a5d05.0_1606160889765_0.15309655343452522","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/chips","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.b349b5185.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de6487a5e957770e5b94c8331a742dd8d507cbe1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.b349b5185.0.tgz","fileCount":83,"integrity":"sha512-HgCEByDjijS/OruFchhio+PveBX18GCIGRQ9au/Lx/xtyjPLQt8DgHlg/SLrA0AgRMotL0IsF/16JyBHeijgmA==","signatures":[{"sig":"MEUCID8xY7ZP6UFS1HdJ1IG7yUd0aKISd4mRcGJNPE6mAU/uAiEAgE88VcXo4MV34BSuxkboQrpwIS7RXwHIwyxjwyWVCEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT5QCRA9TVsSAnZWagAA0TcP/RV9u5Squ8QP+x7PY7et\nYfRTyrb95zLaFjm7wgErdzblh8jrSDhC5ovj3ep+lPy9WNCIgzzWbQVDAzLf\nNoLfPOwaoE1uKDXZJDkxhTL+b0xmLAYVXCdcL/3kgKaYuVNfoNz9W4IYez/o\n9e6Ce1xib6iS5zfRhrKpBD03EikU//s0EA//UAg/VZLO+0hzg3mkUAclcjzj\nMrjkbsrZB/ZWFUx+4K6VhMZVICoF8vNp8leDNi9oU2ilZx02Gq/Q4+cr4xG2\nNTaVuo8Fc86UE0Wtky3Bj0BqCxPkETv0sDxGhc96VQA24S36uRUg95tD3+k8\nlSPRkBfOIh7r3Y50APQg1kxmGLDycsYc6ysi2U1bKq6LXsR879qySKnfPpPy\nM6e+5R9CUXBJ+hbe8TnkvdDNnhaEvekDY9SDFdyElcQ2g9Qv62iKDTUGlGBz\nqGparxH01nWO3b7MGmmodrpV+/MO8yQFCDuZNcFlmMcy+oQAU67qtA0vnn49\ngVMR36AYkkpuIN/PgrCd8GaM8eaEqXbYWY2xggKLc5r+eRl7hZYc4RiXUP+A\nDSl9q1k6Sgf7NQBT3UB4dxKQ8dHKg/A99/PmAb9t1IcV0RWPwTjB9MZSIKAV\nBkL9LQ8JDQ3YWEqdkuLuwgTVOEzUAEZhZoi775kkw4OohHYwTbqP6ngdmc5X\nlt9b\r\n=T+eG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b349b5185.0","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/shape":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/density":"9.0.0-canary.b349b5185.0","@material/checkbox":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/elevation":"9.0.0-canary.b349b5185.0","@material/typography":"9.0.0-canary.b349b5185.0","@material/touch-target":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.b349b5185.0_1606237776451_0.592899242534324","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/chips","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e97f42834ee4be3facf7633566cb803d796e0cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.9083b7d61.0.tgz","fileCount":83,"integrity":"sha512-ZGVzysHhvFtyECtiFsAt2oDRCpiaDD7WpwNgT25bK1xI/UTBEDKfnGg26crvPvwqYzrWKaoU/tFOTKvuET3Nkg==","signatures":[{"sig":"MEUCIBZ4acrFyBqOSl+hj4XntVwAn8sqmSqy6B8dtMRw/ikZAiEAkUm2OAVzYhu6pdRe3JRU47RGCnNi4ZTsZ1gqJnF0ebY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXg8CRA9TVsSAnZWagAAkgMP/RJwA00u+kG+HO35AoIU\nMfN3odg+dkLLUXHGILR6pkjRnTtwAmMV6+728OtugtVzY3Iu/HPEdq/VNQjW\nLjEijv3Uo/9LRh9GNGMQrXv6hOLy8gWj9jOSP6M+/1TtNHdTMcCG/hSJnUaf\nTcQqZdpyGkyUy9VNj981JL7zr+00NgGLMLyvSLRt80/2JyZlzWg3FA7g0wkz\nr9i+wjEJklSFYsje6oZKTEnXE3evjtjfX768tWPFrN+IlUGY/GmYgCfO4McV\n/ItNihaNDbrj0mtICV4lDD2aSpj5g8CwwO9Qmj9TjkPMC3Y63SPxnD4n31wL\nVSf1nW2apMeVrTz1UWQqt4lmA2LYdaCLtphROgmB7Y86XdTVoJS0KkyQtiIX\n7XPdD+/5K15nVM+7vCr1FURajjeBfhnNHlgMtyUs7+wdW0auSW6xKY2MhGrz\nGySoGZAuGMWEZzU8SJJ62I9vPptAAu2TLuPKXqhsg7CSY/O7XQzwmJB7c3Uj\nuCGJCwZaiGlcDh5AZU2UgVASACT/FOaBTzYmzwcMjJO6q2bHHV7/lmNvspK9\nvQG6gRNeWEGPE1PcZTphq3VeEt4GB63nAiV1htiNm2NCuaVPNKXQl7TW0w09\nh58S1t0+gAOmQiLWI041d6bddN8dPLYAk00nmFFpv2BjD5VIBbrkVdib5u5P\nvlcu\r\n=way7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9083b7d61.0","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/shape":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/density":"9.0.0-canary.9083b7d61.0","@material/checkbox":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/elevation":"9.0.0-canary.9083b7d61.0","@material/typography":"9.0.0-canary.9083b7d61.0","@material/touch-target":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.9083b7d61.0_1606252603935_0.30435670838384943","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/chips","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eafcd7f9050bb121577b80ad25ed9b5a13863863","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.eff7b46ac.0.tgz","fileCount":83,"integrity":"sha512-YSe7/KRLitOPxDUggPfMCiP9wV1+iKqdf9uBrNaciQiG4GTPtOKoAuKa6qqIAQ+DC3RXFImGU0JQtL9pl8DNgg==","signatures":[{"sig":"MEUCICFeAWrm7ZxW9WPbXNL97xBsH+Pmuzb83V9tnbQeOBX0AiEA6TRsAFa6/vzh0UAxK/g7sDERUsXDmwSO4M+K3PBPjn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZfgCRA9TVsSAnZWagAAmWAP/3RaDpd6O0MZV4mZrYeH\n2j/myuFD79PTI3Tkjo39zf6xjAnwWTWo+7Qzi98Aa4a6z1QBoGWwRYXVDYT2\n4+1+SqLXAfnePnvpJ4p0wcfpwwi5F/RdDw+dREszSoAwosLTNqOV9rL3osA1\nitkXazNEVsRsDiiyQ6NMBhim5x3T3aK/cFWMatUGzDLPDfoFDc6XanriXyM4\n58tABH/Y8dBkrGyKRc+aT+XqaurpQsrdM3PBX/VmziEVofmj7nOueR1m6R/o\nLbJuonBWebQC15oAZMoNtg3sowJkkQme2nSIBCaYh5P0mjBelFx6WqyznaDQ\njtOd4TSyqa2gwPZ942nzs16rm/0qpK22cjYkcu02+XCkyoqt1Ur/z+cJTuX7\norAoW+W1sLtWALKPv4vt4xU/bPQOf7ypD0bDMdBf+Bu+6T8oKm97DqDzkRVR\nC/CdHzgg+ylUsNP5B2P2opLUXQcYiTcIEt/MKxlqbWExQ0JS2z9VrVn+yKFr\nIsXVZuybM92P2gryIdCZoX4u3o5RJpsdSKWaNGJtKzbijcc97az56v/HSCN8\n07y6/oL+MEcPzpgY+mcvOMcIo5Mpu2cuaePXq7XqnN1C7jzDyju9qDITMyLA\noeQEt1QaYnjuB11FUxpQmn3AXVIDdGt0eiaQgvyCDuimUxZLRrJzXcHQhgqa\nhfeh\r\n=t0Ue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eff7b46ac.0","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/shape":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/density":"9.0.0-canary.eff7b46ac.0","@material/checkbox":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/elevation":"9.0.0-canary.eff7b46ac.0","@material/typography":"9.0.0-canary.eff7b46ac.0","@material/touch-target":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.eff7b46ac.0_1606260704394_0.16817949815985345","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/chips","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"243676843dfc7b59c5832954dd327a432ef56c86","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.ae27b44b0.0.tgz","fileCount":83,"integrity":"sha512-SSMbtUTVjHrkKRtpGJx4nFsZWC/uDF+TrgeY3CTLu7FBAiOw6VO8jaLTf+LbsNQckXomTKhVimVees5ftIlfoA==","signatures":[{"sig":"MEYCIQCScESzJL6VI/YvHbF1ZLofS49OmTOSCKgnrU9VNmVw8QIhAK/a9uS97uibTi5RpziDFzh1vMIkpqEIC5Tt8Fg2SJ8P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnm/CRA9TVsSAnZWagAAyswP/0m32wnw/GrTYsqbz3gc\nHDFC1whop56EKH9lCPif0Y2u6+KAEDXOuI816hDVNuO+TFcwqHqHWJxQnnqk\n+GvHtKeQCUGO2wH82gamvSl6FZBIYh8WGLc8h2bzCcsP9XcxrESe393WcC/W\nMBYndhemZ4SOhIjd5fYA8La20JbXW0xRcz1q1kcFh9lgzWV3Opern2PWcfFW\nvaqbIw5AL/C8GB9ncuvby0kbscOpperz7sxDaSbmNqqqSXXYe8cvWdGTG+5Q\nzz6dgXVv0+2hYgwMfYbJIxk9yY24oQCNZAmc8F1+7v6BxIfZArwHkOFVKp39\nf3lgcNgYxj7xEB7u8+bAWrKO9UGY8jdMzk9TaaNe61rtrBiQbOMImqUC+W/c\n43BySPFuD1tFptOWNVm6qlFI9woEr2f2JF55BF4OttWXGwcuKEpUUNLvAixM\no3t0UVFhLu5ZEHbj2vpBOpxjUs+SN/w30WXXxKMcEhv0S1HTAgYz2fc1VIK9\nokeWAJQ5CRMgO2EpiJpwjD14p/DBwncyPOr0vFLCKiIoiiqIOIH8+Dx4RyL6\n2ENjSwpAG7T1sLj18t4LsmTZ16tNAa1bXmeKT5Z7JjcUSJy6lL7NDZ5Du1yw\nXbP/zLge5xGxcF4lFHz5nZR7VG+bh2WtVXnzfezXX6aGCkaWCl7qqvCS0/o1\ngUJN\r\n=sQeQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ae27b44b0.0","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/shape":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/density":"9.0.0-canary.ae27b44b0.0","@material/checkbox":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/elevation":"9.0.0-canary.ae27b44b0.0","@material/typography":"9.0.0-canary.ae27b44b0.0","@material/touch-target":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.ae27b44b0.0_1606318527328_0.11413167514849953","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/chips","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e1899800e1490ae4296af687f0cdc319f2613e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.2fbba2554.0.tgz","fileCount":83,"integrity":"sha512-fI34xup+TYQKvdyY2GyVE/w4Mj2GXqC0JcBWiKKL2eaSWsAXIiyOF//lWDS8U4uZjvWlNF+gGvuhLSyDKwZt5g==","signatures":[{"sig":"MEQCICTS4xi34U1Y919TZCjJC8sWx6bk3F9Xdlu2znivawruAiBM0vtKf6K2YnjS3fHROuHFnGP7x7/1+Qi9JN5TF/Yd0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS7HCRA9TVsSAnZWagAAx84P/1x22t85cIhFJ0SfTXOA\nCD/HcKHkMfdWjcjmeek0acJs0nT14/nstX4HwmYLciz55Ze4h/ydJ3f+7psS\nCOyi5WTJxVozmOZcr/MF3G+q7D8TihbGRmQ/j9QQV8VmZNYOAz1gnj38YpNY\n/2znZBo4tx6NW9zI5pA0qQUXOQcivozN3vUqk3Qr4SJCOBqe3pQJcbLrEHXm\nVEiMnCeY7IsO0nlTBEWgj2U2jAQVVEtQI5XaHT7lJ8iGDp5ALByBG3qKBuGd\nMAe3YyUIM2FdSWKAUaSnSWL77X2w253Z20MkJOJ1D+AybKabNaerLGO0Z8Bx\nAlmUN3+ByqIuooCI1eTPOl5J9Fj22UhTTjsmYHnBKeG9uvsH/62muswIojWL\nzWkixhUDxt7YZFIvnViYZxeB2OaTz1Z32WRTZK09bJFSAqopLxpr8VaODs59\nvXTTb+9oANFE6irFhvrHC9U99WuUS2dNDXf4jfq11n6ag9tRHNDq0o/n6wcy\njB9+eq3JZp2sJqjFyOb117B/Hz4SDLuy+5eT4wC894t35Ip5T4eOa0kkjAJK\n0z0Nstl2KE7qwZpGTF7Bazhs0L5aNECgoG5brpE+84P9Yg/SLkhBzAD8muf/\nbnog3Gq+KUkFhGEWfNm7upsnf9rAez0q0O9V0EWSa16oQbDbUtYK4L7lHBNo\nRmUM\r\n=uIPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2fbba2554.0","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/shape":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/density":"9.0.0-canary.2fbba2554.0","@material/checkbox":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/elevation":"9.0.0-canary.2fbba2554.0","@material/typography":"9.0.0-canary.2fbba2554.0","@material/touch-target":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.2fbba2554.0_1606758086852_0.655024224417164","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/chips","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9d566840fdb3b6e630f2ccbf11fb6815bacce1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.6d8574fe1.0.tgz","fileCount":83,"integrity":"sha512-4eMdsGKnOx0Dg6+xQXSXgZO7boSH02XYKzy3blt+qQTiBIl1dTxomdnOD311VTgym9/tMYNO2jUvak+oMpsFMg==","signatures":[{"sig":"MEQCIHLTQ0LcaXVHOw7qZUD7RG0gQ5Na8sBM4NcmVblRhtK9AiBzol7oqS4s15GfjqW1Udwk/xD4E+sSBpcaTtmaOdVr0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFWCRA9TVsSAnZWagAA4jUP/R3kjrgRFVNQTAPSVU/X\nvzGR+BsLzKex9h5gjphr8r4WQOBcUfixZDpJ6DHSWEInc+plLwBOxMM7n2BL\nW5Y/k19CYiwwbcD+SfLshbwTQM4P6SA7DGdGH8pdVWw+9/wYo0RPXWi4WSD3\nyrqcamNjutV5jBb84XByrZXtoct+bVICoald7ULbP4DcURMZpg1sH2za7gbD\nGuFtJFb2sLR1tl0DANa0YHpV9VLzDOIdZ5XID3ugY3D2C9RR0aJCKnziBnkc\nVPOh1vteVnX7KtI8kYqBjRHfLU3G1DAibQPVS9gl7QhkRqkOVXCecGMBnwA4\nCvSEhr5Q5ZHkgnf+wRI1MqGXzwMQVm0FVLoCi1xvxgdiIbHpv9npg8yvg8lJ\n3m8YEhPC6tMfFdu7VA6NB2YmzwXAQc8X6LHUVh115vDUdvfi6uyibJhHdDdz\nmlVsyTXdJwe4VwmU8yEeFPWKsAsVdQY0arAeIGEv1UJPmJHORDeuKGrN150J\nWefOHBs47RkfSnJnDlD4ss5xwoV2UHXdo3ZsUizM8FhcFFNFic+rkUBgFsd2\nItaaD+7TMd3nDTDusGLUL4WP1Qq3zNh6o290tXTfj/Wp7uxLy2c0/tow/U1X\nN9RvCjI68lwaJ3A3HZQ7nfHFtkSw/m7+Jin5+FkeZdRCuszo5iy8xwoWduEg\nQ5rh\r\n=scwp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6d8574fe1.0","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/shape":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/density":"9.0.0-canary.6d8574fe1.0","@material/checkbox":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/elevation":"9.0.0-canary.6d8574fe1.0","@material/typography":"9.0.0-canary.6d8574fe1.0","@material/touch-target":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.6d8574fe1.0_1606758741702_0.7414905818834989","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/chips","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a13dc5f747cc198dfeffc118259654bd634ccedd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.fd22355f7.0.tgz","fileCount":83,"integrity":"sha512-TjanpDFhZ51zihVJ6MIZ0lWQ+RRtryYv523PBamrSTtdwDzWlsNP9CSsdFX4X180BH87v6zDZ9DB0zHt9zhyyw==","signatures":[{"sig":"MEYCIQCv/mkBnaGg19Iox3hcnsfevdirDu4GJA3kw0VdxeWVNAIhALN6sKVRFbhC8xWvC8jaudvyxbyNfuiwF3H11JaSNqaX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXmXCRA9TVsSAnZWagAAXmYP/jZxUcA2X+9V0mjelxVF\n4mORdZ5R3KttWj/ggbOinA112QpFVcNikGI4xR65HAgcsNkEIaF5X87VvTuD\n2geAMn19RY+gbYQg/RunOO/a7bCbws7CuEshOn6nYzv7sUgdSMJvnqgXKQ6U\n+LGAlrKtiLsW5fUnBfv2RWQs0HvcS4q2b+PscBx2tLAjoSXUZqpYtV8tGDh9\nT8gkCjt6fySv2nTvXyNMskIXh/N4tAV3QSDofWfUeOQiOyHOFIO4gka5/W1J\nrcqg3ZWkfQH/Q5aXNgHppW4ev9SqtR2TO+/jbZUn/wo3RP9OM85SugWsSgzy\nGdGk9Dh9jBSPH9HhRPEV/12peT5GEo9EfodWCvU5fCEdxPlDBi6OUsk+hM/L\nFyzcXRg2WWvbzcjYv9vvLblSpNA0NLqjWH+Nc/WTt4oDKk7ZV3OupNRDrwxp\nziokpkWtQU0WiE1ZPUFAhoPs0CWG7ZEEdIDxPdCYo5E9JwPqVjRrD9UKnfiV\niIbPxTJ/OIZ2unosGGyCxETEvrxod4BAkH+o43Bf3HBBKykXXtUwEY5v9jyd\n8skI3x2T+0Yx7WsNRCDaf6xqKzLU/rvu7ngAfDEujDSAXFtg1aUrQcinp7GR\n9kt7ZF82Y73FF44gA3alR9uFoTM4mgVM1K9MA+V5RhrugyjWoT5nQAFq3rUm\nu5bL\r\n=9rLW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd22355f7.0","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/shape":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/density":"9.0.0-canary.fd22355f7.0","@material/checkbox":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/elevation":"9.0.0-canary.fd22355f7.0","@material/typography":"9.0.0-canary.fd22355f7.0","@material/touch-target":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.fd22355f7.0_1606777239256_0.047977036021462194","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/chips","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2b7788085c8f452c3a726e49a6915b7e9dd8f93","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.c4ab98722.0.tgz","fileCount":83,"integrity":"sha512-7Q8khVqibl24sod31A6XQFFE8SJfBqy4tqA0il5O9Y04hbTRNNEkkKHakCbYjnL1z0GAx4IfwEdvCakYtuqZZA==","signatures":[{"sig":"MEQCIGhmbvLfk/7haPL9VrDaIX9Is2Vn0uRUCBnenfZSyzSlAiBj6sHsCxRMVutTAhBtNuW7wVQ/4uVnzEl/5b3UbxlNNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuaUCRA9TVsSAnZWagAAnRsP/1CetBEAywDOFKxuJvWu\nUNkFbOqO9AvSB1SAif+MvYKFu5Zav0hdGqdQUEcKLuIjTy3C4dFFupjlie3Q\nei0p7C80t+UzNBd9n+JDUujo+b0NJLilCgXivndaec9jshZUpqKHe8vvvsnX\nYMYyXh20AdXNB9ZyCCi+5ug3fN50s5Hpbbwc1k/7RJUb1d/oYEPhICU7m1kZ\no1fP/ZPvZYpAL1XR/3IgNANWUiPUPsaHZPoekFWxMzyhWszHIKes4CyDCBrx\nPc4orF4+Lm1hntqJ8hjY6K6gXYZpgDmQbHC4fqu1joAGDiriSzK2H75UiKf6\ngBGuPfmrSB7fS5mgJkK0f4TgZ2Eu93f+f7PrIlqQ7omtOAK/4McxNYXDZXXB\n2ROWIfx++He3PGFepu/xn9hf8f+GOj0IWZqNWEXh0Ky8CdRryKzU3ZWq7XSa\npNgOVr+5cCy4HXab+iRSOvAm5l0vV2DHSTTnullIbEN0GWn/xGjISReirqS5\nDX+jAaXNv0PgRVOd5yAhmhiB5jBWfq9WvWAUbj6z96DEgyXUii5CXNy6cR6u\nkRV7Wng5DxbgyAVudy3RiRQTgYrKLI9JgJz+E5tQT5Se0YgqaNQ6Vcmf1m6U\n9NPoNq5/3xtam0Wa+DnjaNmhYBG6EvWQDk++yeTbIZoS2JrGnI6n+v5hn/J0\natmZ\r\n=cvKh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c4ab98722.0","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/shape":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/density":"9.0.0-canary.c4ab98722.0","@material/checkbox":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/elevation":"9.0.0-canary.c4ab98722.0","@material/typography":"9.0.0-canary.c4ab98722.0","@material/touch-target":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.c4ab98722.0_1606870676000_0.9004816778145646","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/chips","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.977585650.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e51bca28b3b22e45338fefce4daa08e7dd1c2b00","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.977585650.0.tgz","fileCount":83,"integrity":"sha512-2lewRrw2lM4EDozM4Xohw4e/xS2xELjpBD9ZpnPMkE8YpFKhGZe96BX52MeW1ewANbyis8UsXxROwB9fJ7kQoA==","signatures":[{"sig":"MEUCIQDg0zbCIbiDfjiPFYjnOB9rsPNI2R3Tt/+kHBUWExdWVQIgYoPN4R/1rGA1r6DlnTkc2w/uQ6gkxBYz8XN6nG0k3l8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6gTCRA9TVsSAnZWagAAnK8P/1ARMxFwgel4FzwLQQkt\n/bVzCCPGAznj6XLN8uv5e1V1lP+e3zraWWoFva0y3XLoai9DuwrndbBb/LZB\nX3lX0cR6iY2IjLsgxqrYm2VF15Ub/38tYctYVgT7HoEm41wpq0s/Ffw1SOeA\nrUJ5j9FdgrXZ83Tv1toXx9ZHMa++CkWlEsXadedtDjJ3Gi87Zve1J8BPYjgY\nmLENEMTcczZsfgTsOH8hb1VENmNmGewyBTfJ8Y4eBcAYJ7yEcaNRlzNROsPc\nSMmBfMhZLslylCPvfY2SQlGoxl3B+Cp+a5LAQBiaqb/JiOEiJ4q2wDF0adsj\nJUyPIfLhuiu69CtzXykJB17ppiPnIQJfjyb8cXt2wVuxcJ+q6nn1W7VHB+QS\nelOjmPixVATK0m8PCaYfqZ3+RvILMGzmFlUcY1bE9cZI4JchwA5kZS23xD05\nHAUEp7VvddA4BPfc2FB6pXfC3n9jZK5twjqpJ+gRckffgUI2QIP8cEY9r9RK\ndF5y9QP2LVB6EiwRnq9XKc6secZ6kc2CdCeKMKiGExETkWwpWPsrH0vcmuUR\nodFxvVvVW/1zqmO628K06R5EGQa2EfNNeDTXdd21RShkBbUIqXY+bmRyBOKU\neek9gzKTj3tY4KdTeu9HcapkKa6cW+Ku2N+rkthUHveA9XOsJuQd1DD7uI+7\nxe7r\r\n=2Gai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.977585650.0","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/shape":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/density":"9.0.0-canary.977585650.0","@material/checkbox":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/elevation":"9.0.0-canary.977585650.0","@material/typography":"9.0.0-canary.977585650.0","@material/touch-target":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.977585650.0_1606920210685_0.4466208941518677","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/chips","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0705fb1fcfbe2fac1f76bd6c920a1f7e9faff5f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":83,"integrity":"sha512-/IXlO3pQnZ8rR8BugNlhAez3yNhKBlRhFCcORL6nOxJKwldQ5hj6dVgHA/LvQ+bh9t4bkAPkOadPtdv4Lp99jw==","signatures":[{"sig":"MEUCIQDMGWAl+4deVgvnYezsfTkUBoKU7Zehb4e2HS/VDVyxTQIgY138CJwglQ4QQr1FQsoj/kSyDXopHfxOmHU+7C5Gc+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6m+CRA9TVsSAnZWagAAQIwP/28Ta7+YV3ADyCZo6QYE\nzeIsU3zBDRZjQ3m0RMmWhZhJlDFiHvg5CkPQEVTAPMKTtP8g6685fiYf5QPv\nPfcJ55dQSmKDZLUm9Yoh0z/IX/imNhw5V/9UesjTHvaqgMwprd4IKlTQOIP5\nXiiS2aCWNlPH0APc9NXUy6pdZM0pVpCiA0e6EHV4EHmao9VapsZ7U8gNHxyD\nbLyY1f5z8BSGasRmYQPyyknn6/bm15AGb4EqCXuxlAK07R7TjM0McUod87qR\nLs6NRX6tVgAA/00oFqUat3qZ9xO2DD/EVJiTNUDZUB0AG5+LRqtX7u0NNHVX\ndjNs57Xzjq7Uu+nwXjunWh2SIJbta8HSg3kz8GN5VcjVHYQAZJcH7Mhe8t0l\n98pfyu3qDQbOSoyuKd4sxpt5CLX2XpNy83x2iQHROqgOA6F8uZ9fodDZiWBa\n2/ZFxB9xgTIyrSd8z5XddfFmlHwIjDPG80saVsaAsPMhGcuSdQ4dkeAP9ogP\nWbNS6eT1V7VkWDk/GmkyfPaBk0zAN6yN3AS2Qzb7j10yegMwVQdwxOx2F9LL\ngy9l1MuHpFOZLhtN1NKFLLtCxbmJDCrIHomLImsQNF++EwI2oMlEHwU1t7G7\nriTJJ6wavMxMkKotrrQSlCfW23HUXxuaAB5Bgy6mGKhYrLnStR9N5q9TuYdC\nDurT\r\n=OAdR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/shape":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/density":"9.0.0-canary.c7edfc7b6.0","@material/checkbox":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"9.0.0-canary.c7edfc7b6.0","@material/typography":"9.0.0-canary.c7edfc7b6.0","@material/touch-target":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.c7edfc7b6.0_1606920638267_0.19809312592915962","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/chips","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.4f3347306.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"145b2850a0a294d352570501fa436d4f2007552e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.4f3347306.0.tgz","fileCount":83,"integrity":"sha512-HBoau2dhrKlwRsy7ny7yDjqJmdEEX7Yqlh+pmSiv4wZ/I4i+0wO1hnW5QfSSvMqJ0M66/R1p/JWqwktlrW7mlw==","signatures":[{"sig":"MEUCICkd3D4UeQ/56r5GDzPFyOEcHtFIPqKTbg5OAQXn2hPLAiEAsaDvqSCz451CfPHg34KSyRSlPf/gKrgsQiVaBA5TTWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx630CRA9TVsSAnZWagAAcJEP/158BznTSwBUVfo+gO8+\nXaRav9OgQkjQn0mO8dXqBQ04i2MaO826/BmsvGXOL5o8fWdpmXiS0rHGKUT5\naDWI/Ih6FAKu0yCGc27880+l/rLk9NUeo28DKfsO+18MsVUKgfVSyXyksZM+\nt1d5OzX6ZpNcyRaBay45RGuCGxjZU4IRK0CoSBkOtgzHyvn4oZgrdjMvyMvi\nmFF2vUuxIe++0IzMdfW0ZATuf3/aurQGng4SoNQqEeI+7ut8D1IIJhMqjwgV\nYRC81TjskHwpAS1/4HPl1/0+8W/unw+/wda0p6oz1NMHPlHI7FSvztvPnZWi\nEZlvk4kpsx1x03QRTUGN5zTvR4CaoBBkw7uEqYZTtgNs3m7KOe91PiXIZJNt\nqDor65+EYtfOD+WuC5Mo/1fHlGvNN5mCp/Ko+Mf9YSlpGUlk+ttvL4tt08L+\nalXdqJ3MbNlQPP/pO8gDK+6nQe6Vw3/atBNJfkdl/JX+UxSQn4NyZ42SIsvH\n9oAjV6ZCDBypbcbsCg5oITSJgHxY9O4DSQKW09V4u9Qrvw8jiL3Djno30Im8\nJc1uXvJ8mMZRhUYs5w/0Pm8dmt3BWe1WTgct93a5zqbv3gyIyApPzc8GEU+m\nwa97RxyDzb1GxmZR802WjSIrU2m/tU7hQoAIWP43ifDRiU9tZO6ryrTR5vN+\nkXeQ\r\n=W5+U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4f3347306.0","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/shape":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/density":"9.0.0-canary.4f3347306.0","@material/checkbox":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/elevation":"9.0.0-canary.4f3347306.0","@material/typography":"9.0.0-canary.4f3347306.0","@material/touch-target":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.4f3347306.0_1606921715801_0.6219339967498203","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/chips","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cec647e6862f0c7127d41081c20129ebf344f15","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.37fbae10d.0.tgz","fileCount":83,"integrity":"sha512-A0RVV0mBTCsEVF1JxQB0VLr9OVt0UozExPZSC9gtfzn9Kd+IwYytdc4/ipEzuflPZIElHqtYYOa7BTNPGRjWXg==","signatures":[{"sig":"MEUCIDJds42YPjVq0idfudv+Owz0RJkDZNpsWjJ7V3YSFidYAiEAvtnpIOvQrOgn7oaOp5nlBt0p7tBn/6o+tAqk8VHLBm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9o6CRA9TVsSAnZWagAAC3sP/2WrNyJHcOGScVRGV1Mz\nayutMkoX3ECSm+m9r38HKZ5P2ewUmE6OEhwdFjNsJ5yIXJIWSf+MBjb9nm4h\n3djXVoyLMZ2fb4kEIxjMD6/HM9Rlfly084cab6xi/SdtpqeufoiulhkbqN55\nttSVkmzA8GlUnRlBnSdCrOIMoI271qjDze7g1o+0g2sjoA6RN6E6Bh4Z8+tV\nNOXkgi27tw5n3J1BFdGd70n7SxwEGbLOQTKkzaOKOn63eXbrlqRSvPf4JDvD\ng+9gIo1PnQN7kbhWa+xRH90aMEGR+4VHT2MMteiL05F3OVGDWtptw0c7ax5s\n8kp9T8in8gWUHhocl+VJsnh5u/MjzGGBT5QZ8hZVXs0QkKFFw5quwbgDZEsn\nKF4DP4cMlqpw9tjDn/IBO5sbi0IufhSKrR48H+p+nv3aRj9+HEyK2zPHVbb2\nG2ab1h/FbL5BE0rCy5TzD2Z3PizCbKHywwKXM5zDexakD4OjlXANe0vGXJT3\nIVWWo0Qk3GwZmI7vbAYDK/5NwkJ+3RLKKwfuQFWX/lYtHeqCTf+k3vRXZd/p\n6CgAyMW4DwTap8hHlW1AfOVwniPtG9dqs5Pxmfyd+NJCuYb90yqK/Z5c4kXD\nMXvPLBsp7RPUCR2wdBNOsFCFx2bWrwSvZHQVoFRejSt6yLmceSYrPdx437t5\nD5nw\r\n=ysot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.37fbae10d.0","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/shape":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/density":"9.0.0-canary.37fbae10d.0","@material/checkbox":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/elevation":"9.0.0-canary.37fbae10d.0","@material/typography":"9.0.0-canary.37fbae10d.0","@material/touch-target":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.37fbae10d.0_1606933049798_0.5682385890124584","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/chips","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f28b3ae1928b9a7d9ec3e908a8c18ad39965fe97","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.11da3c0db.0.tgz","fileCount":83,"integrity":"sha512-8kC6Gx3ZbVE8ukGOsc4oXNAui/Rlrh2AYMF8BRkQ1H5gAWZS+2u7N+p3SvzSxX1i9U6KlWX+8xjm3Pz2CouwOg==","signatures":[{"sig":"MEUCIQDtcWi4Vu7HfHvEG/xeAv0PhJYdSAurHb9J4/hzRlMLXQIgUV86Uo9oNIyx809tiHEdqti1AJQtJgY2LMAPz2DUomM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/fECRA9TVsSAnZWagAAnXYQAIKainxFzC5a4pfDKPuU\nyqKmB/O3eAfNyIIhTLpYamae3G3wSCCjXOMTnnScEmshG3z2xP8qqVntwBpe\n2okQbHnIYKoOyitePr2OfB5P0ICr+jkhZHvmb+VzLiNzSwBue4v3qMixH+XD\n5CeY5Qhjrq9GAoa1js2KPrIY43ZzPdHvcGU0P3oI4IkJIZbrxwFO/DYp7kgU\nxQSDFvvDESVvaDYgyNRd1+34+b0DKn67ecW6l8jwZgWhyA5nD9d9Y6EpoUPV\nGLLxIGY2R6YxTI4v4cd4S1D67+1PUUpzw3cPRVT55SUpMZeZTvTk+7QrTq06\ncquLevTL+n9mDAY40otQYmYb/73OcmkWspJnDAPLm7UV6qOVwZ3198kfOAMH\n0E5zQ0hJkd21ba09Ary5Np2HZEx5QTiGw4IFEaWhxYqlMuIOa+JQ8uHtpfnz\nW41MQ7WR9AD4RIELFM0hXCtK3lP+h4HPRhpsSW2fSD+y5DgnnrfBajqOTDJy\nWM/jb7BKuTrv82uY0XLktJKlT37Z0xe3jmOupRoSUb94iPvuMcAQTXoUDH9Z\nwtlCY8KAc3psmU4TZwhca5PLknGWa7kDnmt9aYdxM1PnUHdRqVou5zgnwQhz\nAOvWH/YYboIW4CxasAQ1R+PNpiLu52YySE2MZ7EUmUePfqALQ3V4nnYtkoXR\nKRPx\r\n=D0dX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.11da3c0db.0","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/shape":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/density":"9.0.0-canary.11da3c0db.0","@material/checkbox":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/elevation":"9.0.0-canary.11da3c0db.0","@material/typography":"9.0.0-canary.11da3c0db.0","@material/touch-target":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.11da3c0db.0_1606940612133_0.01295148047204786","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/chips","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.489d4c219.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae198c2023bb1eb889aafc824138274af43ce95c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.489d4c219.0.tgz","fileCount":83,"integrity":"sha512-iUSdcVNjuVekr5z3PNjpvEDEYkaTC0OMeBq8ngLcWS5E3EXx7rhaANdvl/wfNqUTHmfESIyqc7A68U/33FfvJw==","signatures":[{"sig":"MEUCIQDKEUHTJKn37vmAmBJFxFV6vv8Yj1ywk8iIxo3Oahx5FAIgTXU8m19u8Q3Q1UmeaJiWhpeUKLztUbhyJgHD7JXNrHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQSqCRA9TVsSAnZWagAACFAP/Ahkqu5EG7V2FEa8tbTp\nhCZaYN+PE84hu+LsnLqMQL/c6tQmrjZYUIx/BPbq1n7Hn6eDNdP0Y5IMtATi\nWZes1IX/JgD1py6J5ZqGMF9Avy/gyhHOP2XrN9ckAPFZ/E2Py41jI1m/lXKa\ny3QUuKMBuGDXbXlGCaQdAZH2W8gTL+rlCoQkJC7mnP42ZhbfoCbgMRYntX+X\nTZNxZ9xbJImF/JZGnXykLIsrCACHYqv0vIK7MS/++dhdDjhr+YWti2wMOfms\nXZPBju+s8VeRPS13ZUhbD8/hU52Ncl8buTdzOQeCbBrRD8dII2WfbKMaDHdQ\nMRn0aCkj4yu4YkmIKHJ3hO8zdTiJ22RaowtoTWDWeqTXIw4Y2UNY5Q4qgzx+\n4f1LvXQ4J5+PD2UCRvOFPJUsWa/Td+ikN3dcGTjqUhKVhug4YOnnbIbhKwNM\nGX8BZemfLL9K+HH5GZiLzsq9N19LyL1A07CN37X5EpEKCOlrM4AEWFw2S2J0\nhBn1D/PTvhi0epFvB2ocbkcwRukpmptpaW1n1LgQLRiKaa/J1Ncn6iAfMva3\nj1tB4fOyFtW+rnTwowexYBalqYg4jVLHtLb+gAwxnF6Xw51LsUBNB3ESL2yK\nkIFna76PRg/LVe3j3caXNjNRwoy9acDsDWj2hYVTr5jq/ErNcYiUYP7YFgpE\n8woC\r\n=Eln/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.489d4c219.0","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/shape":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/density":"9.0.0-canary.489d4c219.0","@material/checkbox":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/elevation":"9.0.0-canary.489d4c219.0","@material/typography":"9.0.0-canary.489d4c219.0","@material/touch-target":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.489d4c219.0_1607009450367_0.6168014543294253","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/chips","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd65929fa5036cb994d22afce2e4af681ca2c2a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.6557a69d9.0.tgz","fileCount":83,"integrity":"sha512-O3GiWy26iMBpHlB1PYm4fQer5mNd4Nf4QNt6yLzrxR9c8BAhn/Dfziz/uZ/QABb4W4mEWfZ8bhO+YdmR/RrEFw==","signatures":[{"sig":"MEUCICryP5YUHeTl7jzpKXjMRTQMrwGbYg1YQIvo9MBPbcGTAiEA8PZPVHMHEaK/DD0uAgTQYSJe9Zk6+LfurKCXc/laUoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQdrCRA9TVsSAnZWagAAjZ4P/A0wHSeFDjVLNRuguNj3\nR6G4xaN4vL4vnP1/0crrpnRfdE8jzKUqwoTO2pXjJCPwakIQ+X6yuMj36Upq\nwsUu91rPsuTRZ4f1B9wj0N2Z0PWyQ+q2JL24qwAfInRTYHGwo+80PtD/epJ0\nCnLS/HvGSuQF6ix9SeWZKd4IjHxdlsyoeDxbtb4yiVfyEnSwWlKbQQminel4\nM5yX3odaBjt/uu1mPEahmOQP1wI9+JLqDvv1P4UJ5ect6MsJLSNbPXan0iyL\nqfCkZXK0fEclvnACH55bXR64wBRZKc++r6GcZ8ODwmgC35i3tBQVAazs7Vdc\nTPU7rDYaC5Z5mkwhmMa2daAm+FMKLjArxRItF0gtLSw8rRwfALldcoEA+Gbs\nIbsPnTvKe1EnF7jUzLKcSb5gPejwX+0GHd6uYjQ6UXC7W8bB82sOprqumRU8\nuqFAYqlBmgiyNLSQ0FR6/OiX5CU7ELJDxRNyJN5zwF1ZIEZrB9GdOw50JHDb\n5rkNArtf4pEaci+jha3W9F+Om7o8ZiArZAz9/dbvBkCDElhlrRM/9nxD+b+H\nVBZFKQz7v4oQnOECi+j2RYImzT9gPlWOQpw/MnciUwjqxmlQ4qo9s83VxaRq\nhsVU5Z/TVIk6Gn8TYMPT54Q5BkreLDcZdkZ/fqcBfuSicpU5QBmPk33k2yaA\nsP8B\r\n=aQc9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6557a69d9.0","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/shape":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/density":"9.0.0-canary.6557a69d9.0","@material/checkbox":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/elevation":"9.0.0-canary.6557a69d9.0","@material/typography":"9.0.0-canary.6557a69d9.0","@material/touch-target":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.6557a69d9.0_1607010154462_0.1784718638895788","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/chips","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e59b516cf36c92f8f3bca223d4418e82a490782","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":83,"integrity":"sha512-aygLjdqH79DtjKenK1f605TErXdHEnoGto32XjOlZrAS7cFBJXEj81qmUwceqcMBGMcRjviIaUzhthDgcqyGLA==","signatures":[{"sig":"MEYCIQDOTPK+um6zyIdt6AsoOukuo7VrOmaoZmSomNWOwP+A6QIhAIF3tvYr2MNFbw1InfEUYr+4p9zm92ozfCqASjdaxVsy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQtvCRA9TVsSAnZWagAA/L8QAInnXzkzpZXRSNs++MaA\ngR74DPoGkGLfmnHDKeeyKQ2GX0R+XU7gC27c3KKxy7i19hNGpRnycAlLdiKM\nAPwgg5Hh9TZlmhT+KkLU7RWAlNZoQvjXaqTZDE/D2bkQsijND3FSxviEWoca\nyrF0oSKFdNavifS05iL9tYMIkZuQ43xsnhsgHYx77zck4IY9eflKQDwkEw4m\nN2zJyc/x6/CzjXgFWouuNyi3vQK1ptoS1L0EjrCG4U6meQ1RvpSooQKn2rWk\nxtGVWmwI7j8DnoBLTwBCNm3Fvfsf2aA3c0emoKXjfmHZrAHATkig2gmle/eK\nJMAoYNNn7nk+MPa7fzckjtuDkiIS5Du1TQjfP03d2iKZbZeadnQF3tHIkmHK\nBZb7cp75fdjRftH98HMOrQy6AfSx1rN4moo4mdrp9/vDMP/CDh3dGfJIpH/g\nAyJ0OL5brJyHxE5VnsrqX322ycQBhL2he8baEGzZxg8d2SgMEai+zVsNV+Di\nFBLxeH5EkyQwDkacfuYnU6/G4Ru4Gr6k6/oW0mmfqKGc0rDoDDdHc+4EKh9H\nIFR/YGt7kpwNAQ6exgUOQidSj66mEG3604foIG3Hd4p4dKOLVuDSGTV5shis\nR08yivyJ6p0g1F0TSFKItLv3509VvCp8nQPDf+i8+jPe7KG/xy2mcdHyWpJl\nPAB1\r\n=WtZ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/shape":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/density":"9.0.0-canary.4ea1b7c69.0","@material/checkbox":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"9.0.0-canary.4ea1b7c69.0","@material/typography":"9.0.0-canary.4ea1b7c69.0","@material/touch-target":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.4ea1b7c69.0_1607011183388_0.23152329692089801","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/chips","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed869bb291cce6502b04618789f630934e180a28","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":83,"integrity":"sha512-VHY39m9K6i63XDv+ELFFR/QcmjFanYHOMtvmYmmvHgmKqram5LcP4HFW36pILK5IGNGhJvUoku8MB2tzsJjRcQ==","signatures":[{"sig":"MEYCIQD5W4jRAoWEQngVnSq6oMbN33pQEHtRH3a0k+tDOzHtJAIhALzW9sN9IJd9Kuy5DsUAbJRj7mOhjuLhGgbTEJIP2g/h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRotCRA9TVsSAnZWagAAfYYP+wdzlAXwYlgJtG1H/iyZ\nh0ViUtXjokH7KFjyWEBrV9lF9ckk9BF51sjqLCMHDa0xrc20gpB/xDGMGUYG\nIwMedbv9ImZZ7jYnUaRU1rYuGpmGeloGyqdHBYMK3Y359qqoeu9cZSbVLhKn\nqugC5kGfMokRkiNsf/8FDPBK8I1AhAzOIZQtjleBXef9UCd9thnXq1qxS8wG\nGaNeLBB52iEmE6ahcnTRkznEQe7/2WskHU9BCgloeyaOfKoKapXXuFqOjtO1\nqt4qUHp9b1lWoq90lstV4+KNXDpYhM9r2SGo9wZgCGOXz4TFR3FBHsb3OSNq\n8BgmYgJ9nwrsySmNI+Yui3YygdltOQdg1FQD/rFdFgs5qmxnnk73JYc68EVI\nknU4mO3L0HhmtZGUf6DeuDhmD/jhWhuZiXQijl1Oqcu54/s9wop3aGp5pcry\nOJdtFMimsnAMDOJcOIn4aRXeIg/rcYumNQ8geA2Qih26XsjSmAb7gCD7Jeua\nqOI7WtNaaAIeYAKGRWEwynKhwsPoxRVZuUQ+4F72fjaehGYvgvoJjq+KN7bd\nmJbsN4zkW0/P+UGgKK6uVANplkgJLYzm8YbrTc4F+RoBNDQIFrqFze6WJpxG\nQKcW4rJ7GANp+LnD3EQBQTm9aOACJQVvs07BqTWq2vYXhqOa4c+6+Ymas+zM\nTjhk\r\n=e6bw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/shape":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/density":"9.0.0-canary.eaeb78ce3.0","@material/checkbox":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"9.0.0-canary.eaeb78ce3.0","@material/typography":"9.0.0-canary.eaeb78ce3.0","@material/touch-target":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.eaeb78ce3.0_1607014956425_0.7589672633623723","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/chips","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6819c42743a8f4dd9be5155556f0c9eb2d30f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.1c156d69d.0.tgz","fileCount":83,"integrity":"sha512-DuWDauRhrlj/nMI/NNUqVD+SUnVsuuZNSvf9t9AX3H08Uo3ZUHhNfdc7Ust0B+jHCaHsjLjlREyYagp8JxJuXQ==","signatures":[{"sig":"MEUCIQD8cJjT63XrkvIc6YjrWCmE8BV0in/930h/rL7nkUF64AIgH9vUUBZ1l47ZRv7ilmUPti001GUcU1fIRXwIpwYJgAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU6dCRA9TVsSAnZWagAA2CMP/1EqOw+R1YiR3PpqR7m5\ne7qh3S7qLtfXOMmSQT426wGcWhZMNeQPFnvkAl178a2nGQ5Vc/jMoleXBYUG\nGkc71wNjouo95M6gAR3dh0ftB/eb+gvJ8ZymndJ2k7XLzdAnnD88R0w/ty8q\n5pnI/dncK5p5L1wxvtBxgiW/YCzUGGr2cGUWQX/1Bl5I9JSR0zfhnAZMVhaR\nYRqYb4wsCwlGzQY38g4L425pPz0GVESnST4SwNRKXZtIZEK2qIWChv43VQ8/\n+39gHwoXCD7re1Z21S8FJLQsUoQjfzvqiYAVTjYZohNPNpKsSLZCQFh3Eqyd\ng2eW833zeE2zMOCb2tp3HHMctcwVzfqYYGY1BAgN/bwSRAc0C6zNsCMxYX+3\nMlwpYzqYUer9BOBN/hbv4UqShk66xLrFcIBI9BMeX+8mKlyWTDw+kLOwOgoh\nblkjZvjzj/zi8qUPqxc3vU+1QSs+su7IySfUMywmHq7d/MM+O7H/xppHuBzH\ngvv22L7WydeYkKsqAEXoneVWziLoocFKXde6UUgT0AlsOTtrhSDgD2EE0x3T\nkz1AekAPT28Jnp3j0MuXwDybYQiY6iRAhKL+Aajt76xqwxpOt9TB+dxEYkXd\nlCIWL38bB/BGQ30nVk0AKilbNAFY9mb+dv/BfnVuZ3zM+/20VAT13P7MTbJn\nO4Fv\r\n=Nio3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1c156d69d.0","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/shape":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/density":"9.0.0-canary.1c156d69d.0","@material/checkbox":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/elevation":"9.0.0-canary.1c156d69d.0","@material/typography":"9.0.0-canary.1c156d69d.0","@material/touch-target":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.1c156d69d.0_1607028380533_0.43398719743177194","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/chips","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.832668d33.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9426a49e2cb0aef7327de4cb447108ebaccbc620","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.832668d33.0.tgz","fileCount":83,"integrity":"sha512-Y5Wk+LQGWjWPBkKY7le0D49ZvDQ4R63Z8VwM7JbspsLR7VEx1RODXTVjU8vjnGSOGUr/gF29XDLh39my9b3SUw==","signatures":[{"sig":"MEUCIHO7Nx0fbG5Oba+e06vM3ywpaKev2HNxZ9HyawoEBleqAiEAoWZxrYJijKtzVgsAc2Ze3lu9i4nGODZzdmRSXVp1QFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynrGCRA9TVsSAnZWagAAz9AP/A3Fca6B5/TZBVFilpst\n3hEgfaqJIVDYz6DJlyLU3/DP5COzKlBmsK0p7W351I1q3tagHIEX24IacyWq\npDmqaqGIWg1wvySt659TARYIDRpBCOoHQN/06lcmFCzWlzjHmq9p0kEdMiqL\n+6+BWP7BP5+IfeFZUcfptThoGSbGhiloenx2TICJIRKr/gkt+YdGvtLLNric\n5/aP5EEr33RR7E+6eZXOrm4KmACPOxt0Ev2INZhg1wW1VWQFhQMeAMkKzjZI\n6f07iACZvPpyvGYjQVfjJihqSG3EshKC8OioSjCuiet+gN1Wa814hGT8F1oe\nq5kQjx2LtYQb5HaeaHaGG7/jmkBOVCcFZlrida671g17yGryePR6G4QNrEEe\n+fu13S3JXg3PAqQZhvzMpOuMFB/hNPTAO2uzSp3pq+IZqIAgfDY7YyEmanQ0\nrmQXrrEAcsUQ9IsPhTcC/jRXAwow36Jyjaqcsuw1ypa1+eGZdCWocORa2f3Y\nw9Fl27omL6VJFXxVixVS5HR//7cZ5O4zp3dj9WKb6vdJSLyALSbI+dXXp5ny\nlcWX1YpLNUGEzCAQSACp2X1lXzh2qpcEezchi+XyvUIraJX15Nvs3v8wB1Pi\ntm7IMrZAhO6Zlmim4oNKRp2rIwPYkdgXW1GotgpPedbxns9eCNRzWp1tzTjl\n2y0t\r\n=zPIx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.832668d33.0","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/shape":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/density":"9.0.0-canary.832668d33.0","@material/checkbox":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/elevation":"9.0.0-canary.832668d33.0","@material/typography":"9.0.0-canary.832668d33.0","@material/touch-target":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.832668d33.0_1607105222021_0.8535639076436521","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/chips","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.4321323e4.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55b25e5dae7e5ad0e855bd5cbff7cdd82f88356e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.4321323e4.0.tgz","fileCount":83,"integrity":"sha512-je6ndBEoEp7TomMxEroPOMmj0W2w+1lHCBpALoP8z0FIEpYZKAqr4EVuHpE3H4wPUXDflpqATNm2Z63erd+7Pw==","signatures":[{"sig":"MEUCIQCYv+3GPb2VkZ32VIeCowTMKFIHPiLluyxO3jXjb8imYQIgJE88FWrXtjdbr8ga04F+UsVNxvvWXao7BwjZeR+PfQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhI4CRA9TVsSAnZWagAA240QAJFDiMvGxOLKALNb2kKy\n394cb0sb3caTrK8OGy/0u/cOnWY8yD7Wrnw5xU80X5zaieWNbtvH21lFb0Zq\nuP8ocrY8dqQ6wiAWfvx0HV087D9pwqRPAnJIoblyw2cjq7miB1MobJjeCHt/\n9Mg0l6dsBWadgz9kR0p1+ICR7Z6+ydwPQPWhWx7BhoA+ztxQwI1L7dy1POLg\nCtjitwUO8qCVqtwshUjO1ffkagKhLoFGG3VQXYP6rcPKdJ7voOoiSxsYlCwk\ncWLcZvE1KXoUaWxuZD0kLSuU7f/qx643FVCSHLQQghBsJ6aV73j7YKYwi7Ca\niCXIgFFIW4uGrPlpOhv/drfRIfpbld4f4lBu71DiIcThr5GA7ZheV+KtC8tA\niGiT+lQtz0CXmma5D5/EpHhijWTNVsAZLHfi1O5mc6wsLJgHxqkQTgHc7D5v\ny58CNRzRFPf/1DhZBzCR0u6ctCyq0551fnCpkNWgMIeO2ZTqRXtCuc+9GIpg\n8kIQKa07TgsQUxkT2BDZBpCVHhFCSsBPLvVVqF2kIWAAFyCt7H/PTv96LAsL\nBa91jVDGteLTtv1rX6hhDUXTOfEWGmcW2755i7eYiEiVv3PcfTv4vN3yM4SV\nGqYHPDNCSolwvsuHF86eSAE7zV3TxoV5pCpwM3+SDCDyobV2nHlpNsMuxPUt\nKD/5\r\n=f9tP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4321323e4.0","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/shape":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/density":"9.0.0-canary.4321323e4.0","@material/checkbox":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/elevation":"9.0.0-canary.4321323e4.0","@material/typography":"9.0.0-canary.4321323e4.0","@material/touch-target":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.4321323e4.0_1607340600260_0.5084925461584695","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/chips","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e2be10407156c527f3087fe3300f4284da372e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.2d5f32d41.0.tgz","fileCount":83,"integrity":"sha512-4bVzQ90oXxQMAlxm4GfSEgpuRSJClpoQGso6S0O/xcSx/bZSIUKJH/FtKjQ4fBEJN7F9r8PO0IfRpCx12AaRvQ==","signatures":[{"sig":"MEYCIQC3KcwZxQlOaujVCdVCX4z/ciIR8B0cw3LTfuECI5geAAIhAK56ohPP4Oa85o44ohdmhHYRwT/Ud2PfBsLXO9z1c00X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzluaCRA9TVsSAnZWagAA74cP/0r/goJdv3n8zncH++fW\nSoU33fOyyOJ4XNaF22aiFX48GJjHaQ+RZ4yKAJY9TdEDudm4+F+KO+Cmu2kV\nOewOx9dTxCzwJXQbqpAWaV4KViAkIRY8in8fkLrT283PIk8TD8pL8bzbtd8K\neY67YXTuviPUjp6m9DXCECwqoJ/vCxJC2zRcWlhdug58Zx+kNFwNphEyHKGm\nAe3wcep6ptfNZxwnUY827XNlGV9YUowJ5dF21veLVQB0hFVD3wYLGDuMcSos\n3EUrdzzFJxRSlE6mqVgYLDQ9t99D2nIiVUtNIW5bJO/fyaCPqD09pgqn8Pbk\nqUeU2Ag3fQXhlWL3v9qQ/u59sOU6NreXs9vFiBUSHN5OWU+YMAM2Z4I67CJj\nrh7YXasJO9RUGtlMKvZ1KNRA333Vmu0eF/u59Jv8xTDwxQz3sJmZyWpbCgqK\nMB2W2WGCo+SkXEjOSqWR/T0BcwtE5NOMvnriktHUcPAcnZBFTjElZ7KR3NGM\nLc2DbGAGyvcOALTR94AQDVKY1Z5KzqJT08Q4V5JlHSsIaulf+t/uFehUrYx/\narJqW65XH2ojOu8L4L0Yg+Jnx2bpj71Q3JNb0aDFiosR+KyOQa/yhQBlMyvK\naiOu1fQPnDPZeaZ2Ro4V9WTztywmL0C24JnCx3QM+ttipQ2PvldVg0f7OL7o\nc/LM\r\n=X/o4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2d5f32d41.0","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/shape":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/density":"9.0.0-canary.2d5f32d41.0","@material/checkbox":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/elevation":"9.0.0-canary.2d5f32d41.0","@material/typography":"9.0.0-canary.2d5f32d41.0","@material/touch-target":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.2d5f32d41.0_1607359386303_0.9717706477887096","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/chips","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.8239afc64.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67b28113c12bec34de08014d0d5ab305516f1de3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.8239afc64.0.tgz","fileCount":83,"integrity":"sha512-+f3LEUITGBnd65z6XYbvo3FswW4rjZZ5x/iC7P+lCX/F5AhJbwlIbXw4Il4juMqRN27zJnY5RTrY6k0yeN57oA==","signatures":[{"sig":"MEUCIQCK715KwhVxBg4aA4L/GbPfyDz1gzyKhxpSx2JK9uGVVAIgThVI+SEqoDrY9QkdradRbR144o950hWZA3NvJxU+cQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoeLCRA9TVsSAnZWagAAdQEP/j1RIF3Z8kZNXO9jn45K\nJOruM15csl2k4C1F39dCYLBUybO1xIXWierP6cTcxm5x24lPs9IEo4aucZio\n+Ar26GxMZyZiongM/VprsQndJv7UxkSK0/W2pH47kfpiREPnpFRAnIq6RoJk\n1jOHZczOiWNvi9BrglaXaQNyef0IKD1x2/ZCNopB1P9VtEEwlGZ31n4OtFAp\nxsUsUJ/pacb2JvRBnaadW+LYB8ljJgVAWhLyMoVpDj+kNxjuOFyjZQpwWzig\n8BTK5H5YcufeHNoeBMS6gqJMwdG2XaNIYR1ZPQ2rEVjQ9XwhgyBxvjYJlrv7\nMQJGq2NXYCPD3sg/aQG42bqVN55t3IHs06je9oMGrEDHjMjsF6qvkli3w6rh\n8PAEECP2+qbsi0Y7JH4pc0KCzPAtwUvUnEVGvH2VE+mnUVSkomiclQLNk3VO\nxaZ0vb8P4j+mQ8pe6R3qfMoKt2FJyzj+vtrInQMWXrYn998fv9St4hDXZsJH\n+DDvzDB9vAMaUjMb+b5xCc7Qc3jHEe4Es1Cf/BTUK1F7QdQeTSYz8CKAelAB\nwAqReILIbERgr1nvduhMKg2MtXZYxg48tCY78QmheRr9uBjpYaNBYTzK6RH8\nPDKT2mPaIRj8gGPM+DSbUeg4vl4WUpPZ5tPSXrw+jWJlOKKzsvyoMa/bZGo8\nAxs/\r\n=USE5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8239afc64.0","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/shape":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/density":"9.0.0-canary.8239afc64.0","@material/checkbox":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/elevation":"9.0.0-canary.8239afc64.0","@material/typography":"9.0.0-canary.8239afc64.0","@material/touch-target":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.8239afc64.0_1607370634867_0.9587913289683312","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/chips","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.6871336f1.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb12e665869f82be43c7a1be03c9829e6e354221","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.6871336f1.0.tgz","fileCount":83,"integrity":"sha512-qgLZxuTGM/iggsH/5mhGz8zTQZR+RecjktfHKZC4ZN2NqnIJ1fHg4FGSBS0+qqg5lI0SHQetGcK3lFYzDcGlxg==","signatures":[{"sig":"MEQCIDHbBH++l1Z872sJJje3cg7+4c+IbusP9eajS7ryo0VQAiBs7hdubOjXSXWjl3BTeT1+5OoQn1GqrpebhZ/3sw3PLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6OgCRA9TVsSAnZWagAARcYP+gPAH+QSBXK1fNx1cm2E\nYd55vhfCwiOvP6kYgDOtvds8Oa0ou4eXHkuKkPhLOodSnNDiADsAU3HPKoGi\n5F+fIkzXn+gp8lXuqIlluJZ1H2hw4By01l7Y6dfqIiGN6gzF+EI3vhvJiTqg\npv19MRMsfK8UTMOSx+1uTzKvGQz+C3Kq4ecXXz5BSEKdfPmuNT5CfHU4Fder\n/SlhUYB8WFMeTCrBgb76Y1zxXf1PyWylqRKe/MMpanEXCCnsNNeVn10t0+u2\nUZdP0/qIasIcM+QY7wHDwIt/EmA85Z1JPMl6CecCXIfoTQR9i92jTyZK56hc\nEaz8UhbqF9VvKjfvblgQqIl1eEHt09yXVWdgE9cJzy/eqj364wLGA8bAcMXT\nMgylysp4HwBIyqRBCIm6gT93T32C0SV8FUZQk8laHsZbJiNzI++GKLm74Fvs\n7+tyaaZ8dQgat1l+5DeffzGt6/hfYjSNs6FRp7xJkU8aOvsc07H2CMZWBzYe\nhM4XOsM0/10WSsptpGIzP72wrkhDbLkcQDHPskSnhOEBz7y6WGYgjXrWCdEC\nkO4JCTTvvV0tXtylx0NGsloBTWP2u18VAXWRjB0I0TT2Z8NeasD48QNtFSzK\naLR0hQo5tAUjFqeeq1fIKX9pGqTT94cdu3l4IcPjbNqdF4PvmFV+5PzGMIg0\nYKHc\r\n=aIr7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6871336f1.0","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/shape":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/density":"9.0.0-canary.6871336f1.0","@material/checkbox":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/elevation":"9.0.0-canary.6871336f1.0","@material/typography":"9.0.0-canary.6871336f1.0","@material/touch-target":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.6871336f1.0_1607443359924_0.05261096918520103","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/chips","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.9f718da94.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"988ae80a37946ce97249d4bfd99cb2327c166ed2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.9f718da94.0.tgz","fileCount":83,"integrity":"sha512-EDQaRLJimLz4okqSSEJy67JH4E5eHEXsRgjjajLEGGkc9we5vMsr6G7I0KZrRFUJVChrVYGJdQ7cnuXsZstWJg==","signatures":[{"sig":"MEYCIQDZ2PIxqhr0lgOo6eoUHORmIi08PKwVcn7/ds4CQTXLGgIhAOI8Scry/EB4P6kzRDx55Q7Sgre3roAotmysEOmxGPGZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6ZiCRA9TVsSAnZWagAAy9kP/Aw4/pv/m4NJsMoA45JN\nZUD+olAZ4O4e57uE3OP3BoMWi1FPrbQP9CQVcelNB6RX5p7PxnT+ltrLTeVG\nQvbswLIUCf6EqKhz3u7F3S/PEL2oFEGp9xY5G2EYVZXcFRLvD3I4TXoqVKL7\nn1mAQushugoYZoyeF3A2IJ7+u60Vb+uQ/PgEED0O7yh+Fm/8SdX/BfX2skDD\nrChF53YPOvrW2S8vVo26UDPkpJu5dVNMpORkbVObbj+vPgPeFqYR3OnVnaeG\n11drFeUdvB8/wFtFbqy8Hcn7Txm5G3Zs9o5Kns5vfpHpEwtT4RIErI1c4z3n\nOfO5KEkfd0cCGpsLY9sCfugGZ9Btyhj8xv5RTZmqSboav2Memj189ynVSTQx\nOqwechMOcnfTg9QQnyL0CAAlgS/9eZqSt7pTsdPBGjPvOFrOZvcjRnCUvx94\nux1KAWZSfGbxAGuQ0xk5tjZyn6AU+3zxc1bT0hjAgtSjYjh9Z0A8AQr5DbDa\n5DxVGUU9jD5x9mk4ixrUVEmrVCF/rMukGYpbBwjfdDq/Ta2r0pbsiHl0L0Ee\nNFhPnW41VrT451OZEXWQ87nuUnIzqdJhjgelhDEui43CpUzsFY3jztQPjwKN\nWXJ1GmYRqyrr/E7A5Pn0gBmMxj9uOc7rY9Bio3QQ+al9ZDaMOc1oqqrqy8LX\nlo04\r\n=hIX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9f718da94.0","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/shape":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/density":"9.0.0-canary.9f718da94.0","@material/checkbox":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/elevation":"9.0.0-canary.9f718da94.0","@material/typography":"9.0.0-canary.9f718da94.0","@material/touch-target":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.9f718da94.0_1607444065830_0.14367765181277736","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/chips","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e71003654093ed840cc1fa4c72f00d0083a73d4e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.1fccb1418.0.tgz","fileCount":83,"integrity":"sha512-WWEzF9h2bM0YsVdFMRmMybIpJ5rRocVbUL4q22c3NtsCFsb6cfseE97/oTtvgPF2YLTOQOIzHziW8QsPo63utA==","signatures":[{"sig":"MEUCIFfxmXYQFYuIaA42MiSd/qa6sRFZ555ANm/c6+mUjiswAiEAhBIhy/T3ZW5Vzm1NgBy7YpIH5ZDE1n1d3Kinj+7na0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6nhCRA9TVsSAnZWagAAEQAP/A5rwsTYIF1SZ5w63dYW\n5Cn3wshXyupmtpk5s55AcyDpnwvAJajJPJfIwrmNnTQtgBJbgAHoDHCm+Zwj\n0e0zuyFfWf8w1N4C6zHS2pIgwZVmADpDSGCdmUFQUFE9Aw6O7fuzFqwxMk6P\nfxhu7bXg4tAtLfwQM7rvboNXOljNLb9QwzkOyJewXGWcH0B0JgK8OivVkQTq\ncXxys9woCCbAmdSYqUNhmCjj34pSZEWlDYuBM78Nqj7VAYignFz2J4he4Gft\nRypbqHnXILWBXrY+7GmAopWWu7KU5do4wMDqctrPCetzaDhR3J2+Kd8Nvk9q\nj5JaLzUtYOh7Z0r/QIwkAW1eGK9nsc7H/MDug1WDzRby+0blrQlFBLPGt7PY\n95v8wzI3ThmVgJvdI8ZGUq0Sky/FWsVIoZjJECG0Y81y3WeFpag5Di1Jyrjr\nLj2CvmZO1Cx0fSFsp2YuQYqB+PWiwYoBLZ+GenIn+tNY3Bfa1W2d5w5T7HOe\nl/OpzuFRuHyffmNpsT7iq1gAlfO+ZAqjjOhHlC1PeTHXd+RTHxVbXGmxPlt6\nTmNwiXI8WUQZkWXhJCSSPQC12BZxS7iwg1vO6pinLYtXdxtjbVFESdo7x4g1\nGX9Wr7OyXvM9TTZc+u7EhSceqgX2vfnSaJUk0692XzYVk8Kfw1rXIQNnMIoJ\n0HHe\r\n=tVDy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1fccb1418.0","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/shape":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/density":"9.0.0-canary.1fccb1418.0","@material/checkbox":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/elevation":"9.0.0-canary.1fccb1418.0","@material/typography":"9.0.0-canary.1fccb1418.0","@material/touch-target":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.1fccb1418.0_1607444960663_0.07398526478035183","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/chips","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.afb68894e.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"113b7cbd3553ac3698845145215d54baccf2dcd8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.afb68894e.0.tgz","fileCount":83,"integrity":"sha512-62ID38ouA4QUhyAtDV+rJ1BoMsLXWrC9t//U5MTVmX1/gmILHp8rpTSVSi+ZGV6yPekIlOgUCtxNpMjC1GXzlQ==","signatures":[{"sig":"MEQCIFmX5YctC1GWxSkJ0wTWlq93GLy3FWHPxoJomEdS4/C3AiBvkuK9mGurrBUd5ylwbFwzaO6ls17slMEdV7isvwRB8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6rWCRA9TVsSAnZWagAAHpEP/18fWnaYOLL6RTIUpY5V\nx3P5fmcdXKuEuEKbpTblQwZ94HpAxeh4T9HVzAAu3b+mSkBCsET7lCOq2GON\nQnLHvwiBeu7f6oU2SvN1LxOEjPttSL874bXgAt3agwLQaTYXAAyvk+DFbxE4\n5HaJc5wMK5dMc0lePjnUs4Dt7JJWKvJtZfJ5QlHnWTyBUDCGrVChymwAQ/mP\nXTLGlYomQwHhfVUOCN9eg8ApIAcholPghWtQj/rHNG/0TB8Nlo6Jz+WLAD6k\n7LUhLy7JWT5M0SHT/9GDY4SP/xthmATzHXCbJ2x106wp+n0+NerjDIesbhml\nBWwmS9OfFfuZczr3W+3iYvtfouYtj63dJNjgP3dGTM4cU1bpbtOfSw6UDGjw\nepISdbUdhbibdcv2wljyOUlgeEOfGxo6nH+tFTF8pdVEcDfeW2Qi1VlEyISo\nNtcjM0+1lYFj5MfN09vy2nbWAfophNqdPSdjNZzt3FEs3fRpQIPJClXy7oSB\nbwEjfD5tZpP2GL46bgfqKBzUrA+R5RwOv6iHjlyt4rzk0quYk/p9tRY7PEkr\nmZ62TsjuRza7/sN7l+yYmAR74WfvlOKTItO5oVJtuJ466m/56jftBw0KK2xK\nG4Pt3LtYiRlUcNvM9jVZ7N2pImYaptQv+2rUssd6+iPVP+tnNcGqFH5Jqyif\nEsxx\r\n=BK6E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.afb68894e.0","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/shape":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/density":"9.0.0-canary.afb68894e.0","@material/checkbox":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/elevation":"9.0.0-canary.afb68894e.0","@material/typography":"9.0.0-canary.afb68894e.0","@material/touch-target":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.afb68894e.0_1607445206098_0.4911228586205887","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/chips","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f4f10be283eca273abe5787cbb02d2edbe55327","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.fd88d40c2.0.tgz","fileCount":83,"integrity":"sha512-QdWt6iUHmvOw7t8cw142a1n6rjPu6qyFC/3/RUb3INXSdIE6/lUSuQlCQ883cwecYDbMAlrhdzaaWilHP/Murg==","signatures":[{"sig":"MEQCIAhXxYUKDvU/1BFIDupc0h0T5E09qa52xhjPBnydCMdeAiBCY9SB8TXa+bFrW8id89RVof70pJH+aPl+x/REPqOj1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz63hCRA9TVsSAnZWagAAk00QAKRocGoApTWrCY1e7fXd\nn+DzCV2wG23Dxbqz85NfS5z6baPBN80GOqPZg71PbSP10h9tkDTdBDzeqmY4\ngWUOy7k7Z2ubticLu77y+tq7nKl02uPM3knh9o4SR5XDjXgeWr+KoA1TQlVB\nSiyOS5lcp22w0f5NGnP2zpeB0XU5fXiCIFUMedPfsEEl4Dj30dHeU+s6E9zA\na0u26nGXajIzS7GBsmiCij78arUds5EdirSzXY1WFxshb+LUdNm0rAOPnbIm\n+Sir7KO8ZLVqKSqp9j2CUXWreD9V7iEwY13od5npo8gow+V5qiOISJsY+xAm\nBGSqt6qJzDWvcQ7GioMJIitCSs7T4wfJqBwB5GLxvEgmzzQBYTGAEkLFsW5O\ni3k5H9PRthqCrln2TDU9WrbdAfTWYs+3HvgLu80trXuJJRdYWz8wK3uNEfU3\ncoeFZIAbEuC/GVO7tfDhfLeuMZw2V0h9gcNt6iqBRcD6Rv361PP6kiyUFIKa\nOn+SZexr9xe5XnliPHwTq5pY2+cE5TKDMpLV6VAeSj9dDY6/cUJHpiUgbBXS\n5k2bqD1YUztueLTDC2kUS7uFHzTaN8/JQunkJ+b1A1QVZWafskY9iG5v90M4\n7HvXAIjgyjsfabsq07Jxb2i+AEieZRKfPRXZSQQNbvO19QRVtxuBVHpHW5Wa\nCGZp\r\n=of/g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd88d40c2.0","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/shape":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/density":"9.0.0-canary.fd88d40c2.0","@material/checkbox":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/elevation":"9.0.0-canary.fd88d40c2.0","@material/typography":"9.0.0-canary.fd88d40c2.0","@material/touch-target":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.fd88d40c2.0_1607445985235_0.8541934786564727","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/chips","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bc402c711db389537a3c368d284ca8f23fb438d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.ba9e3109c.0.tgz","fileCount":83,"integrity":"sha512-P+90D35EhDUgRf1bf67/tJU+VI51ubWe0vgISGUSdHLm8AT1fy/GUbLoseoOAMrmTgOloP8csoCaWDuEE3nl1g==","signatures":[{"sig":"MEYCIQDbpuVABnpO7tcjcmyMN5qkyv6RejuNy+Tp5ax23OTPPwIhALjwrHBRpkJibV8fVbDgaus4ePH2jJgRfBVNvzLdtQIS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz862CRA9TVsSAnZWagAAWu4P/j0Cz/hQ5aqipsIWRT4n\n676sbaJ40Qpi7DGIfcbYpWzJCDSMit/LMYuq6zJGmAEwZ9JyO/5CfVVSndXv\nhDBu+Gq7wYQh2t9eH//HDg4m2Azr8njspg/v3DThO7YJWmdxnaLJAnSHjxnu\nwt2BkxpjliO1aT2T8KZnKPUQvka1TSNpBhucETPOKhX9mvNXtQH614pDA0ht\n87sMKISZWOeVjq0gp6p2s/y/MMMXHiH+SqV4nGPzzTjwZhkjF/PXInE5ZVev\nA65De0R8qeUamGoGyYg0Wafpj25zlhnpgLcjDTgkqOfw8bOZxY/uVsPpPIGr\nFHPy3FJdxCJLQ62VdVi/pVTqpssLyh0RjFsPepgjiqWs0wBiazV/JMO1rhfk\nJRP7cRAIaZ+li5Qmlg0W6cduEjRYbAXKpkxvDLzIofdBmX0G0RsQPMQGoG4z\nYpfWzhP8py4mKQ0nVa0WnGts7XD41cHpkrzaQvppjicJIsfQtGiv/pzLhZIx\neCeApkhrg+Hiw1wi8Z0j+Ck0n8Y9t4shzMAUev+KwMtWondR3+7YzWAVZiyh\niAz1Af6Cg55M0Ef7RTuVOyXhIpB+/AK6xH8Upb30Yle0A9JwbDDzE5PDdiO1\nLrcJXl22bBq7Tb7SH9Tp+7gQ67YOEs7M5XwdHlSfkF1Mvf4xUdtnTQpjdjHv\nbO6d\r\n=xajW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ba9e3109c.0","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/shape":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/density":"9.0.0-canary.ba9e3109c.0","@material/checkbox":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/elevation":"9.0.0-canary.ba9e3109c.0","@material/typography":"9.0.0-canary.ba9e3109c.0","@material/touch-target":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.ba9e3109c.0_1607454389354_0.5616052507800067","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/chips","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60217f9e8856ad499a842b32cfb3860c1ebe2a02","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.1085c3b2d.0.tgz","fileCount":83,"integrity":"sha512-ilmBKg6qyxnuEHW+ndzZwDhdBEoR3HHTCQfkdtmo42fS/sQfWqHQnZSbYfmuJl8DcH8NPXjphpxoX8IPLEF+1g==","signatures":[{"sig":"MEYCIQDueZGVIsrSB6Lf0VHiG7N1DBAzfPcJtKWFYP6ikF8FtQIhAPx5Z1ourp4z8XetvSgQXKALwbCKZ9botELB6w2yRZ3A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFvCRA9TVsSAnZWagAA5AEP/1AWarGoHC6WTMrnsTOi\n66jF0/UJhKP88x+NTz6BaNv77KpTFumkJjTlmFv/MxiqcZ4gFY2gUjiGFh9v\nxasssRIrzn7YJxenK+LfeHaP7kAaIn9w8PzdkDfdjQnnnsq/RcSzD47rt7+m\nVVobXa8CMerE6bFcNhSMyuxGDIyxNRct73mp0zYXgsDxFdcyMf0MBU+Ut0GY\nkMbB87Fxo1y41R3XEHxXbSEwomA1xvO1hZ9e1+2he2/i4nTMt+b7L9/lk8SF\no0AD7xSAg/JjRkb/FJt1rB8WDlTT+ePP35QLgcVnmSyYbN6YrW28iPE0p1Cg\n8eLs4Zl3YtXAsGlPkyA0GYsqSCPwM/aAr+0GnsG4M6HN0IUQMlngTLCfVVo/\nbB4kRY06E+AIVQEyY4h7JZmNY3VRPIBUDH0B4ZzGaUqnXocKti6DManu11G2\nOhpaXFILwpeX1VYqc1nJliALI9gG7rcjWkmz4Zu1IyxFjT9G8ngB42FO9Px4\nxHJUVr3za1F48L+0T5rGujaf56ah1K/g8Q0iTUbBmZgnRJcozXbhk8LGJeAt\n20MK6A3v7ECzFLPBgkMltk2ep2+bFP5Ue5jijAeKOk7hLG8Aej7ha08ypJ8G\ngxysnmSiJb1B4Prz0wLo3pfQqxUQr9HPZEBZxTwkyCB3OabfrOR+5BnCm+J0\n9WL4\r\n=dv0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1085c3b2d.0","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/shape":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/density":"9.0.0-canary.1085c3b2d.0","@material/checkbox":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/elevation":"9.0.0-canary.1085c3b2d.0","@material/typography":"9.0.0-canary.1085c3b2d.0","@material/touch-target":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.1085c3b2d.0_1607541103283_0.09134011749853199","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/chips","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f14ff0b2761e558fbc8df693300548735231cf35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.c5dda809d.0.tgz","fileCount":83,"integrity":"sha512-JdYdOIB9CO6BNkjR8vpKErSDsZzkVCavrhO6S8C+8WKuJ/wx0Ojek3bO9elyldpZgk8jvBulKZpzSkVLd9UYCg==","signatures":[{"sig":"MEYCIQCtRd9eTA5ktZb53+WMDTCBXwn/+yAFXdOHKb7myosi2wIhAMJ4bkh6KHmgv6WD3d6SaNP7PkY+kM5HuNFDjj0L57S3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TiXCRA9TVsSAnZWagAAuPAP/Rubct3P6x6bbBDNDx9F\nFajT16fWIjvrpTdEafzELKVvA/I1XRm31SM5cHd8wTQl9YG+Yl0wVw/J+8jv\nmvV6YjstazJ9tdx2QOB/UiY5/quofjkfcWc7Igpgeah7MA5MlLaQPkoRmmtc\nbKbZ15vZJfXQXfSf5DXHCL2Z9nAis+mOk+YCTwGdjc6xYeF9cjJBCYnmUqMq\n0X9cLfV3A9xrSgAOSfX0Ww6fkSArX/w85HeaVQhe2rr3cdlwyXKLKf3K2DmV\nsZr4u8j9ZsBoSTNCGM/20L23mPTKagfKbm/jvJ9yljr93S2QEiM5A07NWooH\nxfwA5IVs0kQ5zvTZpph0FTmDsf09ZBg0zmDhNq90BKvgPT9adwVBs2IGi4Gp\ndC3ly+G3CsrjJT8Arc0fyhcqxtTLP16SposzNIQOG+5HjGfQ5VKsfFGg1OQo\naj0HgHMu21RjB6EJI6qNeK7VJdTxagBmLI9lftb70cJcdyBs5vRo+v9T5RyT\nQ94kV6mZUpX8NgAAec9m66neYAdWV4SiHE/EQ12iZPDzMLxwcwNqQytt0/13\nQOVISi/Ow0oG7zCCZVELaElWLsPhHWg/lXr+5kAMP18JOR498LsyGXK/NbSX\nD7zba6lGA+K+W0uoAWQz0CxlwMFMCuq4QV/qu19Xohvp7MLdwy9HHjN0Az/1\nxLuR\r\n=vVnh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c5dda809d.0","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/shape":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/density":"9.0.0-canary.c5dda809d.0","@material/checkbox":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/elevation":"9.0.0-canary.c5dda809d.0","@material/typography":"9.0.0-canary.c5dda809d.0","@material/touch-target":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.c5dda809d.0_1607547030773_0.5636935459960599","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/chips","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5bb11de5c4860e2ade26954f4cd3d293f60432d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":83,"integrity":"sha512-BBeSpzkLI2bx8ZjjVchVX6hr0pTgmYZbqmMEsmZA9Z006tdoAZO2ZtndRMaxwfAaT68vhwQ/mYg/yLfpdaKlpQ==","signatures":[{"sig":"MEYCIQDLN4zQqWrq4M+HMTyjtqGA7edf84sjB3u2oCNG4qcOpgIhAKMpIycfSJXL8qnIpHqpv9RxC39+jchagMnk1CJNu50G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TztCRA9TVsSAnZWagAAi1EP/3UVbz/C3QsZ96VU3GBR\no3z0c97m8qYkXIV3NVHMsRmv8zjQigkehZTyn/53fkdLK7nPFjHwvZvYBvIA\n6CAM/VOrTwUaKz3tiSgbr+gB8ECKh8wUNdXroJsYod7+MJwKmyO6SLxH3jPK\nt12JFqfFM7oxF56BQyKBMw7egBKRoCgcE+u8TzzCRz9DGkNYalU5qd/JrGwi\n017fyLsdXY31/hWzC1JGXaad91TWkEJrftmwXamXSxfZvv1oOQfk9mwVafBn\nEdm8o89Jj7M/mNdc5GoI4Nfhijs5uRABXQwpmb3VevjWZyIJ9GWjdqM00ZW1\ndRqiKzi8ucxUM0I2NYIQoKoRQgEw76wdm6NiLIC3vXjzv9Jy4uDmjLehlG3x\nladPB/AmKJVCAWqWR9PQKLwQ9RgEyXXIw5U0Ol8HoWS6Y6Cf586zFKz/rdhH\nO9qTdOc61VIFQb/E0fz83VS93Lpicdc343wSxZrmMGxI6MKVhlhYR1UEX1n+\ntMHbWdPS73ziXlCMxJMKiBWcI0kmhZ9JHKrNZQ/pHTp5WCztHID2o+oTIflS\nTgC2m1tk1uIIdALv0uxrkIuo9+vGpW1HS+99qToaqoxFCyTUsawLUBaXdYeZ\nVOETHJbq0Q9Dlp2yXtBhijZpd0abDoZ0mK1JYNG+F6ug28sp+aMaZz/EJPNA\npDTZ\r\n=i6lq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/shape":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/density":"9.0.0-canary.f5f1bd86a.0","@material/checkbox":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"9.0.0-canary.f5f1bd86a.0","@material/typography":"9.0.0-canary.f5f1bd86a.0","@material/touch-target":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.f5f1bd86a.0_1607548141421_0.355992455286104","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/chips","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.00f38200f.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca341b0f2f51fb73746c1dabbaa226877dca429e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.00f38200f.0.tgz","fileCount":83,"integrity":"sha512-oAm+928iPldOoYfTQwjDAnPmI8bxhoQHl3TTAWLXrFTkYlLPBJTZB/LqqeqKeB7SFpU8c+ZWoTuEM4zZnlMiSA==","signatures":[{"sig":"MEYCIQCM56qrhExHnfjBYfUbLM6YnvpdOXU7EKpLuyA/o1I9JwIhAMIGUkh90Zsl7RvTZTTtyvqXZBwHobKqBMrxTa1ZAs4Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05RQCRA9TVsSAnZWagAAuvgP/01bLud1jiwyK5OQCEem\n48gJIz3zzQytBtKE5emLUZDJjXhVtX6/ueZiXjL1GSsPG1d86KKW5snFPzVZ\nV3sxC2RkkePVsOU2IarU5yeDjzY3/GJo36TMtk9kb2Qq6pPUeXaOgEMDvhZU\nu8MsYyOjZm8wkwpPAFQE6nOUtLrRGl2dtcYle7D8fnWQoSXcayoFIFoZU6XJ\nLCYr5Dh48c8EQq8D9MFLYfzBuxhQB1qt0885mOQ6J27ovrBIQL7MskGityCb\nzgjsmfWj3Mww9mrbqUgrOFW+WQ+NnEU0kdO+KhCCLQOzrGIFpReJ+f7uwamk\n9hII6wq1GdkBJftPl8WTODyb81l22PIgAKsUzBVZZRXo+ja0JrBJkhBgcIux\nJMmzJ8ESY3Ah+YFBro9X4lMmdFt38OKiQZZ6x7WiB7g86CKaSelYFyXbMVEv\nmFuthqL/k6Vw9HTqjjx3PjjKbOv3jY/Gc9b+lJinmghnp8C0qJ8jK1Nylz+W\nu+ijUSEN7W6tzHdGgQ5UcVky4Xxeu236v5ysEY4CzdUexwuPo5/lcn7Q3Ice\nuOKYy+RVzIHsWk8aZLQ4zaF/QnjXgrBdnAUqi0DpCEaTz8ibyH7vrzd11tiO\nrtbplBRKSZDIyW8wFVWaFS9GyYs1Ht9ShygQsWDKqqUaV97A1rDjwZ4Y0QYN\n+8na\r\n=T4ze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.00f38200f.0","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/shape":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/density":"9.0.0-canary.00f38200f.0","@material/checkbox":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/elevation":"9.0.0-canary.00f38200f.0","@material/typography":"9.0.0-canary.00f38200f.0","@material/touch-target":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.00f38200f.0_1607701584076_0.7743040769577123","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/chips","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23ec5d1b5e1497b42d62b8689c28afc07f6d0796","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.ac41a5729.0.tgz","fileCount":83,"integrity":"sha512-LZEstRrzAIfDHl9Igick7X6LeW7ju6aNHfLGZWEmlCjEhXXR3aDNDnJzoDeM8njA7VNpGS6XE6I4hhr/vHCleA==","signatures":[{"sig":"MEYCIQCg345jd/q4FLz22Khuj5vlnH0ge6twpaQL8mtYBW5HJQIhALgQKzTSdNL3zZmIUtUSU0UkUpcN+N3fphEfyxanpJ22","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf055RCRA9TVsSAnZWagAAUkwP/jdyb5o2jIAaEMwTmrP3\n2844sznGzmEdJEPZwEVjLSpWwn09t9vhC1RXkTYwQWcXN1Ij5II3OvHuKoat\nJ+yN5U7h6K8ZtphZIe04n1xCAg05GOwlzBlw/hwzWKoc2HTLQ6uJ7eiJk8b8\n8Vz+Nbqq6sGkLEvpkuJ5mIWXLszCAddqxC2e09hoGdpKhn0od6PpVQISc4qx\nUm/0KjlY8LlGu6UvwdkGs9bTBEjoedW/FGBtwrld380LMADd4IZkQvXtrKgn\nqwS8YYH8v+QiuyYkDKYmuYoBdtXAait2c32QqE9JTJGt8eTu0tXsyn6X8zol\n0LxX0h8Y/oNJPulm7wsS4tJqpUeYtAzoozfhE5embpkghMhyfTfAw9yvenrU\nGjDSxHxrlk3Rr1tGaIpS23jUZ5C5EgweYBTe2BSqM1V3258N0OZtZgoW2dw4\nN1w5HB0rpyB+s/1Zzz9PgHbv9P4iGSfFQlW0EgbrH1gziZZIWaw1T9paz09h\n7tOR9ZC3h31Ywrm+4ec75GtkHKoWLNnh5iEMjF5C3I1FM3VLIbEkFsvbSRBO\nX25+ZQyE99T2rNhH2pqzLA8XXUl7I4mDs16GgXhsKDxBThHsz1NmNF9KImxq\nwx5yZ5nzMYdK1/Ah65lQsERVWV6U/NhkdQyG7blvDCDFmYvHYHwjS7IFsfZ7\n4kZf\r\n=8U3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ac41a5729.0","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/shape":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/density":"9.0.0-canary.ac41a5729.0","@material/checkbox":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/elevation":"9.0.0-canary.ac41a5729.0","@material/typography":"9.0.0-canary.ac41a5729.0","@material/touch-target":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.ac41a5729.0_1607704144579_0.4524419577228076","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/chips","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"377c1b427b0edece15b5932ea033d72a8232b0c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":83,"integrity":"sha512-5SDK02d/46Ho4rOGajdigLL9SdNpVhzeoEMRNBwm+BjZ35Z8Cnhe2+Z9lkd9OhrWhRnM80FSCLVoQy/yJrZX1A==","signatures":[{"sig":"MEUCIQCsu9ZPj7ffTyX9JpPGauO9l8eh3ONeYoiwEjJL69uK+AIgdxpdDoy/KqA/WQpgu6J1eJPUWdwAyTUaRgCQOoPtVbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06cDCRA9TVsSAnZWagAAFLoP/jdu27akjMO33hzmCJIB\njFVuee1G9jOdSLKx2weDHFj+KYzi8EXRIjwtczrT4mi9F1nFcsYQ/guWNngd\nIvTLMkv4hkqkp2KNSXLl1ErvIyU7qK/Y4hnK+3k7dAEEjR3ZTFopcsuGFftq\nY/C9kL3P7F50iY1JKAw9eh+sNydrn+z5PZTIRj1UkhpDoL5RS1ALWg5RW/dG\nakhbbCwl1zxi6TtP26oAzUu5Ayr6yCY3R5rO+9JxuJptflX25+cpc2YZcmqz\nj3h5kNH1WXCTgFTmAQEdHRnMugwJdUYWYkX+wnt3VDPwA9woUMwtaQEZIb5l\n2bjli+jvr0wpsklXmJSycdp8hrhoDseuce/dugGTRI5FwLHDpPlvxXFsRCKM\nyYbIqX7G2qzObX16F42hRFFHtWpQiUOwMmDC0rcGo4am7i+D70jBWKQspB/s\n8+XkxoJf9jc2jAmrAnc29l6f/KjwScSvqu0cfKQ4JujWoHmfD1RolZdXQrZx\nOjhbFwej/g/CA8yUbmkotIMPsc/hEwpeWdHZNRWnCDRZJGZlQFVGcDaytOHs\n8f4zuSHWIeYECnFLFG8XTI1i7CTP9rqsp1t68J1tbVwg4IZIryxx+0n0icDi\nmhWo8sgRuIhrIHICNYurR3sAkfXqOdnh5yk0zSpSZaJUPEb9YUwxMmvxZ1MA\nCmz0\r\n=Y6NW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/shape":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/density":"9.0.0-canary.7fe0e4f05.0","@material/checkbox":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"9.0.0-canary.7fe0e4f05.0","@material/typography":"9.0.0-canary.7fe0e4f05.0","@material/touch-target":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.7fe0e4f05.0_1607706370641_0.08743211209290824","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/chips","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.9244508bd.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14669e78d6e0b45f5ee96209472cffc7843f2436","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.9244508bd.0.tgz","fileCount":83,"integrity":"sha512-HiljLmhV7d4x0qEi4LpUHVDzCzuGhmcJ02YlEPDuTRuuBz/v3TwLNcO680lKdIOWmdOfODjXs9Tj883bzqJePg==","signatures":[{"sig":"MEYCIQCJr9kPSoTAObgOCPw9k27jVZzrlMRQQ1OfgyuWIbiQeQIhALOISVFrHnr3ZHZrJPEtf4LfdeSdNGIu1+M4kPop8s8W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08OQCRA9TVsSAnZWagAAt9EP/0/RihaHcxERmTYZtR/p\nZbseh8jnhMoDeP80rsf4AFGYheyvWt9kXfMGeqE0c6breKemnHCuq5x5K/j9\nF0hb8G0xAJlTborOmZ3hPqncbvLebvOoHZiy3bO3fV9KIiY51Fmj3OZGDkFq\ncb4/Sy93Kjt7j1D34KGDhUlJ+dJrZ04dYKfqH6SVeHFYVVYRDQpSFDbOeE+n\nNQ0VoMyQ/TwBURKVcDTXnzhdyuPv7tFmdO2/EhI6Ee8OpJp4X/56PoQBOuty\nOnJCCFKg88zE+XZPkyRw7T/RyUDltLsbmBzdvCbfY37QApFFucsffRPs7Kwr\nQp/fROMT5DszIqLCdC3GeBwzPVvIfouXWT2ZxQ0I1DXkidyiHlOHP4owMLM5\n8SsE8WsTCGBUTwI27e04HK23SaMIiToGomJSlk+BelUZ2Y5iZyrDKoVPLb8/\nw9ef90Nnxbu2Nw5u1BGu20NG5fGVM2Gur2TEUtgolkaVOcRq6qGDy2XRcTeI\nfao6UAdnrl8TcJL/Y/3N8tjePNKLK3PLTLHK8YzhkffP5jmJ8evJPRDntcJ9\nBwaqENfZgmFi+xt1sas7MqAUOSYjacrEwMGUA1ZPuByTpfs2Y7syqY70F7I9\nXu6xf6CzrBWSfU/5y51I+EKQMGx1MoAPvLnF0qoCF38k0pTjV6B6YLdWJCla\n0iw8\r\n=pGC7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9244508bd.0","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/shape":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/density":"9.0.0-canary.9244508bd.0","@material/checkbox":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/elevation":"9.0.0-canary.9244508bd.0","@material/typography":"9.0.0-canary.9244508bd.0","@material/touch-target":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.9244508bd.0_1607713680252_0.09582918811939156","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/chips","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c16e3e82866e8e84b29ba0870caa9fb008703df9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.384a8eeb1.0.tgz","fileCount":83,"integrity":"sha512-wSEaqAE7F+py2Lm3j2asZK8I/b+tWPucvyNnR+aETO5Vc/0eaztlLQwwnYzyibQXzAe609STrZixG+xkndC7Ag==","signatures":[{"sig":"MEUCIAzzuvq2ZVBJZzwGAKfE8FL9JxVELWk7BNThBA0p/yVJAiEAiNIgj1JoEyUGx/R1FtVE+W3fHVMEtBLFzV4d6xAB2ec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j28CRA9TVsSAnZWagAAEQEP/0XHp/fEHz5Ni2teFYZ/\n3VngHitpoZlDgm8tGwjD+hYBYgEiVxb8jo7DYT1D2w5t8URYo4E25hBVxQXX\nejY0ss35iBt2W9RATb7N1YzsCpFoOaHBB/TqaIX87yFHvr8UUZTdEyoMsJMw\n6B6zF8JfRD3M03aJiH++zan6p4av3gwrpB9jdjHGk1/NANoX+hbaEHBnNgR8\n+REmgFDBoT4jwe/QGcZn33iz8L4sR2Ga3VpDaxVJaWU6N8nZKJR9qr5hIVeX\nuDfi5uAVHD3gnzreL3rYTgEEYEVhCQC8/N6UKewAsoBGpKQ2P9Q2hucYINbG\n8oomhfd/UyjbuLuto1xqk7jbpDm52pDFny8SzA6N89OwBnARibLdY1OTrd0j\nfmy47oAATRfr8mxK0UULtxU1PtSDccBMTlOU4evSMj2v1lTIhK44Zl8+WHJ5\nDwtne7Fi57MbczUSzc/WmTtVfkYEGX9UqHOfQUIc0wmrMFDkrBqRbdJ6Sp/T\nPqeJiE0GQfXiSCWCPmwidS8Lhio+K94olPUb+Di/JNJ7jky4SX85e2aQkMva\ny9Nfz/MZl2zxJAVcX2EPVJnXj7t88/Sa5o0jV5TxQwMzxhwTAxjZk95btgwu\nqLuJ/T2kKeHJLmY2baPvj6PYIvEXmKPniTnXchKYFF3hmnw9Jb6lHQiOiNGD\nZbSC\r\n=NyK2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.384a8eeb1.0","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/shape":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/density":"9.0.0-canary.384a8eeb1.0","@material/checkbox":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/elevation":"9.0.0-canary.384a8eeb1.0","@material/typography":"9.0.0-canary.384a8eeb1.0","@material/touch-target":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.384a8eeb1.0_1608138172362_0.7398171560832738","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/chips","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4bda2a2c6f212d25ee0fee4dd4426d429c8f9ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":83,"integrity":"sha512-Nq81uT++PTWcieRAIq4Qt+zdbYAIJN0udan4XtmOrtM/ikPd+awXR/X2mwJ2OI5X5ALhN7YyYVmvAiUjVTI2TA==","signatures":[{"sig":"MEYCIQCHg2yqRVxyrzeGnKTFmS9QQUgL46qJe6wercJW+VKZrwIhAJn+3UX4QmDMNLS+mn+08JsDiVzUZxaq3T2GnVdB4tYz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lHCCRA9TVsSAnZWagAASLMP/0ihVGpXYRR/zppbSrwy\n9MAWSpG0/wPn5wBBCSVRP3HQ1G9cL/H+njo6t0JkmWeOz40i9oSkxqFvSGTd\nFJsuLRLdN4vhraf5q93jv4ruo3nyyN78VqVjvseUEhJVcY9cXekVmdcRCaCU\nvjVNfd1IxKdlnTlHcaCmvy0ImpDBCfgR4CcZqi+1rc3qCaPNRxgIzucWnzeP\n6t83LU0kUQETCe5DoTvJklPJMAQUXlZZMfTpNUkaAoaOxjnsx5pqcFXe/MM4\nZ95Z4h2Rw3g0ZDjk7MQ9KFe3B7+EP+VfxwPPkY6oIpudswL0TJTGlqzLFzUR\nVF7205NN0L1egppm4S1nwojTK1xe5CbxnJKDX/XlYCxVrUn5ms0PUEMtO7XK\nsI555xWdwpH2s+avycjHTZ0cFYVpuJYPleaqNxTEzUy1Xu6L+GMkOjf1uOH/\nvredNsoIbJETdABIBMqQWiOvUYZ+IB2NxoNJIvwqul3nwmVOzfkFpfgPyNV5\nBNTKdmE7LzvNeS/b+wFddz79cP9FXobp4hhG9QkR0CqALinnLeMXtBN1ipZO\ni2g5HQaXY809pn6Gch0nbTcaJPQ+5yz6rKk1jzTBvCQzWBpQSuY/1ZAJS8oh\nhhNvERGb5LS8RXNkOQimJlvkdYAMIU9Qn6fc48PuspIFYUi06Dllgd7TkGF1\n2cIl\r\n=YBXM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/shape":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/density":"9.0.0-canary.eabf9d5c2.0","@material/checkbox":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"9.0.0-canary.eabf9d5c2.0","@material/typography":"9.0.0-canary.eabf9d5c2.0","@material/touch-target":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.eabf9d5c2.0_1608143297894_0.13576200721737486","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/chips","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cabab6fc8f430f470b3520153aa488e2932badf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.30fdfd06e.0.tgz","fileCount":83,"integrity":"sha512-e3abXmZVpZMTpVy879rxv2gKy5kBGFqa6ls14JxahM0A1Fp8syT+koxY9FI5smSar9I5XtGaHi6uufj84yas3g==","signatures":[{"sig":"MEUCICuXP/rsKkbmB8ATgGNz1fGBToFe4qmreZvXIFPf2CO9AiEAv8CD9iCX3vVu8e4hN3MAwEoiU51uQsLs/4fBY/pRW7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lswCRA9TVsSAnZWagAAHkMQAIaF1bKExzx8dgX1PuUq\nkyKeDtJK4LyP8hBiKUHi4feirQm/VE+e9IEsts6M9TvpJ8EeXVXI2egRxGMs\nOYQoxY2BkrAR4NEdIIhM0hQR3nH3VMO6FgaqnrKXOAPnpmnsJgSe9aDgEW85\nga9zmf5e5Y4UwevbzyJbhAQ0FE4zOB7VQC8v3NHbEknp+l/jA+Edu1wYsEEi\nC4YrNj3TCYSdRq5WF3G8GoBipqBZlB9YdBBeNUPww/kq2l4XpGOWVrAbNebg\n+XZclUo91K43StTC0Th2tLFJJcTrBOZFGWob3M0elWeUs+E2Yq3Nj+F/Sl8r\nQBCs6t4psHGfNiJbY7a0R7RE2AF4nEa0v5uCvB7Sr1f1zRJbcXUSlmAweZDe\n7gN9z0cv0O/kt+9PPxTECmGq7sFAcAtY7Le3MLlNR4xg9qbVurssk6yv4OYc\neES0iwE8edIzQMoPazxC4rafdc877WZdGGyCmuLMNcZlWBSoEInW5DVByC1z\nsQboKhRrTucBrLKU8WC+0OGgpyC4+Ab2Me0d9oEkULARf+9BMQMx/UUW3wX+\nyV8vrLliY7fH/DEM9CGm1O6LV+acVyfRla6J4z5UKt2v30VzaC0XxQ8zHdMF\nCLsmV/QAKEdOFoIb7h8F1I+AHb8mvhDi3360AFRKhTMTZ84CZVJghfFN2D8C\n5j4S\r\n=sgOg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30fdfd06e.0","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/shape":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/density":"9.0.0-canary.30fdfd06e.0","@material/checkbox":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/elevation":"9.0.0-canary.30fdfd06e.0","@material/typography":"9.0.0-canary.30fdfd06e.0","@material/touch-target":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.30fdfd06e.0_1608145712202_0.013140264442677463","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/chips","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a938719bc55de13fde5807c409989476441e92b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.9590a8f90.0.tgz","fileCount":83,"integrity":"sha512-kNOfu0kwQ8JaSEhhjd1fR2um2pvniuSa+zMDxU4JjJJuBb+IU7XUSBa7aNysaYIu/h1WoXth2S13d3QG4m29pg==","signatures":[{"sig":"MEYCIQClZFpDeMNr2iD3G8XyB7+E8SM2UqgGtRAM94+lmQ63IAIhANMj9FpnElUQ6fHlEXxu3RUuU5s1X761Ni82UQERbSn8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jAMCRA9TVsSAnZWagAApyAP/jjTzQGuVWkWychbRwtT\nEgtczFc2d/WYoU+eHLw3qjJTEuTzCeqi0R0JtpsMPKDqMuhjqD2UXmvS7mTh\nQ1laTjnc7foOVixdAiY1vcEHcRIfD4w2YWPhsC5X2sapRXROFLTNJHkfs2zK\n0z/tsOiD1cPR7Ul+78am6F2r4XgaqxvTyIkmllTKH/81J0/Q88I5Whno1VSI\nCl/Ip4gmnO9cwrfi8t8rEASJFf29T6WoUbt771ofWOivxHoXaAeTtu9JZs2U\n2HRJELS94Hu/WpEnNMSG6z16sr2HNg7AFN8Uq8/MCWDG3Ti81Duja58/d0qc\nWGTwNRUbnzjyO+Np5KTTqR5hRr/U7Z8yZxfvGwUHEF0/Gvgb1dGOFbKQVYD3\npnUQmx2BSG0G7nA1l06bWYhGapVKgO6TT4oxnseMxNYJ2aNX1RxQrQGvsifb\nPHATYlNIl9cePIk2HKrvZpUx3nNivcKjGtBEiREj45ZLzIS5Oxb6Jj/3oNum\nejSue2dPaL/5M7SF90MPTSuMC0LeiEA1JLlv2XnN3GIarK9/GnCyghlQ88tZ\nXI4RwqdX95Y7UHxWk5/fcBAmXegtlF82teCwmZYZ7stDDXv17TryC1DwdxNh\nRrBdMtTT+Sd2TXHcMCjUcN5B8apJBhLgZTcg9yx2pt+VaSTahm1lPVwk7sv3\nJ5Y7\r\n=DX3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9590a8f90.0","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/shape":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/density":"9.0.0-canary.9590a8f90.0","@material/checkbox":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/elevation":"9.0.0-canary.9590a8f90.0","@material/typography":"9.0.0-canary.9590a8f90.0","@material/touch-target":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.9590a8f90.0_1608658956034_0.4262332318036164","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/chips","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c2a0e3eab681cb0e17b7276b15de8ed88ecb56d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":83,"integrity":"sha512-R1QQhlrdR0aiap3ZX7zBinDt3eURX3m3sj1Su8/g5Cja8Hpuv2gdEjw8eiBTk+fTPDL4/TqdvcGLvzGfI0yOnA==","signatures":[{"sig":"MEUCIQD+STF2AKdlH5fIxeLOEwxjgkCW1X2V8mdnhhe8pcZmLQIgCmtyFN66kJFdgwR+H7rzGYBxb4PfM4WaWOQwsg9iZvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nvoCRA9TVsSAnZWagAAmH0P/jboGq7KQc4sjdVjZr/h\n07DDBmr6Wn8jGkU+fPkvrrGKnbaha0ri9vMmDtfWqaoaVD/skVIrnCllLn+O\nzDlfyYbHiQR+k19BVq7c2emOhWkDATcGu9LCli/+p6+2DzisPhhS23H2wEa5\nzGtGPaktTcm78o01EdeTUUJrXDukjcGZVf8JIzviH4A+EB5oY9AfL/GX+4gv\nU6CXSgwPNqiwkzJPWnz06RCTWqt47EbF8Y7VeCnVPZjawGhD3AkvuYeuRkUd\n1ngoKTwTtvG2fIg17/dJynG50i3yJLsn8RigvSYDlQJYpv3viax9Jic6unTt\nYjbRGE8cFVni7plLSCQ/9Y3UZWXOS/WsxjTBuK/0mS2xQp0Qyj+pgaUtw8Ou\nREgt/5ga6XU66vTvoMe6gvN7bmLlaAVkKMQJ7ABi/XACq54zWFarYooClzSa\nlfEIfoOVPMy23iT8rjxY5NaFJ+AP9Hg45tkrhY/h/o+4COpdRgUV9N5c2OG8\nTe+rJJdBQzu1gQU0Ub4iJGTKBbv9g46yJASuu1m6BP54HGJyKmtXF46gqzmi\ncPNn5zzRBL+Z7UZLz4o7Or5QMmPI/DgxCy/A5tweDvp92PRjDVZj69uVSGGx\nqSI3OLmc27P7Dv3s/cicWbDxb76/XqzEsw2w+wY/pOHNkjYE51VWp0OqOjx1\ntEeH\r\n=l8sr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/shape":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/density":"9.0.0-canary.f89d8b8f2.0","@material/checkbox":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"9.0.0-canary.f89d8b8f2.0","@material/typography":"9.0.0-canary.f89d8b8f2.0","@material/touch-target":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.f89d8b8f2.0_1608678376060_0.7833007395005509","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/chips","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"858bc3c2155b42cee5349be20ded0a5a099f203f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.fb194dd35.0.tgz","fileCount":83,"integrity":"sha512-WPx/IbFYxEHbFsknc/e0tcBdqHZP4O2p+aGj8J+qIAVPxFsf+ZN3i4kBY/S9tSCl66pG6q30ZZOmX+WmPe77aA==","signatures":[{"sig":"MEUCIBJ9GdeIw6iqKx6yJ9/mA+IKcl8YL2hB6CyNqDp0IKxLAiEAr2Ppd8GcfKI9rKLZo+fn+fHBEkNH9LvQCjNycMlMBk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQsCRA9TVsSAnZWagAA3MkQAJQOGSEw8jg5RmmG0qK1\ntlsjaKSL0/k1WOpIH6w/eSP9YAcKc7Nh6ee1txWq1XS3yU5Z53DSn+skM7yT\n1D/pyYWhhHoO0n+0l5TDUXVcU5ee6Fb1RzFvbU0q7Jz0jJghEktYQXcMTmLx\nMWUwzrXW8o+Ut+VeuhAvbLgGo+8ecQl6tj9/MAgTNX97HTuYf3o40LfcLnEs\nGv5bjdYUYTCTlC1+m0zsu7hnkQ2AsskBGFzeBQ1w2eqgub/ZqRQ6WnDOVTNU\n0PlZdwQZWddJSD9NRm8rjM4f929OZa7+3AcgtJUsPCFsjXv9Kvm85spJeqMv\nqhtiVl70dPdKwlxeNEzjGAhdxqs5Fsbq18juCs2PjizfFvEJ//LLOlUbby6w\nr3QfFhT9N6NFdj8zSduQz2VZGvtFMCychhJqDrgN0IVGfCUeSQpMPtKYmhCn\nJU/Bec8akKcmzF+3TC0NJWckBE12B/yYpJT9l99xQdqDn2lhvwUKQKX978um\nSloq1MBRQDPPJ12ivsFn5o7F/+uaIRHYD1eMF4aLA6pZ2neXEEx4d5CL4cbk\nezW27RlspuMPJ/AuP1W8eiBNf4hWsB/o2WqlT97xcOQRpw+sk1WM1jOgS3oN\nhfzZxyt4r2W2GrEj5lgcVHuinJPJVHG24NTT3mZqybcJtqF1cALH7vaAoG0d\njy3e\r\n=ru7k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fb194dd35.0","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/shape":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/density":"9.0.0-canary.fb194dd35.0","@material/checkbox":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/elevation":"9.0.0-canary.fb194dd35.0","@material/typography":"9.0.0-canary.fb194dd35.0","@material/touch-target":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.fb194dd35.0_1609188395643_0.9118159924547953","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/chips","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.64f36e287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be1d384a87d3d8869062d7e56fb34cdf5ba797dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.64f36e287.0.tgz","fileCount":83,"integrity":"sha512-Y0oFt2dLIpbApqqA+JV9n/LQKPOCf32uJX/4+HyxH8VN0k96tk603CITjpHbu79bQ2WY8SWNRMC+tq+SLRUo0A==","signatures":[{"sig":"MEUCIHJYUackHLPjL5k8bn/BZk2t62AQVe7XLIzxWzx55fC1AiEA5w34hxsWRwmZDX44uenxzzzNb8pU8EJQUQcgQ81p6Rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kmLCRA9TVsSAnZWagAAPxsQAJ5lR+J8lZ9dXq8v+tO/\n9R3iI0TzMGcdzNiMWH8/S9kqKD1vVw8RkWtmNirDwuxvfL+SBxByqWwdGI2V\ni44mFR42aPFkttw3yOfnIIPkZbwd3KKegcEXgn4zyT6knXD9Wh+k+q2VLd88\nI4VyW8DbAlFcH2PQrQpp98z0hIUbD/nuSJ9gsutTRH/V8WaeC4VqnQTLm1xT\nRTH9U020KFadBcprWet/MadSxFowjVqjxWvkTu24JJQfa/lOFS11ns11Jefp\nasM3fngzLF7EkXVre/5xbVyIBBHleHLL3JWJcaw+MWYl3WP0InuuNY99YISX\nJppdQpz1S7EqKpiLzdOK52+DPSKWogLoeGMHBQtxZJVT7fkDPzZE6K63qX1I\n2NuNAlLQ3U1oqhA4iH1P9r5jOyumPaj+Kh4LFxvr1QFv+hPizvf4lMafPI9N\nLp4l/Zi9EOBW+5rIwotxSHOYotgdtYE+7nsqmx8ioMXjkxGoziyy/8aC4ABB\nFLxYxvC+/GwEaQRW1+5J/aU7jyLMaIUoYdlAsKa7oXcGOXIGMSEOZCskK29I\nNvGt0LAdUKVhGooED15HfKkJ1arhW8TBvb98rkPOn7ZC3n67hgREuJSpHBgw\nj1zar0QBz0l/pDSYtjHxnMtNN90DujKLSD8eGtZ92J8RQx7OaWYev+25S/+3\nzRNV\r\n=F2HB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.64f36e287.0","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/shape":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/density":"9.0.0-canary.64f36e287.0","@material/checkbox":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/elevation":"9.0.0-canary.64f36e287.0","@material/typography":"9.0.0-canary.64f36e287.0","@material/touch-target":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.64f36e287.0_1609189770657_0.06660888986234115","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/chips","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16d54f4caf51a2e12d406cfe6e53b59bfd892602","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0-canary.b7bbe7022.0.tgz","fileCount":83,"integrity":"sha512-Rsw+wlrhLa78oczZ8R/tNgqO1EkMfEVeiQ3JJ5ZE048JrYdSWOeuISMISfFrYW/xyBpDZzuEHx0pf3+vypmzhg==","signatures":[{"sig":"MEUCIG84XhWFdqdSLmLRI+qc9+vVFwXbWeQOMUFLslROWNbRAiEAwwXfr4o2DntcggoiyXSnQPRBYDY0PrjS2RHg4bOocfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63oaCRA9TVsSAnZWagAAfVcP/07AqawxESxwYlGIgdyW\n1PzWnpe3FU5hE7ga3QyE3qfNMQs76MuWhefG/zV7Fp4npLCi+nNxsdaWndIN\nfBLVtPLVVdURZQiVSS1hGvkfGdf2QVOjqCupLOB2vakBGKyg5ZfGo9YBHveO\n+DSr0mLHpJgqRWHm5RYOrmbgV3gbdZ63GALREh3gGaetGk8nDYUOyBE7G84M\n5eUlEsYCdNX4aU9gOMOyDju3+8DWe02CxOf7omhuGzUYq7yD40qi3pwF1ApG\nLt9h7Pe1e8b8sQgsaD6uCe6YlHDKRiwNW5sVRTioWhgwVd9MfPOTHbC9TTHc\nvlOasHwbcvPcNLRenuJ08lgAX1OPtVF00XKfOjc95X5WE0/OsgArWKa98/g1\nrKE036i1k5/O93pg9hxgdhxIwFWc4KLndaYCjDI2qMDunc7nV300NtKjoXiC\nkERu14/IJWz5NJCw4fz5atMX+tc1raVIH8CWIG8TZ5TrGX5YbQbpWY1bwR8p\nQOai3tLKc9i1m2w0ffncGMqme6z8nQu8eZPu+uNO0ALnvLEgIqmH8gmaKCnT\nBoTUHybEj0X44ecwjZTRxa3ZfbfheR6+0U0YMhe9LSEg7ILmyGymD9Y/Agpc\nNSrfyBMw3ujOtr0jvG1t6TbHJZJOFMb+c58XM39NYTicsQAr0aN1IakGLgTO\noe2b\r\n=cDGH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b7bbe7022.0","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/shape":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/density":"9.0.0-canary.b7bbe7022.0","@material/checkbox":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/elevation":"9.0.0-canary.b7bbe7022.0","@material/typography":"9.0.0-canary.b7bbe7022.0","@material/touch-target":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0-canary.b7bbe7022.0_1609267737761_0.4941691227652456","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/chips","version":"9.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@9.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a0d8998c95db63ac852f97421aceca2647b8d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-9.0.0.tgz","fileCount":82,"integrity":"sha512-6epLeyTGuKLUuj0FTdyIwBNAecBe1LAKF+GJMqiaDGiCXaYdEPChvCW0JTp1FLno7qgA/fy2Zry2vByNVIk3Fg==","signatures":[{"sig":"MEQCIAd+QhG/69xKsOlMGwehQZliBC9pJDrfjEiBAJfPSvPmAiA0LseGsvHus2IYsDXJTmpj8rsKP7+8hlj/yAXVPljiRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64eiCRA9TVsSAnZWagAAX/wP/iKFzYnpt8V4sYuYHuKm\nRAjwK0Lh53iIMOtU0avE0ZQyljCvLUwYG71rf8qrrRIxrMcHE051G6kpyTli\n1L6a6jTBZpD5Q4iTeDe4NVUqxRJJs4a3WjrKkQ2+KylCwGlIWqJdWZWfhN0V\nIf5Q5H0FX9Uqgh1TJ81e2GDtaBKu8ffzlH1MQVtPY6lPzFizRW5c1AzBEhQf\n4UfDKpqOgDTZsvVXqBTs2Wn6InSqRX3P/GIxvYd/xFE4BIkhyR8ZgkxeHGeH\nN4z1D1kSlmYQorkhnGoTFptKJE3kjF6fcaksXKCE1KihPfU0c9mNgJNg/aKd\n1JN10f9Bdylm1qYtruktZk8gP8cXM2HjXdfGGodhraD75GsmArbfMAs8Fe6+\nbXC0+hrGcKWMbnMasuM+RjUe3YRHp4iYftHWiNEUfuvBVC+tcZmSzmBXm5pW\nPgU3LOjJmU34qfkcaTAMlND9Es1Y9RDdtxWO81JjlmU6elnRc/6DLD1/wpn5\nJo3UGPXkvdnhd4yin4/wtEJIwYaBNlYDW51psOuWwbhHrARuiZljVwk484bT\n5M0AyjrnQhOXKRTsl3+nji9lTc6/ZkT48BAm+UprIwxZLBRUOVZ62JzK52n9\nIEtMVgwcVxU7AlvVOMUB9ilnwN5bYuCe2un2PNTcB7LwFpGQEbrdw5zR+tS6\n3kGQ\r\n=nEb5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/density":"^9.0.0","@material/checkbox":"^9.0.0","@material/animation":"^9.0.0","@material/elevation":"^9.0.0","@material/typography":"^9.0.0","@material/touch-target":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_9.0.0_1609271202288_0.18802750526816725","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/chips","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.776c18681.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60ae5baed02deee97d97303212e6601c50169a2e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.776c18681.0.tgz","fileCount":83,"integrity":"sha512-94oSkNPwbWTknbWrsc/aVtfWJtywjOJ1R+8GuQxyVMJ4Pg/Xj5vuGQx0SD3USnxbVhPhZeU3JMsLbtV/To0vOQ==","signatures":[{"sig":"MEYCIQD9SBKLpCUICx6yJYVg44MsVeeMO9R+ajI7UyNRVNViPgIhAKU1r1d/FX/61nZPzO8CGZ3gZAcmgwgHmXiBwaV2uNRs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68ykCRA9TVsSAnZWagAAusYP/iMNjKaQYFEOaCHfDg5J\nz5T2MPKTddPT5VUHItqXZT8VhoNMviFTZavzVEQu/csh6WCUEfg9+OeT4ghJ\n1OLYFLdfpqBl1e4mFX1Ha5a7Jt06BdLHe1AlgOtuZXNQY4n/04IyjaFWH4n8\nvxfL/w9JsGMlyBTHZNtUboODYd17KDOc4qaT9csn49/3ZawZ4ZtjDAYgVBSa\nv5T4NBMqhRxFL01ZvZl8ERXXmM+wNEYJbbmh1nLmaDMFXV1+CyepiGPVjrjq\ntcr+pKMRxvB/wX3XvgHJZlXNAkqFz1m6y3RHFnfTr36bSx7tdidkAOKyYfza\nte8IE9uaG2C/D6ZBPK2i4rmtMGopXOhPqVISFiesQRWhYxwSfBL3aTL7QXXi\nxoJAG0XzX2Sr7xivSfx2+JkSxIvMbbq/kmlFIDgp6aVJUI5CArd7mV1GADLo\neAgncPr+H+Doe2F6egAozg07Jh0JVbgc4vCTiXPscFsHg4fAae7j/BDth/V8\n+0cY2m2QcgAuJwn7KcniEXGAHR/bEowq2mJqJ7WjiERqt+0tdcdUCDrhK8JE\nx/ARMMjjI461Ds/psMWVTInPYSs0Ud9m4IuDTAaSCtwroB1c+n0x4H2KZ0nR\nvjEBRYFrdDrNXWmwsr8e+0RUF2HlJER8Xtk0zlbTZYnmZMI4mbSPVCcVEi7R\nZ9/A\r\n=Er5Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.776c18681.0","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/shape":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/density":"10.0.0-canary.776c18681.0","@material/checkbox":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/elevation":"10.0.0-canary.776c18681.0","@material/typography":"10.0.0-canary.776c18681.0","@material/touch-target":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.776c18681.0_1609288867559_0.6695181700035069","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/chips","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.671d72d95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"152dec00661ab5c3c498a69e814e0c81fc589c22","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.671d72d95.0.tgz","fileCount":83,"integrity":"sha512-BRHvsJhdMZus/OIZEI9LFopMUUeHGcaY7yzaW+DchQENvxGSlPRarIkaEnv1EXEU8lmQUNi7ubQX8i2NxAKsBw==","signatures":[{"sig":"MEUCICpUYokzmlc8x95XarZGT4uUp0f66q8MMK2HtQ4dvmRFAiEAwEm46JwlwHIhFbaF1tiibJQMmfAY8XrBhmFgikDw6rA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8vCRA9TVsSAnZWagAAdBwP+waIq4ULL04wyrHY3Hlx\ne5tSLN6pVDCSEOCwpQ37pIu5JqsrmdsE7oEINF+TgbV1D8H84TcGtuX7yA6X\nzK9Vz6MAyicx64mhYXCs7wUULr2LlrfvZDDk6OtVSF2U5crPNe0OxSMxCFMV\nQV+UIfzZUehX+T7d5vh6G+uVcA7KWBjPpirqtKM5WPuGLOaItVUWneiWA5Tu\nDNRM3u2KVUw72DBID0inai/JcTVyNY+ACGLVCcFB0UyGJSvBigvrQq1HDCcC\nSOOF8QWGkuNvfbAZmRreo42VTSjhmZ3F/lRHK6PbXO0Y4UcJbpXA6FXxSz7G\n8EdKqTeoPlEdeOuK8fxaqdEA6zMKTfBG5sArhhkNgO3bOgUM3RxkWNtAKWNl\nNUDUi9w/iv4CrmlHhKfk8BW8jwknYjycSlzg5Uj/LERdVcDQ0sOD90WoOi0k\n+ss2ADo8JsmzOsQSyRGg6Vg7xFWQQSrAjfQk7SPN4LEEY4t+FLvo3gmEYAnK\nqBxHWLaTmzCsmPMFsipnM5uE+OxR7c7cG6wjeEsi1gSBZUcUO0fPZjBDiMPT\nGj1mgAk5881MK0977xAKHgn931hJQL5zfWILQW8e8SVNIQCstOqyOLlESOFY\nTV47BLCK0erOoqaBYKhmNORheOtQFFZjMwYm4jr99l8SrnKchgO4kkpyWj9Y\nBVmD\r\n=eCwg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.671d72d95.0","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/shape":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/density":"10.0.0-canary.671d72d95.0","@material/checkbox":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/elevation":"10.0.0-canary.671d72d95.0","@material/typography":"10.0.0-canary.671d72d95.0","@material/touch-target":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.671d72d95.0_1609359151411_0.008776507839595604","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/chips","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9497ff145a8c32ffca6e27c8db30f1480bd31a64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":83,"integrity":"sha512-gfDLdghbq44TX5fN47oE20bG8cgDqCVZVpR9Z28MJHVx92IY03ftOmJ7lReQubYUn2mkAA+X5SZUpE59lRKKdQ==","signatures":[{"sig":"MEUCIQCchCjhkv/Rjzh5NnAh75HIT8teCJg9xPAmBPTzzcVA4gIgQEOkSqdiB7pohg8W+horUOgJK1hhrF4wO3L1r6v50Is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PVtCRA9TVsSAnZWagAAbiIQAJ8Ul3qDG2XU1MrrEBfk\nIFS716YLiQ557H5HmTUfiSenRN9pc3cmCz/H8Gd8kz+SK+hTcpC8FFPs8MBC\nlrtnqoYnJZ9q53Kp66ASDlEDOm1/u6YtaroxfJBg/iSnbAzdVgpwXs0euNg3\nbKQOfsBKk6CiuxH96xygLDKixGNMigoXXJYRCUotKFN6eoPSjIHwDpAQferJ\nN6KvMwfWrTzmvCBuBIXoBqEU31soKAJVZ0iARb07yMBKesth2eG4MQJHVy7g\nmM/UsIwumwwDQ4Kabc7hDt9puEOoW9S07J8QNmKsO3gPBVKiK/y7DpTHnigq\nrCLnjfmfKUMK59+ux6sYKYDel8ngqHjCxppVIH7x9YgcxLqVnjfQN4yJSMqq\ngHewJbut7Z8cSulTLjQjEUYJ31g8r4WyoZ0Q3qxG2W/ro8MyYZb/S2yjooGg\nIi0gUmwTSPG2ufg7QdntT/wiF5mA4glXLXmdi3SsTl2+SXAhih3+rnq2IMHI\nOX9jTDvtEbAXhR30KAX5E2rKu58+QqTIFnnCOlRdVMcdDUbDhNG7SfBHbWIH\njiDUKDVBPrjMY0P0fWIMolv4m36yBXJoDN37qZLSMfWkeb898wSugC8Nap08\n4/hEJWRgmdZk0YOXvTIShOxWY6e5PVafh1ScK5Ms+LgVD4+Vb5vqa5TKjbLO\nIuCR\r\n=XzTM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/shape":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/density":"10.0.0-canary.b4f5a1c9e.0","@material/checkbox":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"10.0.0-canary.b4f5a1c9e.0","@material/typography":"10.0.0-canary.b4f5a1c9e.0","@material/touch-target":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.b4f5a1c9e.0_1609364844875_0.8897904055780155","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/chips","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcc655fea63ce3b4fbcd4cf2f1024437b5f8b1d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.a94bd8deb.0.tgz","fileCount":83,"integrity":"sha512-8ZxkAMAMI72z2dwE7AIdWk9DHj8JuVOlJ6CPCbJvd/6qaQSOFHiaBpe74dCTD4d6+iXqD7JRMoLnPmPCNcKH7A==","signatures":[{"sig":"MEYCIQD8SQ50api0Ryn2JbL1+rdFKPyJqwtdbelBLgaQgVQxzQIhALjsaqa4RGLaCVcI0N5qZbx4Ot3OiIE7xiAUiAEcUcNe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PmfCRA9TVsSAnZWagAAaCoP/jjPqtKlHDuc3vkUQYUg\n1KjtviuiS+HHNIDLh8ckdfl4hykbZkgwuen/+ZqHRV28GAsk4kGE+26L4ngp\ncQCvdttUMGWE77UMqi/txcTUpo1scd1Z1naSmezOE+YNMz8WepzOsuOWxE0F\ngruMNFx0hK6pLiIGCNdgKSZPIM+DCL9ABlGg4PwuxaIE3CPlz2ROTzhRzN5R\nc94DxXVUlgITs7HqVyIS5oCjPKT32ACVT2nHppjKc8fuOYb+Hb4lIEsIT3r1\n/Hgf52MOfkx6JYMCaW8mced1KRlNMTvsW3KT7UNRO9l5MlTpjKob5GJ4BH+S\njz0fr5InV2dSLlUqdV0t6cO0qrIZsm/ENKGVaCgs5RefQN4wvMNxXE2BDzuL\nt8ZyuK6vzRDoaDv5u4FLXNwD8Tx5HRW2D9Vn/C/AYXOY/PPpdSoqefaXUfuH\n/2Uvh5tCpkNnTYMdOkdFRl+9Toyy4nXlWffROmC7NqkBcoaJEzEjnEh4i2hI\n1gq6vCZcwQrc2AtTCDG9ESWfGn/sdlS6/GW+vPcAtQ+zxnutRjIhz/Mi+jKK\nogGq9dzkZwfOFo725KQUWe4XyApdoL0UYpPv2IaWzsULdiL4q2+u5Tzi0nrL\nyhZTR6yaALkezvFHMv/has0FKwWjp1toTVqiuCEhrqUmp75YGMf65tZeIWJ+\nQ9TK\r\n=4L/3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a94bd8deb.0","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/shape":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/density":"10.0.0-canary.a94bd8deb.0","@material/checkbox":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/elevation":"10.0.0-canary.a94bd8deb.0","@material/typography":"10.0.0-canary.a94bd8deb.0","@material/touch-target":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.a94bd8deb.0_1609365918986_0.5495241245392557","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/chips","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.5d128511b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2aff8f0442356931174f046d61ed63d968c2c423","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.5d128511b.0.tgz","fileCount":83,"integrity":"sha512-y5LwMJZjSZ/DnauMucswgMSnHfAaTS6TeG1Jt4h5RAaLX6m3qBVqQGSmQyCRJ0Uz+gZ4HRWBnherrX4aTImYsQ==","signatures":[{"sig":"MEUCIFzQK3m/iaM+KLNNXP/8v4gHwRHAtwLSF5gf4toCg2biAiEA+IVj9gykh7dQaVlWV5YJDEC2IQqtdgt9LuipKJcysYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PrgCRA9TVsSAnZWagAAPlAQAJmt9OO9SrlejLbzD0sM\nLRiofIRFT0vRjxOI+21B4XSwtfA0fvOLq4YR9uOviBcnPygnwrPN0dk1l8Pn\n/mH4Abbiummx9Y8lq0FzMSau/4BMVTSbbMgiaHNn8ggD+3C43tLwG+WU45qG\nLZpOb8ikIy8L3rJ/QDXTfexcrGFAB2eHstmxtPSWCQrKY4PAnO7gta4PO6/t\nvu/y2W7911KWD2uPWLmvqxlr6sZCkI+KxqsvIJ0+ARp6cZDuzUMklOchpNe5\nWuTChojJH6f+zZy0p1AhIlnq1hAofXVGwXwUc89Kwa+YVb2ToLFXI9aoRBSP\niBaJwNU+sfGuEkyQeFdLuA3leye5lzZcrl0X30WHpS/HkrJ8JWLgofiNuE2b\nXd6PYUo11AdUHoXcIyOkSCRIpP+5L0Z0e1j8DnJgyX+9V/NZmqkefNlCUPcF\nhkcAnqeztIFfOgaJ7JiwVRua9LY3BLHH0RjCczhMnoHinxjAO5SNVm1m2v3E\nhdm2e8grhq3GL6woFuLJeApprVDBMrifGqRcU0fkZnwPXsuHrSZMOzM6l5rq\niq1sYMbC0Q9j56DZQbi2Bh3yqq5N+0tOrUD2C8Kw5FL0IVOEJKRnmOAwGsbW\nN7JSiN5Pj4z64pYH+aWMhIGqQlB16E58Qs4LakbWJWwm9ir6BzfV2GXfrwXL\nmE/Z\r\n=AX6h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5d128511b.0","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/shape":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/density":"10.0.0-canary.5d128511b.0","@material/checkbox":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/elevation":"10.0.0-canary.5d128511b.0","@material/typography":"10.0.0-canary.5d128511b.0","@material/touch-target":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.5d128511b.0_1609366239592_0.15242769695097946","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/chips","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.365c69360.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73214d4134a2a9f2cb996af6927cd8ccaa918567","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.365c69360.0.tgz","fileCount":83,"integrity":"sha512-YOI/KXWbH2Ag9d1bjX+Pdb9FmNw3Ea+1EbrH0yUZSt6bOOJ2uCHv3rGCLd/5XJAp6/YrV1D9Xh8maefa3vt7Jw==","signatures":[{"sig":"MEUCIGjByZ4P4TKTJlyefpwD3HcSNna8dLXyLRzVapkeyHJdAiEAzovf7idopS/7FFQv5xDKDgqTZmG8IBb0AKxjpMiDAw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KahCRA9TVsSAnZWagAA+kUQAIsCnhj3LmkcTdOi9rcF\nbd78YjU8776WtVf2bSX++9wDQ4pxLOUQFzoDdCfhG6eqxsAGBUdIcmqqkdYz\npL41x9a63/BHI1rGTp9YXGZPtb5WpbCgBmrpLHJ3H1xys5I9AM0okh2KWXBV\n6QXYoKo2YuU1f9/7zy+tUEJT3wOMvEKuJ26akSELMolytgeV7jYaLDMmZhiK\nWhXOSZokaObBHICbHiMIo/dGRQ2+Fo8BRLjCwsViH2uvzKoKSIR7MOizUDnz\nZWBFnsji1dOipryuZgprZdIae0MLLac0KUve7qssQ7BqTiESS5lXpMxpkrd+\nQ4yjaGLSlKSHvVV9FIAJmU9JOPr5olD577QEhELnOLGoHnUeM2aEedlLoaeQ\nuRTccA413Z7ewBr9R9v+IsWdz4r7QMKxMCVYVweT2nE+YqayPlmwN6k63dBJ\n3WkdlLd6QFaQpmLQmELLI0mF00opPFoFzM8/pDONamrsNWnHAXO5RYgOZ8FL\nBUBOvrS9rDtBW0Yhy08LGorTWIDqaL0Tl8Xpud7twBXhwlr7nkz1FacH+Kcy\nHAuDB84ePso2crnN8rnSn1pSyKRE6YaGMQmqscc9O+vvqT0jz0IsyGtjZevY\nizv23LKNXDgPayrq+Fp8egq+TJOdUqTz8qVTOfJ5psiQ0YHaaBetEPGcMgBj\nxsqK\r\n=spFj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.365c69360.0","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/shape":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/density":"10.0.0-canary.365c69360.0","@material/checkbox":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/elevation":"10.0.0-canary.365c69360.0","@material/typography":"10.0.0-canary.365c69360.0","@material/touch-target":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.365c69360.0_1609868960489_0.8960083326867507","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/chips","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.700a8261a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95669d50cf4d063e23ab81d125b6ff7b1704377e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.700a8261a.0.tgz","fileCount":83,"integrity":"sha512-bKWEnLN8IL7KUEZiiIIFVRv+sLYFzp60B4PJah7j2KTqDj40IpCLGPLnzOpWJy25pX0IeI8lxgqj4pUIFRgOmw==","signatures":[{"sig":"MEQCIAljwIKoAfEn+lnzWUgVwW8Tczs+y+iWk0K5CM0gd9CAAiAiLo65U32KnPk+3uQdYeRzUQJ/f4bgF7DNRQ/jSndw6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NO6CRA9TVsSAnZWagAAULYP/2fVzOELd8N7gW+qMQhH\nGqb9hs3vhYtW2TstcAuTSZujAPtvPQ+TFDxUHDixFD54JF29g4DNcUJvxTGe\nYVuqfVPrJ6Ac0Zwb5RNSp0pbQroTr5v3wvPeO+WOCxdeofJhBktOEv6WoBpw\nfn5SGMQe0ouF9IkUzOo0jLANqVl6ww2WVGa6C98qLwpG5C2oibQHzhnh9J+D\nP4bIdb+EO0NPnMrU5AjQD8LwAzgwxHXw+I/Q4IEq7uPrVWV1nVHkji5kWLDp\nPheduy8g0uiJmT6SCxyIJ8THZeEjoTZEssi1q1teIJ9kbB54ra+fLoItctkL\niA2YPZ1Ujr/XSvSEnixfiBqaWQrujbtBh9LNd5DLMko88l504itt4QEND2Yd\nTzKmIxFEz1TKPOA8coOZyy7RD2GWojIpGZIlj87QhZBayjXNxzMvmBgD52XI\npAQjhFehRmH0p2UY8XvwK+SfWWsMcRx5i3B3nOoQfA6Lv+hGEDkQ+oVB2/VQ\nEELY8PiQfq386AmQEzQaNHaO9etiKhowxI3bZIpCw49/ebdEumNqxZmMB7Io\nY4zrztq33DQMH0ceNSrIHc2u5HroSUkZsWYKxGHGNZtnmBQsG6g1w/KhhKo8\nSVbTophfj722Kn4QD3cimCQsbsq9Dm9cwWffJXL1L41lhB8WQUayD95k17ln\nLcGe\r\n=GFlX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.700a8261a.0","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/shape":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/density":"10.0.0-canary.700a8261a.0","@material/checkbox":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/elevation":"10.0.0-canary.700a8261a.0","@material/typography":"10.0.0-canary.700a8261a.0","@material/touch-target":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.700a8261a.0_1609880506070_0.9311262836821887","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/chips","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.766981c15.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4011ee66292715267e323ff12b602909adf57274","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.766981c15.0.tgz","fileCount":83,"integrity":"sha512-mY2S5VOsMoKUBWT7K4p2ygzvPi6vBzfUM32uL55doGfJkTQHx7kAzR+1kjIf0+3xSGC3WdIOK44E0c2GkrMiIw==","signatures":[{"sig":"MEUCIHmj/nWtimUhSwPZ2v+WkdSRamJzulmBjlLUe6HVC+OdAiEApyJNWyel4OvkJmI9GnBbmJ944Wlstf5kBpZzknfCJqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OsSCRA9TVsSAnZWagAAbOoP/il5bM7Xz3p7pjhE0rA8\nV6qNoy8skQ+JuIJsKUOCxPg12icLfOWPf0zPSzaNZf7cI4HJUC+xsgsi6te/\nRrYne+7G4MAQSHEceELEuA5krJ2Nxp9hIdR755W1cO65fQOU/yFslsa00TIZ\n49eSQ6948aFIka9hmoOfH4g+gqhZLoxsoizQ1wtfAF5F8wgbOUSQYa3O5sbQ\ny55XuxwW3SRbJ8FY8ph/+MRPmoYhrDgOrDelqxZT2JZV7sMmNcsT7dPA4ln4\nong6QcKdAUiVMG4oO4XoPoT2UXlS4RhT3tdpft3MJaUKEJF0uvUGC7P815pG\ng9RCI39KMStS37h8aOy562xWvQxRP1NXzq/uNnONE5m/YQB6YXf8iP/FB8up\npwK5RBZgA7Mkb2+6T0V66NhbLNBfJwwqCSRaCv3dmZ7lQtgAizfOCGCGY90B\niCYW9Qg0GseNi3mIKrTW68ufvfHDRwNo9MShCfphMNf3ZzV3322SqyWkUFpR\n1wdKKimEN8mGM3VXCqn2GWPfnG1+FN1Y0Yh4YWybercfnskun4mv0GO62p97\n1uS7sOuElFz2U1R9S+Hnt3OBPwry8ZRwipNMOeU35QtV3hLmI1EzSQn9hHJD\ng2Bah31U6rXn71LCJafrijscFKx/W7UQsgi1fSck+spr5oRxFG4epbAHmRwb\naCGa\r\n=J64u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.766981c15.0","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/shape":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/density":"10.0.0-canary.766981c15.0","@material/checkbox":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/elevation":"10.0.0-canary.766981c15.0","@material/typography":"10.0.0-canary.766981c15.0","@material/touch-target":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.766981c15.0_1609886481459_0.07590278640495529","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/chips","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54593bacb258fdcbd142380b8261576067307b31","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.b28c576d9.0.tgz","fileCount":83,"integrity":"sha512-6nIr52F9591iZkYC1TkN+oT4VGlUzGjGgurgNbHSqFi1kbfnfPdukVCDdvcPbFNO+rhSs2ZTYjme7imqrUQz7A==","signatures":[{"sig":"MEQCIEgDdmkEPUdi1eT18jbdRpNRVhGwwsqbC+mrZwe0UNedAiAR5gcnR9dWmjTe5djPASkFyApCHZfNu8WONYNaNj/NEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O1TCRA9TVsSAnZWagAAXoMQAJiTjm0Oi4Md3cGa5LOM\nxwCIfJ/nHlYUhkZNOCD3tXLvaGNrYYWxXgJaV9ybjaMUV2wMy94Zcwuxv+2k\nXtI7gDGO9EjosOk3DUtH4UrQvdtUuXbRE7rT8uXBG4hwmi5AH4rizEDEWwYl\nRzK/DR2x99gEVEl8VXx9QzXjZ0vgzeDoqQ+3C39tb4knq9p4gsLiyivrKasb\nemvCNhml0FKjnrvsONwedYiL3v6xIvStSfFFT5DVxb7LuLVdqFkWOd7491O0\nreRg9tFq668PvpbD7TLC29c1PsQE9T1Kb7KYGy90HmL4dLjMafxJ3l1+7iaP\nIqq63GoztgfrKWMip+yatqfPetd23h7YHZbCL/3dBhnlJYwj6Uj+feAS075o\n8k2m0n4GJ3WINS6yuYpdDdMgU4cdjTKRf5nGQxBPYdHK71iTKVzGdiPxjZge\nGWbP541HmJj3j5LUR3UdfDAd5P9angd553gV2b+yvQoctkYoah8EZ2z6VHKD\nsXgCIAqbRrACOHZ/SMAHe2nKJPHW7w3mvCK6v5dToJAJMkN3yREqtYNTfrWB\nDIa5jihoJTlTIJ4MUFjh2oB1yqfVjbo3LErH17nkLzS4p7WHyHlVP3VTv2Z+\nisPJoUkemFnCVy384s4Yls5u3cnU+g9tCcn3wSh1FYc48sS4gZiFdIxtHaFT\nGsnS\r\n=BL2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b28c576d9.0","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/shape":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/density":"10.0.0-canary.b28c576d9.0","@material/checkbox":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/elevation":"10.0.0-canary.b28c576d9.0","@material/typography":"10.0.0-canary.b28c576d9.0","@material/touch-target":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.b28c576d9.0_1609887058703_0.7562494697475302","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/chips","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.968735356.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fd509b0c235d17b809e450b2699b1fabe6eb487","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.968735356.0.tgz","fileCount":83,"integrity":"sha512-qD+znNayPfpxTLm4Sk4uWt2mMtlCnv2vQShUugFLRGCrbyBnuSlr6neV7sjEt13upzO6Mp7YjfvC5e2TQza9DA==","signatures":[{"sig":"MEUCIQD+sH9GtC1tRWcqTPLw24wieY5CevlhpmCPHWthBEdMQwIgYlVL6+ojeHkCP5j//4UUsE/VFw76F9pCLGpCr2kbCLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dyHCRA9TVsSAnZWagAA4lYP/3gaogEr7TmHz31q446f\n3AgMBGnp8nI5F95t0HWZ/+qi5VoAxVgkJYhIoSXhmXIe7/IHAeiBCNe97e6H\n85I26ZgRK6cTu9yqpKchBfhrWKYBLpavzfpvVbseicd63AdPOyWI87TJnaD1\n+i7FGd0FMtECItFi03lsJzOmR9nDssy/kD560DWYVP+jJUT/en487l2DFtOd\ngksdGrB5DUvaLGBTl/UpVID/NQ0kEePs3jwtbplf6h585ahC2Z5nc7lCwEBO\nbgx+vgkRNcs0A3i+NNh/aYj82/exgJKraUveVyOf+MjEt+EYXomBJs5Dpzvq\nT+LKzbEuRlRgS+jvFXQMTZHVG+LzepPYX/PPzvNgaI4TWi7h8a/INV07c44C\nTTTR08J3ccAlKwI0EYssXp4z4mJFVi1ztzPOtM0K+JIwr33oaTu3J5E9ZJGC\nPxDoSLM/hu7EC6PIMFuINCJsc4nkBpEuEDc4MMH3uh4QSOH9NF2NH04JDYqO\nJP7/BM9Dr3cY1HHenaEUHjQeGyhi3R//FVpUPStEsMpJPn4q6+kaKS4JnOsC\nlSs58tSH1IpKWZDdmbpNO/nr+3jsVzpK424OwbygOnjZJZag2C/REoQ/GVF7\n1J0FhUA0u5BREhXh9IuO0oZjnvVtQIiNE8hM9zkfhA+63fIjslT3Qfwcwcj8\n8X29\r\n=WJh4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.968735356.0","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/shape":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/density":"10.0.0-canary.968735356.0","@material/checkbox":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/elevation":"10.0.0-canary.968735356.0","@material/typography":"10.0.0-canary.968735356.0","@material/touch-target":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.968735356.0_1609948295148_0.09655786769873753","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/chips","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db7e79d16605db6eb659e7c5f48901d34a6b6c06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.c5e18b020.0.tgz","fileCount":83,"integrity":"sha512-iQ3UYue9+fsQD4XXJ/dQJ+1kcKiNd02opnkiA1FkwkDyXF4mo44Z7K7n7YwbdEkmmCaZQEZfnbG+4tkxnc8W1g==","signatures":[{"sig":"MEQCIA3LCzyGTlv8FvpDuyM7e7QHjhUOolnYoSd2en9jECamAiB1XQspL8F4mAUfxVK58umRn9jNHNuslN/zBjVfvnENYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hM1CRA9TVsSAnZWagAAgMkP/2vnDiuBQpyYaBm5pvSJ\n+E3+VWu5wkqE8qjwsbr1+Rv5O2ksKxXuwOynOWwwZid407BvPvZONesdVVsk\n+yKB5yFn8569Xrfmsz5I0in1We8jzbfDgza2Ukl48bMtci7TMMmvOaogS9Wd\nVvrS+qGw+PJxapOg0SqOI7uBGvLs/SFUKhNKBs09rMEU12sT41ZsTUczl6si\nYXIoo3nv6x5P/vGkP1MiDGJWT7d1GO6S1AvrFQ8DWmQvm/vbOk5cdOdPnnhy\nhaxXiIfSqVS6CczVtYxnyC9lPlcpi+pjS74/qsd2ju0XXCaGy1fy8Vjv3IZB\nmXbFzP86/krX7V5ZNoRQ3CZ2wc6bw73gSGvsRx2UTtniqSSUBop53uotGbWj\n3cJip9rB/3enazxaSorwdSR9C2XmwmGL2ZZsyawfUhMg+NVRI23QeE+laH5r\nhBTqLewXVXOJK3g2IcKG2lfEc9ALLQR6fyEAMen4vjb0/22qnbf4zi1QxeXw\nOxzjTe3PzhakwVpZBPMIS6Ex8bKfeiDNVbDOiv1XCaOIEHEOoc1bsmr8XxOn\nsmnTdbTVa/xiowdVWgY6qp3ch9mBB2NeKX2DUIRKU8DMPbkQJJQjfZGx8WSW\nkjwf0OjSfu95IGe7u93WiARgHrBadVkEaufy0M+EagMYFY40AirSfv0oHLXK\nk1Tk\r\n=xL17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c5e18b020.0","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/shape":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/density":"10.0.0-canary.c5e18b020.0","@material/checkbox":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/elevation":"10.0.0-canary.c5e18b020.0","@material/typography":"10.0.0-canary.c5e18b020.0","@material/touch-target":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.c5e18b020.0_1609962293147_0.31010599281713125","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/chips","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d1a9e13cbe7a2cc6b497da3fd6ca72653b9be4e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.bcff8a66a.0.tgz","fileCount":83,"integrity":"sha512-gs2bcYy8Zvv2Lm9mkaRv8vJlZTxg5Ue/BddZwKUy9CDUVXVC6hDAjksLUho5CpwYwmDNHndely/Zst+v8OcWgA==","signatures":[{"sig":"MEUCIQCuVAnvuwjpKqZfbl8JbTh1HXhzprhpJNujhYzPQTv0PgIgKigFv1NzvfFtdBfrcbpqNbtIJ77N0I/XqkkP8C62ffc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h0+CRA9TVsSAnZWagAAK5wP/15ok+pqSaWAqHggTT/j\nDCt3nZLSkh9ECldpOGP+666tqiBsWJgEr7L1XRmDOUCODUb/wOtSg8m8Yi1Z\nJvWtvrdiVoNkIYrHgLnsqOAPTsOjz7i+h2GYKMlRm6F4FfngolUiCBo4z2Ly\nCkX6iMKeFVO35dHYej/Me5DRq4QCywOdelpMR0r6wcRrSAJlvya4MXd/p7Zt\nK9DT6dtm5yr85vDg1hbnUUVL0c6MtLtqbgJWpnr9kl1B8MAK9fK9DkzKDq26\n3s6TrP9hs8U6DjRlxL7cTKlMjlhdPBu3Zc2q4JxuvdWJkwCxiBjb5+DJoyhH\nhAxTvtoC/bfnWegz4McEAt7HBfs1zxxt/Xfr2lDWSKgo4hdx9M0coRKtEuIo\nG+GcDIIJ4bzuvdXb65NCnN2L6wvPuu4/9bF4A1OhPRFUiW9uW8XaXDTgV57C\nwyw9t8xN1DJmhcvrrZEpcZaNDBeBwB6qTQ7QeQg1N42NERTuV3v3lYBG9Ys6\nDYD3+AYdXKKfTD3FQRGkOzmCVA/jRoqYnsyb61edZ3izM+vbBic0QNgDwGLS\nun6ANDdT/qgmG1R4AGc0/4RL7/m/Ne2g0vqGvJsPcRncYc+r6T8fhqSrKa4W\nPdj3AvZLF7KzK1avg3ANY1JKGLZD5V5jZMtizbhrkaokILEpu6qmA/RY2fKZ\n8/4w\r\n=Wb02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.bcff8a66a.0","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/shape":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/density":"10.0.0-canary.bcff8a66a.0","@material/checkbox":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/elevation":"10.0.0-canary.bcff8a66a.0","@material/typography":"10.0.0-canary.bcff8a66a.0","@material/touch-target":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.bcff8a66a.0_1609964861737_0.5149992460914068","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/chips","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"038c29340dcff8ab5d66c76b0ee5a171129be3b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.79328c9ff.0.tgz","fileCount":83,"integrity":"sha512-hZYKKWUokP/mVpFa3iLkhNmA7XkUkILHVPH0Ul79iWlDXyrAFzUnsK1eO8woyWiPCjG3ZA8cm2hz/I9DdC/fgg==","signatures":[{"sig":"MEUCIQDvNXRsRbTMeRVvfhoSpU8MNQoWinjmMrqgFWit/jKbowIgPk7zeAYwLo3B1behh0YkYmVLSQexbdFkXkAqcrfKYik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nNkCRA9TVsSAnZWagAAKQwP/jmWxa/dfnr/cphdNyHU\nCD4jT0RKwkI5i0Sf8/h2O/aRqs9A3Rm9ZbzIS5EtsfMcpWCpfPGldUUJKu+K\n5zkIp+WSjaHgrYMHavNZ6oCXkP8jE5/zMSem+XH9vEnEGukPyE2zWVtF/FNv\nZmJOMPl5wAehLSDNhqpnpFl1hKcaT7hUi3kw64tB3S4KkGXlBJ3vUsvnrjbx\nn5Jc9JJLxF1b+bS4rc4Wcpk7ARkEkM4S/ahvb8iEaoXNFd4okjLs/iZeu2ve\nKOshlWI6sxzU+27Y7Su3gz3LU5GrE5TgsRJFXRhd43Pfp2yac+zrLavGjOhB\np4XhCZdsZKPQ0uPNMuVrImxAqibCVVbumLO0dZhsl0EDg2iI4FoFGlDDQadu\nvts6JzxOh11/m6j6z+kF21HEN5H+hpvGUakXvsHbOeHgAywg1U/aJ+gsm0DY\no6zvBIwKoa1y6dcSJiEbWxSGciYfx8MD5vWwSxAHp6RbHritGLOTjLa2s8ia\nGHBwkPcmFZSgljXAM9TowpkdthBeoSfjBsXGGI+25jUesj0nCNJa/XunCklN\noKCd73BfSOHtIWC/0nBvHBWw2AQJRJ3kSfFXUpPZ907vR6MFBBZ8HYYvYg65\nZDWpzv4adGzPaaNAt+HZTXOCRwJQpXfcumjZfQwYH1vyiRWC565+Fc+EfhTg\nRFQx\r\n=sc4K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.79328c9ff.0","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/shape":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/density":"10.0.0-canary.79328c9ff.0","@material/checkbox":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/elevation":"10.0.0-canary.79328c9ff.0","@material/typography":"10.0.0-canary.79328c9ff.0","@material/touch-target":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.79328c9ff.0_1609986916151_0.6317215357319717","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/chips","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.121e1f303.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c78127ac1826f1327077f1b6b981e93bcb27975","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.121e1f303.0.tgz","fileCount":83,"integrity":"sha512-nf6Slq5J/515GsOSUuNsTRGnZ3YTTPbb6/wR9XuDhfcJHCMO2h6tR5vay4XEbHYrXC8LmJUTutwIf10Hn3kkbQ==","signatures":[{"sig":"MEYCIQCE8iiwpvTNopQ7BUnMN21V1zHEoowsny7RB6oTpgO0iwIhAKJ7VYmwnAoyoUmoFJRBtRPC5p06PZg9t63iMeTHh6Cc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95dUCRA9TVsSAnZWagAAjeQP+gKtacJ9KIdtDJvyP8eW\n7lm/+OwRJqPy+pxcmxF/cyLMigC3LqUJJrHK6Gmgljjim10P68PoDcNId+DD\nWG8vlhtie71/Lqbk239w1Svivnj7cKa5yTdcaaN4z/wrkTRow3gwAVasKKP4\nDZeCSuPnE7ie4v0h+i051KBe9jUKwhIPLjp1k8PjueH6Qvt3WlT7jHMakS4e\nkjRlhJeW09w22n8wNHtXG0uZyUjuvPBM0c9jA6mzvRRwx3vjUFI07VTB8JP4\nTyRGsTFdtdjFlOY82rf0ofYZ/p/tlgcPc2CJgskveFP+ngUzg2zCJJorWS3m\nanH6VNIm8AZAD28JcL8oKVK/t/oG3Lm+NsYhFYgoPg7M5dPdd3u+4jSgzlqZ\nS8aQmzygOKJ4it4Xp12lTD9UXTueCOEZRyqXA0QtlFYpXDOzDncjL8u/Fy5J\nWOzBoPbxtX149meXeXgUDYqxiUnnkGkJzPu44Zj+ItZ3n6XD46UtDpcCqugs\nnfvaCoIePKSqWHxL9UpPinNsoVFJvzJl+E3RopPh3pTFZBPksqw7o2E37s70\nM3gp2jPrkCgrtbS/rGD+ym2MgRLijJUalYefml4Uwcq5MTFoA2cbQdcJJlfP\nV95IH+S9uwGRrGkwwhPJojJGmtj1+6YbKuIWrGtvGuIHuAdKqDYdjPWwpmZA\n7LbC\r\n=yJca\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.121e1f303.0","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/shape":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/density":"10.0.0-canary.121e1f303.0","@material/checkbox":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/elevation":"10.0.0-canary.121e1f303.0","@material/typography":"10.0.0-canary.121e1f303.0","@material/touch-target":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.121e1f303.0_1610061652460_0.8344624055783332","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/chips","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.abdd10065.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb1b614cfb7796def95791a2f674eabb1840380","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.abdd10065.0.tgz","fileCount":83,"integrity":"sha512-CW2GsDDQxEsGoC/PyWrMnJMFiIZUmYmLYmZ8jg55TSpXr/x9O5kdBwdGDNs0a0MvTX74Fm2QnrZajuhgGFf/bg==","signatures":[{"sig":"MEQCIH518KjPK4VY340tjartiqgfksHt21HMdVCfY7nLNOClAiA+rPkyp32KlIDHptvLOByVtUjcn6tWoXaHePuEIkyTDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JvmCRA9TVsSAnZWagAA+IMP/jNKtYAqbduW9ZCVvbeP\nsmffmEh5aHBnjGjoxT1BdFQBB9Ma+VbAJq8w6nR1/ILpxNJjQnhgaV3cUWgo\nkxeOoPQp+pkrWyzUrYzIYGiMh/+ww54kKsNOmtxwpsv4rzDgu3WRPURYFNdv\n9Ie2RwJFpaWpsT4OyVgMC12Zglz0ie+89AwrCKmOeyFzpRJUM5Yd9SOqdTJ3\nMeUuUmtv9Ws/m5hTgtQDvNwigByKIo6dWWNbE/FVufUP0yrIdY+m2NxX7Q58\nkmibRMVrA00A5Odtsixc1qjjjiQef/XEbBN6dOZ/4N4XXB/AFpA4nhb01ujh\nksT0L+Xy7Gj5Im45IvCpIClL2yKtzYc40kG1/iJmOux6YkSgWAWWnC8cnpmt\nuopv0L0zpRxGquJU1Cr6vtbGhP1b3wzkY2uTZ8oGhfIq6CmCj+kEx2ivycDt\nptRElYVv7F+yU6MIX1BLD+pWtc6nmGNwnh4aqhk/ZJPYXmMyFsZq+sw8mZDf\nT3+Pp61nlwfRTSzr0z5gSBuKxyi4lB39kJYjtj49aNpLNYgKqYPFoYpLLqrn\n+UogHGd7SMDROiSPsJj4/QNJZTw3eta86HBOiJbYIeSOronBYuCktTI6Lrga\nDM2sXEfYD4gKqajXEDykxs1clj/e/tQ8R6MjNFcAxlr+EQ6t1qvn1GjFaOGX\nAjc5\r\n=nkmk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.abdd10065.0","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/shape":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/density":"10.0.0-canary.abdd10065.0","@material/checkbox":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/elevation":"10.0.0-canary.abdd10065.0","@material/typography":"10.0.0-canary.abdd10065.0","@material/touch-target":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.abdd10065.0_1610128358119_0.2541790144760139","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/chips","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.089de519c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74a78fe2d593f4c1815aa48c252646a2fe0d899b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.089de519c.0.tgz","fileCount":83,"integrity":"sha512-Lv7wDxo0Qem1uniLtTv9BGH5LYjWTp6Qq2g5jds5B2w3ajYSTqpXaEDUtyUO5pSehzrV2SUrUlFsZXvUOSkjQQ==","signatures":[{"sig":"MEUCIExfPmfogr+/e/98BeMG3h7OnwNY9O/4mK+Q9tdELNtFAiEAteV03dDg+Xz1vFvsAP8F6aD1xn/JvzKDwbn+0/uomBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NrwCRA9TVsSAnZWagAAy1IQAIKiuVnU0Fmx/EakZzFD\nz3advuAB/N71TrFk8qjrjEKDL1Xj3/aSXfiXsdjc/FIR82h4Knm8iI6FvjwQ\nB+EbaDUwCXfdmn7rz238acCC3FqtlmzPLM9S6J9sGMiHtSrDgOobAKlvrGd2\nxW1R+nYmtZ9IiM0VdNXN18QUpmibwFk7GD3WF3kVh35Ld77GGOdzHAgDTnKY\nT2kfo+/vATEwaz2LfJZxkta85emmnp6x+OqUjPIyqEEdjp1V6cBm+SN3AMMQ\norqd93aN4AZrgmdmKevo1dKe0FQfR8WFedOxi86uN9G4cjAIRMnADQwHokTj\nmZidHWQN1HsOsGBmZ3ceSfkkwgnNuiq9eJpl6cZbTPFGylPqtyyTN6BoCVm2\nV/pCB91CGYRK90NhSXU8aXFeedHcuhj+j5/WtRvHjMTwhqatgjCvA26bebeQ\nnE/Ek3tAu6lCXpES0Bs5eXj2JtarMsk0aM5WKgxE6+XAzObsFjOATrq+IqXE\n2OYm2ldfyw6FQEkEFZ2mYoL96fXnZcl0WU51JOFfHIymo5g30hvh6RCmI9eU\ndd3M4mj96f8Tz332JvrK0kY2I7lImHjg7XXst7gLU3cAEJ+4sbk8lcmbYD6x\niMQoj4smj7Cwz6vmwJuPQvVbzFin7IGi7kxojBf8xWrR3lrJ9KUZLzBvhH3M\nJAsn\r\n=hZkI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.089de519c.0","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/shape":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/density":"10.0.0-canary.089de519c.0","@material/checkbox":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/elevation":"10.0.0-canary.089de519c.0","@material/typography":"10.0.0-canary.089de519c.0","@material/touch-target":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.089de519c.0_1610144496414_0.5447244178487254","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/chips","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.163119837.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9949123e8cb25e1ebc9084852b88af150e0d70a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.163119837.0.tgz","fileCount":83,"integrity":"sha512-xMOuc8zaTUkWLsJUs6S4FwXknhVKEwN7FHWyEnmeJy9YfC8Ru91cHThW9XZ+ZZmWqyjZ1mHUrJkF+0LKZJ5p4w==","signatures":[{"sig":"MEUCIQDGenM7vNHyH3lyPPkbNxi27f0a3a0oM2aVXoU8wCDSaAIgaurYLu/g56kUf84rc/b5oJH56Pk+JZ7R3KTt0v93ey4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O61CRA9TVsSAnZWagAAgCIP/3OEUZKzEEOiyOYhvK+/\nDcv54GUDIaQAn1JkLMkhJF0xvy8a5yQhY6RE/dV7aHCL2chyOwrq8udDexde\n2mumaKk7gKz9rrfBAIzZvxF4SYQdOEfUa6wcE3pCaEVNdm8EAb3zxZOD4NmZ\nJ+w6L0As7z6R+H/2XH/M5GYXLAtGoaGPMrqDdm238qWA0/Mb8PPriLx0CjAC\ntCSeqtMgPND4njEd7tO0x7DmTlAw0TWCBPShgLq61h4oR4/hu9z5MsKwHDRx\njkF/8ujNql4HXJs0kMVMThcnf3I1xtE70yuLTLlApvi+G/AfLmrGMw5YWxj8\necP5uqK1QKPbT9XXNQy75LAxG1qFHphrNyI2GdpiAPeT3x90+CsU+KM7VREZ\nkbfntxC+ZL/2WKavnAe33xMyL4W9PsEw1oSmN/v7p6Mi8pg5/tLNF4b7oTwu\nJiez3nhHjZmQ+kFUFrciX/hCPdFy3u+aps9bKw9J26Ww18zFIXhNkLPQRr8F\nIbr/+R8K2i0wLIrCRMH7zwoK6rFUwsbRwMHOZqPvAVuiZqYZ9mpL55JG3mkc\npJGVBEwt2pBNkVnm0sk31hUur/2zGODBAQOr8TRzSC4jY1EddnN6AVokLVuD\nriKv/i/tG/H0owxFldaUHup0pJJ3iQn5GeDYthigm3Rr5tk6sr41s37+Dib8\np3Oo\r\n=IIKS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.163119837.0","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/shape":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/density":"10.0.0-canary.163119837.0","@material/checkbox":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/elevation":"10.0.0-canary.163119837.0","@material/typography":"10.0.0-canary.163119837.0","@material/touch-target":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.163119837.0_1610149557201_0.8872504100297731","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/chips","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f6555bd43c00c002bdac807494034c4671fdda9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":83,"integrity":"sha512-K9pJx8+Vs2Im/UUOu01TEC+fmgf1aDYs/AdJ/Ss+L0+X4JM1kkOeglKD2Sn4XLLw+aaYRbaGMXpvtGsNkbGNNg==","signatures":[{"sig":"MEUCIQD/JZRN52nyJB1AE5TxbCbEERsW/1/llHA3uS04V+N9sAIgGDLgvfucmos+lZzwuOuxI0ElG87faP9izEzE1Eo91yA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Hv4CRA9TVsSAnZWagAADEMQAIyW8ZV196wRWWo/6jym\nvejWrAJfapsv+4zBAOwnfAuvbD5z+8p1sFt5VTf+B1/YbjXbRcHZ9ZIYG6Yv\nN454jL5SeCRUpA1IQmpzzGTCCrVJaIz/fDHB6/R8L0WPxTucCrtR+kOhWIFl\ncHtTcx254tvKXILSS7euvPG5oB8S7IErj6ZcgJozuxbi6Z5lOSz59Iu/i6hB\nk8TM7Zr67fsqfxRAJeSDM1saR/h9T3fcyhmLFMy6NgkYfggaxPXI2e+m14Z/\na6Q/2KklxW/A7scJsPcXyzmnjV3Tb0qQ2lsPUKZXIaIJt0Bp7QgMdiORfwnj\nRAkLVg1zrqAMjiyJVl30HDoChdAqF78xWiMeUF02qqTy3rnrDEpBiZ1/RYEE\nwS07B/e3pK9HTZQAFePcZ3iGNeNcFWyzcObf9W8xZWRh+au04VAXXc/fCIGC\nhAio/oOPtewWEPxwqi+wO+qpaZJJSaPa4gMgj9RDp0xkViMuwPKZ6+nxXsMQ\n7439peaeAlRSeZ0pHrcUqNqfHgLEskp9CaexxrEnpi3UUuFjq94OWSaiaLSd\n6XZ20xWBZU1buwzsjcNyxOortYqavvImC/s9u2IkdWM0ijoFwsDHk+cKVLuv\n3CYidiZ3xvhw58QVPLqaINsk2k1jlfoVB5M/99vthS1gsSFhfnx6epcefZcj\nT/gR\r\n=NkLI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/shape":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/density":"10.0.0-canary.b8a1a58e4.0","@material/checkbox":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"10.0.0-canary.b8a1a58e4.0","@material/typography":"10.0.0-canary.b8a1a58e4.0","@material/touch-target":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.b8a1a58e4.0_1610382327798_0.14678212965354653","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/chips","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.7584267ff.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0acd04d85534048aa5f296e443f5b44c2a999516","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.7584267ff.0.tgz","fileCount":83,"integrity":"sha512-RaR7ZGPiVgvjx1n/aXiERozYmg/b/IDhiMWML41qeNJJMTkmY9WvVPyYLtv8/zS6oxRARsFrQBIl7oX09+DCRg==","signatures":[{"sig":"MEQCIGIFDtMwHhdkw6Y79nne/80na7jFfyRHRvaXVxLUJPpBAiAccZW6GaMNkAKYsONYJTDE1YTb15xGMlD90QYc6YQsSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Pe3CRA9TVsSAnZWagAAzz8P/1oxrV4Omx7q/b+NjBH7\nxGwpem9Zf/Q52lz+3z/3PnGu3iPvflgnv9gkDVb0I9Lf/yMJvkxYDKpWdvzb\n2MKXcPrs6XgqUYhc6RennARSC2e3Iv8z/jHUZAeGD6lp8oO8y+7Mk07JR40P\nS9NdYJB5KHvtINctEsE5KltBddfM3VGP9JpduBwX0dl5nbVpBeA/hMqfZNy0\nN8FHol8krsHlxXaCQQzC8Ea1GA4gqMDT/LemsJdWObqDjQ+4DzD1hWaKD4pD\nOPmvY0MUGeS055zzDmxESX5TvtgwTD7UKQEfwNgnOrhYn3cW8za7gCfqEdo/\n1M8AXrMbU39MGr8gbGAtATMcxMyyLH6sv7I7mP0bq7o7/w6NvJ5AWsGI7Lpt\noYJNGEEESrlv4Y0ZdFJMuAVFbxI2CJGeJ/tajiyIQDEWZYuKQRqBtKu47gU1\nbNCrQvHlFBb44zMaV8DGVdHf8dl+6Vvppe37d4eM0XTpuIVGNTTE16u5nbMn\nWZ8nfj4UEvrRuORICoazM4hCqfo4rL4ZRbkafBi+u9yOqioRw5h5gGoWszkH\nyt5ynru0XQeO7tieVMIDpN9oN2s+WZUj9USOCqUTzbvPg2Z7oZC24F6iWP/9\n51NkWLip0WtvCZkNXSr0o8kYY8/ZI/PDGMuHNPt+gv7eLBTFPu+Gr225UZfB\nDYIU\r\n=gp/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7584267ff.0","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/shape":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/density":"10.0.0-canary.7584267ff.0","@material/checkbox":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/elevation":"10.0.0-canary.7584267ff.0","@material/typography":"10.0.0-canary.7584267ff.0","@material/touch-target":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.7584267ff.0_1610414006808_0.6965251347917918","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/chips","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab907bd4960e40477d88e55ff7283104e7d552c2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.251ac04c0.0.tgz","fileCount":83,"integrity":"sha512-45uKhJN9IOjt9O92by5Jz+bK2egACcBxSk8Gm/NJ95RNuucPUSOiL7RdyRRD8JhcExP6apjgJ/ZvmmmSl1lqqw==","signatures":[{"sig":"MEUCIQDBUpufmYxwWDKLtULtKJsaznBnR2NWVlJ2yHgPOYESJgIgbmkpdOrEgp4qQkGXv06VXy+Xy2Ov6DGw5XImtxcfseY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f7PCRA9TVsSAnZWagAACL8P/0liqv4AvDM2/CXxVonN\nX3hyJarZaqE1Y4lCKL7b4/b536IH2BbfjWtsQx+A/gN3wQKf/QRE8hlgR7I+\nHs3u4320sxnYlj1EYXtU5Q9bPN0V84dxrfSpqjMqMTZADPoJV28o4iBiWbYk\nao2sDw8ze6xWWJccQFjtLCuD9+SM92J//Ib60BFW0RSoTVgIlJoEfqH7JM7U\n49pONQoNQGv2kApsPXi/entZG7dDMXAUZlFjjYOq7wASbbpdGHtOK1pytsFp\n5+1S8NtaSKlnz4/4vxaVwd1sWjNJnd4F3MUG55tQa7kHKf7MPLbqMueBtH//\npzBG/JPDS6AFf4B++srL38yT+UpcyaIyMq+Jiqpr65HpHs2xGR08sMadgw8s\nK/oP5TUq1I4H4/uXEMorB5HKBTOp3BtyS4I8Bj1wFxymaa1daKcQtuDnFX2x\ntttucbDuv6EU/KqhVLm3XEMQScgbtebsc7Oa8Xaz0REEiNZzTG5VuQ7FdG/F\nmN/slb6XsM1NA9sabvmZmC/9qzK3x5ptKfry24w/6eCeqsmJDnO80PkhL5z1\n282x9ArtZsM05R4HR4D3tMajlPvp5GOOWk5Zs+tQop+zUXfg/6upFIWWPI3W\n3AfNUzJAN3RlMb6ExVQAzi+ONRLEj2dyTV7HPuHy4te2Lt7gmNGGZnJv3ad+\naj6X\r\n=phFJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.251ac04c0.0","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/shape":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/density":"10.0.0-canary.251ac04c0.0","@material/checkbox":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/elevation":"10.0.0-canary.251ac04c0.0","@material/typography":"10.0.0-canary.251ac04c0.0","@material/touch-target":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.251ac04c0.0_1610481358469_0.19991185603593586","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/chips","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.772cc1068.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f0ae8bc30495590e52cf5f656e29880dab95ba2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.772cc1068.0.tgz","fileCount":83,"integrity":"sha512-vqq5T8HyDOT0zDa1L0o8UNTL+XbJ7QKBqhostEbEnv7mcsJdjQOvOxsZtMZox/7fCss/EyH0xohaeWeLvrhlHA==","signatures":[{"sig":"MEUCIDpDeTO46lFWfCT3zg5joBJsZhMrnzSbU2L5nptn4MPqAiEAsGHLClosffNKz6jCFBjtQgR23ld6UaF85by7b4wmNfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4tqCRA9TVsSAnZWagAAf0wP/RqGM/2FiHZjkpJI3MhT\ngN2+EZdkT4PVW8Mvy1+tm0c/EKIldX6Ng2kXwCu6KqWs32hZASqgGgi2GtCo\nL1FAjU4XgLssEZ9LH9PUE1knDkgtT3gMR2+ONqYiZcJVlShcpLzV3Fzngt4C\nKc5mlx6/y4Hp8BmhgaXBzERSiF/VVBo4hk3CeuGLWP4KlIQNaf2pIsJA86ii\nVTY9M9uDQtEe9pm4oHMQTGCt+9tyS5sqtkDjzMrdLvsTMtnDXsk+I5M0YcFw\n4awVgJ/zxqOa8vr03cb4j6pr1Wpjun7PoEy6ZrGm5RL4GyeI/0ukVhdksKTa\ne//7wCQDhfOcJwBoDIdWxt9i0NeASQXDeTPtFlPHQlCKb9CduRpXkaGKJY0C\nQ5NsT8gVKzFEjNPF03Hu9+vJVHSEBguqJ4aG5eSDFy6ioxwCAvfF/UoEw0CU\nVe1c5lzCExY/O8hQ81JwCDLPAhIwqC0m1UFvk5VHV6RtxJxh77MGBtsA2h+Q\nI3AI3x67rRtqmVUnl6pClSfMXziIbV41tkrZCVXpHKuxVROjLcRM475bvTsG\npxbFJXRPquQ11dMD91wLn/iCGeDUipPNi02+YtFFNWxmXo4OIlCEe5TYzEVE\ndmAOe0P1+SC3FuXJ3KFUdENX5R6nnukPKolHucEmygGBZAR8MolXXb56O7pW\nnWqJ\r\n=vZc1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.772cc1068.0","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/shape":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/density":"10.0.0-canary.772cc1068.0","@material/checkbox":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/elevation":"10.0.0-canary.772cc1068.0","@material/typography":"10.0.0-canary.772cc1068.0","@material/touch-target":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.772cc1068.0_1610582889407_0.155190649523695","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/chips","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55fb3cdd9317c080259297e547e943e936c1e03e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.fe13dd130.0.tgz","fileCount":83,"integrity":"sha512-/w89+WOwZFJIgHlkeUkMksbNO9LLvyawZDjYwD+GJ3KoADk98RSuiV9hqpip1CW9OUJZ7uClPhpIlfBWtZDr9A==","signatures":[{"sig":"MEUCIEvRLpFcMLifLdCu8l68AC80qgHOEJmjk8ATbGO0r0a3AiEAxybNu995SH8A5vk68BhndW2ab/9k6fBD+c0Jtc6LAIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5o1CRA9TVsSAnZWagAAfmsP/Avi8gEeZCXXyIrViUQv\nCztUK7T/zIsiKmk6EwsX7r17tvdpZ77rcirbLSXWs9wS+7G66vBt2ziP4hzP\n7y7Du8/cdbCLmtqZnsCePUPC6o/0nibOCnEKRmpg1r35rsRf9xU7V8v0cuCb\nYNHFbVUyMpsFvwXkqvt0aJPVcjTlA7zBSky7WCeKdHUZ2XfGvJUobdtqTYPF\nniMWNADXOChYvsUWs9GXukVksdYUkrkYTvEtF9Qha753bIpRNfapicXgYUCw\ndi28jsKYN3tlEOnzDMOclWbOwbVD4Kk5ZEPsJKvscHGTGumllZ57fHlti/wn\nNe2oCo0/Ke1PIvPI5vzLy5TChfqTYKJz3wuozZMOPngWkhoyN6jaHDVntumw\nqOV1NPg0ZMF9Kmddd0Ox13wIro+fUmIIkdFjeoQi1AvYPuUAL1LZQ9c1Jfb0\ndQ145SmH1wudy941IwnCJmXRoI1OfGoAkYGNhZLAkxJw+/ufmuC0fhjreeYs\nK24LEB8IQ5jt8YZDVGyZmogPK0ACnv6zUfQPkmLgoAEWtwCbVC6kZ221MjQx\nmdWaKfp3GlWjVCo32dsjZ+T47wAJHGUPoXKwY1rmczKXbICo5nWu4mEsm0O2\njNhKmLaWWQ5ILdmoXrltxinGr1kPIzo5MIDJ/nvWT4JNURgxncdnIgSOLxj6\nmI2t\r\n=THlr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fe13dd130.0","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/shape":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/density":"10.0.0-canary.fe13dd130.0","@material/checkbox":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/elevation":"10.0.0-canary.fe13dd130.0","@material/typography":"10.0.0-canary.fe13dd130.0","@material/touch-target":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.fe13dd130.0_1610586677424_0.5774130945944609","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/chips","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd921415f52ec22b5d0bc9f8204a31669a1e1cf1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.c7c5da28f.0.tgz","fileCount":83,"integrity":"sha512-zZYqUlBbhPKxBV6xQcbH9P6dJA0yO7ezKD3TgeccPQOPFbsnihl3Ro5N1TcOfnpnr569OBIvd801CTG/6LF/YA==","signatures":[{"sig":"MEUCIEawRKU8WYFhfS/anbPYaUveGyX4AGDZ4K7VgxavndKLAiEAleElqkRcRgAG9PFRFuiyQeK+sktWL40P/04L7qZcrNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/MCRA9TVsSAnZWagAAsCAP/1J6TwzJ3YnGsaEPvTb5\nF1wA8hIgMY3oEKDt7M2poAQjgok1709cIF9QUW50CICMPWEbd7e5zPrCXmlS\neZ74mLtr8T1k4sOaT9yxf9pnM4cRm0JKbzodlqkvic0lk5dI5ErxXtrF4H4J\nwqj95X4391nkquh4dGonMR8klm8jSkv3ypd8GUnyZwqMu8SnNzQZ5Hh16iTn\nAmcJcgIliI8W4ELxbAK7SoQC1qfcxBObEjDstbiFMxOMys+bJPk2PGQt9MSP\n+mxwrhoYDI2ug4C01oujS6XoSpNYXHDD6CscqamfliuTH727kFzhg4gJUNX6\nEXu64eCy978OuF3MXt+m62lo5hBw5dmBlko2bh8mi5H5r+U9hGHldFWkz3QS\n+tY8AT+r755Iu6bYk5OrXstQVOit0mIZCqEorD87aGg4ChtuhTx8BU5tEI9u\np4tCZWUpIjPe6SCkggtHvnaz9f/pDqgpONRrepNXYJHmbDzru5eBj9YgYjtx\n5kUTQH2Trj/cVOP+/RYVPWiHI56byhQDNVQO77SsVPBXOB4Mw+e3doUJf4Is\nLynXlNRgZ/JON+HpuZqrGoUuMAJ+KNILNm8oFVbdiDmYY/HqjPjEOyszy7f/\nqQiGjxCCwH30FVYVxnQOTdchz2pOVtpaG6ZDaiI0yAT26BWgkGZ/3EGUh/5s\njMhJ\r\n=q2gY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c7c5da28f.0","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/shape":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/density":"10.0.0-canary.c7c5da28f.0","@material/checkbox":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/elevation":"10.0.0-canary.c7c5da28f.0","@material/typography":"10.0.0-canary.c7c5da28f.0","@material/touch-target":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.c7c5da28f.0_1610588107998_0.08547645726759612","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/chips","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb9665b0edd050412aa1e259bec53c93a8f66c7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.b2faa116a.0.tgz","fileCount":83,"integrity":"sha512-GWnPtUbUj8nPoMFrrvuf156mDIcoLbjM15o2Q4ABJhMcajGo79+ku2YQ1HJGayQ9q6GvsBBovMcVRI3oBm+kUA==","signatures":[{"sig":"MEUCIQDZnyDOWeDLU04x4/M4cNxFKwFBi+Q80BrwGHmE7/vE6gIgdzG5Z/KwfZHaEOt3/AlifbQcefFLTQbTWS/xLzkerxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzKTCRA9TVsSAnZWagAAXS8P+QEi9ml+2w0JemWOVg7C\ndVhNCuBbfzSqMQ/sKBkm4C0ch+0gtwVA62fHJQD/raWO6shbIlBsWsFV6hoV\nO+BJXpgrO9kLijIrM8mQsdbkn+GfhIsiRgv1qJl0IWLxI6heFw1OKFWBCDih\nvUBGScaJBoHF3XC23KdHBnypTLjAXhCoFRPI/Sw+Iw5M4g7uI34j7t7WZzAC\nJy3qmIq+hABSCuo1TMUtKuSMTsLXgT6IGi0zNGNgeYMM+gjt9m14UOVueulx\nHLkYNDXx8IDAV67ojgKaKCdlC2BdyB4a+F4A+qSV2mh25MGsKfa7AnjQvAb3\n1NMaXh4GUINjQpuRWMFBBtA7mmS70iMK9q4XRHGlzf8hZAeWlz69ppQCdklb\nt0C0y6SveIE7xyEn0xRYWpUbLmedruXHnkv56QqqbrjU2cK14UIF3EvGUR0y\nSSbbTRz/4ie/AkKyoCW0jfGnYDqB+oYfZCkF9goRughGUa4Cm+WwNTCrTsBe\nU1cRV2P6pEp3HlRMs/FXN65UlGPpww91HnfdrbebXa17DJS9imkDSBpb1oNq\nc0nIL6/Ov8nR9cx599Yab1tbl+y75mRypL+g2haoem2EnHf3LbrIUiA2cG/L\ngkGe2qTjSWNvcCTTwHGrahOATw0+epVE+8rHoOqkuufptgmwqUOdT2ln4K5Z\nraVM\r\n=fPiW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b2faa116a.0","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/shape":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/density":"10.0.0-canary.b2faa116a.0","@material/checkbox":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/elevation":"10.0.0-canary.b2faa116a.0","@material/typography":"10.0.0-canary.b2faa116a.0","@material/touch-target":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.b2faa116a.0_1611084434534_0.7821097491632818","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/chips","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6242ada8b68b84d42622539bb0480d64f5a5e09a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":83,"integrity":"sha512-V8YiSiu2ubLhgc0uxVPaN/8kKMfjDFN0i7Vurz9DmkfJPk+hCWF41HTRaAYQ8Byjmu3YvTXzLXrI1rVoqZHeRg==","signatures":[{"sig":"MEUCIQD7GSzY/GiPLHjGPPQ+l7//aov6ocH5lZgjCOQKABqZtAIgJLw42OQklLw72qKwByB1KzC2UCerV7AN1LPohEAknNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2MnCRA9TVsSAnZWagAAGtYP/1FA5b6EuvNAK8xGp9k9\nqm2307yVUlso1Avj4ix7v9Mr30vRWLRqrVjmUxCr1Fmh8QX7Hs2HOhyOYekl\nFCDYqwF84A3EzcNXc9aU9Z6pj7G5cYiYqga/mKohb/mdUdACsbKfn2Gfx2Ct\nzm5/6a6HFJAWQMXynE5uCrzIJIfr5YvHHv/zmlub5wRNr7BGvF/Mal2eswgZ\njZzsAWQc8PjgNVRCM1ll5AiRxR1w86/1oOnslIUuGDo7OfCSf4D0ELMwLuu5\nXaK1Y6KY4mznghEQF6Hc1hAuASHfCDoQhEoHHVtf1Sh/BCNvVYYPhSzHc0qQ\nj5Ypbp2QG78L+opjoK57WwKKveJgbMuzycpiBL2yuRhWSlu4Ek9onyTLsysV\neUtKWGDaTm8K8hJ8ABpSz7bsSqHZfv3EhxlUb05ZscjrqClAEinKGph1PhaP\njdB0B8hw1teb21tCCqB2F+q8FVawyVQJg2Hu79lzlSiHVCsjvKjIYzPqMBBy\nkt4BO+PRSLfD3FEro7rc+qdW2BqUz+Up80hogjEl1RGhKqTUst/pEh/ZRMYt\nZP3vhw+LXkwY26qldOmyy3IjWniHLfd6gR6k47zbx0rPYls/4sM0NyT9feZM\nE2Og2ohzKyCq77LiZYBPb9Yt5P9loXk3qIUUACvMVAPnCWP+BoE6A2sbxSob\nSffp\r\n=ix1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/shape":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/density":"10.0.0-canary.0c95c9f7b.0","@material/checkbox":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"10.0.0-canary.0c95c9f7b.0","@material/typography":"10.0.0-canary.0c95c9f7b.0","@material/touch-target":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.0c95c9f7b.0_1611096871328_0.3788901139132972","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/chips","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.5268222c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"932d533bb43b26c71834e49363fc5dc1b5821828","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.5268222c4.0.tgz","fileCount":83,"integrity":"sha512-Evl63QkY+j14iUcIRsJ/UwwlmzxxuQ4EW4rrD4UhHqTHvQBnHBJ7x4y8cUVwpy4AD/q8J+Xv0DhamMQm86eO3g==","signatures":[{"sig":"MEUCIALSyiwkfVw3GnaGK3lhpuMau0HFYPxTdjWAAmbvyRuSAiEAq1Iaw5VnXMRG08p+9S2fatn05ZVjyrrn4a55zbFH1ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIJ/CRA9TVsSAnZWagAA2EUQAJIwMg43mILj4GAwaGzG\n0Z5Y96dx+ECa/2NTu16KSvGdrX30p3fobg2Xr8G/eTxL1nbtgBGq2qarXdJ7\nbv1k+SYwFxP/L0ehoe3ThK7WC7z+M7cpzgQcaJZ357Lha1r5CX0eAPJMIIpf\n6gNVxXIIiynWmjh5UB7QjEFf93LR/0Km+7Gvf/zE0qFQTMgPbDPvOedf8+8D\njEpWMPKMwighIOWbeIi96bl/sIr6xTRvjiTuqS9zFrdRs9EWvpdYO8T8BJbB\nNhSKq6fyZHcsWmXu6X8qnCRRCjh1psfN6toAhaiMh2jPNG1rH1bCqNQBY+ys\nuPJB49f4R9nczTSEIY//LZe/2AOHRTdJMgk3Bwn1VUbnS7hZFy9+w8QpEL/k\nes3jWeM+GkaKZ/uU0vyVrFNIm9H+zstLBCPAZhW4d1CP0ctyC8I3lshz/+2D\noIj95iJv5hWLzW0jbPr24LH4RWqMON16YZuDGyQi7BAs/lmNNoEeBCZ/Jgmm\n2kF+/tIdvmy8AQqbQ+zT77/rD0vSQSx9OhQvI86nLkLR2OfWQBQvP8aFvspQ\nlNeaEVwvV5D6pHZyLc6Wd/pvYtqXKte2Y92AJ0a9Jnue+R+Svf8WL/uhFgu2\npj5hzSPWUO8ixNMgzSDe9mcL9VAk9ZLh27OwjpC/nHzuTFtoAvX+zmbsSltx\nC8e2\r\n=kI3y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5268222c4.0","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/shape":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/density":"10.0.0-canary.5268222c4.0","@material/checkbox":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/elevation":"10.0.0-canary.5268222c4.0","@material/typography":"10.0.0-canary.5268222c4.0","@material/touch-target":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.5268222c4.0_1611170430420_0.9163898056819817","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/chips","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbbbbac9cceaa73d8db1bb25415543e7dd98e4e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.2ed2d829b.0.tgz","fileCount":83,"integrity":"sha512-jACSyAK/TWANrssgz/TfrsA6jTBgBKqObL0zngCG+2mKVzw2CXHhFtLVZpkTTmB8MiEjwpk+AiW+9IaCwdH5IQ==","signatures":[{"sig":"MEUCIBpDBef+JE6AdaedtpXveOmPMXbVfyfpq+Q4p3boOQpKAiEAgPZqaehZtQQRJq4OjYv0mesV9R6Wn064D2w8SeIbKO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLf7CRA9TVsSAnZWagAA340P/iFtynf7bvlNoTb+1SzT\nwi5OtUJsJ3aR8nqmQB8WKx76eds4TRevvaoa+fbuWGf5tVl7WbPs8TNkY3+f\neAebTvVYjN7k8zupOgjAopJ2KYs6qjQjWWSse2UGtAYhd44TGQLWjI+0pZQT\nydV21av97j7ywXH0qKvk75J2uJukWcZOLRiZcoiue/6YRu0uiTHIn0va3DEN\nlHubOJg/qhIK7eWSHkKdu3cYITNgxQ04r/BB37p05UT+S6HxmPTQzBvOE54F\nt5jGQ3YWgT/VkJKU1N8ezmZTs3ia6Vq720Ng8GsKsNYOt/9qIdXZVCkuiCy5\n4nOFZ3CKlPfdLCuauT0+eBHrJS/CBp2JNXjxn59CGeR34oZcJTeetpkYRehU\nGBpNCNhk53b2EN6q6wtRpVT1o++L1PiITsoA8x6KA7VsJQu35fl8izNRCopt\n7YCL+iVdqcxkW5NsKJ/OsesosNEiZuG8fjz1TgMN9Q1I6SCpvSUWrf1wkxBa\nFIF/OyVbnZP/+QWtPU/Jy/EepKiCWJzOQnC/GmBnmQNFll4c6WKD9YxelscB\nDn9XexQVGNl7VPMcvaY5ODonv9os2FW0+C9GDN5dJf3/X0qt2LzLuE2lGDBb\nkyHu+63yM6fiXx0aso1ZwJil3K15H1RMzT6Os0FwRtLdlNMu/+uYgm8a7U/E\njRe5\r\n=jpx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2ed2d829b.0","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/shape":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/density":"10.0.0-canary.2ed2d829b.0","@material/checkbox":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/elevation":"10.0.0-canary.2ed2d829b.0","@material/typography":"10.0.0-canary.2ed2d829b.0","@material/touch-target":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.2ed2d829b.0_1611184123342_0.7229897065783821","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/chips","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16c506266267c4dbdf35263fa139929cbcc4975a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.df00c2b30.0.tgz","fileCount":83,"integrity":"sha512-JQnUHGNcdzDrA3TQWOB/8JY/iE+hZsNNCp8Aeb+V9WCuJ9jyrEGKCoJ6NTEp7qc3UkjIm6qm/OQ/TLwXxlSrOw==","signatures":[{"sig":"MEYCIQCbAU1LATv9pWkaUTwaXUFVvkd+sVceOmJfHuR573nh1gIhANxkq0EfNtN90ATg0tpCf5pCLejl26bAB1VQV9mIseED","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdw9CRA9TVsSAnZWagAAW4gP/24yDRD8mk6aOnYQzbPC\nWbkUXNiG+9yC+Lw3InNhOSI4UMlmtqCYPppf3WJfhbiqSZHMAGs8o7KSNWgf\nkGwtBcPVMoYGsQen5JuZHOoS6QdLDkmj30O8a3aSPpLEvKHTnphM8L+WpKG2\n2bfIBJIYVXWzIZGHBYXDiGDGoyjvzPJV64RtiGJH9NraEzMjlM6bvkZ1+acC\nquh9zqa8W8GymaAUBlRTZGNgNujJBIaYMY4fB+e/PNc0gGBLtX2i6sTxZDUm\nBqg+6dY+iHrOCuS19wh/4maTEB+9RjMhvEjoo94dLqB/IlA9C75UTEy9lGPG\nv+XNmxcTP5aG0T21cWOa7+5m+hch44VkghTORDEOYRVMfGW0O8DeoDznfFBe\nXiyJyx7GopTOs5x/t5ehRv7kji9yTSyPyZPWB0r3fAx+Jk672xNrSiY58HPk\n7167NNwaVqVzEcWg03zBnvwciJQiep7DROtHR36AJVPAXCXSaIaj62GnlyhE\n37AVAfwo7a06AA33PbAs76zg+8hNutHTmehLR2DlWBouIVPNabD4MwNf+qVm\nPcc/mSehiOzXjddUpqHtD0QZFrDQEqMoYRNtRtltgAwEgb8o2wRjEj/sRxvb\nbf+RLE89ZF6ftltL1kA1ye2aUqwVDu7+UqGYERp7UZ0+zGAOQAs56wniBWC2\nvstF\r\n=FCxN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.df00c2b30.0","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/shape":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/density":"10.0.0-canary.df00c2b30.0","@material/checkbox":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/elevation":"10.0.0-canary.df00c2b30.0","@material/typography":"10.0.0-canary.df00c2b30.0","@material/touch-target":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.df00c2b30.0_1611258941167_0.5560438277997568","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/chips","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe677af7e69c428cb585ddf11cd819a5ebbb9aae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.fd61b0476.0.tgz","fileCount":83,"integrity":"sha512-qpT5t6dhDbGc4GihImFFAClGaWLy1iz2Aen0m+i7FDmSKTEVuapQd/2MnEJKg6o4MbUix9UHxf3N7iu0wE6fdw==","signatures":[{"sig":"MEUCIGpjNJ+c8jMeqeMOa2+kZnWmMk3qxlpwqf/n4utIQApIAiEAnyw5zRo9cenr6JpZKs5XCNO53NHIHVYW8TU/0A30YxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+qCRA9TVsSAnZWagAAoWoP/AiVqPkPMU4O2bQSzwIA\ndbboZjxRHJkVI+TtAXdOyuwBobYZA0uhXbHcBauIoKEihjAYRlF4W8hiTXdf\nH4XzwIF/DKtD2DyYQ2KiregyvApLeaaZi5Anohw8inGVzlet4sP2YIkK4t3e\ncV9s1hE4XMs6JUwtn4BjaEPKOQRduCQX+2UD8m0rBJK0PqtTRprntam+au2G\ny/uFDX+nHghB6CLs0t8p8PspKYr7hlangrFnWtiehwTYwA9bCUEKsdp2KOXX\n98hmwoFgwGiV4AuJrh7xpntaxXXyJJH8fh5tVmdRTTI4v9n+9eV5oKH6Wtrq\nBmES01rVFu/L4lMRB6FkpJcdQC7mqbDTETn1PkLJC2wR7WKNccUgJIV56ejx\n91fS2fefDrGeAkaoaqhXt1YpuM77Mri5iwV2n3eZ79SOrYBquf9KPhhK6raQ\ngaYwirSMnPTmGJrOdJpuHOTk9s7JNHYPDTbu/QajjsUCFL3EVt1tG3IvWAQT\nl2+doM6gaoYVPESMnKT9MQNaAfBL1G6U3DFJRza41XhXgHoGwdz+kFWMJShJ\nCczATJIhyK9XAg3MxN8X5CKDhrB61MsqBQKxsn/r/wSk2CwYnk19TSU4p3Zy\niqroqvkRd1GKNca/wl23sjynjhl9uKNAvg/HL+B+YYHdonVPDFS548J7fVOc\nmhkf\r\n=HCIx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fd61b0476.0","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/shape":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/density":"10.0.0-canary.fd61b0476.0","@material/checkbox":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/elevation":"10.0.0-canary.fd61b0476.0","@material/typography":"10.0.0-canary.fd61b0476.0","@material/touch-target":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.fd61b0476.0_1611259817498_0.8264278766172866","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/chips","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61cd450130e3839eaa7ba5aa7a0d0aee2c8e362","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.3fb3a0265.0.tgz","fileCount":83,"integrity":"sha512-jv+rLiV9+IcM2t6oecPpV5B1OcbU47ALalAL8wDoSvTmolFsQ7qkHjxbeqK/pD7l5CTdmMVcewqC3G5/hgG09Q==","signatures":[{"sig":"MEUCIQD7jYzjFShZsVrgFFOPwRyQ0ho/Zf4avCPHcBWynp9q2wIgJaSe9XGLd0jIxDcld2AnP21DKWbWkacxuprWEGTX8wE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChbMCRA9TVsSAnZWagAA8L4P/1DFa9c3Yh1J59wYWm2C\n4Z7Ok/gclk9jFfTxMtbiLdRJpUmVnlZLtLS5D4LNal1AOyDDMS2ga0fF45Z+\nvlYXyd06MO6sS7tFkbJttHFn/XjQz9fjKyb3pIE1YUPcWXxCZZVZZ94rY75b\n/XQlDbJPZLUhKq+QOPDYWj+y3WbMoRX+Y/IMsVHnid78YPKi1XVFIJAIgRyV\nxAakbHMkx2eyGamLHunHkhgStMxKkVIj0/PwawWChacg223yxxLd9wvX0BMz\nTcyu6TQsSeLhNtT3KgNd7N2Uev0y7z49H8PS6qA9Rc1mrYfQQyuhh4PPlEFc\n4sVFBiIHJkAVMcps5tAnxtdxKxt40yPDpWr1ejh2Uiu2+OIKf3jqHzUKRnrm\nU/otv2U1Q6//uqB2NqGeIVIvDQm2nM1hvfdt50oeKA5So8GYxx99lV1541Lb\nkq6E7MjEdPOEuwHJaHugVTWP9pV8iOi0PCKzScDUMm+/lsjUdn8l6DQEXKAe\nsBtj6b06AsCWj+ADhfKF8ULt3GoTDFqYh8+OTQ6SQDElECyfSNRXvpJKa1xM\nU+srpqIxSz6vOv/MfN1gZVY7Ft3srWvqAnaeso4m7KAEYh9x5KYahNurmpdP\nJPAUWhSUoAgVRnuOBC0C9HXBYV2A76NfjvVcy/adxfvYn+/O1A2Llj6xiKNu\nAs6y\r\n=QTgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3fb3a0265.0","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/shape":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/density":"10.0.0-canary.3fb3a0265.0","@material/checkbox":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/elevation":"10.0.0-canary.3fb3a0265.0","@material/typography":"10.0.0-canary.3fb3a0265.0","@material/touch-target":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.3fb3a0265.0_1611273931562_0.47720187665853264","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/chips","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.07deaec27.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24e12b01504efcc8a901075eb09b94dda243a94b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.07deaec27.0.tgz","fileCount":83,"integrity":"sha512-Fok5yZ+ZPhdfsNgFGuM6q8f9YorPf9ZVfvyNr1nhL3id1ttLipIyRy3RCVJMEXXpTca+izIKE6XLIMlUwo6Ulw==","signatures":[{"sig":"MEYCIQD7VmQyGpMeBB75Z+oAgHalWfftXF+iXjBPdzAUG/7LAAIhALWct6M2MKxUc/Coi8rfIE023vedWfxRXheKkt54SOEo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwPiCRA9TVsSAnZWagAA8WsP/3tqF6gYl0xkrmRpU5CM\nq26Ns2OInQT//X6o4pX5ywx4bSQedYPDyRcMEui14z4qmP21D4V+mbHvU41T\n3mfQILn9zju160g5wnDZo8rELtgS2NV8jvMKdmDGSV8DsBLrQr/XlZBBm71S\nyliL0FPjJzaTkIKtQlMsxLtO1LdApGO2VSg3b2Na9JMsBCMNm+yaKCfjQ7G8\nXUDIxZES55cfAwHzPqXWUF9Zo9LhPa+0IPQaockjyW2huL9zvcsZpJIVk//Y\nUzz3IB2ir5biGAh1gaMOfujjr7hhvHmd5PaGdqd9UgKY6Az9g9UCTvi+YVe9\nwThn7hItL5Z3anLIVJfyziKQGDAXbfHyfgj3quWCW/wgeORd3wbZc7WKN+OW\nFJXEE9JwrcRDtvMNns8b70YPMiRoASsM+5wsvhcGTsTjlYkdDEdJPvczkVGZ\npHXQ6ZxAG6R9/mL+vRculYAcWc+pQUrDu9geFgFHZUp9ox1JaZ2eeQ6QZw5K\nNbVDaN084K0Y6cmkZB53moEVovnEfQifdj62UcIgQck23BBY4+ceZkcZAk/h\ni8bV8hBDslhdLIg20TnzDwy5QlxiPoy5K8+8LgdUpMq+k6kNwVisXK80Y5H8\nsOZ1851gXEIL1w2fOemZjHzDSkB+z9pV2pbm99tIF5sbF4635iqHQXK3lYRX\nGFhA\r\n=gOtG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.07deaec27.0","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/shape":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/density":"10.0.0-canary.07deaec27.0","@material/checkbox":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/elevation":"10.0.0-canary.07deaec27.0","@material/typography":"10.0.0-canary.07deaec27.0","@material/touch-target":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.07deaec27.0_1611334625990_0.9825672599145048","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/chips","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c66dc07682f768c833dc49d0ebcc4f11db2845f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.d2959b16c.0.tgz","fileCount":83,"integrity":"sha512-CRhfvTlhD3+Z2SnL+KH4UfuzJQLcd2QF7mSnYqsrA+mxjerH97wQQRh9v45ROKTDvpK5l3neguOkhzQ90a+hPQ==","signatures":[{"sig":"MEUCIFAbKg981PkXELKsQVGjS/6DsWISPsvfZjVkzPrknN3JAiEAurn3/VpVOm2ZlgO3g456SV0JcPDzXpk241ns/KVYR8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7/CRA9TVsSAnZWagAA44UQAILtvjG3lLKfbA7rovFM\njQfSP4z1JNmJ9gmEaeiD+Jfgey+TL8U3Ydk65AdAMDBSjBeBXZBf0I7YTdEb\niDeaBfkuaZ1SyWwZecWSHh4d1+m37T6vT+jWdS1Ok/034x4Xr3uMGpYHewNL\nWbdEhEGdN1XLOgZ4XSs/tcFrzmNtjxOcerGTnzHDAVuC1WU4LfpdQpxnAFfg\nbFtxFI2J3QUtz9eHDKvkAqaWnPVly59aAA1pMl4HoduzuXLdLi4QTRdxRQGH\nxJ31TlOJVee0GKArObZjBjLv1ZL2mauQFK9u82gldoVLxxuNL+nCMRD8jcyb\nZw9v5hdxPK2k1pHrsDqQGeJGiEiyu2pLcVUuB5l0cnNfJfN7RYkcAFB9B2Uf\nKDKhPg9gfVMFnMnPGLLbot1ie3tdtqoRpoj+zKYWDa66moAwz1rcpXG/K8V8\nlT7GV5eUjB71wFgXuQJGe/UUNkU69haU1rt+wqLd1MDxf8IVH3q8ueH0JUQx\n4SBrNkwOcW+YBDT7x8K+8Ki39rgBUHUOOqsXhN7cVRdDuP5/wOqW3kCME2fX\nJ8lPk9G1gCDNOtZbFSK3BBHZ1xCGdssmOWUgTgyuyGaJxa26R8Jq2QqpefUU\nCL/Sw6a6iHCkfcI4a8/e0eglBSc3vhgMr3plIeIjJ30cc2o3/2cOTGt9cNVI\nhBU4\r\n=t9P3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d2959b16c.0","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/shape":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/density":"10.0.0-canary.d2959b16c.0","@material/checkbox":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/elevation":"10.0.0-canary.d2959b16c.0","@material/typography":"10.0.0-canary.d2959b16c.0","@material/touch-target":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.d2959b16c.0_1611341566820_0.1751480745272498","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/chips","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad0033f773c16448b66e1649767ab2e310ed3db3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":83,"integrity":"sha512-OAULNK0iNcTa52cKoCfAXCdzOOawB6Y9t4XG22ZweC7jY5oz1AEBbkWcsIbPqVudA+xJVoj0EVSkqPxICqSdng==","signatures":[{"sig":"MEYCIQDYB5AdVWWzLr1gM9J7PeAo6KWYTkSQu4Xo2KU72G5p8gIhAIChv6QEHdB1d9xiZRVelDI7wSFSG8N+siBUh/28GmxP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1caCRA9TVsSAnZWagAA92QP/iCM1dbg36BIAcB3J6IS\n3bq5ioHpZ03xNr0vE515fYGfW4prj2O4YPGCxu9Xc6yoBNp1CXyBU3sRihG2\nXFAg0c1tw3eBeBXgCBXRqx3wr7+OvrDTv92BxS5077cZS9vPNQIkuOQou/ta\nVA0ZTxRiMEAQTaR5vtxlV08fUTGZZn3JupTiLgIHcBjhRQp7YCbJYPfdqBsB\nFIA5Q8C25DslVNMRNvz7sjsSa8pGSKvf7QD0EvKWutrXhHYL+MLA+LJh/d4L\nx6rraA60u3K0r5qFBNGVTT6Ybsjrnq0BisjmET4M9G0wBNFsZzbflUA0slaa\nDgbWn/8bccL9dEkO8hP1St4JR3SQOENFPs29TQTyV2aVyJOGGE4OtOPjeQR/\nRe7bzkhBd+SDqfLIbkc8Ps3YXe0ohQ07+gUeOuxNErHzcxi670Keqbkq6o8q\nsStYceYqXrvXgULw3bkpvcuESTi9ZguhYmlYzrt+g7/UhZaiOi1FuxMOcErI\noAC0g3vCiTR8mqxNDhLikKp4ZPHlONufbMFpBso44fecbdQB9nqPTzTQNTJD\n0Jhk4VMcoeR/voTdrkvRicYlsJmFW785HpYTh1gU3jnvSnmiQOSM41ts+uwk\nLMCuJUDRUgZuYnbfrmplQMp2a7mpea+yl7AXspFqdc68ktLJq/ygq9A0du2D\n2iRI\r\n=dthf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/shape":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/density":"10.0.0-canary.75f3bfe7c.0","@material/checkbox":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"10.0.0-canary.75f3bfe7c.0","@material/typography":"10.0.0-canary.75f3bfe7c.0","@material/touch-target":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.75f3bfe7c.0_1611355929483_0.5631475044692857","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/chips","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82a76311abc27591363fb33567315701965a933c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":83,"integrity":"sha512-p/S0oxUFZObjyerdA+Fh6jlHrdlaGDfSUobVrCB1/MjvrUQUoC3yZhZ9+hSaN34inzD645hbJ7C07gnpYV/kbg==","signatures":[{"sig":"MEUCIBcQHvjBw4bZo87x3NMjfM24lGTj2XFqJOANGoWtNsybAiEAmsBje7YDQIQWnfohUw1EcVH/0sj5xl1d1BuzofnpU9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2F+CRA9TVsSAnZWagAAG40P/1fiokywIGQSIjXwWCLJ\nbdayCZY6ZJDN5+ETFew1qewJ1cFdhfAkcSyMQjXqOcZG3Hky5riwgz2+L+Ua\n1xlK224ZGQgXtGouD3ZRezkbCLp6lMtPnvIkN4KHmScFhhuPm/1LVIQrybiv\nr8sBu35iTD+BwYaLissWK4faHdkKBkRVrbYghqA+aHJRA/C397fqT7mqd68O\nHx0iOwg4vVjCG+4/LBEm9tQYB8XjBYGifsBWnQE6SVjj6QZ0GplDZT+I9Z+h\nYB0sF8IysskgrLgFCgZ7YYZcpG7HnBrYIDX3k9shMIwDZ4SJtcHuWbP3wpJq\n3yyz5jE2y7aC56twlN9V6idWlxys3C08lWlRfbx/QUZUjZTbzph++rPoybJ0\np+xqbm5XPbDOM0eiM1gjY4N6FVgkr81ecB/9RKBt2YWgoZC/v1ooSR4uelbl\nRgGJYVCYh4EwlYxqCP3Ah7Hxe6HuL4fjkbvjBxxBwsN+9zEvbywt4QDx8MZr\nXg7jn5uRXcdO+Oscu9TksgQYwKR9p+ygSJzfMYfTtfvmGhnNtPCoECgu7sHX\nnY8Z3212iqYCdaxl8KtcPdup43quQJao8trJby4xfWAEDv6TDYmSddFUA+Bg\nNxyHcCERVJiheWLZmBPcNQVqe8U7aZ43vgYHcHwIwuWutgqxM6nUIWjc1/tS\nXUge\r\n=G+0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/shape":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/density":"10.0.0-canary.b9adb7a0f.0","@material/checkbox":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"10.0.0-canary.b9adb7a0f.0","@material/typography":"10.0.0-canary.b9adb7a0f.0","@material/touch-target":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.b9adb7a0f.0_1611358589633_0.6963032350881384","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/chips","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a8a79f0c82dbbb1cdb4764105c9c3c3ebcab147","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.d29ec2862.0.tgz","fileCount":83,"integrity":"sha512-8sko6t5TeIMJ//lPkUAdOVGcb1rW6oMBrtuEkKnxPPT0xjjbCxThXc0yKzYSQNb9R/s1oD6Q6UawDzsazZ2qDQ==","signatures":[{"sig":"MEYCIQDvwt1Tw97w0ta+zJid9PuLGDicDzvRjZmJq9acEecuVAIhAOPHXWghJs7ZLqAP7ynDRxsPGP4l+H/5V9P5oDGrz77p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvDOCRA9TVsSAnZWagAAvc4P/18xFPsxxeKbEmc2bLYv\nj8LdU7ohj9d0ksWVBR9LWqPOiUXLk4Lbvh1xs5+ERt9uk9YG69H6k4usyKxL\nmygqWwKJFUtvkYERsZEnUitZyGF3DeSXV5xh/JwQaJCAcayQVtWCHOVRdgR3\nRhhtl0G3vaHSj+YncCHagcqUeZFWLK86b1bMBao2YgdrOYwTSXxCOkGhu2h+\nMIYMFbKthyV8zEWYGnUzLE9q2qEw1MAXgellzmVznq0PTyR+k3moskLrOoNF\ncQRMtiA8W7kf4VFmfC+oiul48IO537WJ5J2vc+yCg2uFLspaJt5SD8Jr1s3X\n9AVanMzWbt1sUs96QxQd1qmfXLQ9EzuImtdj285nNmUgxQl4LpPEiYAXv9Gu\nZPyZuvmS+vbJpcoSEc5iUHIwr9LfvOOQJlltZQpnqpnkVYFaOx+03EFRfBjz\nzKFv7KvlQZWe7LsQ3cNonSJBwEARZeZY9LWh94yUau5lY9i6CNTY+/v2Mi6r\nLpAoayFoAui3/BvPqsxM/NhUWZz8Oo4uTqXzv3MejCUKynogL/G2yqQEbIfu\nfJOTig3pqpDnc22o+vvUuTbE4E4uUHEi2t4BfXjGxWFfDzr10CKdWHjU7ddP\nRQOhgLt7zLG6KV578KoUwx7vTNWBzqLnMLEK6Vgfy9XdlGQx84nqSJwuvur7\nnDwy\r\n=Kwfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d29ec2862.0","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/shape":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/density":"10.0.0-canary.d29ec2862.0","@material/checkbox":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/elevation":"10.0.0-canary.d29ec2862.0","@material/typography":"10.0.0-canary.d29ec2862.0","@material/touch-target":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.d29ec2862.0_1611591885892_0.5186892409768165","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/chips","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.96be07c68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89efa74f53eca7e207a8902e87bfe7461fd1b9d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.96be07c68.0.tgz","fileCount":83,"integrity":"sha512-MiO/S1NEghVDhaps7Cd5wVFeiEFGtiLkacWq9jfNIpGp2nhoYRY0jtbj9wjNGlwW0Hae+B68toR4BhV4SPPohw==","signatures":[{"sig":"MEUCICg3gOlCBKmq7DSg4q6NBafek5psaHmdYKD2jDjpZkbdAiEAiCcsqi+xMRfE0xYOj9ar4gbT2iptguLhyQHHClYSIvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD14MCRA9TVsSAnZWagAAwrIQAJ4HJGBvBLVCv8wAmdOW\nyJRmuMJVw+bguLkmuX4PwtxI/z/Dbi4rcqS+nNnEgZqfYpjzhX9i082VTXA+\nlVLxXTL1kr7QswM/8IJBwmhw8tcthDMCYfrXqmAOsyEtlnqsqKEFe7WXRw9k\n+VXhuBcuH+mgaefJLzVu3vDQMMyuxEpYOZ2RoVoUBNnbeDds6OAqhKhq+eRB\nKKeTO8UDHbLZi9az55rcxlzm3dItVdn42qSVZ9KlBuruUj70QVj3vlD8EB0g\nxAa/kZdkbaV73HB+6H0ETDONuoPkxG6vgev6lr3JmyZkuNN022cb/JFwC21G\nbHATzzZfoIR7Gd8/QwpDB/LoqNcLaBn9ZfrCGJKO7NuZPUMc+gOVzEwjqwfT\nF5c00glxtEdVqxBvEvfWSMs4/PhHyNbZ351g++rJt1OXW9A4b6Jpt38DLfV6\nHU42dkaVkXDywC9rfxW5E3ZYL2fJEC5m9llRQRthQOSrFhK3Gj7RX2IuVc1P\nUdVT9l3iGUFF02BiqAtvrKDTgx6nXJFjhluZexFaAj4L0qLum8n4nXCK2rHv\nWjZYd3wfOZHYH1Qs5QVqyVM3USisKiE6pxCHNz86wlzOiuCmwlGigJwTrjXu\n02s/0PAFb04/Ct+6abf5RTrbdNwA8xLJLO0GCBkeu2buJNezqhPeJ9IFrlno\nxqD8\r\n=2VyY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96be07c68.0","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/shape":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/density":"10.0.0-canary.96be07c68.0","@material/checkbox":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/elevation":"10.0.0-canary.96be07c68.0","@material/typography":"10.0.0-canary.96be07c68.0","@material/touch-target":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.96be07c68.0_1611619852252_0.9743653230028122","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/chips","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.e383944e9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc0ff0013085b011ce96d7e28131d5df0e5172e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.e383944e9.0.tgz","fileCount":83,"integrity":"sha512-X326sWzmD6PtoTZaspX0R9rZR2Y8J7cw4bV7u3l0l7AFdKPLXm1+F9HwZndf/uirGDEjlqttnxLzbzm1AsNHyw==","signatures":[{"sig":"MEQCIAvsTsQkgKktT8PHKJff2IXQt+5LxerDpw3ym3JMCEn1AiBxaVMWB7Rp81pezwokYn2rFT237ZmvIAbBX0i+v9qNiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3RCCRA9TVsSAnZWagAAsgUQAJVKwPNRbt3fTu21m209\nOrAmSKJgtfIJIICPAErO6t76Wp1dGCE78Kx0sqwSb6ChO65P7GkaUgwkocN8\nF3lLprZrkU3s8vBJQakaljqwnHWTrXK5jKz9KVU4+7AH5MaC/qH2QzHmQrMn\n1rHag5heaQYyuN8QSy4L4luBgcabx3v/k1jG6qTkzs2kBV+fwNcE67ZhXHVV\n/tRXEIVofTuMxKnEF7zcwat518h4uGvylmjNr7EXuzdICf7qtv4D3aa/WHe0\ncMPWlRVPEFtGu889fG15OzNIIzYRgzMf3vVq3vb8X6rg3MsQBHQV86t0JAlM\ndZU85m055RwiX5y1uydwO8J/PZ3ETp8+DBZ3D1doqsgiCBx41wnDU7x1al6r\nIZbOEkRn6Jdbpw5848Ggf1Dz3489FGAW7bQXMQGVcz4DVXcOExlEAx/Z8OmI\nvJtKfcywoxOepa+guTZtr1N+EimSMAdsNXWRqMgurKqBQYFQ2wRslrg4EQEv\npzEcRQGQNGwddqL+ArijM8uAlkdwLsuYtPK1zssd+WvZyYWQt2mEsckd2Uyn\nqbF+nBw4px7mtA7tY+RVhLUIAHXA3a1483LvBCq6oqa0NJt76jUnzDR1x3tF\noB4243XFcn4gifvkYIN0fF7M/QpktZustgt5aOd/jmK0YDMhos2YC52wQHsy\nTxDv\r\n=B7Wz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e383944e9.0","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/shape":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/density":"10.0.0-canary.e383944e9.0","@material/checkbox":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/elevation":"10.0.0-canary.e383944e9.0","@material/typography":"10.0.0-canary.e383944e9.0","@material/touch-target":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.e383944e9.0_1611625538251_0.3292951888365314","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/chips","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.623af861e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c19616d3e776eba7c7502c3344899a443eb669","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.623af861e.0.tgz","fileCount":83,"integrity":"sha512-oYJC4fpYgOvFKCEQov9+c7AiTxtqpT8x0CPn10mF04w5cnJM0vCk1fd+kkAMS2+wdMDm/tPv35JLyUk6MEvzUQ==","signatures":[{"sig":"MEUCIE0lWMIe4rvXNH67PY/9mUZ6jjKK3odvcbGHLS38v1ApAiEAqEYDAPyel0Q7tVfDGHRd3s8WxLnu79nyov9vX/ZaEF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BxCRA9TVsSAnZWagAAdkMP/2JgoUb1cfMmyszUuvjt\nQP+DafGAsth5i2LoX2jjAAPYnOBftg9TuDiC57LXkV8dfZtKCaXj2XXqSvM+\nLiO128BlZKEXwRI3z0X7mMlQN+9PpDsKgFu0heCKwG6iKx9faw0lNl77znM2\n6+CQAsK10fvLboprKrN4u3Gbixj680K/Oxs+tOx16MNXFq1IfNbFoMSjihW4\n92uL7XtPy+rAVdal9JvipPjE2E9xPD0xZ4olJ5PdYx9iiOISwmhAftXhyE2a\npvr7+opC4Yr0hPv4i1LlPaDMn/d4dxQhsqnJuscVaG8bDpdhB60MfQLb56F8\nBZoHVDljWKH3dud+opZBPrPSQfXhMnbJLucRhAS2nueB58EI4F+sN5Z8CuhJ\ny9yq+JiEdw3aYls0BwLAEFnfnidelkWRcD5qpeRz7kXltBpTPMUF+BbhPT5i\nfBeIPfpWZEACbOcquoUBP5blepBlrLSaYhwCe34Z5hKKdpuoqHlQPIc6/Psi\nAu0f0cVyY0idp5SONr9jm0QI27Wg4pxHBxv2gNaYNpI92PikxhpbDW/It1FL\nkCijAfDxIRCNe1+/Y2pNYR8EM1fUsYijZW4RpI12PTkxfsy2Uf9LdKDOsoQS\nhvHLbPldM7fxo2YNFaNvh37t4hcJtORqz8oWW2Wyj1BtV95m+twViAStn+zR\n6b1Z\r\n=ei3f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.623af861e.0","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/shape":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/density":"10.0.0-canary.623af861e.0","@material/checkbox":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/elevation":"10.0.0-canary.623af861e.0","@material/typography":"10.0.0-canary.623af861e.0","@material/touch-target":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.623af861e.0_1611632753156_0.29033085463735064","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/chips","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffd9e21a41dda534b2df9d1d61f217abdb7b6a45","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.6863fd43a.0.tgz","fileCount":83,"integrity":"sha512-900z1d0wsaG8ptlt5Xtsdo2I4Xx1+1q478hMIM3ICQOXAEXho8p5EhKAI9aQb+htrt6jBuXqqLe7UiWbijNaIg==","signatures":[{"sig":"MEQCIFGseSbF0b6XdaM0qjZ3UmaiC0CZw6W4W9lpSVFzx0bUAiAqDnRtslZOFUUdcE+4Ld48wk44oHhIb0Dl0gEV0vNq4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIrrCRA9TVsSAnZWagAA7bgP/2emUH9cr6afQPKmGDAN\nIU9WROE+AY1JeK/3mhKs0YWq/bJ03s9PobdKmqS30cu6Nn4oW3+argoDrkhi\nYg2fEFMYYucfqanyJtYvcv1v3HWegRRyu6bdLF6E8igX+aeqJaKQ911UwwGk\nBdLodzguDSUVbnJzc5xW5bWiCoVs+mhxYb2xu757/9iBIsX1nQbTD5bpCIQB\n7wtmFVM+191Uog3ll/NqzaNundklyLjGWuCpFDzHU8IJLDiyrMs4YOFQhUui\nbL56oS4IfQU1ENssvmDaWj1sC03kW1O20UDMRyZ7CM5XdW5Yjd2GVoFuaAqz\nbAhgAJ2uGxghc9iZ8lWf4NQ7wxSI0L2VggxoYPaVp7jvZ6jYzuwfpJkl/VLM\nf6GFeMUz8j+s6/QVXYjxyj14QBeMlfiz6Qt3nW0Lzmj5l3+JCuUkXkPkny9N\nf2IyiyQOIkw+qg1qzwitXuJPMz0Dm821DseXmuh1BnaytN+wIl7+c1NSw/bq\nVCVhrSGaSHznHR2HDz67zFCXxd45X1qRtN2xcnMQQXNmyWVElrLX5xTeo5N/\n6ISQ/EzTQssboYiQPybpFP9NADXFpiwAzyiCl/R+kPGeHmU52oRKqPGANkcO\nAKqcOIFbKB0pLZaWjv+iWl1KK4HXWvjAZwvp0wFfxVTCbXDpDfJjwwG/TQ1h\nMuUT\r\n=zu1C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6863fd43a.0","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/shape":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/density":"10.0.0-canary.6863fd43a.0","@material/checkbox":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/elevation":"10.0.0-canary.6863fd43a.0","@material/typography":"10.0.0-canary.6863fd43a.0","@material/touch-target":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.6863fd43a.0_1611696874567_0.3170931885415913","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/chips","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f01a6d932a0e1064e8e44848d0c948db261d648e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.ea55b87ca.0.tgz","fileCount":83,"integrity":"sha512-BAWbrcudogFMFi/+bpOYecC8DXJ5S+XfF/N728aAvJRyCV9Cufc57KCmLGS9GvMBnUs6A0fUkLwGIKF/wgy0gQ==","signatures":[{"sig":"MEQCIF5bvRLYQdmknnGOjkdNzKeMtCimYfJQNVtm3JUZThihAiBicbb6ghta7gTbXbsmVyM0Wt693m2fjPR47ygY0LBvyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKnpCRA9TVsSAnZWagAAVP0P/A0bcgMoGrBWtbhAuUXy\nTBlYWl39XVL9OYWMj6EF4o9ghsyshlq0I07vZNYz7mbx2//AcSCS2CyBgZAf\nWsuxc3LKaRBBuwdY0HSVZWk0U2gGStg5B/qesVWD1PYKc0J1LqnAwm4k1thD\nvleySKFpMeFAVgfOIf+7OT8UsfgQBBodTHaz0SCnRMBfS+aidBKJyEwBVsH0\nVBjmzVQ9f21DQafu9XtHcjMasBBsRUTOUyD90Jb1RBW3N0MJ383cPKMvfATV\npT1rSEK+cf/dFz4AgdrOA6m6Rha24LUJMMj7j7TbX1NOQqFr1GPzZhAiNxrN\nO8Sw8ZqyX/bei6EsN2k7Ot2JT9RmIksgfLQ7j7baxMS+LKwAE9ATp0S7dnpc\n1IJvFYyo6n2YbUEj6S4lk6E/pf3TL8HlSWw3/ICfeFw90dpf5N10uIH7fYLb\n+r+noqdsQ8mjGEp9/B/SPyQGtzTwKkOBwNnxh2S0cot7go2B874FKDrK7hVK\nJRVo90gGKunDNV1zsvCM9pBvd1lk58v/NjqJBLDgSjt00du7JvWinma1uQBj\n5iPgQs9OiISkWvDiXqtld41pG7TRZoyxkSW9LeIzhpCPlHhOz33Ptwk3d4kN\n78owJxF05gKLhTKJfd1Hac4iWqrVU9bUHk97JYzn7HGxEF/4XHhBm9Yf1ZGr\nJzsI\r\n=UpDW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.ea55b87ca.0","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/shape":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/density":"10.0.0-canary.ea55b87ca.0","@material/checkbox":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/elevation":"10.0.0-canary.ea55b87ca.0","@material/typography":"10.0.0-canary.ea55b87ca.0","@material/touch-target":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.ea55b87ca.0_1611704809195_0.8967209709534187","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/chips","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f39616f809ab3a519512a2fa7b9b029c8eac26b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.e902ff05f.0.tgz","fileCount":83,"integrity":"sha512-A6+LR6S97wbyN/42bmCTrnEpmLDPWwYwvfA6hYS58MSRLkPzTDTZlYfsP7LOlUjbJnoLGNHJBbzRCwNELi+fTA==","signatures":[{"sig":"MEQCIFpDtjlzR57DPN8pjByi9QbstBY10UGBXZ7yxjx+l7qVAiACltjnZNUmaYPptvPmWPRFRKJDX3roB0IR/TB67Mj9xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK4mCRA9TVsSAnZWagAAFrMP/0WiBF9SGNINtcPZrW54\nRXfAh1YE4WKPydvVB4inhBecYLNRuRGEkzeZfNmORXrVC1WT0t5dyr7RmYkt\nGSv6XOnu1j/NhnH54tJimf1c+Oli3BBP/L2Bbr8bsd2+pgigK2aBPsixVt2x\nZwaW1zKZ+0vZDH5k+DR04Pq78ibDbLnwiC8ivIFiWlkeEg/VhTvyJDbxPb/k\nKu2bROb+ONyzOZasthJ256Ak9mUwrMJzz8yqnKCHJ13xWdWi6UpP2zVLGKay\nHrFuE5j0lymhydKvXCttSbGAQiznbeHQssv/Fetp+YzRsqHq3tk0MCSkAzM+\nSUmWfo7GGonG6KAReO9CLaQZU9/1BT3uYDD4FszVMps4Pxv0Fs1oaGpH6xar\n9CyBedpTcp4+26fVOkigSCRYdpMukBCUTzBo0KUkOH1Wqeh8NgV0YwxfjS6U\nt4wn0dnDGBXol52Gm/82qoIcEzRcL1w/R9p8oVMKoISLu2sF0ugFPlXqMXnk\n6zrpcp9hWBCy5C6zDv8/8xDB79GCnkhURYb3G45q0WSYyHEQwIbYRrRYSeXG\nJHiC+sqbx23THuPD8+u6AldP+70rMpz1zBpw2/5xaoNSm3aBmc4IFSiJAO4Y\nnKo0dT8qoICawOaZNm22TxMDBv7C7plAPdRNpEOQmRaWhLtOiTvd7rOJTpfk\ny0J1\r\n=vJZK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e902ff05f.0","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/shape":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/density":"10.0.0-canary.e902ff05f.0","@material/checkbox":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/elevation":"10.0.0-canary.e902ff05f.0","@material/typography":"10.0.0-canary.e902ff05f.0","@material/touch-target":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.e902ff05f.0_1611705893766_0.00873909587262478","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/chips","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"318394d39cf477c2579a8cec0c12f0585926d8b8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.2c9fc538a.0.tgz","fileCount":83,"integrity":"sha512-gXsbfJSgrscx7TRY5NDFaqdfP1TMA8uMYgBG6eALQi4nu0AAMIjG8fvU8Gu0s29d9kXM2JCXg2IX6AqVPjAmDg==","signatures":[{"sig":"MEUCIQCopgdixVjE3Vq6x0QyWa5X6FI88orZX8SwCoH9CBhDcAIgfzTn3IFYmkRIfAy11CE67qLNF/u5dFfIiOVIOyxhQHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELONCRA9TVsSAnZWagAAojQP/1ZDwmxmMFA4CG8PtYDZ\nGBs5rh0Lnwn0I5iUr8CtICqV2aqNk45hgasFvTcPrqVeS8pimB6RgjWnLMP+\nnHMT45j9TPl4zDfE1ox2hX35K4744waoLlKQVYzdV8QnXR5QbnF8Sxs6yFDI\nsHiOrqGGIdSfdsIbeAO5x0njoeC1DUEsRH58i35yADDJa9h41CHmPO6afDWw\ntEJHzVCaLtPBWDqBzX3WdIhj4wcxdBOUgOsvAmZA1Naam44q0wODiEujk05i\n2z/NvalCPFYNYx7AkmxDem44vvDxCx+BpNPedMkl0P2rbxWFwIyQdHoJVm9E\nnm1n/Xcj5jI3+ywoFvDDOFSKbxK6n4I3QHRkNWbQLzeRm/YDVSGiKOoWAW/5\nX+taJhP3oqngVJyuhwaHomh+3NHgf9bTIkAbaWrBeBSrjqPDPNBgeJJMdKEl\nbioImaz7WKnnojC/CPnF4/1VwTeCYO5hrkIc7J7vVWGZ09TdXm9wB92mD8cp\nzJUtiJVl4Qtx7fbR0iAI37BfvTS/wvKfI80AOdIrxQpfLX5ytlX2gBBCidmi\nD4mDCfLgNKEgf1arkDo64h9+DABqnJEnk7N2p8IR+7/67T1L2eLSPRMSCEpP\nTKllB+ZGEDZBXaG/SuFjRkfXOlKqPuv5Z+vOjQ1ysffVhaqMAaeJdpL5gtmx\nqHAH\r\n=UpBs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2c9fc538a.0","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/shape":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/density":"10.0.0-canary.2c9fc538a.0","@material/checkbox":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/elevation":"10.0.0-canary.2c9fc538a.0","@material/typography":"10.0.0-canary.2c9fc538a.0","@material/touch-target":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.2c9fc538a.0_1611707276649_0.10021990876076425","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/chips","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4653a627376927de558e3d81a81d1f48a299e564","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":83,"integrity":"sha512-A0BWOqT0fd2uTL1HHNmwwQqZHJHqwCo00aAoy6e8IIRmEB607P5hjxzCgtn7p9qDh4rnqLiC3pI1FLLfeyhSog==","signatures":[{"sig":"MEUCIQDct+5X5PYpJHPqGdilJS1Ssd9WhmOJqbo37d3HqELdWwIgXy02DYETVAPX34OfbE466I7WoOtmrvIwZLKaKRF+x7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL/2CRA9TVsSAnZWagAATsIQAJlfKfJ+R+rTtX6AE07R\nEU1p1/IQrMzr8WNFc/688rqEgrO8JqHZvgxRpqtDXqO/k/DwivfrW6c3mU4N\nYJ6G0DMCaqmVWR8r5VlxfB6HU854gfHD5NA2VhFG6Bh3EGVw33nEpHny1KH+\namtjaolbh0c6NrHIRr3P1NqUU3SpHBWYJsFTxOWpT1D/w7/qWWJz1dYxfcIR\n24YJjgbYnL/nvVHAyoep0Ff9RPWYx3wKmbVyKZyvHrOez/jOCr2jW+ZgsHw3\nvzE/+FXEiTnIcUOO//7rw//BcGFOjpqIv8I3P4BbhEJwKBmbUGLHA62JNWTQ\nUC7Z8FKAO7aMK4sEZd7rqaMe1fuykuVrS6ejYDo49F2w+Dx4RhNsEG9ztvU9\neR6soGhnbZUswCpHeocwW00RG2/zcxWig5VJFMbT/Ulcb4VZF+WLvIben0yM\nbK1mGsgC6O3+d43l209HrhItZaiaLyFbfO6Ls2ASHtlf2lEgvYzgAkin2Yuv\n0MHu1MYCBy1wHd+w32rA5kTYaGOT9DkL4jpFQZ3tcvCgWFH4Fg2Xzq61ogO0\nNHgQpMQ7Iaf6zprqOWpBxKIjMvdUGUEorOCA5UmYVjC9YO9ut8oIavIF8Kz8\ny//NIrZ4f6hEBYPOvmDovTqWqH7G30sj14ucyP5+EEgjcR3ebbX3ENrmfEIT\nUhRr\r\n=sBXY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/shape":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/density":"10.0.0-canary.6bf56aaa4.0","@material/checkbox":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"10.0.0-canary.6bf56aaa4.0","@material/typography":"10.0.0-canary.6bf56aaa4.0","@material/touch-target":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.6bf56aaa4.0_1611710453257_0.7876611631504853","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/chips","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.994873795.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56bae47084b6bb3f2bea99dbceff6e979a7edb16","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.994873795.0.tgz","fileCount":83,"integrity":"sha512-v3EY47ihlvZjPLWM6FbPv+qkMxk+dorbeUWagpE3ZTn8rBQaA1QNIkMISXWlZmMXn1COoBDW6UoTQPTSFvexOw==","signatures":[{"sig":"MEUCIG+vH247BL88f5X2zwT2CvhKZLEUnp/4/YmJaFiXq1kCAiEAq1uZ0U3pAPJF/3UQ2Sb/KOgLLyq9DAk+MUO9KJ5E+6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX4fCRA9TVsSAnZWagAAYz4P/3MYzdh/fa2vED7LuBDo\nO4KuqVotADrApZyEFbWbrrfi2+qJYgp6hw6zVUGpnjMVa4QKkZVQ6WT/d6oQ\nDssGq2PR5cSAV0+WM62G9dTjmyVDwXgSOe72VYbHdRkd0mIDJ8wZsPE9wKii\n7gDWqSKTGbqiWjhafPBWjp0CblzlNlNzyeG49lAjE0wi9lhnJ2MUUdOHEQJa\n4ivZSsC7XxPXK/xLZnB3ESWN6269NWgTkjReofyz/NVUTRX/go4uiehbxmFE\n/JVM1aHNKjFl4QjZPo0Rpa38MBlpzzBo16pq0vgfM4gcBEBsOxxw4w7DMvou\ny3fEl2TdctHZfy2dWf8kVrJuH9M+OLbv9WhDX7DzaOT8gW7h621i8PxgJUdY\n1TvpdzoK+nEkMNWl/CIQlVeVUak66mXBKQDAgUSF26QmDYi+JG+J+qDiQzSK\ny6UBT/Pg8ztyxXMgm178agwEnsUXkhZ9XqMN3chsHIpmCSzfLuCayBkW5XZp\nMAlVtb3dEl7ogz6oRqf9Vn+oGnHq7VpaAUXaHKnVcothLo5FZIfEcL50942R\n8qbU03oalBxQBfjfWxZfAUJW8nX8hFmqokeSLqanNU0AYcHiTbSM0PYmgIaR\nwnef16/Mu+Tp+fi5MJfYBWmc1sS/XqqKffY6YUdB77C4Gvwne+lJ4ovy6b3V\nG0QT\r\n=xc8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.994873795.0","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/shape":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/density":"10.0.0-canary.994873795.0","@material/checkbox":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/elevation":"10.0.0-canary.994873795.0","@material/typography":"10.0.0-canary.994873795.0","@material/touch-target":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.994873795.0_1611759134825_0.7771274398679167","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/chips","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"160cbb2fd2a5f692495fb00bea0055afc4d55b04","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.96878e1d0.0.tgz","fileCount":83,"integrity":"sha512-Ngo+6IrIpI/CmI3iaPgGJBiI/VIPvQTOTryEgPWerBOGcf4Jb2YBsQKURrND+yqhYsj3fQ9v0tgYt07IEtpu2w==","signatures":[{"sig":"MEUCIBCENouPDApeSIv2EFXtWcJtRrLF5tKf9MJ4vaFK+lPFAiEA3ykc6PvGMD4E3Cav0pbiDvwTmBi1Cx/+go4qVtQsQGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEarYCRA9TVsSAnZWagAA2PIP/iCtLDoTLnFEbMBhf8ZH\noXOcr/eZh6PWHNk10SUViu77C3kxn6VGIWF9eAHh5oz+GpkPPQbIB40R7pJe\nIehx8sDP03dV9HXZ5LHD/pELzaXIrw3/zGRI0nfJjhREng2ijqR6pbXytKLD\nJNxxEvUa1cTjpg1gB1aMop6vbXMjkZtmC45A0Xif8IUhj5W2/p/nCUcNQuzs\nyOJJxWvSLoAj73rI1JmjHvwj2HB3f8JUyZhtXpe/vDckPhlz7CZ9iMBubtGs\nV1E8k6rLrK6x9Stek9NCqZT+RcJRsPjLAavSKKja3ORxQvxUKcwWiO5CMZSA\n9ls1KVQrqx+M+hscaGuFw9T/zPHIwIPEOt43jeIu+G97t30lsdCfEbZoKZza\n6MC5zvbBERaDoL3AZwNoCGYW4Fb+F1DbYOzh6zbHf90Lnv8YPjzE5HVK3Btl\n5H3+tiA06//NK5Nur9gfQG0/OkpFrdi68aArikLInsjXYQK4r24iDbDvjqaV\nVBq++B0oBV1EXyXqcG6QN1b2NiPiW01iqW60h6TdfwAQqjA64xI0aRWhOg2h\nxrYjX/FKCXtA3tyUxFrJgKA/kF9J8QaSMz61UkVz+2/0BhLiRapLZLIsJS5P\neNCmrVBVgbnAl4In4ARmsMDkAl2zyyKz2hNueFoEkSpc8qhkdPScpKOq/tPp\nCnCo\r\n=2eRv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96878e1d0.0","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/shape":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/density":"10.0.0-canary.96878e1d0.0","@material/checkbox":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/elevation":"10.0.0-canary.96878e1d0.0","@material/typography":"10.0.0-canary.96878e1d0.0","@material/touch-target":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.96878e1d0.0_1611770584158_0.6938059211673813","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/chips","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccee55ce57ef304b3f3cbc95f8cd39d96321a2a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.3c117cdcc.0.tgz","fileCount":83,"integrity":"sha512-x21SHt+Uq8/RCiUys00+ogEe9Jc0Ojo67c21KEot5mcHyMAKdd1utmpnCXCErbCSTLyDc3nPW3zNJ5nrRuUcyQ==","signatures":[{"sig":"MEYCIQCztMVHAExeEeNjL6Xy2kczZYRia8ezKs/SnEzhrIvgxAIhAJrbN76j1cZ0wDhS7kW8RgBhdvqJ/VLkDh10EN9QHiYo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbHlCRA9TVsSAnZWagAAWzcQAJiqdg3GfPUf1NSGiaGA\nm7ZPbzYH/CzXKrDrvymX/apSgwAIaApfLHZV6rbD5mNsjP7fG2m27GaNs4Ay\noBDeUV94E+g0StkioZeFEG0hC8uq+0RnFvgcYmwTiuA+b+tep6cBN1EbXiff\nli+qYI0uylRltywWxEMA2nzziGcsuUdnfh6n0GMPwWKTFJ6zcQ1IHMzGX7gE\ns7HFJeYOYaUveWLiw1v8z/pUH/7PzKxmWEjv1MLHAmiYc30CprN/0DFQqPsO\nmQ4T1rFhEVfAe3LSyGTZeT5Ui8nErFhyRTidbHHUauWECzs/qwNhcO5x/I3n\nUjKX/sbUXGUF1osHD2Q7dzieKkyouaC3uutg61b9BKpCddpk6XhfLKqatvcN\n+HqvWZ7JQtXAthLIO17vJ30W5bmLhVQf24sCH72pFUTaTzOFA+mBZgSqmiI5\npGm62XywYQGrkVWfUAWZNQk1Sfpse+PsGOTOGf0a5psyTaNNc90RyoPdtGIY\nMKVPxyq69XDAmspclMRtT9sFK4qZsn8nSBaafq28CHTyFA/KBDQ2XGUkIkS0\nH+Kv3QzT+qUlT8QOKfDmhWN8YIqr5tH/e3siOipdab0BG6jshGMPNSzTJP2C\nUtbZ6/4vxERmc22IS1NDJrEHZD4wzn/Mfvhk6quYaRoj44JfxwDDn1PcpJL9\n+Smy\r\n=Pxco\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3c117cdcc.0","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/shape":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/density":"10.0.0-canary.3c117cdcc.0","@material/checkbox":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/elevation":"10.0.0-canary.3c117cdcc.0","@material/typography":"10.0.0-canary.3c117cdcc.0","@material/touch-target":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.3c117cdcc.0_1611772389092_0.041878611607815364","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/chips","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.b411e7033.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b878e6cf87de7aadd648bc8f01a8177f035c4d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.b411e7033.0.tgz","fileCount":83,"integrity":"sha512-6B87WgAi2o7j728T0gMdKuTQNfvwEMuVMQZE9xAOT0uOL2gBFleBZNfoPy3eQa7iJJe2i4i2duhVdqsgvrwnqw==","signatures":[{"sig":"MEQCICQik/EgFp70Y4aGrSWj1bWjF1k7QXqHquAcbTyDZxLlAiAV99Bp2Y7To5INAVX4CrEaE/l7Yb1q+KdjRnGm7749Kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeOGCRA9TVsSAnZWagAAUAMP/iYOKMPRh4xu6GkBwnAj\nDg4bXjo/Chlr3Y+mcrcNAgCP/tx7keJhjTtPdGEc3B06rTHOFFNWrW89EWd8\nZvmR2Z9T4yND3PEP9vcKDsYr954x7aYila/bMutboVmKLzCwvpjuaiqNFP16\nsY+AxfHxKdKdwpk4eczbip1B2+VHwrq2fSsTo2Opxkmqj961sUU5JKP5reor\n8iRB4TbqlrRXfb0oLAJp/6o6c9c7VLacu0iOhATYfLOertcj2jBM1LY1kntk\nmPjphOv5y2h6bJ//CmQqHp+N0q3PsnfcsRZKPH5cBXHLU+Vs9zVBhfPn87kT\n+hvTcN/oaJI1TKF3dWGcSKV1gxiPZJBPypuonDG/BHyYIdNdOtMBbsFsjLGS\nnN486tn392Qhv3JoQfeFuxv/grN514SCLxjkIPltW8FR7pi5LqVbpKOR+N5Z\nUT321mUnMpACXvDYPliyN3nsX+nuP2a8ceJqQxYGLj49Dq268VnPMpKRC/wl\nOD/gePHVoI0W9pKCL0pUJZQ1eBXcGAqXUS9+x3EKZ5Kxn0duQbR/yMJebOk2\nrgh0fRVrElw+3uhrr8jr93efr5oMNHxu9bB9yJWPlVq1+EGGBVddpuV/nXV4\nZgx/ryjACjFL3I1aqzNL+EDcqTQco29EfUrLScLEV2pyzcpN6g2skZtOZFxl\nHYna\r\n=JpIY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b411e7033.0","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/shape":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/density":"10.0.0-canary.b411e7033.0","@material/checkbox":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/elevation":"10.0.0-canary.b411e7033.0","@material/typography":"10.0.0-canary.b411e7033.0","@material/touch-target":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.b411e7033.0_1611785094110_0.6146199697526256","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/chips","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77eb939ccb23f843fc564ef72b94f1b8d6989d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":83,"integrity":"sha512-oUFQj4KQ2azL9u5982O+l5Y4C5pmGhbLaIRsFPJgKz5CjFgeXr/gyEY9CbAIqlw1Os80u1L5xK5N/QlirdqiAg==","signatures":[{"sig":"MEUCIQCwooKJXf9097Wgz2+bwuGQd7aTXv0UTnQbtBgJ5NrcuwIgd5ypjmKU4VmARL5D7busu+9jzztJuvaZybIkO5Kgh/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfFvCRA9TVsSAnZWagAAdjoP/2Fp7yqtXS9EWCv8f5Po\nq+ycoe9sYUsTBQFO9JNRnjmwAT1UCnpT+63HETppxofqPj/+RztJwEjKd8uZ\nIgauxrih5YwDRbkdcD1HKw9Dkz2m12+dOCuDUX4YFT+LbRU5Q+1MGrWYKKlE\n2VboWShpVQ35pVb+ttvADYouzGm9KUQzqL7jm5EW5m6kWlcjbY39PTFNet7y\noLoPzOy4Njm2TZ8h05b1pDHai5slMnyk1Q5KOdaov8rDd5eyVVytMPP3Nq/K\n+HIfv8qLZLWs/JCyZMy9DmTgNuOQCs5UVbn+nUUU+/6bMIUPD3wQ4vOeJ3sj\nZ0F81XQgSGEGIoistCugpBchGPfmdJ6jjN6gDBIvPeGyTwDRCAW5wwRJwOG3\nnsxKcVV/qeycF7r6sKwjCiXEcPFQGbeBK2yoqWDfAwMeOXEr1Vn6Sl9OH1Oo\nAjzoocdBGUfL6188iW7nyvB3gdMQPCU7ZoYq0Jz6B3zPc7lsKAHh4rjXn+Dm\nFxh3yRp8Ergu4VsOesogBhKDnKPf/XtKn6ijPVOflQLAqj7swZ4GP0okcBbN\nJ6GPjCjksSkkZwTbusYrb93GyPLWioNm0gRiGFdU0p2743vpOB1TFdfNGrqE\nJ15ni+kRRxr/0/NvbzCbz3g6Mgf5fl/XpQskGlmuxA1clHWBp5vC9MToRgTK\nHb+M\r\n=Sz28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/shape":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/density":"10.0.0-canary.a9ac16b4a.0","@material/checkbox":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"10.0.0-canary.a9ac16b4a.0","@material/typography":"10.0.0-canary.a9ac16b4a.0","@material/touch-target":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.a9ac16b4a.0_1611788654729_0.4605429223887014","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/chips","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"473804a9e97f8efbcb6a60ecd592488573478a86","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.fec7b42ca.0.tgz","fileCount":83,"integrity":"sha512-sdffHLt/3z5tFVU7OkRSNxw9bZNLdVCZKX2KfwEYMsGz1vIupCuUofrvZ4Aw2r1OMgMCKMKCRBawit7prIR/UA==","signatures":[{"sig":"MEUCIEVF0ssMomptNIxborLGlRyZ+kO1NUPP3t/Y+fKa4uDcAiEAxZ+7i3bMJ9I33cxt8ebhhJXI5DZdOyT7R997Iz9DfIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw1LCRA9TVsSAnZWagAARQIP+wQQAMNPElhxQgovP5Fq\nbBkugH/R/gcQeZPo2H2OCnQkJ2d9G8aPKzSJdlu+UfIfx5U0+5SdY69uLgil\nR5Xf1tBvkuXdldJQFBBkSGRHsNUCtnjXaPtxJsxSuxCOn5rEZQMQUlEUdbAo\nINjpk2wzyMH77WS/h0bNhWMy8MTEXOAA3BP0qC7Ny/b6GhNKfHJWcIU9CVsc\noyMn1u7waLBX0KhnpSDs5CRqQ8EmFLkLcI9ti4S/lUZZlf8ILVWwWDPyp9QC\n3OEtLKuEPuMg6wI1f9obDwZ2WgkDPV8y5pKgB9EaChDPVwNCUj0bb2n2HjD0\n4pCO5XYn997xgyzAgOGyRtl4Eh93IZjnHO6qRhO6x2oZXTov/f40GtablXnh\nrG20AVLGjRINwv8siiThraQ3XWpm0WVLawG749mRUVSgR41LEYEfRPR/ZL2L\nhF9N/RKRjcfFXS5MO3msikjI0Pu9ImJJOdgR4aWPCtJvaP/aXhtWj9LZ9JO/\n0sM23HS7D4TlgICeQcO4XlKGYSQm/MYSH/RSivmYJ38H9450jnUj3W+3FP2w\nC9hRvczA3mQ6SO2rIKfwkiZz+Ztw2mFOWnnHkNOwZEfwPeMIgbWv6DyRKBHH\nHJhVWlIaYEWfkL/bmUSBNrCGuRDGylzcB9n59TU14/ar9Cw0eZVKrW91LbtU\nPgrb\r\n=tyzk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fec7b42ca.0","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/shape":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/density":"10.0.0-canary.fec7b42ca.0","@material/checkbox":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/elevation":"10.0.0-canary.fec7b42ca.0","@material/typography":"10.0.0-canary.fec7b42ca.0","@material/touch-target":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.fec7b42ca.0_1611861322592_0.2123517833573907","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/chips","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"238c7ee1fe8ca7bd903ff672aa7a6b91a5eb0327","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.8e66dbfee.0.tgz","fileCount":83,"integrity":"sha512-/Nem9UljV3iFzA0M+CAc9GV5MwhjnRRJDWWwvrE48aRNUG250jFQ4eVD3HI+vBLpxVfqD57u7VguI6g5ScodDw==","signatures":[{"sig":"MEUCIHgd11cxa+MW86D9jewu2PTn7OIcpDWCO2Q/w0l0cX5GAiEAkr72cutsL2benlY+BATg8weEHaVCXKtn4TI9UWQfT+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIzlCRA9TVsSAnZWagAAhHwQAIX5iN+yzuZBM5C8uoN7\nY8Vu07dEum+/+H+G9MtwKgt02Qh1g9ll/EAVyuVCtDt3aoVAE1DXP0RkKM9N\n2yNJ/cNgbaSRFBL1mTjBrJz/vuz8uaFXFh9wBa2rRa2tXiFUIbiy4Xi6opeo\nQbzyiQxqkddwYQAcuqs+WPZccJ5xlLZx5oXyaij/xOwg/yrgjqbZzmK3G+BX\nd1+B+f+18PlNo1rufJooLidg29lPrx1rmiBhYBDT87P36+6DC2+LIhUAYmz3\n6YNqNRL/NgJuyFdx/WMpyMPZIKYTqgn0JzdUEGgsmzL4oyn4LtxG2ZLAG9Wc\n619Ns4oIYSFiYpqIgMVcL1losXFnRdGHi5VMwQHgXhUcJGTlUjSclMSHh7tw\nA5FSDo44dzMz1/i+mRcHSLaLJjOvFNHTqjz1SRQlDdjxs23znQ4S/3jOR/KZ\nySJl0N5BWZoI6xogOmvYt3xUX8QEhbQ6YtmA5Y/XSaj81H39iQWgNFrHjqbR\n0rKUq8DZ47K1UWZaIEjDhigCr2kSTi5rS4YU3A4nBQQlGBu5j8JcEXBMlzD+\nyxq72QTiw/t3lLHjCAdUqJmEdvtXV8hcajIJq5z1cxTdnSs6Ykvp6H8XdZkK\nkdeNgJjcbaS0lpXJXMVF7efeFohw3ZtF+B2MNUqvLJVkYdJIFP+8SmB0ENex\nFvTU\r\n=W9u5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8e66dbfee.0","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/shape":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/density":"10.0.0-canary.8e66dbfee.0","@material/checkbox":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/elevation":"10.0.0-canary.8e66dbfee.0","@material/typography":"10.0.0-canary.8e66dbfee.0","@material/touch-target":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.8e66dbfee.0_1612221668644_0.6859483706080469","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/chips","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.637d15da6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19ce501554e7f372df009c6f485c43c862952ae3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.637d15da6.0.tgz","fileCount":83,"integrity":"sha512-jnUimEdopdfemp8wdIOy9h0zpXkARjR/3uRYm52IMyLNlYb0lpFh5kF8aHtg1+mIrjg0MGocK+sAIrDI0Cl83A==","signatures":[{"sig":"MEYCIQDrdqoYUl9vB9xTclzgJYCSbOlYJgtSO+JR0appGxw8iwIhAPbsAn3GZUhvbps6MErc3h8C4TyKlskV0XjAu1+b8Rtr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ7YCRA9TVsSAnZWagAAkDgP+QE3kAA5T4Ueh9XWGhsq\ngeoMwCN1FF6DGdZaqYQWezdtIWdBgAj/B3KXsfamNIia4vJh4ZjgQ8tEddfQ\nB7n1JzsVew6xnVhKGdxrbQdWu4BXqp+QV+fmGYPNle1diN5qExmjNFJ/LAnV\nybqhKsocggQy9YjZu0oev9Kftqlv+zkm07tpj2zn11kqtwwPCjMULex8j81/\nfj4cBaOAfMmwKxz5KrfDkENXi9SJLvJDuBSkXY5xA4poeH/thmg5XGiMo1l6\nT0EOddi/n0u5AolVjZFzhpGyCeI4KVv0hwLpAFXzbDooOHhsPnzxONdJO67h\ntI/Ck434XMM4ovtFj+c9Tij2/9GbpEE+WROufcveE8RaqkYxTLqMMSmQ4FXn\nUSVPGRHSdgvpFrSaw37JxxWdktGLx0qsz+eE/NbdsWgqyV1kt1WcVDFejWY7\nsfOZeqVuEi/0LJCJ5weIAGEA0z7xD/Qwu1ui+fjcvO0u4ST3ZePp2rIi4hH2\n5iavsgCkPbs7Z4F5rSGa4Beuxf5BR540LVRA0MEUOB5ktg2hqxHSh1UQcK3g\nJCKhSTrWK1720w1lVjbwQDNM376yqYwPLOP1ZS9yfB12yi0+B8obT8FMiI+l\nv1HQgcD7QK7rqluHvaufsMn3pnfLeuucVmMVb+JvTf+6EcIMHecslza9GBD4\n2pzN\r\n=SpCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.637d15da6.0","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/shape":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/density":"10.0.0-canary.637d15da6.0","@material/checkbox":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/elevation":"10.0.0-canary.637d15da6.0","@material/typography":"10.0.0-canary.637d15da6.0","@material/touch-target":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.637d15da6.0_1612291800304_0.8792369155374902","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/chips","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.fb793939e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e24ebf7b8290582c2c9d198bd08099b90115585d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.fb793939e.0.tgz","fileCount":83,"integrity":"sha512-y8NuAMcbnvex8tDXXVS32O4vT+9twNEbrpoPfunsJcgly/D/bTYod0hMPWvcbCqJwLtvrgtNPgYn61hBNc3m4Q==","signatures":[{"sig":"MEQCIGOA461m6H8C5iHz3kSr1vrEgl9zZnfUAawDLELyGhivAiBFmVIrXZwfZfxrGr2vbXDTE02Px8iRH1PTOT5dVce3nQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGePSCRA9TVsSAnZWagAAOSYP/0rWcr2aJ6pihhfX6NZd\nnKpH83HKdFh1mAD170k2lhxbahbURjm5mA53tX6iS4OX5rJW4lPR/KxdE49t\nlTQWzADIgbKYxfXHSb6Emxd/lU5BJOL6FjMikDXgonbrmUDwIz19/0gPp9OU\njfruftFt/v0fRnFGJI7BEYB7WhZhTeOjyAUXuie4RQYIOdtlBxT+3ls3VHvs\ny6uMx+jO4VSDCzQqT4T6pQVbz9ku/QdCqgmyKEhORukc1ihFbz5/AwCwYyli\nPIo9NN+5ezLi5EcFDy65LqQdsk+YFdt/8sl3CDlfWV+knRv42gqB2wydLv+H\no2J/i4SbRU44cNgTTY1oY3elRC9QsIux5co6vLBTvtTAS9gw2PoQgQBqi55F\nY3yD7OkLN/Nzi+PCqNzmEXuF3iCtwYRLf1hs5nKidDbE0nHwPrme3lcQacib\ncPstJO7lH1CTd/LxNjxFSRbeL1NF+xH3SciLBmD0bs80IpVf4v5AyEV3t4uA\nWjUWCaCYp9Am0SvN9IO/EBZglmgw66vUHvI6j8comliuFYRBZnqKMRNHiBcz\n4/cPVVtZTXSg9I/N3qK5/AK5tmS5TVu5GmLPvcaD9wDlVJcZfyIpIk+QU//p\nCmfJbG9x1Y6h86X6ushJ/LqozeGf6zn8clUae27jSkFbYRTqTmCCDtSjqkuq\nBBa3\r\n=jtuZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fb793939e.0","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/shape":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/density":"10.0.0-canary.fb793939e.0","@material/checkbox":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/elevation":"10.0.0-canary.fb793939e.0","@material/typography":"10.0.0-canary.fb793939e.0","@material/touch-target":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.fb793939e.0_1612309458141_0.2256562331878651","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/chips","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37fdd11b69ac91faf6f5158c07382427217c6cd2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.15a4d40dd.0.tgz","fileCount":83,"integrity":"sha512-FL6vMrMfYED5i7X3FPI/Ua1h2uIg1EAoM7yoY5C9mbip9wOop5E1iOlNsYZKM8ZquJVIfH3E8TuckXVDBmsKBA==","signatures":[{"sig":"MEUCIQDPJmRjkfyvJYj8Pp7Nt6zNABKogwSuRV3TjmztXQUY3wIgF+j7ORm6OXFh1jBgxItOGgdlSfSKXUo9ovOjU/uNV5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGggfCRA9TVsSAnZWagAADcsP/iK5ADOUmysBuE7E7wJk\nIIqy45U5CLMV6JAKP1AhYvEd2FgziWw3a6oVgc3Kh3TJSWUS6WPlwv4qffsF\n+x1tJgMm/J8ii9xW8HGmWjRtSo1ObKsMWRucBu4PdvYKRyQUcEcAf48x6cxw\n0jDURsDysKH7bv1onGqrZ4YWWM0vMZoPPhdnaGhxt5O4XrR9eXxh+RpK8nLf\nvPkUIpTisHQvBWVW3S69M04y0UpzNERgLBNEBSWNpk/3ABm58VmWGRpHYWLH\nVAc1Z0UN5jxjsKXoRTSHB7GCGlT4rQaMP31zqaBSjKDf7ZHEb2+kdRv2xRXt\nkKP3Bg+SdIa9xfm2gN+8kr2IoloeEwzNdxKOeQabfMFtjRJ9i+lT5I9Gyq+o\nbZTSLMiwf8kWB2R9rTNF7qfxWgNrXmFYF2nApwp/L/YMstCqx33lhL+9LfLt\nHIEUDXNpJtwNDmiMYBuXtupdeAqu0mIvkEkdDcGHf2Xay9vEQHaey6shIwmC\n20eogfZhxTT5SGCKluiU7kB0T+7mzx+1VBmNJ31RLlo/WShp56RVFOSf9Qmb\nUtIjzWOIL9lKFAqmC36bU1JsQPoqo8T8JT9p6jo4aAcdVHFP/VPFunP+dUaT\n7dITTssBF0IPWOsCiGPlprx+oTKf5NKtvfM6XwmE6QMPE9E2zaQMSbotbpiq\nYYX5\r\n=i14P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.15a4d40dd.0","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/shape":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/density":"10.0.0-canary.15a4d40dd.0","@material/checkbox":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/elevation":"10.0.0-canary.15a4d40dd.0","@material/typography":"10.0.0-canary.15a4d40dd.0","@material/touch-target":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.15a4d40dd.0_1612318751269_0.6395992672685877","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/chips","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee61a0347a28e643ee74893b3e3a1be85b68623","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.7a003acf0.0.tgz","fileCount":83,"integrity":"sha512-8JNyIYU062fqNjt4xMbql55pdkiThuKRFd+s8annua0u7qAP+wD9MPjxRr+mWaI2g6PLqKU0Ekkzo7BRaoQi9g==","signatures":[{"sig":"MEQCIAOikFMVnHe8Gzb1/QwqA3nzf1CrnSkjRxsJa1Fa05ojAiBaeM2gQ8sT+R+h4hoz2UWmqK1MaNsvIx4bO+6R95wLgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG11DCRA9TVsSAnZWagAA9X0P/iPUZ5pwzahi3kaVLu4r\nWs8czo9zGSM8SOdsuyHM8nSHbSp7+S8LhlEbRDjST2p5XBdBRLsRRwQg2Wn3\nGVtOEUZtXjZ0uJMtf+XTiZ+u0TaVOKVs3HCQ7sVViPotpmfiGgYqghK2KRZt\nv7BakyiAMJfcJvQzHYzjHAKT2WCHajXgeBBNGUK8aZ93n4FI6ofjbkdyXwL5\n51HNZhLSka8QCqcecaki2AibIfjyyfFzZ43vEDigkuLmoiguHeF0X180+8df\nMQIJvNxwetqcE/3RuTQmL6pe39F87e2MQZS5mazCP92ffetKOIwku92Wvymt\nO2DINJe2L7X5b6vnSdyOs+6SwzFzqvUzZEmTAwsLOUlj6JerBgFU5mScXcEI\nyS4p8CU9wP/2wm9SdWUa7DdRShjNKfrwDdpOuZeCp8Ra5u6270I0wFD6SOZe\npkLAkVYWDAUNZoSoGGOgPc8Viem/nXbs0r7N0IBcbEKDu9BLtXMUrQr8vQg1\nFfS//ZpXdqpL32t7jhFR76hYor4JUdKWFw21ejoUhWOkrhp1ZMVJNpv4qQZW\nzebJWNDDXzuNDjP8TPRUqL7q84RBsdNz1QLHJ802AvbGP/0pTm+JaTt1qqR/\nvYP9T7+SsDMSDIEFdShi8XQYFOYwCdad70t/P4Anm1vPZLEwO5WLveMrU5nf\nmEDk\r\n=FtVl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7a003acf0.0","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/shape":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/density":"10.0.0-canary.7a003acf0.0","@material/checkbox":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/elevation":"10.0.0-canary.7a003acf0.0","@material/typography":"10.0.0-canary.7a003acf0.0","@material/touch-target":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.7a003acf0.0_1612406083090_0.2546365987089738","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/chips","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.05f249666.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7815c1c71f69d873afcdb754497a36975002fd8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.05f249666.0.tgz","fileCount":83,"integrity":"sha512-rQnBrgelaX1NOXlLPAGz6l6tmurQpnCl1KMAW/3MAvtWw/o032WZakQbCI63Ph0VijS9Z1cvXezU4LdBPRv3Mg==","signatures":[{"sig":"MEYCIQCpQiFdcboCVgAS6Lms6KPrGhTnp90myiDFt5yK2jnUnwIhANJ5/b91p4ZqlzaYyqrdEbTZ8zjIHaJ8zYY9Bj1WCRJx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDQBCRA9TVsSAnZWagAAou0P/jeU85t6ZeXX6Cl1pmrV\nUXus6lgN/Gg8UZcRl88Yj21XoO9n5n8FUsOuKFbZcastVxHe9Eb9apCht5KE\nCs+h+vV+6T3ONlbZ7JxcOPdZKRAQ3S/XkzO2BwkiTVCkMO2u6avpJeZeFnfQ\n+IvQjWUjA3Q99N4VrSVTbKLGUtVV4hG3xFKhV2OQKTpvrRN27BEfpPO4BMJv\nUwn8UvPlxSFj5VOjBXz6e/Ei1epCnfahz4T+0q8gA2jgmFwzhPRowj6maLSG\nVoXtyMFhm4dqjY9YonyPghbzYf5Cs9tqadd4yruD4l+OZd+L8a8M3XBNJ/1M\nN0Ac+O5W5NDzfpNn6sWsZ492u66lDqanib/KUkaNzXKXlU6iSpgbRRynMezW\ngY6GUR/R091m4A8CZ1z0B0dJP7PusT6O3+4zEuKI/naq/iGN1Cj+eGgHIlt6\n8XIidzgVT/Wp8HXe8VNjydBiuVAdaOOZSxT3jhmNC4/SskdHlO/Kr9Z8/qn/\nqGC2n3BedRNd3f8m5hzyGii3sJSumVLv/2pK3Bcg++7j/xRLH3ig6c+cwkqS\nmZ2sSQpqRDeTnvmTDqdQEKf+ZCCx8gD6rqDwMx2UEQ3lsSGkvNiK7+lipmcS\nJXjbNgw4Q5bsGbksG8kzqvlNNBCSPcVBUA5cHh0mS4cf+sIvkSC9tn/sb6yy\ntpc6\r\n=lj1v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.05f249666.0","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/shape":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/density":"10.0.0-canary.05f249666.0","@material/checkbox":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/elevation":"10.0.0-canary.05f249666.0","@material/typography":"10.0.0-canary.05f249666.0","@material/touch-target":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.05f249666.0_1612461057172_0.33650146734226216","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/chips","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d12e18fa17b708569cdf0075817a33c0bd65682","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.1a3a39629.0.tgz","fileCount":83,"integrity":"sha512-qOGtNNBM1pi29lli2+MjdD0nMLSzPwHT7crgGMJPWDRWtY5FZ3IVcm+kH1dfJtes0B6K/8MPFMXRlfKLOGUqHw==","signatures":[{"sig":"MEYCIQCtOqrqW/LJ/9F3pweNqBSYVzaPt51hd3EORSkFHw7k4AIhALvInVljj+Kfsm1VgKB0NFq0B7sASQInHOGTWTstxchy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEBvCRA9TVsSAnZWagAA/IsQAJzfpqU0GaFdOWaKz5gp\nibeI23yIIp2JMWcZw/e//2q5eJPuxXG16r6YsSQbKZD0aYDDbgKBJq0KDf8u\nKpaHg8fe5lxt1b++qrWzhcvGqT8qbtzznyqj9j9y7gymwHQEnZznBo32GUZQ\n0GZyfBh3BeUFDBp8Iw73WfPTuPeLXxNKhK75sytWZp29hEQAnxlUCltIc519\nERqgWMEt+OZ9j0vfGhq6Va4slI39SSFlEqwCTt8WP1ueZla61nQzB6j2fmmk\n3UdhVI7d45H0yW0NEqsZj9Ff0k8TOed0NP9WsIZXo/mOKN5NAESFvC9ucUDK\nbriCs4OihNYm6z9C8x9HvShBk6/88C6fpQO5SVjaKoUhH5+ai6D3YiYTC0WC\nLZgCD8qTKuYQ13XhN0ZnZRfdffIpJwIByX3Yuozrmpgkzxxxcfi04NBsP496\nkXvqA7UUbFG6/FgS/1YFmhF76ndFanmRAcqYW3l1uzY5m+inz/L/q63cyVY9\nB4iGjQ9x1iIihht6BNjtzO4b8vIRM8l1bkzgOnce43vr/hFP6gnAojSYE56D\nS2CdiTtHxeo+8hBalT+ycUpkE58ciqQJlVSCh/IHo6+mEahjJ49aPTd+OU9M\n2mO5YWpEhn3k7hlIiqe2K+CJjTcFxWAHUbpgWjL2tvGgRefCr8wKelqwMSIz\nSjz4\r\n=JSp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.1a3a39629.0","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/shape":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/density":"10.0.0-canary.1a3a39629.0","@material/checkbox":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/elevation":"10.0.0-canary.1a3a39629.0","@material/typography":"10.0.0-canary.1a3a39629.0","@material/touch-target":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.1a3a39629.0_1612464238686_0.822756535726552","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/chips","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeec95c187be1948e444ba1a69d2ae9c71d1105a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":83,"integrity":"sha512-uNoJggsykW/eovuc1HtGGCj8oNxQKqpY/0tWJYh/8yke0fyoStUi0yAiZeI/CKpbYLNyFLfNXvnpplktug0cvg==","signatures":[{"sig":"MEQCID0aC8ZrQ1xBuioe+GcAa/Ih4aGrmA7ZewWmj97+cavFAiBSn4IzypGmh4WZGvxLgfPbWP/xJcUG66G/A9DBRFu20A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHa2CRA9TVsSAnZWagAA1ucP/A5NmJ7b49AM+GlimLgC\n1T+kC04EVLb7zU7Fdw+BJAP6jSF1T5xAyQh/NC8Grw7zgzz63nRKD9F2I6s9\nNj28n48VKiGBFtBQOnEVlDrHt9nESmekDg/PVbB6gyF2cv0No+53dWCzIlfg\nvudeRNGPn0snsyDxIepkV8TwEPO/GnjC5dQ1V0WcxTgnI115k0ij1PNGgCou\nExuDvAGm+3TpxyiNLS0bcS9nd6kPcMR3H9u+LbKqmt/n385TG19fIMYHcs87\niMlZcALWY9FYc66PV5/U061TRpCDRxDpx5VdZTwN9tDSPd3oxkpmKnS7AXf+\nhRXD97USXYg1vv5oXU3YCzK/hoM39/rS44Sw07f7TF8jROd6oZ0dswHYoKSa\nh5AtAvAXGf4RP8JAOOdO/1q21q5kQTShE5x/Jx/x9pAEr8nkQwFlndi5yxZF\nkFIk2oX+sjkHxUHHsxvzXhfirsWZk5Rk0a5iMp2Spn2uRiK7H949KsrnKVc4\nMizxYB/rzUcS8T+jR1AxPYRWb6rql/byLwLdarPvXsHU0g9mC2PtwAKemHuJ\nWeD16c2Z/TsIABROSHzec4/3xGw7PQqQdpZekd5wj1pMOWkDv96WONu1FrPK\n3fJum9Zs5ruLAIJFGpuPZ3F5Aa6CQA6KD1AnmryMYs5O3XAUtYFlvxQ/MccQ\n92ze\r\n=J8ib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/shape":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/density":"10.0.0-canary.8b1cdb1be.0","@material/checkbox":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"10.0.0-canary.8b1cdb1be.0","@material/typography":"10.0.0-canary.8b1cdb1be.0","@material/touch-target":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.8b1cdb1be.0_1612478133848_0.7149620632230589","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/chips","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0f2e3f15adf6332b97662d2fb398de54f67d70c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.8271f00f7.0.tgz","fileCount":83,"integrity":"sha512-S/6tVt52j4IKLU/aScWVEyCWl49Jo8n9tKAQMBZse6Rfu84tAKw+vU61F/Fsqz+2f5iqEo0eZo+V42EKbeQSSw==","signatures":[{"sig":"MEQCIGtF7JXoGelAXrTfniRMScYJl+lmSORs77TfDJ2jsW/0AiAwJE2h5IvCm6TxzAWPHHD5HK2snX0Gn4/IKsudu5FAOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHy9CRA9TVsSAnZWagAAlxsP/0wu39NKT5S9HfOJtoBW\n9hQVkh3JzH/Q43+DN8TzXzGRP1vNrGocAepdF/X0i2EIfsoeJMc8UNzGtMeM\nhLadvnrzWzU318A0Uhi7SYeRfy5yQbJCA4wag49XT+YYSTzjTHV19LErwrXV\nROxnGV1j2UZrB13bSvV7mJ5iWzbTd5zRPZY/S4AWbDAJVabNfTU0cAIsBYP2\nkTECqPTqhfDHXcJns/omt2VYyVsPcKSYBcPlaJyL+V9ICN0y2mK/CEwa7q+p\nkMRPSiTlasBwR00aM12+bPVS759iiOdXsNHJrhKIVz7rtWjMZ1vPmk7Yt4J3\ndttzuBgE0oKsXgsYFUP7P4ygo0Ro9tH12w3gHtl1wa3Iv6a2kovS43Hv3G09\nMs6MV1Urkjn1cG+Fdml4IYE1TEewrwpM6vEXCHHeeza7PEJx1RaG14A42Poa\nRS+y8OAy7pgXqvOqWnzn/h+futVSf7B+vrrXJU7Cja9KhXJlz5bW12W33Wpe\nAk4/t8hH12AuYQ+8C12fh4/Gc0Wx7lWJKg91hIfrfaWC/+PRCWDwrc1PGsHx\nd95t/EF5AAb6Mwy2cvoZWv40jC/4eTny3QuppGrY80T+kgNtBezuKVJfxbxC\n8Av+uKuU0RM5i853j+SbFmUl9r1qH/jr6epyuPGfvfgJmZtLP/Sip3LX9vFX\nC+f0\r\n=cO6w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8271f00f7.0","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/shape":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/density":"10.0.0-canary.8271f00f7.0","@material/checkbox":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/elevation":"10.0.0-canary.8271f00f7.0","@material/typography":"10.0.0-canary.8271f00f7.0","@material/touch-target":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.8271f00f7.0_1612479677111_0.2937524900303621","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/chips","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0-canary.533092a90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60c3cf31e8c67d8f1bc16d9041a7e79e13d882eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0-canary.533092a90.0.tgz","fileCount":83,"integrity":"sha512-BkIRgebpGfpSOcZalcYkn3lmhWDeC2VSoNjZ9P7CKCqbud0JLb5dxsqhOO3N0w2FcaCBvLvKIvI/h6MjAyDZyg==","signatures":[{"sig":"MEYCIQCqDN7o6s9m7epy5M0bFwqpw/YRZXVk42ZPqE4SFKGeqQIhAMWlDOa24j7xwzPGBcya//JkhAL0ZTmNrz1AzTKrzrkV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/NCRA9TVsSAnZWagAAq/0P/jscgZGlysjpMRNRfuZM\n8+FWHffoyJCtg8YQ17+E1WXqAniiDWA7DaFYDBrkOCD+d/grvS9poEC27iwE\nDiNIJBob+pgJuENpg0S4DebrbT2AkyKH/Ax4ceNPyXqiFfYzQhwP+v6Xnp7i\nH0glkEQlSUgcxe889fveuDNA7HVL1P8imNTmCDM+xLqtUYSbtIasgSlQj5Lr\norpIsyryIeS0let5A430l6lpToge8GAUjGrrUMr/JqzCO60efAGXgBZe8irY\nwrgssvLgE6Cf6zEn3a9T0juzCUCijJm3v2kYpzED6pXSP2Ya/WK7SSpYHWYw\nzK/xLfxyqCUf8yBsn+lL/yM1GhPjan+TwPIqxBIzcAkTD34GnCezgdpyUANE\nqelmFUQ5/YDemBRTFEdbqb6gMLMympCDiYsOabup4tNfFw6hyjgU2xHpwU/q\ntzl0MhW3RtCDzy2vCJk/cKj7HNeD0EFJNkqhjyiXZJV5H2mXli4euyf1KiGC\nwHKbjJhZF/4UYQLyJkbx0PSZmCKb68MN7KLHYq2XD2//b2i0lKkYunIcmaki\nHGyeVYU79FcaaEJhZgu0ebkIv1MXbJhH5PAvCBikKlo4ODIPV16mGgnmIr8+\nN7k5IYJzu7MahsqPy+xrM4Mlw5ziCnp9purfz/vlPlvkbOxa67u1BJlHhPo2\nCKN3\r\n=S68E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.533092a90.0","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/shape":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/density":"10.0.0-canary.533092a90.0","@material/checkbox":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/elevation":"10.0.0-canary.533092a90.0","@material/typography":"10.0.0-canary.533092a90.0","@material/touch-target":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0-canary.533092a90.0_1612496844732_0.7792647016746959","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/chips","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"867c2fff9292bbeaec53a3e89a386158e2f5d68c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.633a9fc7a.0.tgz","fileCount":83,"integrity":"sha512-j7/X7sG2qVgbvAmmHXHW9GD+QbGJ3jtFHBZn2WVeqehkyVXuBKYJhLle5O9uMdpnaxjMD+HkRsa5DcGB9wIlhQ==","signatures":[{"sig":"MEUCIQDBKT2VaskvwYJa3tAdA2WQuzMB8IYfigEhjEfAdb3BPAIgTrAAhky6smmHWYDu3J12wGtVBzAeIEf/97XteGvapp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/HCRA9TVsSAnZWagAABEUP/RanrdW5xR1fdim0uAbv\n5odlUOjmDOpePoJRKsfG8Bu/ySDUQsIjocz0Dg5+qrEqhZ7+aXEtEsznflzw\n82CWYhqFd+j7YGxwAV6QLFqHV/pE2RnBUydNTRUl1OBrDhktX0lwl7CB1J5J\n719NftItAivVeKOfl0l374RlZcB4hxpGcMCLXNFJf2iY+T8rEZy/rD20b1WO\n3UGGCICpxK4nKMsO8AKkA0QcSAhvdYqulkTHOPP0Vw13E+IkEKQ59lWkexuP\noxylIg6KWZfFV5DppTAZvz16w/LK1/x7zlMsLG+v0K2YgJhE6NuoHFnlZv9E\n3edwu99o2p05nzbdElWFeCbn9PH2foTfgUzXo6g3wIlibTpz0Jr2S7Tn1CrT\nGTyG1irXI1eCx7QsOx0lkfJr18k6uUGH7l1y2kUFImxoyPFoIMR6FuaT9v7p\nTd1WVHbUKlTsC9lYfhoBGfx/joddeAGsOlP8ScQcc5fL+vget0twdgpJ66RQ\n6UghKqoK+VmG0gX42CFFRkAFXSdfjoea5ZpVeAc4IARAbGZdHJtfeLjYU9Tp\nUlcJn16m/hPYaRthVmeIjJks1n76d5mvFlPrUelUSdymALjfV4Aarc+g+OHm\nqmBBQzeEaQ62jwUlWF9By6Y2x7pmo2uXoad3ySUshmJqtRN98NpvVqcFiT0x\nJvts\r\n=0Pn5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.633a9fc7a.0","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/shape":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/density":"11.0.0-canary.633a9fc7a.0","@material/checkbox":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/elevation":"11.0.0-canary.633a9fc7a.0","@material/typography":"11.0.0-canary.633a9fc7a.0","@material/touch-target":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.633a9fc7a.0_1612541894682_0.38492427377706306","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/chips","version":"10.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@10.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae6e330a31eeadf1cc12e3a00d08fe6298ab6d6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-10.0.0.tgz","fileCount":82,"integrity":"sha512-K3FQaN/Y7nlgVtTyZjWOD88Q+5VkNJBUwx0Jv9gONuRjDnelGNbTnzVe1/ESAFVK7fRSoQsEdSM8DVKsjrjyVw==","signatures":[{"sig":"MEYCIQCLCKymaUynrco8zDbwhCYXvr54TqTn0wslhW1iNyemtgIhAPkxFHnX7M8EK2UmJeI6tN5cNXGNOLkh2rnLcfT974XZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXAdCRA9TVsSAnZWagAA+vUQAIl4adPwHgY1wjkDP4mq\nLOf2hsmjquPGR2PdRi74VstRF6IgrjG43ErOMaiR8zKjUh2r6880KTfs2nut\nld/oJusz5nPdJ3CYN2CML0HzUcKIMi4tm7oUuzN+ZhUTrSg47Z0PKCYG9lYB\nWcXLsdOO7wuhZptf9Vl7QVcmta+913OrlA88OQ+JiElSymcsZ6nVbt/7QRfS\n5wo7EepssIJKPNI2PCoYzI98t+cS94pDoCEtaRnHtqt7Re9WRIa+yyFfqxRW\nvRw/BjQNtYHUZS05azK2PC6LCXMH6YycheGE8aQtsR2hheZGKe7ZM41zIztI\nBpvOceOg9WbA9yKMo6SEcmIRKaVR1tuWeU4RehyFN57yj/wa1pJYV7pEH3DT\n3zVpc+ZCclEXWatey3d3kbKLQt/kksOX7uz6gZpieckaojfOQF3gEKnW3K/w\nfUObxcNGgoualsq6LnixPrDfS75V699Gri1FEl5pnSWDn2CeqIAiPO6ym62c\nX+iitty+60leDL5dVYIquRRzrMgYG8Egy3vTloRtAZYJDQhG9fVo3o+7GVip\nFBoiMlC1Evx+K9aY17Glatn42ZG7CgvjmblcibM6JnapGXSROxxOImgutr4e\nY+rDvnf/3sfg26QNrnH7it0MsaQuD794Qqze6aB8jR4L01JNXpeyXt2/eiEj\nzAfJ\r\n=YNdL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/shape":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/density":"^10.0.0","@material/checkbox":"^10.0.0","@material/animation":"^10.0.0","@material/elevation":"^10.0.0","@material/typography":"^10.0.0","@material/touch-target":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_10.0.0_1612541981108_0.44717713146720994","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/chips","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.b5227247d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cf034fb25cf83fafab5e72bdf160bcda4786d3a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.b5227247d.0.tgz","fileCount":83,"integrity":"sha512-EA3Cb42JqqnMoHcgk7xM+gdbUu2WuieXs/wt0b0hwcpwGKojCOnbP+Q5RpX9Ks/OORkhBYROfjBi4Gpt+9+SCw==","signatures":[{"sig":"MEYCIQC0GQckfMiU25zCb1D8sUqqrltF4M5ZVXVpJvPC6Z2UggIhAJ8kkKUTChUhC6XSPGCl5riBRokVLc+ojgAyg0fScTKF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYOYCRA9TVsSAnZWagAAQ3oP/jMznq0DAmfnb4BuqWRm\nzLKShhETQLBWwzie7myXjGhIYgDBoH5f/8YrqF9cyXPRc+qdNmNclqBEV1GT\nzMkGvsjJ5MMSDo8MLabPLV23WbpDHFN2RskoRxeZTWl6m8ers+Ukmy58WU5+\nJK9y3U9z8EFG0LRgmjGLXpwRu6hNA3WNi7+jydQZ1q0mynLM6M3yn5puQmkL\niiKLNBrh3cSwJHaunWy80v7wzWUqrGP+8IpLJY2kMRwZKOchZjB9KPogHLKK\ncRK3UgBsBkkSq0b4bTd5Iv+KgDOw+uy+TAN8pTFF+Im5gavdAqzafxJPYkQP\nR9PacxvX9f9fjpqBywhsWdeaKhYgBFzInSXRrytpfFCVdXwiFiiTMcooHmTy\na8CeVvuxZh2JNY1zjVevz/PNnN+L5OOOAasYtvQI8SGZjaf9Z8nnPpdjzIKI\nJoOONAydXCIwslLQKyWw71/S/Z4WT4YBAGBq4x7BNYQNhQMi5Zy3+cPjcVPM\nXOM77WaWWi5zqEMyK3QDr3aSuVkBw6u5bDC97dKExBmZ8vYq3yQ9mxSj70+o\nGDEmmeLz1OdsHIg1Qx2GU5vKjb2c9F//a6u06m7wfNBWsWl46W+/cYZYdNhf\nsOr06O2doV9VD3MKNHf5+hIP7lonnLjai7iKYcsndUpVI64VdAAWkCxRbxZR\nED3b\r\n=oOhG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b5227247d.0","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/shape":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/density":"11.0.0-canary.b5227247d.0","@material/checkbox":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/elevation":"11.0.0-canary.b5227247d.0","@material/typography":"11.0.0-canary.b5227247d.0","@material/touch-target":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.b5227247d.0_1612546968221_0.3547736895502327","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/chips","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.95322b11e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c72b7a6fe52cfb8c757f8292bd317473bf5bec76","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.95322b11e.0.tgz","fileCount":83,"integrity":"sha512-8hFjXMPIykcnijD62ayKdTsRffBsdAbjUOY+mA5Pm+RGPtfpG3HxOdxAay2DDVAeWlUZjmhkL/bTk+O0nzv0Dw==","signatures":[{"sig":"MEQCICLTy25OCy+A1mPSEbOQAWE6aEnVEvt4RbXIN9KI3Zb9AiAy8U6WuxYKMWkzdqRWPc8JOadTdrY2v9TiBo9WJSxu6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdWECRA9TVsSAnZWagAAKiIP/RG2pdR03+9Ss1/cCUtf\nbQUxXjEcze5wccdiy2hQL5OOu5L9PqfdMJk2GvBKYoPlJD7XEM2sd69RGhTQ\n7BSdcPJgSNDsMjo6bEeFnZXijPPSEkLSHbT+iW/OxT0mvRBcyhstQLVA466L\nho38nfr9pjTFjzql/ZMhY91N0G03bAL05RwL6wcCVaq7q6BBoobL9xk0xpfk\ni9cNURK1vHu8JpGNn7yH+GBBDB4o0HqE67+EKRX3n3/c4GSrg5AtVmsNbS8E\n9M3wuOSc0dPAxtGW3OD70ewvAkS4liGVUqaWJExApTmaeLVEHnaDLl9fnNNU\nRh5lDqHbKQvBAfQYAwtbhYOgLUsIamIQbVRw2R9i7JZFRpcThdPfN2RQFhsk\nCAhW2KjO3EZuiydm4W5EScDweNVZxjbjrDuCe31IaGFU5f3YL6wqZhWA0Aj/\nMc/7TUqsqr5twGdCCtq+8QifnMpmMRALR5tu/wTdSslJXXLfw2riC7Hp0kAw\nAI+t3cGNBCIi2ADEyNnSzRtbmsmwNG8h71YSN0t0AOfQ9ort20hM1LTiGLH2\n+XEEA2F4K7VNSpK1hn8icqp/6oyqn+gJf9Zj0VlYAKB3+goFgdfDbo16y8iB\nYJT1alRDHnPJQUwVku3ZxfA0iAsqfBCrNIz4Xm43F3e+SCbNjqRb+TkdIZp5\nUkXV\r\n=wRL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.95322b11e.0","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/shape":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/density":"11.0.0-canary.95322b11e.0","@material/checkbox":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/elevation":"11.0.0-canary.95322b11e.0","@material/typography":"11.0.0-canary.95322b11e.0","@material/touch-target":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.95322b11e.0_1612567939866_0.13522442535782186","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/chips","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64c82207ba364d1bde91124e6cebcdcdce07c64a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.1f318ff0f.0.tgz","fileCount":83,"integrity":"sha512-EFNiJxenXkGiUlR2zeK8oEgtAw/LACJ6thlN3LkcEi5I2gNso5AIX+4jHt7ynq1YcV37DWtkLmW1KCLieOTc1Q==","signatures":[{"sig":"MEYCIQCenIx+ENcpxO0tHjo6ut/ubjEe+nkXiKEcYRdMzGkX4QIhAIOBGX6VIu4z1nxPR/1ZgfXuZZE23f1GGGMo68/7ZIYd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd1LCRA9TVsSAnZWagAAEzMP/A7R8QhN8/NYEclBszMa\n8O1A5+YuZqjzRwyvroGGgZRNyq6QhTYuuJaA3MHXPBrCKNmLCqCbuVoUqegu\n36A84eOk7ZoI1Cdfw/PzLWL+fJ8oHq7t2ziMn6o5HJg5QqhEd/GiGEIe7evQ\neWhFoVgpY29Qh4w2gkYO7hi0h7GKzrvozFASifE+B2dioa+i6vgf0g6PD8ET\nH9GtulyVZB0M+5vPv4dj501v6UUZMkPD3foFPcHu4IX4JIiNQtw38f6YrF9+\n5pxzpzemoRt+aj1QeJA/k9s70A5HDs10WFfaRnbEzbe5IcxCsOsNdtIKhKnc\nMaYnRZ5JC5SkFZG71mXan0dyBitH2wpiWjwcx/12aUYuaUYZa1EbBxulU4aK\n6sD5Bbrv0u1FRAUHPJxdpnUwRNh6ME6PDY49Zy7YXiroER8i84Y4hK6kKyNe\nTR1g2T/QcCYrtNDAperHzZ7nTb5hoElyS4RRr3mW4rWH+bQUWdGVrvhe+L36\nPEGc6QyAulXzD+YrjGMSVglqADQ4CPemUVcjTfYYF1ebM2PjC/2W1igPSrMv\nyEyDuZ4srFyUy6ThdTWRhD6W9RjiZCn3BdOhlFkOMogBeI6aVJQ/iN4rZ+Ke\nEN/WaacULtGt30D72+6YU5Vk8MTegmZJX5byZ5xEnEqos3L+wq1dskTWbCZ6\ncoB+\r\n=2k5c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f318ff0f.0","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/shape":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/density":"11.0.0-canary.1f318ff0f.0","@material/checkbox":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/elevation":"11.0.0-canary.1f318ff0f.0","@material/typography":"11.0.0-canary.1f318ff0f.0","@material/touch-target":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.1f318ff0f.0_1612569931161_0.8666309557804333","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/chips","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12bdc410752005364fef2a1e21ac526bedea819a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":83,"integrity":"sha512-taWpg/MdKnL1HAQdmxcQTRwQJg7w6vL9SHSzikmjcCLLfxX47O1YkQGecbdORBc8RHIfxa3Ml8jVXJAulgx7vQ==","signatures":[{"sig":"MEQCICmrFkrmXwTz0bkW7iJymZQWc8Z13JDAVRELDRqUTn7rAiB4Qsl5JoJjkC8XlWjFCmr/cxOuiMuyvxjmvAmDUVnamg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVMVCRA9TVsSAnZWagAAQd8QAIouOsK9dQFDs2NW4nNl\nzDXqx+rl/Xg6dxP0O7Jst6aVDvlx6IQe8qAn2e4ms6e+avtYZM92e5G1rxCP\nHbCtlk4GOLWq4omRj31TG/KBDd2yaV/XZrjTBArLhWE4YOztTaeeeRR62o7U\noFtYrWiiqXVZ/4+rYsZFRvDBlNT0EE9rI/Vno7rKqb6kCqO7YYOxCOyFi1k1\ne8K98a4kMis8WVyOxxgwx5pRv2QzqKqicMoWhHV+nh+4fj1OPvCjQgA4CB3C\n0c1cjSy+2WAn/gK01gF5b0GyiDm7uKsSryqZ4I/odl2c+T6lkJCWewzI39Cq\ndbh1wYN4KZct/mHL3JfbzASZFbCEMPPG5FDBf7KsqgjTk2Sxa+XJ1pjZsQIc\necqmN4Cp0K/lp/sRBOW+OhLFqYt5weqWecxMWHq/PP7PVMWGHjh/96bUyjC1\nP3RZvXxk7xSJC6jqABh6IZ45j6wnKXZHGx/x3JPDxJLx/QGrLMRfIv5Qz7qZ\nvnTQfPbsb42O5GdmUxauPAUBK7Fhy5fV/2T2ZXLGx6aKGTUmInBhmHFhEN3Y\nHvHd6zGP4GsAIJAHS6MlXAImkMMn0Kq/IS+edEWkaxmxj5uG/gYUmSZDUIFU\nZod3y7fCf966YHWa9D+snG+62X51da+diDsK5Aya5el7oZGeRj1jqlw6hE4Q\n3+zx\r\n=dUUa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/shape":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/density":"11.0.0-canary.ab12cf7a3.0","@material/checkbox":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"11.0.0-canary.ab12cf7a3.0","@material/typography":"11.0.0-canary.ab12cf7a3.0","@material/touch-target":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.ab12cf7a3.0_1612796693179_0.6501973788924467","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/chips","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8d87e65413409286662b9b18b525bd33a7c4c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.98db2c5ec.0.tgz","fileCount":83,"integrity":"sha512-h/bHgK2axB7tfuuTmQ1Ck31RAbqZ1rDpYidhoLd1uUw4xMsQEuqm0dbp6Xdi1xaBl9MLJX1IxtWHrv585vxgsg==","signatures":[{"sig":"MEUCIQCcTwQPWrdZFxgAJd2ZiMIPVBgo9kX3J0wrYI/dCoOc3wIgCNofWQFfQHl2sh2MaqLVD9gxjQJwgUZdbOwPiNzRtAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVo4CRA9TVsSAnZWagAA31AQAIg46ttrPQt5Unzy+KUq\n9Q6BBQrdq3HTgeQuHMKQaSSijuNp6RwF/o/dbLgnde42OBmc/Tw43Nm3xWJM\nHbLs/gJPMZncQXBmFefZMH1fZYWM9QEDwT6N9prE2R2tV8DhVDiBo5aMGcBm\nbnT+xYWY+dm9hMfMO6dqtIK3TFLNO7IVdpDAB7tgvGdsFHpnbHqbedo69RFp\nZuPOsJtI8ICh6ryNYaxRg7BLZmqhfG/aeAmgDZI3bP1etVAOHphieYGFAYtg\n05c0XfeDGGA38xN53xld0rM/g5SPzP1KpEChexKYsQO8qo/djTf4SHhgBGeP\nlgBrG4bN2QASSWfM24EKmq8DfmkV1neDeapYFz6bL8kRslPhgITCxD+6ek6W\nplIAemlxkRuaK1Zq7TuPBH9Awf+2b0BLciflDEJQmm5F8PHqJ2htkI357D+P\ngxGltxW228GWPDTKjKIoKjCQrQBp2F0ISqm51bSssp7uLizIM8SQJ+2ylNU6\nJOBrZ3nrU9MGwA06bSPFaRg5lv8drwP0Y30HETFCIstu0t5dVSz8BXBjAmh5\n0X7FKt6yE01B+EKFWf9U/NYpg32cdOB9sTViCumLD/rp/KXXUO+EwfRch9fY\njs9jn7Gfxc6ibkWyjKX9Mk/fLD8ST0ummxAPJ45p8GsEz6kS7Uhq+Z9vDDtS\n9wrN\r\n=kObc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.98db2c5ec.0","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/shape":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/density":"11.0.0-canary.98db2c5ec.0","@material/checkbox":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/elevation":"11.0.0-canary.98db2c5ec.0","@material/typography":"11.0.0-canary.98db2c5ec.0","@material/touch-target":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.98db2c5ec.0_1612798519953_0.5956379341705738","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/chips","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c02f055c0bd172ec1d234633ed2fd9b9581b4601","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":83,"integrity":"sha512-WV6cptusle0d3Cfjeh4JphrM0PDBf24ug9rKyyZb9CRJrvEgmx9HMu4AH+rvBlWyKI3V5o7iOvm78ZRvgYm8ZA==","signatures":[{"sig":"MEQCIDcFFG65YjvklqSK24McORm9uMD27vekFmXHSbu13RbAAiAIM/9C2zReW0u49NPfqvIVD6HdNBo7KH56SVs/TNefHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXJQCRA9TVsSAnZWagAAJOsP/1OzKLNqPdy6wv5lrSkV\n1VyX3qANBNVS1YXj6+OzgDyMI+f7FQ38ItgKqmRdUHCrogJJJuwBo4s3eiXS\nCl2Ts+hxD5fREQ407v4kkIhkvAfXxrb5EJOpu6Mc7xUAupEIEKNlMtKk2a4X\nMLZVIQsHLgD1f6tT5a2MTRmOJgF4r5zaMh6Iijp41l4m3eNDl3uFw0bE0lVA\n+zASkWSeOo/ZKLAmslHs/+l9HPg9KXf3uJFv28f9VbGAkOJezAGtQjSgXbau\nDkshzff4m/zClOfYjTO7HwOvXecbG4yMJVvsPqQr5aKfWYg9cMun/gXEjHmk\nhqo3WQ6k9CRS70NRFYfCu7dyvpPsPHBdVlh7hexOiY/CeLvt5B9xBFFucN7h\niGvbDCgc8g761mFZdSreV81W6F/I1OIjtmVS0M+PO+qva5dH1+cim64LU4Ob\nOvVTTymW2YTRjkWmgQX531WCsGjYK+mxV5locepLDyrxuX4gQdm4ubIgHOLa\nQpw4T9hga7nxVrja8tDJVBkIgZ1Xli0CoV+x98MMCE3hov1c4Sejg6cKaMqo\nlkf6AZr5mXO17bkUK1RnbEwRwYKHHPfHoQ9IyNrCIVQHvUqbAKFvg2W1vmkt\n4JYNEiJhhwsq0L+JUw9ZNfmIy2hh9vOV6ixgH2AT4/JrSlD3KLYOncHret9J\nzP20\r\n=q1Df\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/shape":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/density":"11.0.0-canary.1f86b9f6d.0","@material/checkbox":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"11.0.0-canary.1f86b9f6d.0","@material/typography":"11.0.0-canary.1f86b9f6d.0","@material/touch-target":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.1f86b9f6d.0_1612804688325_0.8605722290953193","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/chips","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac5c37d1bf6eff2f426db42aeb2509df021eea35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":83,"integrity":"sha512-PumC0HPvZf/p0pwn2aFKnWnZBP+Fk4lf9wwe8cN2NzJRRIjIa4CcOXZV+gMLYoEEPD1r5uV3iLJyUMGB/CEM9w==","signatures":[{"sig":"MEQCIC4e5wb+qYpJTpU5/pClZaMcjJmRoqbYgW+u3WGqGjf7AiBwz+WxQFZBsXisbvKsEIScz4BRwMu0WSML2TdV33FV5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXyJCRA9TVsSAnZWagAAylcP/3rntwrw9bL9UrXK5x5z\nMbfqsKUJitXCKBYmReDFHHD0fp01zGEK7g0V4ObwFoNgjktDqclLzghOVe+/\nXkJcXLJ3GomGmShNUV2oW9eZ7ZAZdGdLQi0/wUGhzgFRxhFVJRDIXu80/0ma\nwfFW43MgIIofKMOfk0+PTeN/kqOPPY43aCouY07OQVXOcpsZbvn0HziE9rpd\nOr7jD/fdOxpn0K8D75UCNlaciOU2Ug9lYkQt3vEXGP5OSHa6EELls2wZFpaN\nHgSXXsZXAoeId+SIC1oPWm7inIdsaGOTCYRj3nG/JvzeE3/d6RsVgpphd4/C\nV26xDA69AiYlqLoj8mle0xlo2SIckmeuy3TbJCK6AD3r1r0fzduPOdVZw1Xe\nC2SpIH0UsfaXwKUDND6SL+HcwM9qt7Ht0NOuYTPIshUIXKsG/quB2RzpKqZR\nRy+fDfzVWh1N5/he5O9Yng3EV/D+odihozJowvtu0xYC2kG0OeD9kEEavqgv\nrDtUlkL/yYMEMBulNvk3jyLJ/iKyryL+9GAGva5FszI+vbxUI+6lr4MU0UNs\njhvalR/5Ua2FJbQw99Ea9nOrHGihEwmxp+jRyjEW7GGKKAazfUPcJpYeKBrQ\nk3u9av9UEISfg5cTHn308fWi1b16j9OKhlQ0YVLjMG0NkgEogkktQ9GOuEN2\nABvw\r\n=Kcwu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/shape":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/density":"11.0.0-canary.aac8f5d9a.0","@material/checkbox":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"11.0.0-canary.aac8f5d9a.0","@material/typography":"11.0.0-canary.aac8f5d9a.0","@material/touch-target":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.aac8f5d9a.0_1612807304752_0.11923421899752418","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/chips","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46fdc24281ccca26d67c2a0ca6ee17bfc3d092af","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.750e18fc7.0.tgz","fileCount":83,"integrity":"sha512-uHFZcKH40ET4bphQblRcZYOPEyqajwQB8ZXgexiNRuQGNCNr0tXXwvse+R3LlHLFv4VhlES/Xy2i9uZsYEacLQ==","signatures":[{"sig":"MEQCICIMKgk+clXQWqhSwXuINDn9IWNmTylSvlT/TXF2kWr/AiBx7O+KHcCl+fCLjCfvHuJMO0IFRq3EGlg1benPiql0vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbApCRA9TVsSAnZWagAArg8P/0YETW6Oq4FbfUZI2O6g\n3iW3NfbRYlPJhrioCCzNdmlvNGaV2R+0iFAN0UxXVPyw8IPFVHLVPr/3JLgv\ngN9+99G4i4+oavhgdYw6nn36EBhaqcmr9RdvplNnkBNjgFukIYx7ejyIgEg5\nVqwu80FNPg+ZgNAotElv3wY8tiNVYivamAEFvx2xwnyIti2CQfgjecHgDkGq\nXPa7UqiB1eQry7u9veLNfsi+w5v26kV7v1txpx5/q3mZEonyX84fmCS6WnFX\nfBANxqeUDZlOXAPBKHE46TXqascL6Wr5nq7JgY7E08rTr0YrBGHajyy4xIX/\nQp7FYjYpMrh9TZ/IFZmTD7BrDnkKPVs1O4PmLn3vtBag5dQ+Dp9oBHRLgdiN\nMs1sp4YLUVnfYBueexXqfH9RRVNLI4HAGnJymMj7tWWrKQTNlLpgaZehMZRE\nyjre/BHvqrVdJC8jYjHHv7+1w020S53NM5/LIgYa7l6UKOuI8RuSr5divtII\nhuGlWpOMOOs+YHOCU70hyHP9WHsx4TZFx/I2gtUlyhHUjJV0U2QSTxhQPznH\nBalY0A4etCIEqE3z3h79DqN1YmGaY/gEt1XEy+WSH1iceYNJJ9LBYo1FRzFe\nj40xxtf8a5Ck04v/RKPHHUchZOJ85y8+DvzkWt9Bf+ZP+jQ9OLct746ioEiB\nrQVa\r\n=L6qv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.750e18fc7.0","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/shape":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/density":"11.0.0-canary.750e18fc7.0","@material/checkbox":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/elevation":"11.0.0-canary.750e18fc7.0","@material/typography":"11.0.0-canary.750e18fc7.0","@material/touch-target":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.750e18fc7.0_1612820520447_0.34101731172301264","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/chips","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11f4d587d76b79e272caf656c326eec826bfd464","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.b62b1266d.0.tgz","fileCount":83,"integrity":"sha512-G0p9jvTqejgniTK2RQErAqANGWry3+2P7wl4nVz8ihfKVVxr0XJBz6e0GGMrtx5Z3oVr1wUY7EJfHChfuKPu1g==","signatures":[{"sig":"MEUCICA52WImNz+oUbO7fUln/lQDm8QrJZrSvrJccJWpHvdKAiEAgig3jrN6zIlUQB9dTjwBCnX/l8GAaeHxYxyUD015rgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwRTCRA9TVsSAnZWagAA8JgP/RYDaqL8CxAGumTzWqtT\nvJ2kiBY3zzPnppNtaaE8O3sb+bzcEFEnEpa7qzjTZFPz/IekXGTLdwIwhMuS\n9UoAjEDurBuNLvmrkeg7wq1Mvtvy3yyzgeJOHAU7cwTMZpHyNZCleIxO1G4w\nqK1M/Golc1mfIFBH5Dy0Uo2KzRacFB+jvkbwGFPmU97mh5FkYh+rrX3zL8XJ\nR3Bjr+izTRCAhS1gWERF6Qr3XxQGKWSaSCqjEXtIkg9kNo2JLRYFSJOkZKwC\nDxlHqya4OwGlwLCwvrYL7ZUUp0nwLlL2LvcJzJjKg0q7i95IzFXnVuli7Dwn\n1T8ye+10sVYkBTeym6lGeWpaoT1v/dbfbI0wsJdwYwLoVq/7vRaRKOV8rLMS\nNHyWiACVP4V7vmxEKHDldwNNoT5F8E2A2Wx1N8ns4+rqGrQ6/blgbTw/XB+U\nzbjefIAFO0wue6Ehl+Iru37LKRW5mXiCIzufkQnf7lKFfcIGwd+kMkrgWGjb\nh1zeg4luZe/CAYE6vK8pc4IX+gekEcGViN1YJGpGIeq7Vs9D32xO2F+pGQD1\n8KK9PJpaT9vfKl+DzpXk0nc7jDkLlvspdYB5S0BxqgLxwhfvzePZr6dgRVbB\nB4lUfGBEptBW0Q2vKu9J6d3+SwcfNWNkW9D/wXBUOM1gR4Z3P5lMjZ92sMG9\nVOBj\r\n=2F5R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b62b1266d.0","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/shape":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/density":"11.0.0-canary.b62b1266d.0","@material/checkbox":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/elevation":"11.0.0-canary.b62b1266d.0","@material/typography":"11.0.0-canary.b62b1266d.0","@material/touch-target":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.b62b1266d.0_1612907603261_0.17518097177574554","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/chips","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c5a3b2ef8feb0e13458f0fa1e354009550fd14e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.a6b3101fb.0.tgz","fileCount":83,"integrity":"sha512-2qg9c292z6VURiyOubNHPWb9kovS62DfHolCpROOCPDeKi7D068+xMWeNH1ufq1ZTg/CTkBujSQfmrjQ3S94cg==","signatures":[{"sig":"MEYCIQCI9sovizgzE9kMBzYMr7F8wfBYi9d6ZdEBvBBcVmRrHgIhAOr3ATTg/cMrYvYwanQQ6yBboLSKza7GUY0I+dcH0jdu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbs3CRA9TVsSAnZWagAABrIP/RpjTvzd2xmiIdWGvOWn\ni48P2PXbwHNlRNmfp/ZC6QFKpi5ROnfAH0IAvxh8gSjGatJZ2E4Wg2Q69q9M\ndVvr51fOqT5H95d76UPyoxdPmAfz5g84uBIC9jmp5pTN9tAxnvruuAy6/h0s\neLcrO11usMSM/0B+N/E+BeD6UMBp0gHQnSgpvHjkX5Mamfg0XJGZb691y7Wl\ngG+0K+QZB1XjS61j9+1LtGqSpbYk/x6bgrHGsA0kUAgjyL2AZb7nQGK2kYSO\nGpQW3SV4QVNn6eNYOSdnCjFF54OaacvrsGTzevlpn4NGiqyo2hEa6FuCUcJr\nf/H0wdadBcgPdADeEgncxhyRlobgm8+lMCBtL6yMU/3eV73MzZJ160vpm+fg\nuHAAFKUdWQ+hcRNuCjM9p+xxa83aKfKx1jd4JAJgiFQmo2wIFC+ckQywRsuk\nlR8BBeSmhp5pB4RvbYPQZe3cIuanu03XfWWRfcooctJCw+iKNh4NEnqS2zwF\n+5Hr7tRyrxVyiY1UWz0OTZ54YoW2cCVOW59WNdn/jNGUG8exlkgyF60H20MS\nIx3p0xyY6XaDUSeibgZNctL+f0R5Gv4dL8DAxMrK8UvhUbeJxnuxwyS2H7MI\ndE7fy2SZQ3BGEes+Etr6wVj8EvOq5BuZj1UJ2nC0XnxuaN4110SNQty6mO8E\nogcQ\r\n=ArX1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.a6b3101fb.0","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/shape":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/density":"11.0.0-canary.a6b3101fb.0","@material/checkbox":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/elevation":"11.0.0-canary.a6b3101fb.0","@material/typography":"11.0.0-canary.a6b3101fb.0","@material/touch-target":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.a6b3101fb.0_1613085494750_0.598567765291484","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/chips","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.ed88df700.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbb1ab2d22a27c27ffa871fde40d43cf7f090053","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.ed88df700.0.tgz","fileCount":83,"integrity":"sha512-0+3xedvNwLm5+c4kAOHiH3kAKqpN8JwWddUMg/Xx5dPgtLbkTvUNKwppgSza2YTLYJztddxdLm1dAWFmAZ/uqA==","signatures":[{"sig":"MEUCIQC/XSmj0T+GjWWdDDzGFJ48PrvNUElcNMW8BH8ACtOVHwIgSFQlzQXE653HrKN5/ZXIxREXJOQdg3M1msp4uPKhLsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcbJCRA9TVsSAnZWagAAe+YP/0Tj+HVCSuqSOQMbvPUZ\ntXZ/xovtTNwvQGz2qxFa1kdxBVQv2LuUZXCxjDZpdn0LPUWnQZahxg8Iqytk\nwTbJzpKMf7kSYQMGORrXWsRWrhm9rSu1pb9layuMP/Jp7hkwFmZ63MpPCcKn\n5SGum7HUm2oEOb6/Sm1s/LeDuwslFxW3my5R2Vzgkt93s2aQzCBFTEp0JOv+\nux+V+bbFNh9fYOlR3SWX5Zf7ORvMMywkXNKHJoYkO++G/pCVa948Ujbujwht\nHogalOw2CyeSkKgMg8o41xALSJSGEpF7MeRC2bFuU4F/2IPhQHSOkcRRkSEz\nJZa2VbMgZ/1R/tNG8NIJaT5Itg5cM5XDRJXSjJcezXyPH3MB/nrBSCKy7gPO\nubJn8I4K+dtgDztrOOnzc8FKZQ9RBKULDJPGMNrjdtJz3g2ehHFeyOxwubRs\n9Rfxzx3bt6+d3VUh6UCwdPPNv+AlujUW+kw3QmltFU4DLA/2xBylmf5MW8d8\nJO7zECZz7n+ugwiCQMOOyzVdq2bek5xEWaqTSU/kONhou7iGtG3U/s7VHERF\nJCo2xeyxBLXh68wEYFhCfCjP57Kcu6G2hLfYETkUJYzlLLvdP117f65xigIk\nigeK4+XsiAotZqygWbKXtwIfiJz3264V6A8niy4ysspr5XmfBRYpgtTdFngI\nUkzF\r\n=zm0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ed88df700.0","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/shape":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/density":"11.0.0-canary.ed88df700.0","@material/checkbox":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/elevation":"11.0.0-canary.ed88df700.0","@material/typography":"11.0.0-canary.ed88df700.0","@material/touch-target":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.ed88df700.0_1613088456816_0.2356469775984782","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/chips","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be09988d0840a3342fbb5f2b94d1557eb99a3be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.d30efe6b4.0.tgz","fileCount":83,"integrity":"sha512-68VbSO5+w4a3xD4zwuS+qW6kmdQg/0A2lqinW1c935QJnbk9peAkdBLQ0mhbZeja6LYH3ClT1mUOqui99o4Y+Q==","signatures":[{"sig":"MEYCIQC2TS+u22WWCdlXhq5UO3ZgDILnKLGNLzVRjpcEdrJeggIhAJsy2dzhSGXCQaWzHhaDF5CIBK/N4bZtW3zFTVFcQNHH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJesYCRA9TVsSAnZWagAAtX0QAInvwlV2HIFSJjLiJbd3\nbQVyE4TDun6NBcQhn4Ln2yLUMaLj4KaK6V24ZbT/ezBAQ/iAPoovr/Jhibq0\ni8/mpEJwRBj7JV0oS5y7a38CWCpSw9MsW+njh/jKYVqXcA7LpcZTnHEc91+q\nEJOE3MwLIOXpygxfvitXS7X+MPlSjJlhgWkjlAzF0vIkAjvpwBH7DRl38Mjz\ngT6v+xQ0mWDW5/6rZN0XErOxWKsPmLNRWoLHfjf3cS7YwxXXhfb+rd9rAA3j\nzKASdIFNSFEm7befsdXJ5X1uSeR58nkNe8f12YIIIcRSMRDujYjxDrVmrfKJ\nxQxQzTpy2GORA0e8TFpTPLtnHJsIwcaIovDfjVQX0BNgqjqnHcl+WxzRTp60\nCQfCrxOkQYHJ0sWoY+nWwwi3hr3KjULW7y4qtrCvOaw3+Sd0NLkBexPpT6rC\nQaQB6TAR/NGqBFV5bOe/1PROntRbWDlIVspNaQOWc7jG6GS+3m7rxyrHszZ9\n+BGmKYjxq2EO420xjh0i3G9/RIxKyorVw0oQDQ42POlhmOF0RYukFvp1VLSy\nUSS3B5nBTLQzGnKV2/6/RLaDasEwhLL/eXYmlwRMvGzvod8FJLtIEUd1BVl/\nFF5RPWPkRVm+zGW3G3MNFUthYPj8J6HN2dtZ/sCO6QDNinGyVc7vZbmYLLkj\nkRqr\r\n=/RU9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d30efe6b4.0","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/shape":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/density":"11.0.0-canary.d30efe6b4.0","@material/checkbox":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/elevation":"11.0.0-canary.d30efe6b4.0","@material/typography":"11.0.0-canary.d30efe6b4.0","@material/touch-target":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.d30efe6b4.0_1613097752379_0.3519969473002109","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/chips","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b496392380d583ed3ce42e272453ad4926a0c9a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.0393bdc4b.0.tgz","fileCount":83,"integrity":"sha512-SvZMmQGSB8qE5G2wCnkztiEGnWhFnnY2lVUzX3rfo3ABxaAeN047pK2vfA8E4tJPcXp23f2Rkwz6mmxT/h7bsQ==","signatures":[{"sig":"MEUCIQCSw1a1fs10BsBInQWHxpC5D2K9YRjPoa3EPDrv4pE2LQIgFPcKr9Q3uAhf+aKN7AZtqpqzvy4FLau/w4LNcFuc8VY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgSnCRA9TVsSAnZWagAArHYP/R/NayqN9VWkjhy7pS8W\n24mhN698QDjplvg8Gr8fFhFr9Jpiau0VJqBN1qoyQkFfChyVcxuh1yEML7wB\ngIkkRlsz9XfaYl0YoEqoH0upxsK/wwOslHa46l4CyzD6JAHALppPB1Q976US\n9HNXQiNFofDIr7Rs3IApNqRE2yqBDa/3H2nf70Xuc1m1I7pxUTI/ikSB8PBs\nlbZ/vkcBKRzLhL+Jq2hhIkPCOM847lkVh+/+YS2E2Vy3LYdVETB/vafAPyXI\nLpjKN2e89jtkAh6SKbYvIAneIlhIgPWhqwBxHGEO3u2n7eAJInPqKHHk7mfi\nOIzlRXa2gvEJPiLEMwzVRc5q24O5Au1U/Qc8ZZD8K+gKiIMQMZZVx0xGYtQh\n+fVjg4Xp+69v4N+AN5Kgnp6QbCwbPYIJkXHLVIf3VXSkYpZl8CAdgUq1P3eN\nIY3a9KKm6hjmWHMpWl9HA/87NaRvh27MdQXG2V5+ybCjtOG/aaVivwmuZss9\nICSZc2+6ZCgQiVvx2Q6Zwkkf0kmu2913ZQa85aBBCZnkzWlbsvjbjRH0RuwW\nRers44HHugoy1JPrkQheOEzBfXs1XAtGS4JL4EbP4D1DKMm4xP7PCskMvPLA\no+bfmtsdbaTcgBwiEfIG1VMn46Ul3nYxO+V7azH850TNGLpyfsLcJnvbZ2UY\no8A4\r\n=rFJ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0393bdc4b.0","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/shape":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/density":"11.0.0-canary.0393bdc4b.0","@material/checkbox":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/elevation":"11.0.0-canary.0393bdc4b.0","@material/typography":"11.0.0-canary.0393bdc4b.0","@material/touch-target":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.0393bdc4b.0_1613104294568_0.9668049325693331","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/chips","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c14f860ce9e04cea4054ea51729b4678246375fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.7cd26af4d.0.tgz","fileCount":83,"integrity":"sha512-OWDkwRKWv8CsXpEy/ov67Lkxlm5GT5MaZvwoXVe+FOnS+53uYpCqtU/DwjmfQ0HRO6kHWRJi/GbmLeq9mTISZw==","signatures":[{"sig":"MEUCIHVNnfAohZ1dUpvKfQwm0SquvYdSKn9t3/nyhmQPiX8eAiEA8JnMzjKDeupWHkyKhGWbs0NYPOTRmTrdMsJeH3mGq08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqYECRA9TVsSAnZWagAAtjMP/RTLN5IpBrVTfthbhVQ/\nd1pYbl9y9nn0pVZaoQzlScLzBcd03/2Mn+ZUVgF+yHbw2RqH6ijGsyHSZQ/g\nRspA1XpXFB60IMiWey7OFoyUuWitVQ7veat17AxK2In7T50ZKSeXxrw5wQIH\nKjrhSdS/xTuR5RHp7S8aNxI0kgWnfIbkhZ7sO/ohOzCpBAhImNBxWnhEfxCj\n/qyZjzRL0N7q2vkRIjQO79pnHkN+3QfxneOZbINRFokT+K75F7iEzrcD28h6\nHvaq1A5N5VjhYvEEC5ffMozPM/BjNejgjOOKTZaRgvC90rEBjvM+2062dAq8\ne2fnXAh0/ZGddwAt+ZZqzbG/BkuvadDxma8CwzU8drolMM9l7gj74OHJXV/Q\nYH7uOJlq63Fvx1pUM43GpoEMW0RNWU3poE/3Cio6z5MpZwPwBxEDRPEaiJAx\nyVFg73VsbM0A6Q1WbHS7iN6cDF+YiWxGIZ3GmhXxmB95ISedWbTNzuQFd7pT\n50F4Y7ttdLLP7V3ixF/a3ZwHfzmJPfpPwave36LTx311/KIKXtZ98pCMleaz\n1iaztpFkpTm9D4Nu+tfQOimqSIjYXBGMLLpGy8EwrIZG/U5a+4i03bNNjcru\nw2LJhVZBUrWI/DJEioMGY+YKfgnXjpxGSpP3rqyuladibQqbF/Mbdum5JKEt\nkpR0\r\n=QYb8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7cd26af4d.0","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/shape":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/density":"11.0.0-canary.7cd26af4d.0","@material/checkbox":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/elevation":"11.0.0-canary.7cd26af4d.0","@material/typography":"11.0.0-canary.7cd26af4d.0","@material/touch-target":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.7cd26af4d.0_1613145604004_0.10133084280922655","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/chips","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eff7797316fd34de72736ec501a6f7c6f524242a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.71fe9a067.0.tgz","fileCount":83,"integrity":"sha512-S0A+SNJoswk2SF5z3VzRPsMDjTL/2NQu07EmdhOR6Psiz83UtFopmC+lx7E6EnCOe7qTkrHFXVBrDwUPY88tYg==","signatures":[{"sig":"MEQCIB+oA07C4/81tYhZJQvbCSd/4o9UqHnfwJq9qXrjMmeaAiBA/DVayt85jRTn08+cUA2vfWSbCd6yegQE8kX5FAKDIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq2DCRA9TVsSAnZWagAAnJsP/2E+HfGKrHfk7XGQVWy1\nnY7LS/Mmt4bqhXrgp/CIIzvUfYvOVIVoAjUp9Z8K4UmVtPIOBgOabQr8HOze\nTKVCFCCawD4eM6QTPixQAuGwXXXAnbs1pFwyFPKSvR3wbTcj6uEpodcixtek\n/6/eFR4tzQLlNPi2XuvdJr1691Zh1eMmlmZFgg9KAr8rqxTaU1xrMbS5kN4q\nBkznldYr24PQ5QOA1lHgawm2Zn4E4Y1aW6bbYAy16E49tQ14oeehENTgDKda\nnldfUUU/XvHEul8bn5hLjfKONRMghq5REM7cilgDbojxvzzuxlYiGK4zTFcy\nBKst/s0ix/5IJWs43Sfb9Pn4Boce3tGd5EHPEtmf6xL76LrM/kMia9GgL0rt\nZYqiyPQtFOrxWQ9Sr+1BcAiyPHUmuynml/+s91KzzbUltZTBsEcOnXckbziu\nqKMusAT/oZcyQ4bC+nvT7ZaAg9nsmAMnMsBANu+bscbxk29FPcPV1SRr817G\nQRkYd7vOtp+OooLIMvJ6KDUETgxDioN8I7ALWd9BF9mkaSTid5fT9T6qnSMC\nEIw/fhWotyLPetCaJPEAuHEM+5BbyWnUhHtSn9dFa7zN9RjEcJSmaR6zsqA7\nZ6abSVJiZngsTWvnxFoqK9OK7Je2GYfqTC8LbGZKY1Vp+cA9HlW9AYWWxWe0\nZxx1\r\n=5APH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.71fe9a067.0","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/shape":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/density":"11.0.0-canary.71fe9a067.0","@material/checkbox":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/elevation":"11.0.0-canary.71fe9a067.0","@material/typography":"11.0.0-canary.71fe9a067.0","@material/touch-target":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.71fe9a067.0_1613147522871_0.13462924089308737","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/chips","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eaa88a38bf822417315ec022c384a0020dfa3d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.0fd56a86b.0.tgz","fileCount":83,"integrity":"sha512-Qcci+D/V8RU+eVPlIE7dHnQrObXqJ0zleT4gnYTbZf4EHRI01Tg89qiXKDNfkgGoytd/Qp4CqLfn7FFEk22d/w==","signatures":[{"sig":"MEQCIGDFRZ8ppl4Yq8tnyEHH5ESuJve5DtH5p5/gzE/5ll75AiBaWw0ZhxzGkWmpObzARxZoyVb2E5rk+y1qTtZGLMc0EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxmHCRA9TVsSAnZWagAAtpEP/1IOqbEoY4dAkE9DjKD0\nj/8hW00np12FA/h529BoP6hEFqSt3/X9bHZX6M3qt5h6huduGyaQ0NdHtPff\nlumt/1nrYrqiSdDLQW2BUsFVxP/Su7qbCW4vfWT72z/b/TXJrwcQzYaMBzuB\ncE/q/F2khWOIJwmUJb3aahRee70YrIPCKr3KyTHBVAmACFRD0xT5vHRzdNfa\nI5hMYHMhuTEi+oNFhS3HRz2bDoKqWYs5yisR8JyB3W31GHxbTk5ppG18Hved\nIbezszOez/rd5RuHGhmsQvCeYK7/8ePiDg/JtBmXdEbU68gabeNaFcfnlCu3\noPgkijTGXzDXu60redRLzCzbLB+hb+0vl3wHzDCRmIxlYvJS4Q5eiwg+m2SY\nb9fzyAv1u/CeKf8k+31BDbg5wAlABQH6lz+RAYkHECpNEU12FRL8cAUlUqzK\nXvFdzK/npjVU0H5c2yd4Hjhwb71tjZOJSEMQhz4N4dva5jf5jMMCXEsZtQjc\nBURUcYiZPMbneb+eqqQgztvYeFN8XwH8YYVyQrS1kJb20L5fBvCDbhvkhUh4\nDHOC28CVobsV7tI4tHKGnvz9PhDtyukODrLOSNp2UZHK1dKUkPo5OhF7CbtB\ngC1zN1meDjFZp9dJky9K9u6QXCFvsEBTySxdD5+ltT9RW+rT87VerXwLjDls\nq4rZ\r\n=hpsW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0fd56a86b.0","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/shape":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/density":"11.0.0-canary.0fd56a86b.0","@material/checkbox":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/elevation":"11.0.0-canary.0fd56a86b.0","@material/typography":"11.0.0-canary.0fd56a86b.0","@material/touch-target":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.0fd56a86b.0_1613175174618_0.6238975929135708","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/chips","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb6383f424a0d964d677fa88da6693339a76c4f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f19bbc4af.0.tgz","fileCount":83,"integrity":"sha512-Zcwm/b5TZt9iOvAz+Om4HN7mzWl0cAgyP3dmchL/TYK2hPPggREXJtTJT3Ty/oly6uAeqvv7SHgyO7lg/sTvJw==","signatures":[{"sig":"MEYCIQCkOuuT9l/s3DQV2CcIh43ckMSsOcbBe7GyXmGVwaUKPwIhAKsgGtPRpY5hP1CFwcXOLxIGFmqblp2tOGRZoodnE5NO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLERZCRA9TVsSAnZWagAAv70P/0XvNEhT0xTcukT8wjRV\nIYGuxMtwWVNR26wVea0C6RBHh4kpcBU5OhD9ZUZ2tlfZZMf7KsJk2/+ZDlMP\nryhV0c3FrVs6EG9jGo9/4QZz+TXi+ZZoinYyp6ZImDii59aGyPi/9OmUR9Pu\n/LtMW9W0YM4AlDsJ7BNfzMVrO3G8gDB1JlLutn8LhGRURWdcgg37GmwXD2mn\n/P11YeTHgruzefIg/JOZXYoHO2m93EE/8Fb5J7QM3C1zZYMjGQc6ZUp96vV4\ndpaT76LVtXLS24tTRAd3TavzTwJ4tPI4PBSkLtZQdlqIzueARaDqkPh0w3km\n+2ZATkUFqRoU8/u00VZJ11dGWCBxVDndz9eWPVaKBy+gs5xMT2v2MRzLked5\nKpq/3BHhlOhUBN0t1j+DJK1baLw/Kb6ju9PO3NUs23zJcnXUat6USV0hmxNe\nigmQ+gN/KsZMu9vzQ/lss3xsYNXJLSSLVLO5fqICDFDDUL9Y8p1W7Q/1njvp\n7ieitXLxnmSBZbQjV7zkevTHPKIuKSd8+6Y9EQ+ta5Kv6/MG55t3D0gGrqdc\nWqqUFyx3GTnqYe8wcQ90TqBtogYtwR53l5bVWIc2ktBvPvOaUo0uiymsWwei\nGbrhVxUanPvXrkb5mdWmv2aeBt3KM6kEG4RkOYdl0O2GdV7YegK+kANekM5u\n6wI+\r\n=S1Ch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19bbc4af.0","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/shape":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/density":"11.0.0-canary.f19bbc4af.0","@material/checkbox":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/elevation":"11.0.0-canary.f19bbc4af.0","@material/typography":"11.0.0-canary.f19bbc4af.0","@material/touch-target":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f19bbc4af.0_1613513816613_0.8844952544581217","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/chips","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a72b3fe0e93269659847924c130fdc00d0544336","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f9cac96cc.0.tgz","fileCount":83,"integrity":"sha512-123Kxol39pIs3Af/P1eHDuCanzYPhH1xuiq/GUFtQkU04MoqdQigwDoeB03quR2ZgVvMUKduFaPEsD0ibgzihQ==","signatures":[{"sig":"MEYCIQCVO2ya+Cz6g64CULtmq5vWt5Fm6jcvepEjX1baJ1MQWgIhAPEj7vBkAy3oB0aTV8j1WyiDnniKDGSpZmPic0KmoP1m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/8CRA9TVsSAnZWagAA44oP+wfGWonR+iybD4xIEMhB\nUadDMrWg31LqxZwJ+JtTO94talhAqTRIZG1Sk5ZK7/ZOw6XJD8QBz47pcuHC\nMpf1tWUTkILnBipAO9qYrtBNqzf16zsA62wvTMTCdlPrYVXfIbshK4uKzzbq\nyQj1IazPyJ9fOkQKF0iYiOlVWvMpNPp2f5zH/wEW6PyXK6oMCrluRTVCM/q7\n1xCTDqQ5b4d5bCTwsSdrns3MAozUOen+cAmZKR63V5gHAAj5Iy7OjXybCZBr\ntueQF7zBwM/N86dl4QurFBBMnUXVGxphjZ7e/fDDE4m7/DkbSrb//9cK8Mrb\nYU0rh1my98LWEA7+BOU3ypihJXvE04OtMSt1Qsvsg8k+AeoLkcSJ15OUaYm9\ni858z7x40/s1dMI9ngmoQ9BIt4DvTp7UGzg4+ZFCWG7pRKrlWI2WtrAOVIKJ\nemmfhd/N7xspW4FcY4Aa36WLOm3tuV/lRmBC7qcySRuMQC4BM88O5/fNZwb6\ns9gY+ML/IdsBCMucDETf+X9QJMVtfe6BL3YnYUgyn68M1IHsUUssOmO3C2qt\nU4Fd03H2f+ZrUMreehrFPNRa+HaEGdh8BGJi0XF+bjkINQFofq5qkz+fnB3C\n9DFyFZbIdPywJh2W+WE+snATrZuzlf00ERcfqiUBDMMaAN4NiNg/g36Gy24A\nNqjv\r\n=Sp0n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9cac96cc.0","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/shape":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/density":"11.0.0-canary.f9cac96cc.0","@material/checkbox":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/elevation":"11.0.0-canary.f9cac96cc.0","@material/typography":"11.0.0-canary.f9cac96cc.0","@material/touch-target":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f9cac96cc.0_1613578236230_0.6839567327829599","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/chips","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c36be09aab521894ab57c1410cb987ac6a9ff1b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.79ce0878b.0.tgz","fileCount":83,"integrity":"sha512-2UDdweLuLLp2kiPgTUeGMpDG61xZPzRPDXnE9QCcUemjkK2lLnSAD9WzQrs7LnVKArZgyTMb/u89qVgaBID8Cg==","signatures":[{"sig":"MEUCIQDYSU3okLI3ZpyziES9QL7/2I1M2KhDvqLFBlD4m0VqrAIgBZLdmTbPGvZdCgm0WrG3r6V/Q5Ld/4dTSskwqNMrFA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW28CRA9TVsSAnZWagAAf3UP/2DYGbiS3YZX4q4PrLx6\nuOYDqhrHu7dcjVqt41+SPtv+fC/psUAT8X53brVIibTMMpAwWtji4O6Hx9Do\n53ImGAlkwkM5W25vcNJ2yGr2uSNQ/5YvQiIRmK6Iwr/J+XwPlPN+ppGlsK8K\n70jNmFlCkv2P+gakhU7PMx5PEJaBXR6bSf0RMhzd3c9wmMLv79/VnDaEtX6w\nbkW9y8rnSHSiw8M6zcvScJ3oJTreUa0ex5xxLAhrfRYB9BOlXdkcKkRCBGeN\nxDKGrbxgJ6lkMzoM8QF0nlCWuLLcKv2TzH5gpQNxwHL8tjkcZMpaKxPXILYR\n1rW9nSgLjWZresqHmXw74tVg6RNXpIcWMVNqGZDCVEx27xvkGcA1D8dHkNYS\nLL/7W6tbfMnBeMogki4N7W9kzTEZ9QcbpkvtFKoFkjMQdI2Bgr7O7XovYS9F\nN35RTwgpNi/+QLtDPZ/IbrYYClGSpqtwT7UxnHHdQLKITwIJl9Bwv6bU3XgO\nI7Q04tYrimcGO6ZRpVv+fMn2TD3BjnDa2WXaZzVGXFD8Q8XZvzhT4T2XYTc6\ndZlStZagiVCoJjcF9kbkIhCwkWV/8C91/E6Y7s1fIDUZr0mETbvPopax8jGJ\nJT1Xic6+y9K53BRhrFIAEfSNLnw3pNkAa2xlRe/8Ljp20oDjBUcq5bnAe+fh\naU8j\r\n=IhU5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.79ce0878b.0","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/shape":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/density":"11.0.0-canary.79ce0878b.0","@material/checkbox":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/elevation":"11.0.0-canary.79ce0878b.0","@material/typography":"11.0.0-canary.79ce0878b.0","@material/touch-target":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.79ce0878b.0_1613589947623_0.9872654479996785","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/chips","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a20fa3f2ecbc97b7653f46734cc7cec6c966d6c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.d6e507b5b.0.tgz","fileCount":83,"integrity":"sha512-u8o9O0V6qTpnjNzv7JU/DAersNGhRbQ1F3ULRBF/WAIlGXd9HYC8KKZhB9DuQRYkmHG1yZfZt7JW9H+6wKEgOA==","signatures":[{"sig":"MEUCIQDAxX0uC76omugyl4zYLGCGEPfKEpAAVSq4eUpdoPrJ4AIgeA7qp8+C61TkGLD4aCel8TqGKe5mX4qvjmuLFVOa4iA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXWSCRA9TVsSAnZWagAAuHcP/RRN4MqpjJYpFBOjMEBj\nukqToUV0a8GstpSB9jV7uSeFdejXdvB+bh1b4F+63aTDRDfXnqC4+y+a1T6b\nlhYtR2FCTBDvAsZYIcfgZztg85qanVA/Lo2ZOakGpoyFM9fNg0p8Bh7nomkd\ncB1BZPgqhBx38/ZGkH18WrMNB7DHz31f3zLrzWVd3xJk/SYNWoa4l/UYoA4n\nXv66VUZK+z3zuW2bSy2yKtbBOpvga7gy04eB5gTaKjgzK0V7sDZNZwpyca86\nwSTVkMFcJO90WR20fApC5Fyslzy6XnTp8+Aqcp4IIsx4Ps4P5/EmuubJSDDW\nQlYUkm2zyzteK9FuiIOVDEl1aON0twH9oCynYwfiqXfRK7kwMk54aByzo1DD\nICUDg4523fiOfFAt8HK3O1WhQWQMb5muHssTG9C8WEfJ8Q0X7lDsmnOJgQAS\noXGDb4MWNvhg+1uML+zkgvW0qbIYFYSX6onz5CCPowfAopYARd/oh/IT194g\nA9FTi6eQxZy0pY3hNy3VEB9ZMZ/xSfOnxgvv2CP/OlWHioGNEp4U0RZcSpfO\nkrWdmKLjK3qRtNqDscKZbHjLHPdLrB00VTl3a1hIHvp5GuXtQ1OCQ56iWjax\nQZjpHwONLUDYvNmXgXvO5f4TcgFakYfuISynL61N6YMY88GrC+lxp65pKlDW\nPKND\r\n=VeJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6e507b5b.0","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/shape":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/density":"11.0.0-canary.d6e507b5b.0","@material/checkbox":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/elevation":"11.0.0-canary.d6e507b5b.0","@material/typography":"11.0.0-canary.d6e507b5b.0","@material/touch-target":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.d6e507b5b.0_1613591954423_0.9126307892459675","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/chips","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f2658381b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29ecef821ac9185f27a07a462f384d2c0806e71a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f2658381b.0.tgz","fileCount":83,"integrity":"sha512-y6ydDaJvOXjmVMAlU0K4TLA2JvMhs/8w12V9+6S1AnOJARZ4665QbJ8mODTHpaZ4PDFWmbf6VQUi/Yz+sjaR5g==","signatures":[{"sig":"MEUCIQDxIhs5tImL26E9gOjR1ec65sZOhozvbApIcNmVIHXVFQIgF9MCtWLg2JMJbyqrG+rkdXTxGAX419KDGhPYfBAHii8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZyICRA9TVsSAnZWagAAHeQP/jHw8pWQMq3YRFcw0kry\nP/N8WW9zPwC6aPScxmrurR+jioLdzetjTCzO8FeTezQ2m9wO6eLddEcTrxI4\nSfBa4gWStrrgIHYjCUcbNGT9I74D9KV5LmOpk1g7+OoZbCshUF9WPtSMsy4H\n4x56YJLUu4OX/Z2lOJHxZMHX3cgb5Pwy9Vp5uPrHbzNgnCxMJt7pdSrI9+yi\nxJgLARlKx//uvdQlQ/6t2fdauxU2bOWOUBxnk+N4K43v+kpvYcO/v0xMhLv5\n24hOLa4ePtYVWJXEauUIsWh8VN/WCWMhm417nIsYA0HJlvN8cKAOkJsaEiGC\n7vXVOXweNLD0JWkmUYS4LysiiF7Md/ADkGGVJEtTUdeuOhto9JHfszRBamTZ\nB5e/m8RsVgQELci5yxU+uJL+OX823b9kD1s3dZEp5ncycDJOtOY+P46SJk/V\nD/tBxTBtHNFHXoH/O8jBSsaSoGbna0sYD4INnR1lDUUGYQch3iP97XmQI//a\nk5S+mBAH3J0AgGdqAA1mBcd/97XRAb2kSUrmU+iEHs8N+fGePK36jP4anIAy\nRprFUQC3/FSfHe8O97xBs+0MT/fbOaLtZTYPqLA08SfImC9HohjZ1YrYE73M\n4qrhFMwDTEXf9PN1GDF6dEUHknRLt7XK8ypDUIx9wxJESJdJfo2uzNCuwF65\nSq79\r\n=2Xtt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f2658381b.0","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/shape":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/density":"11.0.0-canary.f2658381b.0","@material/checkbox":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/elevation":"11.0.0-canary.f2658381b.0","@material/typography":"11.0.0-canary.f2658381b.0","@material/touch-target":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f2658381b.0_1613601927970_0.7586893820942868","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/chips","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65fb6fd1b5f01a0cebefb1306f6f20cc0650f88d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.97c4d4035.0.tgz","fileCount":83,"integrity":"sha512-AM9D90iCfhVGHPcJI4cbqrePT/Xtw2ILbsRsJiH2X33KhYZKcQ4G90qWoBsgOnkAnDhVc3BKcm54qRQ8cDjCbg==","signatures":[{"sig":"MEUCIQClrikJy6+YwZiN9TZnmAauikPpXr4HNPRe44ETq2y6rwIgURSyEtydeYKsRBJy+pB9+bHybDg6eBHjo6PWUSzarZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdKZCRA9TVsSAnZWagAAfocP/RRlJ1r8MLQiGjH4Gc0u\n/pgWSn9bmWUnLWFhxmwDZiLpBvM+33uMqCK7KfU9id/0r34vmCGrbk0OvzB+\n9Bn5qN0WR1tv+OtsE/xYqv16IfWdbaTynZkqMbp1uYpsToIQWXXdnzx9qnPj\n24qDf4TgOP5g3P4DpPqUS90BZBvm7c9+NJju16yD/AyNpifN9qMHu6DrxW+y\nNqhEF2SjZXXU3NXo4KmbXUV0cUghbAs0f9Lws6dcJlPnEwEotdJuQ88/TvTp\nPA9SfPiXeNqZOohmMNSTCaf8RJCJG5gbgv8yCruHkkqIpAT5BlBI1/MEG7mU\n9yLyOCpofYe0N4SS/I3wnDDz/JgTIVO56/w0Z4FfarwC0P9A0DtPc6+Wb6sE\nZTMAN0bwBDiZM5BsETBfSaViryqVrt7e3LlznKqLVu8rn/XpzxCHHRILzAFW\nmNdg7BWexKJG9KA2HARA/olG2RlpkVwigv8HaikKYvaojxoOV8t7QRHS2Cdy\nfcg9gOKIrFYX+hpiPdbqGggpDz3ZVXM37LYzpaRx7lh9IVB+39qDVBtzktl+\nHX+8gmKz2DVoY+9ODDLG/PEJvX2AeWQDzZqdhU0GxsWUZczIccFPzYlj9a8C\nDg8I6LFkAdcYv/GzXzzYT1PBHJVgibiu1r/j5NS9I3MyXp4aB0CuTHyg3OQf\nZRfC\r\n=IZAd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.97c4d4035.0","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/shape":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/density":"11.0.0-canary.97c4d4035.0","@material/checkbox":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/elevation":"11.0.0-canary.97c4d4035.0","@material/typography":"11.0.0-canary.97c4d4035.0","@material/touch-target":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.97c4d4035.0_1613615769350_0.9657254608988388","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/chips","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6a568fcdc22d2aeb5394090060bdbe49b46c9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f5bb4648c.0.tgz","fileCount":83,"integrity":"sha512-MUhYVgRPXMfrA90FC8F3oVCd1WUomuj1H4xKexQTL+QwzHjFf/aDwNWaOnxwS2BYgegQBMFJgPnm6T5/bxDP+g==","signatures":[{"sig":"MEUCIQDoJBomZ5F8Nzr7Ai56HVjEzPDRH+L4SppMSaeopWCoSQIgCswWbSV9dTZvorhxKX9WcoDr/8IrYpHM+0Ux1TzaClI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpB1CRA9TVsSAnZWagAAquYQAJkDLYE/izuCaAd5UPNF\nchVikFKuNVfWc9Y5KLgEgSCJpEYhTmA9RtwivQDixxQefmGdq9LqfdvrCZs3\nTdQN7ZJIyi/z9ULGnj/mS6+Ksj6nBV45onjoSeaz3WHq7iPI3PxaRgFjWpg/\njw3gq7Kceic0TYtg4joHjSgTmR4c+KdSsRNSHWQuJvwy/QLNnIx8hBibiUXk\n1TAv9MX1psTns2Wjo2UPAb5f8l7eiaPbv1Ywmqe3wkFG/P7L4VUN6NM/6Alq\nJyBRj+8aIsjRqqPY75DazXb8D669GufajsuKUu+ra75luOGXfYAMBV4/PJbH\nu1UZqjCgTRSJIWv4b5iwDJ1s4n6D2MM4D3rv6szR1OA67TO5JupVvQ8uvQc2\new7S+z2nB5dQg56Wk3TBNoLruSwWcRoac7RkV5hjCnA/cAj5HEvLhzMJ6gS1\npgtYEW4uiZO0oFpGOwIlbju0gSa2oP5bF4K+fqGdZZECJ8J7aFfxGs1jce0Q\n3ZXS2oANAwtM6JZwGPPWR13IFAOiyIcShFMdSj97l2nXN/a83A7W0SDDU7JQ\nsfdSY4BMZIRvk5E0YG6YsVeXYtia2domIwRcuHklUPx8ycPa9XbNHOpO9Xxo\nPSoxLfJTp18fa+0crfOJBvsh0XAKQcNs45/91eII6CFWKeB/sU38dCBL6EQr\nD4Cp\r\n=5fkY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f5bb4648c.0","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/shape":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/density":"11.0.0-canary.f5bb4648c.0","@material/checkbox":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/elevation":"11.0.0-canary.f5bb4648c.0","@material/typography":"11.0.0-canary.f5bb4648c.0","@material/touch-target":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f5bb4648c.0_1613664373054_0.9209543559454909","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/chips","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.302c7a960.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b1b538eabee71da501779d12fa666d26c6b5e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.302c7a960.0.tgz","fileCount":83,"integrity":"sha512-9ZbqrVtnMnoKGANnSAL6WFuxMyKGE3d1GiLyP19ukhR30a6qHMJhJ4Hen38+zctUQp9AztFk9OYL5R0VCx0ULw==","signatures":[{"sig":"MEQCIHFsZ61F0l29k4CX31ve0Uxy7t6ykKZUvcZQKmqTPdUPAiABcQfeuRtape+NkYJPqWw1Cv5GoP2cPPeDKeCJ33qV1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrQ+CRA9TVsSAnZWagAANccQAKMlUqO4Vx/EopUmANv4\n6wFPIK5UFZ+ot9vwGlN5RttZqTD8TqrVc6lc5HgFhhMvrBsmmxS48kh502A1\nDcEr0FmgZZK5mN2+xOpeHxMjk7shUqlSTKBAgFUs8TxH9ecWa/V4EXLjTEKq\nm8lm7pCduEVUT8pBGXBud1lO/5SGEbVK9fOqND1dzCCJZ2Fgcobm0oXjm0xS\nRh6L1KFvWTCGHPQrthu6DbGqbtO46nPejj/I7iRVVKhg+lbpMmq4Z+SThpmQ\n+O+JUcL72Qj/hHZwgA8fbbYmsCDsUrEoVauiCm2ZUavtOr+q7em3NL04lskd\ng0pRgoTUgVuP97TTonM9iX13gktBN20SXMRs9K1Ok7odI4xTWLFvhXqlfB+S\nUNCrhX04TY/oXyUqZxKB1WXZdSynGW2G1RUiKS6NEJFBSod+uftDS4UHykhi\nQeGqnwP47J52LS7Zp4UHaGCUPXChjaQYR40T5sPxOxi4c0lztTan1San1oKs\npm4+xM6MAKDpqkMqW+dUxcOMU/4GzJkCA8ArF+Q1fLWb/Gad1KG+lfRlzd+z\nemUN/3b5YZ8FYhtFxomQ8YlvbY3LVllLapO+jWpWhAfPpEc5tLWBqkHeo86n\nhWYFjpUn/AayavjQLenyLBp3t0HVzwETEJ97RY2OWgcUn/K1HkrL7WJongK/\nl2RM\r\n=0eaL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.302c7a960.0","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/shape":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/density":"11.0.0-canary.302c7a960.0","@material/checkbox":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/elevation":"11.0.0-canary.302c7a960.0","@material/typography":"11.0.0-canary.302c7a960.0","@material/touch-target":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.302c7a960.0_1613673533721_0.04911871751896579","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/chips","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28367d6a93f1b6eec33609c61bbea78b77703e50","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.aa0aaf026.0.tgz","fileCount":83,"integrity":"sha512-lc6zSLmgKx6sRbi3FjBhm4/hJAZB7hcjwxQO6032r3rD4fQqmiBM5Z0hvQl79OoIxsFowEJap7/S3pBp7shaLA==","signatures":[{"sig":"MEQCIDARAxzA71EMD+8ofDBV2Rc2sWIPZg7bGg7+nDldV5P/AiABxE9B9XO+XdmHxGJQuiGtePFDuqSWpEfFj4uxQi3e0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr7XCRA9TVsSAnZWagAAx/MP/RWRNdfh+mgspFeiJLvK\n/wfPc4szbz5/HwS1p2+qCbUifyd9RM5QkHxI6ZVhp+cY+tpKufL44H1O+Xdg\nsXWCF5cDNtgM1Zt1JOopi+lNnSeWJto3sGKMLKfSpcciK/ZM58ktH4Jlem1z\nMsKT5Z8X0RmeObe0Uta+8wg1RxbL3X/KAZGaXS2Ps5oeUzdfWaO+wia9fryg\nP6/21eDqsAibwMEBJ1b1Zg4d+uAyc6L9G7qieriPr8qcLGcvXdZuTxLOhWfq\nMb/luEWlQuqG71VRTw2GVi273g4GD1f2mtz5gsmqYWstE1SO/1XfzYkBueCl\nQb9K0PLy2Js3xGaAXhGNjnS+kC+T9UITzJUIj9FebzxM6cnIyed+Ck77Ffa0\nmt2uUSRTfv/BGOQtl1iA0/1vgcnfLL5zEeM7gDpIP9sCq6LFZJEIdbCIJr3G\n7UtD7Z4su0DrIkZoszT5LKXl5y/YCJjSYW1pzlE8MRB+JNgkX50NZxHSXnpD\n8Zg5K1GBtg70Elnc4CT7ACs4Mq/Y8uQWqq40o1gzdK1GMaPy2AmlG3gvKvji\ndnCSZCvyPMwrWZi3O2QbypSB+37JMvWgs/hm7h61bwMDTeHCUAq06Buacpwl\nCWvwJgeGRaiUFOzo4FFNIZ555a/4L9c5vly6kb1cRqAHkGC/ZO+0gkAH/yaT\nM5yr\r\n=DuV7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aa0aaf026.0","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/shape":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/density":"11.0.0-canary.aa0aaf026.0","@material/checkbox":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/elevation":"11.0.0-canary.aa0aaf026.0","@material/typography":"11.0.0-canary.aa0aaf026.0","@material/touch-target":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.aa0aaf026.0_1613676246961_0.9484331430738016","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/chips","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"545c206820f7d5eee302cbbee7eb09f8a2d2484a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.07ff0c452.0.tgz","fileCount":83,"integrity":"sha512-Q2AFBolU+3RYSfx2XY5Io7+MbfxFLSn0xH7Y6wYg0CRNUr82mfqfHY9wZnUM1/Kk7xJRF5RQtXwu1BhcnuOoBA==","signatures":[{"sig":"MEUCIAI9lMwX7D+RgAQPdWugIezSBreOSQ3e0aI7I7OBZuaZAiEA7gefqszrIll20fKU7095A10w9pLVUkPATaMey3X1a+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsNKCRA9TVsSAnZWagAAPfUP/RISSlhIvcTAGvR0VBbA\nvMPZulYFhpx/+2lH4kdYES/pu95pvjI59e5ZRqZsxfY2Jcy/S9TUbL36+I6O\nbiLxpolBn3I7jQ0Fc6h2Qn+RCPqk/5dIxadoFtBWQebNaufIYxgN0MVFwZdW\nXLd1CwZsEaytAwMAQDZ+avwk36NdSYPnBPa4Kcwl9TxARzPjRpkeznuwEHwH\nhrqhK5rVxdiviI3DZBWh8QzaWBdRdtUuSDpdup7neAi5nHtsFaaJPqjGR5xp\nEpbLFD+naz+Ib/3XtQx0EOvpIwt7O8ITwlwl+4YeNb27GUY2PbwsgeDDWVyM\nUAtXjAczPGf3sp33vMs/NyrOjvjfEMZ9AG9Ks6LROJ+LMkzULu68Umsmg+Bd\ncoQGE3dUCMjZoli41jict8bKWj5+1xvL2sP3HHGF94CZdIE5jNrEXgSstYbk\nrdZI0wmOl/AE3gdEWjQ9r67d68diGCoZdU4ozFKx1HExqLRyfmLGgfxY0t7z\na6oG7puOGkwR8cihfuWM4masm3dRjL9nFBXHN/cLgQZ4bzscJJEH5WHTP2/W\nj+5fJYJfJlrnns1cyzp7cmpKuC9QJg4TmFa6xcNhiOi5lPNtyygzwX1EF/oE\n4PNKV9FlJQB07qBgFLEX8rqYdATXWW0KyGx+ziFp91pgN+D2ULBHAGR1lfl8\n8LX6\r\n=yP91\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.07ff0c452.0","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/shape":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/density":"11.0.0-canary.07ff0c452.0","@material/checkbox":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/elevation":"11.0.0-canary.07ff0c452.0","@material/typography":"11.0.0-canary.07ff0c452.0","@material/touch-target":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.07ff0c452.0_1613677386430_0.5226181535704184","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/chips","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac9bb22bf475d2b593800393e574fcbc5c0a25c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":83,"integrity":"sha512-R6ok59mkFcDBhsaFDJ2yi1xq2lxiAvW0eLi4Hup6qoRYuGuwQmYjB9wQolaI1uBLs/ff0QHsXJ7MCag7j8zifQ==","signatures":[{"sig":"MEUCIAfXcMbVFc9FWiy5pAn41UR/MtazZgIZhwOIb3O0WYg4AiEAgh8zVJm+hUS51IiibfucF/jEiKyb0x458JKNGaG8Bh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvgLCRA9TVsSAnZWagAAfnwP/2ynnAvt18PXT3kLdgPf\nEulU+QimkyQE6dkhvnENA7c0c6l0ZBxkVJFq9BG9TFNcNQG8q76vtJrwxaDP\nyb/jeFvWnlnkPeK/PnSC6u+x78GTsc2V8cg3ds8Z74FLUUiAvuU3lfDYwHJ/\nS7kxEuvC/bxZS2wUwa/gQKI1CyrLRhFoPSEKCvnfGExlImhaLn+nebGyhhs2\nfzvPI5HmqVgThD1iiAjkVB6NiJpuwkpF6fip3spYKWNlLvBG7Z+FtS53SYZP\ncufXuH4GWjGzQHs9x6UMtg1ty+ASWNx2+VMWlxfzOKs87IiXyDw+1w+i7Ije\n+P7we89usXr4IquENt4LpVJxk+bLa5ozjLfudqVUPY81fflw5XSKgA57Dap+\nylQlJ+BveLqawlhGrLIm2t7jTBCnb3XMwlI4DrZHJtfVABARTc07AvL0jNYb\naI4+m5vlCc4w+pDTRsX4NSvEkDxMXAbuOJwFVSfWZoPB3pXVWMcVUvGYKsat\ndjjiBcgOANfUcGmgw917pFFhY+QLDJQNp3+P4iQdTM9U8cT/gWrl56PU5Ody\nhBZ78+CKCwieCb+AILUl4oz4tmjeiYTQ5+MlI+GmTOoQl/jsxgJbVX6Gqgl3\nDX7LTdn+Aa6FewrRLNmPx+FO8Zc7K2SBMBAwJXmeao4mS3Lw/p6Mzd5+KFzI\nTgdC\r\n=NyLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/shape":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/density":"11.0.0-canary.bed7ecd3e.0","@material/checkbox":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"11.0.0-canary.bed7ecd3e.0","@material/typography":"11.0.0-canary.bed7ecd3e.0","@material/touch-target":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.bed7ecd3e.0_1613690890897_0.012114883394298337","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/chips","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a910d1030b0439f8f81c35456d4f89f6f6884f97","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.06dead2d6.0.tgz","fileCount":83,"integrity":"sha512-7YCe+W7QEBpuYJeOjOcQqbNqQ4JdcjskSHOAH3vMrSr49C+bJGdOHdMSc3ZAIkneirD/gllmqecJ4xvSQ2YgVw==","signatures":[{"sig":"MEQCIFUFJ/B59CnF6AOxgsDlTOw4Y7ycCEzCR84FpR/2FoptAiBtv/rzx1fvUQnbJZDf0yudB6ggW1MfaCsXAMWmeIvw5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwhWCRA9TVsSAnZWagAA+y8P/0/7mncpQtukI8Un3TDP\nEzPEPW/w9Z4tJ57XScqxPXTnKrUwyd9qTYQsdxFU2hYGKhJYAwhS0+2XPWFv\n0zcy5DXzzXZbTBOyPCDtMkPxvNl+KsMHo6TodkjAQlQwaQAx+VbXUIzEZNGG\nExifxqUO3aJzGAxdaqWkohMnoRLSClSxDhZBB3TTsB3lXYO5fFQFGj+X2kgk\nCtdYepLtDylDXh8OY6laskHLxrUxJxrDBCKBa/2aaQByhcNGfCALKm5PlF7W\nAUmtowwOti7831GjTf6Mqb5k34tPZX5Osnrr8mvwO3eGcXKDpd4fvpafmrKg\nh1ItrqySQOTKmYOQs727RAXjkZ/nCNPc7mcE87cCYd4uP0E4PcFtCKSFHjUr\nodBFHC42ARE1NPm5F+stN5ez7sDdb+7Hx9oZI7BMnwxIIwov8i9+/JzvkP8r\nCBttCt43WDsKb1lBGKMAQdsJsh+IU76jMJ7aNL27rIgrG48X6YkvvpbCnXWS\ndkN+r8IMfyOAuVwuTYmJb4tWzpA+Gw/KVEKbgcZuZ9mRMuPY3a3WnCVEuTl4\nAnMQOtNwOuVXb+uDUV/Fobzzt8spxwMf6up2dtRLhc0AhabwCsEFxlDQVhiy\nZpdivslKynwuGoyS5G5QESem4I1nO+kQJKt0YnPOnPCcanLyP71uxenVzGF2\nNThm\r\n=w6Hw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.06dead2d6.0","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/shape":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/density":"11.0.0-canary.06dead2d6.0","@material/checkbox":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/elevation":"11.0.0-canary.06dead2d6.0","@material/typography":"11.0.0-canary.06dead2d6.0","@material/touch-target":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.06dead2d6.0_1613695062418_0.5353893829455831","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/chips","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.cddb03553.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8d4b796db9d1cd133720fa0287dc1dfa99f6cf1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.cddb03553.0.tgz","fileCount":83,"integrity":"sha512-IEcY4liprTSFNRR70rEGB0lqoedYohbHAShbroIpjWtc2EGyakP2tA5vPA5CbPL9eyLCjF+U6C4g6TulmIHIFw==","signatures":[{"sig":"MEYCIQCB9fqxpfmI6bCumFvtqNQ/hoxzMNWTSzDO0opf6xao5gIhAKqAgTCaN+hs7PpaU7GKLr7e6EShuqt+LbSyE8VM31vx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyzsCRA9TVsSAnZWagAA/wkP/iBDYYmqKsBMJ5X10sM3\n/jxjVNRDPscLzeObGEdurBmvbxBwYwKMBONXsNErvWK7i7myOmc20PXu35em\nORMGWX5OxBuyj4BYVfCYGkPP5HsbUXmWXW1iCENiRJqgB/NH88NgWWYha0yn\n6cDU2oiF9ecVp4PdwFbfUtc7opTIxvaSGjZtvjOaODWSAC6fOS/0Yob3B3sd\nS6CqgeRTnmL0rnAfuvIrDQU0NYfo3LtcXgFyuTJpWBKeHsiVKMk9e1R5opw+\n1IAIyCz7jvkbqWKw6miT0YomrEymDKkUs1yGpc9ByUO3Ti5hcCqns8nDAfqT\n98Otxaj8+CUXhqJhJooN5V/osit+ixZkjrzMkixAhVkwguI0tbWyRauBEz4J\n7On9DvM2k4amu4gJ0XglSdqcTgZTOCWNdHHoanWb77PaUy0K/ESMzznzSaqx\niiTCd0RwOT566Y5XBLk57ctZTnmZsVxnhKGQJDAZprWkHfF3aD8aU8DLJcDo\nEjrXLiStEaKilR1+I1rla3b+LZdfksVEa8I+xbjS+yiFL7zK2ZntvOQ/m51A\nZfy6MXdFrfvMWjrMiV1EXhl2pq65ozeDZ76J8MfI91TlMsLRKTqEHQmooiSH\nTj+lQuLg2Byu0CMEeA9p9Y4/6F+Fb3uE/+CGRwbpmGTPLbxXF1lapxj4F59n\nuYoN\r\n=xb53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.cddb03553.0","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/shape":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/density":"11.0.0-canary.cddb03553.0","@material/checkbox":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/elevation":"11.0.0-canary.cddb03553.0","@material/typography":"11.0.0-canary.cddb03553.0","@material/touch-target":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.cddb03553.0_1613704428275_0.1399510302004583","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/chips","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9f6bbfec753ca07c56faadcc3cdc5e22af86c69","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.d6d8d0476.0.tgz","fileCount":83,"integrity":"sha512-iGblUkhvCkLxST4Uzcki8iQyiNnytXgG45kEJxlL1LPn4IhyZCRjRzXka139DXntCjwjH4WDyfp8UVdVCylVVg==","signatures":[{"sig":"MEUCIBrlbR/z9OF5tkJkko9r4yunnRNeI3525BbJuEMrHAUSAiEAr6pTAthR2yHCnQono1FpwHwOr8N1Nq+hlhmEhnl19xU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL06MCRA9TVsSAnZWagAAxgUP/jCrw9OAlH7Fxh4S1d6N\nlpzMBaosZrIw6PvRsGYk3DmWLq9SA0xZULRLNXzdKEns3zQ8IbVRT7W5VJFn\nm0IgF1ixDQ5mRFYEjXKWUF/7FZNNCutxtvs9688ss76icS5lsCavRDH8xLyV\ngdjRolVbyNEy93apQk9nzBd3wZa9ZIzU5fxzsQpqT/CeF169IdkkvMKOG3KV\nhL5bxjJ8oKpaqQTGy1mennArXaSbFNlRiCWCVZNSWkYBtAbQgzvEayRDTpcG\nJR2VvTJCc+7sV33PeCukQRAajelZ7qZR5IPaLJpZx4n+LJjkjbEq+Q0gcIuG\nQJ5yfugM9RkrCoLZ3fjdik3UOURXA+FDGypeNb9rY35Pa18ZThkFuUAyHEB3\nhhlpAPVePCTPwDQ9SUzLX4r4IIxkPaGjIcJxDvLQcYbbNzOlt3ZMB/qF8ual\nr68WQE37bIp5RZcK4Q2CeitAIQynbMBvqoTyIhOyqr6HsVTqfZ2Veep5hAsM\nUxOP8sUCNJenvKf9zYbu7kOKOqTJpv6/HvSPBvacDmHr0q56EVFNiwNt4hTz\nHvrPkbE2NnzrjXpD3zPGeo9bXZqeM5hYUV86G2krFL62YaLH13Mn2bvk6lAU\nvV32gl/4v5qheQXswefzYvoybeKCTDQc7r1QTuHE6SBnfMTlJFfCvCzJvLR1\n/Im3\r\n=KPdH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6d8d0476.0","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/shape":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/density":"11.0.0-canary.d6d8d0476.0","@material/checkbox":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/elevation":"11.0.0-canary.d6d8d0476.0","@material/typography":"11.0.0-canary.d6d8d0476.0","@material/touch-target":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.d6d8d0476.0_1613713036128_0.014968153574503651","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/chips","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dd476cd8e34f5b66c94ff5dc74d2d64d0eb96f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":83,"integrity":"sha512-Kvi5iqq7lqMAKWWxtdjvVQdGDmuP7jYAjeYppIvi4ICrrNlO+rY1+n3HZi1xH0T68ABtq2+Ms8rVB1tZoqn5lw==","signatures":[{"sig":"MEUCIQDq4KQ+ebIPA64vKjt1aBBUH99ioxQ+EzctP25RCX5TMQIgH0B9qF519i0e2urQYT/ecGO+G3O2d1EAQMQc9YaCIjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL91SCRA9TVsSAnZWagAA2YsP/2jAiO61GMym63l3Posf\no9w5fiuF5L8g9JLaROjFIsNdEdzoj6g0nwupx6rF6upgOMnP2LClOawCHMgC\nMw68SHGSimWqTns5d8NhXF7vvFyu42dtG4eY+vbcES5Y+uOKY0HArjMYaxHF\nXpSyPik0DC8g6xQIpW+uqMTVzWbLJPi1zEN0SC+EfBOUeMQ5w2Jfck7EgPrE\nGiOzp8XXrJHWwstOPnhmzM3SkUR7ge4oHFJUh6JuosM0nRvtK2OdpgzE9ppO\nTuW7Bg+2DIWzrzLwBcmjJLd6N7nh6zZNSJsYKISvAq5JOPXZHki8yLKTheB7\ncdAC6F31kXgQv85PZc/spegW4a4chOvgAkNhS2xbJ4tHDqgKbOWONJTQyfmG\nrd5edF6+1MMl2E/rUQ5GbPt/u/vWxXS06noU/xrGkjlsWXt0kZ6e2tYNk1Fn\nWvHaURI/uk9YJmbJGBZqTELXxnNdrr4gL/6PgFWVH8Tonp5gpU6u4R1mx0Lr\n1u/10/S9kEWutPMXlw6qLpum8PsDcCN7jhqGbxIvo4btdXVtBN8hjXLkY9FB\nIUvux5GlqeTECC54henJ56ED1ZbLCJXTLQa6pBORMlFoS6npFbwCtmTFjRiX\n3MMDqYCSXcE36itWKalo0knPA9I2ZBtLqGBqnLhYYyNcB7DQEwpcURYvaAyS\nXGJb\r\n=2lfI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/shape":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/density":"11.0.0-canary.0b4a4b2eb.0","@material/checkbox":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"11.0.0-canary.0b4a4b2eb.0","@material/typography":"11.0.0-canary.0b4a4b2eb.0","@material/touch-target":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.0b4a4b2eb.0_1613749586371_0.46571849264214515","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/chips","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.3201cae47.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39eb2120e83d7575b133df85e52c43f0771e8696","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.3201cae47.0.tgz","fileCount":83,"integrity":"sha512-yEQfq1DOtgTxV4d3ZpD9w+zg7vehi8JhXA9bX//OyHtY37ibPr+cbe84zBSt3QuIS1qvbDcZt9Zp87K3RoXkEQ==","signatures":[{"sig":"MEUCIQCZKK3yp6qmR06pn1VNFk8uaIB/8YEITnKu7ZuDhVXnbAIgMwv0/qR0MqHE9IufAPWIUzZuRZvJjhlSyyM6j4LlkiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMENCCRA9TVsSAnZWagAAIpgP/iXt6iJTSyvbz0WfFxnl\nm3X459e7Z4jmE9VPgoV80FHcbas3kJtXALb4xJyHbLbgN/fdc+lJAxzoPJo4\nhLEORtQ3TPCj1zqLfVs1GZQHpOq94WsQSuv4Kh+DYut+Wq5Ci1uw9uvLlZbO\nY/QfrgYrG9l7R3BT1Z7CmE8l597CzCAqk1adbp3evUNVjpRoQosC9g9Dxf8c\n6dYS1ozFuBjgmFzkKu7LgGNwAeG0OitHMj6P8K4U+RqtJLDMk0qOgcZdHktf\nM4cRQsqPasYHjwZ1Th6KWi098HN9sbJZq0C/Te2l24mG0gSRTn01k8K9/WXo\nDCk8ug5B+GFI0Ayr2xAgiwJusv66GL7YEn7XLHJqqkdQbv37jw1XrDEt9yy3\n7v62qZowVJ5BFkPA5qaKPjqsLNBUDnSL7FEp66VFpGI86O9Im79C8niI5K1t\nUYZzDvm2+xMqDvWw/OByH9eJTpsLby8SO9XWweZ7Qd7H8TSZqHJhi64U1NlW\nEZ0a/e1u6qWkiDkTjLsVytZAgbTja4fviAHXIF2pv0sCAF/NGLfSatUwLK6e\n83qUcj4pE9CF07GDkAhAWfbxEBglL7D5xSopUujxyMVlQZYwCt7LzfPEoiEo\nFXSMK+uGUFEyo/l3JxUdfjT4GYj4ye1WVBVUi9CtURmoCcAVuHkvTXuO+kv4\nd8Se\r\n=YeNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.3201cae47.0","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/shape":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/density":"11.0.0-canary.3201cae47.0","@material/checkbox":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/elevation":"11.0.0-canary.3201cae47.0","@material/typography":"11.0.0-canary.3201cae47.0","@material/touch-target":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.3201cae47.0_1613775682195_0.2705968366998672","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/chips","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e4a202044f1aa8c6b17b54aef483d32eb95f281","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":83,"integrity":"sha512-vBNpmj4kNzlpCQ++DesAU9fDJ746Ahe905eGJ33T/lG0+zMibKZ/g2hykebURHg7LivpySA9u+O/aNfi5sF6QA==","signatures":[{"sig":"MEQCIAqfFmUDI7+KVSmXppV0k0UQ5xnrmM7PbyFD5V8qxpnlAiAV8cpUBpQbv77QgA0pW4g84p3QsGY4PKQqnA2q9hr5Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAsPCRA9TVsSAnZWagAAdB8P/0PqGqLL/bWQLkEIj+ue\nOzl2WYz1HNQWNFdg1OUBADZ+oLEL0MAbV2VekMS8BrgVqnK1ByblyQBsPnSE\nYy5Yvtzg1cJo5Uk6xfJ2o+C1qUjWUdTxZ3F4P10hj813Duh2dMfWAELOMalm\no/4CP6BXOEp//smoj5kPHbqQohuVGkUEHA7Wvf5+HHvkUHSPXJ1aXx5RuuJG\n8d64s2XtubEhVuVtw7tgC3UIXdImoQsLtu6obtO01UV8FLPze3TzKhJagnLo\n1bh3hU/nq9Jztkylu/sO996TXklaMHDfRTruFzsYVUmro9LCZh7mEUdUSW4/\nd5H3fmvHrbMG9ywY9LkLnUFSP0dpjPatJFah9Hm9bzPrFnimyurvWW/42JFC\njeweLWkGAw6AonEku0OqSfaXP8T/R4PFr26/R69lE8labaYfeEbTxmti9Mko\nJRBQIFiwLUCowMDSP1IynXBkZMPSYUf0lzAskbSFSVr3Ibm27xUBgTPNIFne\nL/j2cssbx/LbmmGvt8hAKow1sHpad/dlkcge03ISCmjk2VJKBeRZrhio+HzG\n6yoCj7giT4QiIejPowcJojjLbvRo/t3ZLjm1OQA3n/67rIMtI/OyIkF0yuvV\nbzuZRQKI6B8kdVBMYmpaAKCeuWXNf3qlZkDyp13UwZ8Q6HW0cYMfQVu654vl\n0V5R\r\n=FuII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/shape":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/density":"11.0.0-canary.f1b1fd5d3.0","@material/checkbox":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"11.0.0-canary.f1b1fd5d3.0","@material/typography":"11.0.0-canary.f1b1fd5d3.0","@material/touch-target":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f1b1fd5d3.0_1614023438813_0.1532832289930619","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/chips","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e5db85f5ac2e84583ab939658d5856b4c2e6e08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.7899e0fe0.0.tgz","fileCount":83,"integrity":"sha512-2nE9Y32RJLVOR7N8YopI5evsPuUcSCYcMSyGYfBXb4MmVIl7/nZNzIwI3BeYKG51g8wKTsmqfWqqIhaFQE2HSA==","signatures":[{"sig":"MEQCIGNMeSHKq+9hZhZzn80fwVDBps/Fx89yCax0n/WS1XU0AiB0L5k9/tV21GT+oBgDCqaj8/zNk9/wCjbb4l71yJJp1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDRdCRA9TVsSAnZWagAACvcP/R14XvVKDxR0kRJZwCm8\nVNjC/rwTU9qC3I1RbC7ME02RNnHotCuvnPhUnHYmvjj1WaCwhBCrCbO/BTnR\ni51bvqB9xo1pYxwT9yHM0tH3dP0mSlUnXOWhTAxIKiMAy58lyPKWaiXMCg8Y\nzDgeB7S0xX9yL7IjobHquXwbve3Gf0Gs65k/rY8LPk+sUBtMmZXO32DsHSYN\nbDraAhj367+0Lc+ssDxhW4wMDf1JhpkglyvzYH1nkNBdEiRD4rYIDRChATng\nJ3Zc6z4+Nu5ik0s6+X7iEIE4E/DPUi60TCfg13GOo+HdtxWWwJthK+6Z70lH\n6vb12Sbx3GpcVo8RKVSb7JlkGMrQFdpRpm/XyR8uPsBNnWQuUC8ZagicgCOH\np/VidL8f5KuQ9uNnJH+J+wBqEiQAd7TWoHA6OsNxcZKm/ctik7+E54Fj71vE\nQAMFNVMAQN/N/DyNFWNQwdBByAjQjKnjHQzRWuGM0bMmLFnemmVyIWcMto0i\n4B0AIul+rbWgydYjD4b9BPavSzT2N6GmlE5egeaWQDQrUyRbLkYFLelaw+9h\nk5cY1S/FuccX84zffpozKlARo1zT7NIRo3l5DJaaKZzqt/4nWcfCt36CEj/4\n02iNlOzt5a15xaHUu53Tvi5LJoTIhJO8O6q9CIXx5NcVF2rrC5xsJFjBFdTx\nHzo/\r\n=PpPk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7899e0fe0.0","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/shape":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/density":"11.0.0-canary.7899e0fe0.0","@material/checkbox":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/elevation":"11.0.0-canary.7899e0fe0.0","@material/typography":"11.0.0-canary.7899e0fe0.0","@material/touch-target":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.7899e0fe0.0_1614034013123_0.6056853597561094","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/chips","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47cd0fa552da74779a8ef0f035061cede711d55b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f19c86d13.0.tgz","fileCount":83,"integrity":"sha512-ckd0oi6kD+wM9WfL/b5XOg42auGftmHLDzFZoTQxZHWiF+M0XAGTOYyiW0ve28wlf7Buy5yjlhDzxy8G95FLEQ==","signatures":[{"sig":"MEQCIHV6gWwBAYb1maMTXe5W5Imc5wWASrNlOf+/NpnvB2DGAiA6NmUybGYInbvPcxwBC47krWtbmUXFcWMUpTIaO3KB0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND7DCRA9TVsSAnZWagAAuLQQAIFgXa/on6U66gGQu++G\nzRwOLjorG+W/m2YG4O2BwCyhnC1AIdNmxa0bWr48NxPzzT1Sly3uUxQ7p44b\nVh8MImqNsvlQcAFVa8JW8++LNZ3cZcZW/dBWXOCpr+4MhUwwRXeaPIAyNZh5\ndKm2WAUDtZk+tCfw46HZkP+2scw4rOCjmSHYViKVHnVbzz2EQO4Jfgup6Vyx\nYa+oVZrGp3I4/9eAPIDv3bFrUYtC+pZhOIv+v4zQbhpRobzVC1DgN6j09Hgf\nVSf3E+2pxBDnQbdXYYmZu3YHhft85++ZO7n6nDFjxciLS/SlWIZAi6zuxpkR\ngjGjOXStNhI97rAmj+kTbbG9UGYvlvIhjUQaFdj/8L7/CyrIY0rKtmxCw4Fe\njrm4FJXf0Ikrh7/yszQQDALnWPo+KSKKL//6VVYr7nXJS043zxGp6OdmJ0CF\n5sZ6dcwxkwJYBEZmEZbu565P8kvbvAF6VbTeKgT97qnFxwTCBWzZmPUrIfRo\nSRVb7qd2fyGv6hMJgy6LXD22ybY/sWq0ejkTA1m6x8ZqA8MYSk5oKjhOYPl3\nkoXOUAOBAYG4kOyGFOi+ukH2qdylVMfEBnqr58nkvNDc0QPgpLmp4xTtmXop\nXMosiBI8dNup0/1uFQ8VzjvPg7mz8NHTQ4IICLrrbnXst/BogciZC0WsJ/Nq\nr7JD\r\n=Mcg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19c86d13.0","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/shape":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/density":"11.0.0-canary.f19c86d13.0","@material/checkbox":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/elevation":"11.0.0-canary.f19c86d13.0","@material/typography":"11.0.0-canary.f19c86d13.0","@material/touch-target":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f19c86d13.0_1614036675215_0.61987886610206","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/chips","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.60e892d79.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b978879008c8865bbe26241c1f987e83215e4fc7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.60e892d79.0.tgz","fileCount":83,"integrity":"sha512-1sfkH7UNVf+iaU5NOTkn2p5b3BbzN7jpauA4lQuu7GYcA6qMVBcz9bt+Nvg88QQmAzCvSwoMby1EurqhVHMTDw==","signatures":[{"sig":"MEYCIQDmoEQWmT2gLtf6vUAUf7FXPhqv/TQp4VOUMgvzT/0n+wIhAPYMCgxJKVzYe2d3DaAjeu8cmKvRfmMLckO/ipBit7/i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFcJCRA9TVsSAnZWagAARcUP/3nuG8EViNhW/g5XT0XQ\nhU0D1+UzTggUO3TSyEBE0YSd77gsL7MFsIG7Nn/vuGFWeXpS0u32vTfnMJTI\nzGw2nC0UpEq/SJ5NzvuVUdd0pj7uQVtQr/g06CmivDEH/5zrsd4Km/8rHOb0\nOHnQPa2XCg3uFYo2YnV+LnCQqCuy50bKrvdyHt6Q8iVJnoVUUym3dc3gkhiG\n2MIbqKSAmfWL4HoVZ5u5pmBl3rITou11I8pubp0UddiF/5XEMoehpWhvtl8s\nCPbwhLa3AHXP6Q71B3SoEKGFZdwAHCSjSXFRM/vCwkXcSdCeYRCOE8rLJkIy\n1CZB0PMO9bGJzIiw824kwrID2cbSdUcJJdEFW86vE5iO/8oSsVz8M/s0zJIa\npjuO6Rr7tA19xckB1qnOKsCZMLMZy4tV4yWR4Ki6ZlJiMxO4DQWzZOm120F9\nfqUI9qz2w9jxRTTeb06ecXF84+K9MksYoVXqQEUOUFG2tXwuFBEYZBG1GJtu\nbJt4YH+Tmzh12N5QzE02XA6+a8oZpVKe3PGoTyi34ht2cBA/x8Q5HMIupyJW\nfRsocDma/+loG/djdkNFYvcTy1AsBTsInqKQEuyhz2+T69p/MthwajsQRSNK\n09A89CmmTNlyuTsObroDdaSb5loX/xD8DfsOTSq1fCsnK9xqMcThJULKlvcH\nJru+\r\n=sHV0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.60e892d79.0","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/shape":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/density":"11.0.0-canary.60e892d79.0","@material/checkbox":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/elevation":"11.0.0-canary.60e892d79.0","@material/typography":"11.0.0-canary.60e892d79.0","@material/touch-target":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.60e892d79.0_1614042888856_0.7466708092386172","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/chips","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c62821a3abb133fdf1c79ce19715907d3ac87aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.c96bfa495.0.tgz","fileCount":83,"integrity":"sha512-MekLWIiru+ikM27MExVVgPWk0CgbPU2qFQD9qN/i3YvL8MUrKgtIQb0m0ESr0nFqKPHgY168WYqsRsa4M9Y0yQ==","signatures":[{"sig":"MEUCIGWBfpf1hV5ihGvjHTYIJv5B9PFsBMpocnElj24w6SaWAiEA4UO+j3KIsKrC1xfhJjnWMxywTx9xiQirOuOruuVc5LA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNViSCRA9TVsSAnZWagAA3T8P/1Dt36o+fOJNH0APlVYp\n4bf+eK2uNgupo2sDvrH1vVVpbCV+mItm0ckwrbMxt8g+EVJUydHAQjkQngJc\nkwR5uklXV4AVKArhSN5//jBrP957VmCLLJgQpbjnt0PoR+/L9iKGQg4IQirG\na2SwL3vGq1s3dtFQgKq5BE5omAUNWvOeU9sy8G2mSw7egu84nBolNj91b7Ok\npKTf159e0xVxy32ue7yxlIHVYfvY/3ofbSJjYPFRC1a7DInCtYZK99CSkRNm\nSh3Hn8VDKfmx6T1eQGBDsaZfzHj4p5OBJTo4lyHn8uKt5RnJWyeML7hwvcnb\nTJlrmfjYJ9jwlyEnqTssXbM/py+9Lke9RYBMW6BdliI0hIzVA0ckDnaJk6wt\n8UYGtoVH5Mxt3GMKjlaWsDhcTKpLEYoeyerhos9Td36vEcKT567UtvAOf+UK\nbp+4MFANPTuMeGlm/9+W0tmRoHpnslxVKaWGAhpHXs2A/aTykYLx2i4+trI7\nwo1O2Gk1JxF1zWOYrCYzAMzpaynOlxzRjPvxC3H8iD/numqKMUNEQ1EUZmNL\nS3phcq6sOvulHPH/LPLK8Y5cYaM7RFBiU0cHeWqzZjMq5PL6sdLL66X8rjQR\nDJ+kzYsbGJd2vw9IO7gpRnxylHmIT3nyZe2QU3CHq4af0wEMCQOOGeBi47LA\n1wr9\r\n=A61E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c96bfa495.0","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/shape":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/density":"11.0.0-canary.c96bfa495.0","@material/checkbox":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/elevation":"11.0.0-canary.c96bfa495.0","@material/typography":"11.0.0-canary.c96bfa495.0","@material/touch-target":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.c96bfa495.0_1614108818060_0.5838942087986623","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/chips","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e52cc61a44ad623b508c8bb8289ac2ad93326a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.fa9b59f67.0.tgz","fileCount":83,"integrity":"sha512-AEjlPiKKlolL798n1sHgdPbKXYMA5ozBSMoue5hJtch0ly7oalOXRNqIduBXJXNms29PlAxLuPiBjPikPpnCWA==","signatures":[{"sig":"MEYCIQDBYzMR6+Y9wZ4UqVF511qsG3xvqpahFv9BCAZNwSy9ugIhAJqermx2SlTmhDq4PyoMOPXPnMdmUgTI2axsgqvLhJ37","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjhCRA9TVsSAnZWagAAx1wP+QDm/VtGPq+30Rg1MR/2\nlw71p+5cycfa3nE+aMu2u3qAwllCyoxjw6n702DvEBjysN3QiUuVQ9nezUdW\ng4YGT2VD4GkiUw5RmnodfXhtCSOPaKW9fFGPmnQFvcTjZjssivstf9Jl8LQw\nlJ79EBmVEE4CoNqsBIFli/aoJ7JXXC354s27hhwP+LrBBI1dOkBdsPjhRy6r\nzr/fqNd4dZnGkaG3srF2XV4PVm6B2Gv2eYBAEW/j3K6zvYUpsIdmAqo+2dvl\n64wjIf4Gskpz7opjll8/4DsAFbJZxm8oK7z8Q95wuXoU+RUoknSIM+ata6Pi\nYc557WC+EICh/+19y/3gVxyZlhTBwkmKMAyEctEcxWfTw/9ywlNUs9nPhwa5\n2PPOqc0r9klsaG48dP2tJDAqJcp6OZFot2rbLkXD+gBpRHpMTHtwgC1QYZ4R\nEadttPIe3r3KvKoNezpyX7Y5JWSwOOGNW53qdWfjlGpl+r48qYf2rdSIBo+n\naYF1RZSdryLsfHypLIiq5B/JXLQjeoE1R8QejD29xSm55Th7m7wp+/Eh06jz\nc7TjO3fhN0SZd86aeKiH2HFxhQqYfqDnrvxIYfXPIb3uJwsVigSf/ZDrTqJU\nab5w8qqmmipT/IfiEylOVx0HjbDqujPGnbLEsjR6kmssIFztzo9UMbygxa9N\nJBc1\r\n=Assp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.fa9b59f67.0","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/shape":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/density":"11.0.0-canary.fa9b59f67.0","@material/checkbox":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/elevation":"11.0.0-canary.fa9b59f67.0","@material/typography":"11.0.0-canary.fa9b59f67.0","@material/touch-target":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.fa9b59f67.0_1614108896703_0.8814572346495624","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/chips","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.869e3497c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bddb446afb05562dbf41d3d2ba44cf77c9da71c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.869e3497c.0.tgz","fileCount":83,"integrity":"sha512-8ZGEPVuHEZ57vOTDd3yru540k/VNVuU7PcLh/L8eRfbOHe5bwJQ7qD7+HR1FyLSuj3FeqFC/lMHiaPlYyz4c3g==","signatures":[{"sig":"MEQCIGQ3bYmY+30tOQ0Ae0fThxG0cu5LptVNmBl7hADdDULsAiAEMbK9hnm6Za123kVYuFo+qn0fltVzMBlIZen4J1Hunw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVktCRA9TVsSAnZWagAARS4P/jnY/kHtP7FMEbCTvv6r\nd9+oT661u7XCYdICOAyLCW7DhZHr3lMTpzfcWq+f9QS4CWHuhqdmJHJiSylm\ntyXKitOK4Wy22kU0nOmj16WvCiEfL+zNoNV78bxOGYhUryY25VFWE3UfX07q\npbc4I0GSuZMgSMxgYJIt+WzMXstRMbOWJ3yfk1TDA3QOKk8e6DZvNaVhmO5B\nCYZ+m0A1qxTClCnGdRHcUttoxhU+eQF6br+mz6Fl4GMjDuBe1YCapiaIhq2H\n4E7fIKpF2wzR2J4x+1OSISiOIU7R6+8wOSkj7UcE+NsBvw6uxGPZhNS1WXNP\nZ4IKbTuO/aviaX+oXKgR1/NVRc2RCU46ZeIBcUSIGDW30hkbc/VbmqRSJZ9f\naDbvqnGyum0EN0HJIbFubaxenlLgA0id864pJlyFTbauAkOcfeO6bJ9AkNXu\nIINv6SHIe+70tbIGISVJ+Qlhz2orK0cVYqVzT/M5VKJCtcRm97SJ+Z0LkkWg\nH9uUD+N+tVG1NfPr7+S7TN75HveEaH03p/UdumIZ0FDkB8nG+xh5tI+CxZ7t\nBkva5GxDm/pAJ/rG0QmeC5IF2fGzb1IdadPJpvvPZlUPtnWP7DvBw+kzXu0q\nM8uOPtRfWzPjJk23ce3Lv8VfNyrcdjk486XUoUpg3x9RwbEOJ5GcILMoVfMu\ndy/F\r\n=YT4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.869e3497c.0","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/shape":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/density":"11.0.0-canary.869e3497c.0","@material/checkbox":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/elevation":"11.0.0-canary.869e3497c.0","@material/typography":"11.0.0-canary.869e3497c.0","@material/touch-target":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.869e3497c.0_1614108972719_0.3411034253097951","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/chips","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edafbe0652d1e3ec4e3b1182d7c8b818cef341d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":83,"integrity":"sha512-9YASNmX82ZGQWu1mQQ7HsaaSvhnM1WiE0kkwTIdh1lBw+orOocYdaWgQPE9oyavLYr6cwXhXv98i2M6fxNv1hw==","signatures":[{"sig":"MEUCIH9w0dYkFXFKYJL/CapTlqTNzKt2mFVDeuOhBVVRTjf5AiEArvaP5zllsYOTyf6G9nFDwqe1Mf+oTjVfNhqZcR6kvd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVy0CRA9TVsSAnZWagAA+q0P/3Q+5Iy8Q61whrXYHepy\n7S+VTR3VmQI/tLpPX1ToJzOLy7pJME3aGLgQYYgP9UJzxoILUlzJ3WOVbQ39\nobv7WK7Sbea4mmOGMJYaw+MNpvkLVWMKSrV02sCBFMU842X8Z/34opa038Xi\noXB4jFl16qwo3eeOKdT5R/N6L/M0Y1o4kF4Ot3wqLjAQKzJoNgkqkyJKHJ0e\nCjt2oOmLR+k6sudTENljzjApd6tM9w4+PGJkNw64RJvCorQqyI6wRg/jH7Qh\n1p49Z8OEVfMtz3Fsn+B5VRJRQiyRIQ1ybbdepO4uyth2r9ByAp2rl7mOnwpw\npcpNJXResP8a55+WMtyiWc22nJvkAW+RIyXRIDM9uXn5+vRkQlNrwy2/DPUQ\ncm0OoHmz/GpAZ4lTgE4GNcD72Sn8EsVpPi8qcq3byO4a5BPjaF66j9B21I1I\nfkdegjc0VHBW0TGxoLNEyMz+F664Yu3GBI5xOEpSVTziGk1gVUlMBnP5MRyc\nsnu8W+ul+JcNG+Rtbuf8WFjHKCogYNF0h8yxZHSg9dGmDOdcvQFZtwHbkb+v\nZTH+sDfU8iZNYKBVqFqy1PFPhm1O9FkajNMNLce7EVSbwDcgXHzAvIdk1mr0\nBHRYm1dnmug/BQKHHfNB/ZMiZ2P6ymnclXp5PM2H/gQUUCjJreTJ38uo3xEd\noTWi\r\n=N6Ou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/shape":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/density":"11.0.0-canary.8ecd7c9a9.0","@material/checkbox":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"11.0.0-canary.8ecd7c9a9.0","@material/typography":"11.0.0-canary.8ecd7c9a9.0","@material/touch-target":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.8ecd7c9a9.0_1614109876361_0.3812872213677725","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/chips","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22e1d19a94e4c951b2850d165b9875703917dbc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.9c85d505b.0.tgz","fileCount":83,"integrity":"sha512-IfA6X+kbkEQEOLITNCiQ3Lb3tLDrv8TktgO2YCxzwyd4PNl6nx5zfRbeuu6AzoREgR4UkCIEs380ooyff5kYdg==","signatures":[{"sig":"MEYCIQDiDFZOrUGu/qI7z5CNXqeDuXsBc7I9NVDNb1OUguHlsQIhAIiHZ+r23KPdY3PsJkRIY9pbiPzkRHCByDAvu3DaoJqq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":966994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX6wCRA9TVsSAnZWagAAPW0P/iM8GfGHL82LU/xeYuwO\nz5+Ui2KqGuiXQb+lxQiLKJHbPTgKTRXNpmtKy18TfgIzyRZWs9U6nlLF4Et8\nEI+1JtVjAKEubh4lueHuGpJfcf0incgI1G2CkSqHc+deDlI8n1Dy7tnuQNQR\nZvfpqq6p842XBkp8WqaaBSzt4lxs7UvItNezHNJsPDc14uozXuZIA2xCxwrH\n6FoVb+he9EKiS19yvJ6EQrki//EECTlskkHbVkdsXrYScn606+X37OVQWVby\n1biRjeohFQAALUyM/NxQPLKiZvVMeSnTc1KOgL0YD1BUzAObkc5G4l6wMEKm\ndaZX4d/bvsK1OWmMRczRo1/9scRteJEB/fcU8tjuqmIqL53EL7GgrWggTSxl\nCq0t+J47t2gVLdNwl77AkoOqMt4pWEVk32amRh0e7Zq1n4qmp1ZrFOW8cr8I\nGMldlQD8gUeJj96488Htu7mp3zYRiqWab6zSuhtQp5gAOYIjbiYIMTP89KnG\nl4A+4rJVuZr9Rh1mRHdqXGwN43fsAJKGSKg2FJSSH6daFdeDUcSzkJ496bhE\nM9VNHJwaTKnSRkemPzuN5qeQ13Ez0gWYlKmO4Qvh9T6eEfy+IaWCvxxaY+5A\nBYjpHiPoIlxA5GOLKPlhQf5jBZm4pAhpSkRuRtd3tpcEFp5yGq/GmcJDJHTO\nHCoy\r\n=JvrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9c85d505b.0","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/shape":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/density":"11.0.0-canary.9c85d505b.0","@material/checkbox":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/elevation":"11.0.0-canary.9c85d505b.0","@material/typography":"11.0.0-canary.9c85d505b.0","@material/touch-target":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.9c85d505b.0_1614118576053_0.8368760627396254","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/chips","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb388956e6289a80282ed280de432ed6c7ea0617","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":83,"integrity":"sha512-dYoRbG/rWCg2Lvp9FwV1GJoFKdM9/D3tMMO2Q2hppk1StwzLZHbNuA7H3Nvr2QNrn1THOpFsmIt7ji9KK3gpwg==","signatures":[{"sig":"MEYCIQCD9D2DInYlzbmPqa5UlzmQSnnRgt4CzXPg0Ne0eIlH1QIhAIAsd3DJMtaG+0pnmpAtpsVJfYw8zW/W9lYg6zdDY7GQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbCGCRA9TVsSAnZWagAAxBkP/1rnH9rStc/dhWrZC8b3\nT/o0FnJw7Hvtwse+xsb0tJyNV6/kDcsuDYToMWxJFUigH+cb772IpdiROQvh\nSRCh9HmmWLYNRQdLsM1+sdVWvVkPs1dx8N4wXGjDZBhiP6GEQfJZ//j8Ac60\nVOi7xIF1okYRoJwIlvfFu6XcaJn5VrvdBcdGB9P385myq1HNhL6BMAazAc7e\nF5Fm8iliK8EFJslyEGTOMLZ4OkBOgHZ4N/95eNgliizGEnW6HyHapQGR1cMR\nvXStgyImJ3xSm/MgScZa593dzKqN1d837LSRICQzfkm1x4nl9XkSnP9Yrg/S\n7XKg2bvBwpY43Z1/QTZXePS7TH+z9alLhgvYl1dK/ebLTbGt4B12sheP9KgZ\nvXFxprJ23FlQf+u9KhU2vqaQ7oZYr4K5krarOztVDG+zyC5LAESpZW7bqxav\nr2kOba9n1hALBIoklK2m9xDIr/UQw6Oq7Vc6FITfGX88F7+45ahS1G6J+ihq\nlrJgr+CqLjHQqPlpTf9LxQL31PYsj+GobyLPz151i+ZtJBQ2BphLtpgxpCav\nbcc+XyOczHm0FxlBO3fj9lpjRh3hODMCPUa1xyETSdZYFUDlV2K6avnxihbZ\n+VzO2RZEetkricQEsI45FYaEEBYw9TGrWZO1Aad/9FgkWmtQPLC9anob84hV\nGtZc\r\n=l9i9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/shape":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/density":"11.0.0-canary.9f2e85fb8.0","@material/checkbox":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"11.0.0-canary.9f2e85fb8.0","@material/typography":"11.0.0-canary.9f2e85fb8.0","@material/touch-target":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.9f2e85fb8.0_1614131333604_0.8419900146235806","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/chips","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ec6ec051510aa7cfb6339b1d2b60ca7a01f2215","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.19c4f29ef.0.tgz","fileCount":83,"integrity":"sha512-Af66exs2fFxp58U8N8hr6FxsXZPufV7avnl9kRRhhXXPiq5SchZBEv/d8O3egilJmdpbN8J/vYJXJ5ZMxM+rmw==","signatures":[{"sig":"MEQCIEUsSZctFemDH5NzTcEV9gtJ/TWKVIdwuUB+3+G+I/ePAiBpLeqQKE6bhRAzi1b8OPCSRqgQPJnnEju2fll5BioQyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/k7CRA9TVsSAnZWagAAfocP/jQu0Nxo5nCdlhkQmnI8\nEORJp7jImjp477bQMjkxXKXL8TI8v6oN8uqlq4QcUECYIb511qCvXpzKrfUh\ni6LypVf4I3W2XBUIebklqzlrMX0rQHP3qxqPbAyn1zhi/4av4lrjwQEELEBd\nlFHeKo5b49w+NDRrSFvv97reaqQ/dRMASWZ0UtElwr7TeBfcE0sPYUg5jmen\n1TScaK0QcS8BJg0I5vcuJD/+I1ksrFQKy6MeA0ZPBqFEG2xB7RBkt+VoL2e5\nThDPblUpBS5UXnPUbEkoLIt1rPz7rmLu/PJZ6VjyzUf6K1EW7Gurr7F3bIId\nZ4NzltW/5wv1HpRad9lKou8nHpG/ytFZqvwNuIkktqW5JIltb8OqYzELJ8Zq\nFw7ye+p30u5YYRJPkSC0cGa60ULMMU+cfmoSR/QpouDXOSU9Hts2pcVgjWst\n8w9jSK8bRqNAKnbt+3PIfvyykvzVuT1t0ZXo4RxQrYraMiqXU+f76GCXb2UC\nptPcwMOr2G5nQon2SrNOQHmieY0S3BB3azrCPqwW28fda84dYAg/ybZ8E+wK\n6Fjp1cLkWoWrKc90PHAJBhuHh8kf/G2VuSIBCB5m5MMoaA1OBjQbKRhRxYm3\nCg7VrmSPL5GMA9R5ArUSnFle20IgRS2ccdAucV6mxaz5tpmHrpwSt8JPUPW1\npu5B\r\n=fTNk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.19c4f29ef.0","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/shape":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/density":"11.0.0-canary.19c4f29ef.0","@material/checkbox":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/elevation":"11.0.0-canary.19c4f29ef.0","@material/typography":"11.0.0-canary.19c4f29ef.0","@material/touch-target":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.19c4f29ef.0_1614281019407_0.6768184823769017","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/chips","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f00739dab44ca5534c9dcc40cc67bfb0ab3faf0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.63df6e9bf.0.tgz","fileCount":83,"integrity":"sha512-WfivxPxUif5WDjXIOqBISYkETny0RdIUdmgPTPAfV3kiRNiY3x7Llhi36rTvVFtoM9y89qIzz2pkAHe7tHlUKg==","signatures":[{"sig":"MEYCIQDWEGGWrGZqMCeHIaA/lx0lBr0/nQ7PxD6aGu9LTtvp/wIhAP8a0FmN74KCNIvDXIUtl2rWpe9hfkY3CjrDJJKa7im1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/yJCRA9TVsSAnZWagAAqDsP/13zyLYfS8ISRznYFYc0\nnpg4eCBtaJdWgqKaaBIrK1bbxQ8vehcwgfmaNDGhziG7XjJz/jAvEm1mcynl\nOL6T4v0yZsyo0eGTovztYEx1ipwiQXZ5Gw+tupL5gmwvOGJn02shmc1XcLvN\nJmj2aH9FYHFywBLxodYta7263yqxsCARZJLhB7Vu8WbeWm03/fZGapw2k0B0\njfXKLZBeslH6OIcW+bctpKW9OdXT9W0iO/gqHBYo1I9AEtxbvOIzRwg2TZNH\ndLbG7YUQEpnHTCvHnZ7n9Ec7mRJNr+vMGZXmf6ywrgWoFZn28P3A30a96mdZ\nqnmHOIjPPYplVL4xqVUS95inAniuq9Gh38u8jEGnhOngQyLyjUSIc4jUoBBI\nANssEKoUgXDZMpvIF6n6qBEuLpsOgi3vZtQqBuIt/ZAKofRBcjJeF1+EVh5L\nlCnRTFHJmhqseWhjdAX3XNtvlvHu3vZOBNYPS3+26UnRkIlaqXDHvcWr4dNB\niOQ+57ofNlHDLnD7FnS4+TSjK8l3IZWeaRANgc0SzQ+ulg7U0Ce6Cf8eJRjg\n5mLokp42YJBD75GaBp2ERkP+EhsL48DVMk7ztydZfpDHDHsUpM4ND6HMAfkE\noiJnqeY7wLEiC2kLW+uUeL6c4H3bfKzilRgA87q0kGwqeyOecI5nE9n4aHV9\nb8fR\r\n=o5n7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.63df6e9bf.0","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/shape":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/density":"11.0.0-canary.63df6e9bf.0","@material/checkbox":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/elevation":"11.0.0-canary.63df6e9bf.0","@material/typography":"11.0.0-canary.63df6e9bf.0","@material/touch-target":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.63df6e9bf.0_1614281865165_0.3505614842852893","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/chips","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.981ad970a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b706ef206c7a08f997dda298107be1410b061912","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.981ad970a.0.tgz","fileCount":83,"integrity":"sha512-JB74OoMrZTV9ZOazEuorn3Bs13p5Qw0oHQpIhqeLL5DA0p9SCDTHmRg2R6MzkAey9qpaLulmxGWoRFaOYgluaA==","signatures":[{"sig":"MEYCIQCP2byiPRBgpBzTkQ3I3JM1AG8GmK2aCbv9xzvpum0I2QIhAIXAmhe0EQdMP6GX1RQmzp4Can/C7SudgIEbyI7f+OVq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODvoCRA9TVsSAnZWagAAS9YP/0SY6JNeCV8+QmJE5B/+\nBna0AVGxGcO7Q7docgONIXMzkfU3goiIlwQCnZSwTWZ1vP/zGJUKLZDfwmOE\nS3C7feLsW/GXTA3PipHgPAq5QyE9zjFAxOYsgjvtTYAf+psKnLwqVva2Q+7s\ndl5tzEK/xVZocF4OdIk7K1NDALLoqJYbRXjUsHic0n0QXayaaNjFnV28T8Nj\nnkK+z1ONWmmdffqYJO7jl2VVdSVhhGMyP8xUOXmCxpsFKYwctgFkq8PxL455\nXnzLUvAZ2T2SJlwg/BDWgr1HVbOMGdA1iwIPEePEpisNn6Br6lKKDcBALHt0\n4Je+wTBex8jZruFIxLU8++EcWnAtGYwtzMgXUsJa+n4azKxQx55iQXnBgpAu\nv/Gxy2PFXGBiv0ByrF3rXDBMu54wynD4S1WM5kxpp0Hb/tpuLQYaTRN+g6h4\nQjnVdmD5fvNc3rJz2eY2D23jSqv89C7pAtfYGshPZTFqcDgtsiZsXc6r5D+Y\n62mT1QnqkBzMEIjLyIHljQyCDD5+kGYxMt5APd+RxcCcaQbrc5mxm0LEXhCu\nvOZbeBqbvQIZt95Ke00GWceeW+lE54etFDW4jv6VIIT+PFhElQDIhf1EvxII\n6Tf2kuSWRD84oYjS6Ley8agzBBjm/bNrb6+8X0CFkaCHKtEegMAFHD6o+Abh\niuk5\r\n=7PR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.981ad970a.0","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/shape":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/density":"11.0.0-canary.981ad970a.0","@material/checkbox":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/elevation":"11.0.0-canary.981ad970a.0","@material/typography":"11.0.0-canary.981ad970a.0","@material/touch-target":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.981ad970a.0_1614298086398_0.863359664685031","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/chips","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c9457a20ef15c7b131cb2836069ff3581d1f082","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":83,"integrity":"sha512-iQQfywQRH/wpTIGf6mbgRX9ZaxTUQLttl06FjciMu5xHhyhkKwPocgAte/h2izIPB5RdPKgLEa74YcI6AfBp7g==","signatures":[{"sig":"MEQCIEXRb45EwBn8VLZ1krxjJUTkdcAoTbbyjfq9ykk1P424AiALp/TvB+tTqwoxmZ/sdDD2OJWolf6+5mQsPEXsBQOqew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUB/CRA9TVsSAnZWagAAaboP/2QyHTJ/2ixTrXRIN11y\nBkB5gLWuk2/4SNY38gKwwmTXylWM4SpFqyc6K/whfh3tzjy23FWVKlHTUVkV\nm4MeeAqUTMhxFywAHwb64CJbzNabpNCX4KZjmIxotrjvQNjoW0hCu1BCNM/G\nQc8Nx00qEE5PYnBntV+nhCVrO6qBwancFMKwxctBjmYQ3/gQvy3okBQdKPY1\n1ZxuT+JodmL9yuBZHaZDfL9tK03PyM8MvBw1W+nFIhV8YBtqEl1/+4LDhgdD\nyGtXGoKMjQZ/ZcgWrw25j43TRicvWnb4MhYcalNAkWVVtsCCFFWza/EH+K9o\nskOpsNF76Sz/rzIw/TCtO7aqGqYYHFhzk7Gmxtex0DgA5LtYmMuv2yMyIAb2\nwX4ZQy+qppCWravYjb7tWi7+EnK7x71ves8vjpiNCOf7Jq47IlTA45I1Tm+J\ngjnSzONGtSBKH2X39MFb/jrUbT+FcFxvWT6QCvyMdnnDQC1eqQFcsJFYXwjD\nIPHcKYkVywoT59/0+Qr8EqUduKg1rPIUY4U98UqLIquwnAPo7KVcj2CnkT47\nGPrbRyrq2akgdHEadQrv9z1I93Q9Mnj0g+dfcPJ3gihHfxYfVA6oIPIYgLQ5\n4915Eq8q0zoSn8hoVJJSeTQSYeVgL1qs4IZFgS3UyDbhq7e/YjbtYBvyHK9e\nc42K\r\n=e1Oq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/shape":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/density":"11.0.0-canary.f9c9e39d6.0","@material/checkbox":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"11.0.0-canary.f9c9e39d6.0","@material/typography":"11.0.0-canary.f9c9e39d6.0","@material/touch-target":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f9c9e39d6.0_1614364798767_0.23461944535137036","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/chips","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06aa8040c8c97ce6dc868cf55b2075d6390d4b2f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.c97d7d881.0.tgz","fileCount":83,"integrity":"sha512-lSnKFwsZXGQeiRLoTgKIfk+a2e51+7nAR0TmYWMQ4URTcCYK6UimpmpkXyf8YvOLKRMGMjcWdxOyC4dIE+N6Mg==","signatures":[{"sig":"MEUCIHzvljQhxzGJMlpK1kC4kyjmfc3pyy6l3oHx4iNl3tyQAiEAu3DKdicRa9ANifhsdPq0qFgwTAxo6k/GsFqrYYIRVJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVR5CRA9TVsSAnZWagAAChYP/iFndjSnL8fL/NM0IVht\nz2ky6Qo53k/6E4ctWnB7vI45/ca0S0Y3ZzY8xFvDaunkjwcLjyp/2fnseMjW\nk9hQE38HxjlYhUKSorb2RmeIBpwZloLxwsBIeSsHmyQiiHsoCJhGKqw0r7f1\ntEG4D6tMLjZpGY0X3g0vp29i0qHQmbKn/u0Dc29eVECVvR23hhgy1bkLhdQV\nuclfezvedpOrnEFcwixYDn4DKagW/RnPWFT5YmOJf6GZZpOypWiPKJnK9jL7\nbfgApHuAd7JXVS8EiXCBfZbdnEYUW0cKAZKsyfn2BJcdzFtvCxkynUZAWB50\nE907dKhnmJ0OGyp8ahUqmRVEpgrwWAwkI/a0sCdwc/FupWJ54RotmIsmjb0W\nXbgUpuKwMZ9cCW9I2e02hZGOV1n5U6p6jjQG3G2gGYiU0FW/9BU89EJSpLd4\n0Lqx0wx8mqY3ZYDVqHvfKP9y6Nhder+8r76i/Arhs0pHgxxb5Mc3VXDuZq4L\noBn8jFe8EQpbhCihf+5TLfwe7Rctt9eYEEpLAn7LqKPTdDbl42ep+LNnjoZM\nPFgvPnphVwB3R11aa+EenwWJBMdQgyfFjMoCeROZYWDpCf4ubt5myGVtZsXT\nNUz/QZTUrmSRGtmNffddZ/kaMPV9zFvkERNnBVpiv8CPD35po1sb6eVdZICU\nmMIc\r\n=+uFQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c97d7d881.0","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/shape":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/density":"11.0.0-canary.c97d7d881.0","@material/checkbox":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/elevation":"11.0.0-canary.c97d7d881.0","@material/typography":"11.0.0-canary.c97d7d881.0","@material/touch-target":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.c97d7d881.0_1614632057456_0.6929465819938505","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/chips","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a8acdd4d7ef8905c1a38968c569dc1c84ad32d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.bf670dad7.0.tgz","fileCount":83,"integrity":"sha512-PAr+9l6bps64oknfuw9MKitzk4gVYlP2c2CwOqi848U16QW8uH894PdYSlOprMrTzO7o5QE0p0yxoYh6Q2Nvkg==","signatures":[{"sig":"MEUCIQDfeBcEbFn/yhfj/Dk5fkIcgvwyam6IXqLggpSGSu4W6AIgDDMo0li8FhJvGsDS3BrsM7+TPBgjjTUtkTHRln7h+BI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtaUCRA9TVsSAnZWagAAmvgQAJkv0R3LkBqQJni0kqm0\nkO2KBOgK8kDLx4QTB9IwCdA4NFZYCCZxuXwdWi4EDYChQlXEtwF73p/Kkm5+\nqBO18QcK3xnMIGsi1P6Np7LT8sjHOgrp+TF4TEOkdTI2flr30Sei23e3Hng6\nIfIrImE3NiE6w9wot+SXWg3bDx4+DEHLrusMc8hOyN7zhAkOYAgyRwGBiUfG\nTeApyyaOYgdeTk/3miIBbqmSMaPAkur7WNzLUDtKyztvfg2eWjFRjNSfspST\nGoslVqP9zYCfAfx+JB4YLqbW33KWbuB+taaVQJZ/vnN92IBf70cdqz23OZxW\nOWgXKBoZ0SL+nDyYENA+M+eOP52W47woMOK5XYO0Q33VbBnJ0e5yt5ZLYBu7\nSimZJeqiFhq56RmIEkFx52jz3GfNdhURpsiSO/hNsiq1Cmr5FIs18Yyhlc9l\nmWaLIg8grIwVUwJuMjsxfkrAkw7aqK8R1wJ+uHRuvaYtRfSf8NpX+2NJ92Do\nc1HsrWQSzuHBwf1f2WOEJLVZ7nMEH53sEFVQv25k01efYWexaOA1DueFAOtL\n//05au6/o1G0Wnml1jFWBji2jmjjXGCL49nVBmXXBx8VcrlKCeAuB7nhzF1I\nkZ+V6xNqbt2/gFWB+gkduga91kaxUMwCjdaI8RV/B/cf9XJ8SOZFVJBnV4dm\nInxC\r\n=h69i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bf670dad7.0","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/shape":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/density":"11.0.0-canary.bf670dad7.0","@material/checkbox":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/elevation":"11.0.0-canary.bf670dad7.0","@material/typography":"11.0.0-canary.bf670dad7.0","@material/touch-target":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.bf670dad7.0_1614730899965_0.7736730315204388","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/chips","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58bc5b3aaf450e5ba0286635dc82dd7ef8c69085","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.c7d98fcde.0.tgz","fileCount":83,"integrity":"sha512-k5R6yFNAoXPfpCqsmm0txc8nlcYKf+7GTu7BvDIE7pG+jiWzKEs5RLCEsCI5CfG5HWj6nwxpZel1fhcgjHF34Q==","signatures":[{"sig":"MEQCIBfO0R64yhe8L8erSA5kb4RwE5pWzWjL0D6N3s1V1BOYAiBWwIbs0Acm993r9MIzalYW+dPULWOFLTS+wwdd85gCpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/JqCRA9TVsSAnZWagAASwcP/iOraD+i7rLNd7QhyIWv\nkzdHrXreekHaAW5k2lWAAMqtrB+duTIXpv7R6NHu2h0F0Fe5j0ubhdY/2A/3\nUb+Y+8BV2upeQyF1lJYR7i81VI793LZbycyaTDwP1E5YNHt6FoEgavlcy2xw\n19J0VO3d+8NhDPtEWfFBt1kjaATwgaqe677BIv0cRDyddanXQtFuCKCWfGkF\nIjYsSKIoXMPA28NFWbSejbz9yRcJ7QapFt+bgARa4MudVOYw26NtBmrBT+te\nOjR7xsx5KayVwUZEu8+WnKBD9svxvKYKclxXZKDhW1BM5glRsnsv+2LRWNRG\nKbeLsGtKlWgUJvAXieDQnMpFmhHGGiusZ/yBY6FEUF51HDTBWhmuMdqrNtKm\nYyI/5yFcfpM/7TPqku/odNWHW95z45aKGuj6VzaVJPDSJP3XDq9vSsAfSPcg\naprWnhD1mUY8CpGe1r66hb28WwJ55rUtIM1j/lY1NasPWMV2QkqTNgSFYkQM\n9PhD9W2j4zO82hb1t6pQ5damJNqWWUwtl7UZ/bhanC0YYPWFSCDtWNt2aEQH\n63PeQQrlFx37M6v+0uUIlPD0YCfXVPcGyqnAuiolymZYCB9t0qzXnSgUGENw\n5MOP8kdtqrJXixa9dSdvW76+3P2eZJ9LcL3u5VLDShMZ7Kvcd6vMbUVu4dM4\ndNaF\r\n=GuK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c7d98fcde.0","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/shape":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/density":"11.0.0-canary.c7d98fcde.0","@material/checkbox":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/elevation":"11.0.0-canary.c7d98fcde.0","@material/typography":"11.0.0-canary.c7d98fcde.0","@material/touch-target":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.c7d98fcde.0_1614803561426_0.46640806266420043","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/chips","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8690b90c4a9d123917edd943955080571e0c4d07","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":83,"integrity":"sha512-S6FJoh4N0H0g9pN6VsjtY/Rt51fsTk/oHA8cvO8LinWiba7IME7EoPvjpXHE1p4cEV05BZtaDjmt+X93BYEucw==","signatures":[{"sig":"MEUCIQDMbTOnNHOuZgq4ey9E6Z2E7/l1wJi0N8H0Fnjw4lS9AgIgBjg5uOjki62+c4zw0jDhVT1FKIk0CnZYEm9le21WFpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":967434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBrBCRA9TVsSAnZWagAASKcP/3fuhJIRmxLBhehh7Hhp\nI9vS6Sq5nOFuoPqD73OPkTJwG0eJHHEUjOF7xlloKm9RMlUDBJ1Rq0Tqzqrg\nUFEqcRE822cxV/QsbNEek/gls3NYNcYz7c+Eu4u8/6l9ygH7GaHpd+WlssxL\nd6zCDyuYAThmlySPaNiyFnJ3McuBgF2Cs2tR2tl3eCH1OcopXH5mH7nT0N4L\npBdLXe0SMU043Zwl0UlxifVXdWaErv4bjIpUOaA4cXmTRqM7OvVC8X35cBrC\nfYpbf/yyQlLwccycdFLnq7pJ/H4+kPc/ww9WnxFtj2VZq9rMzeI4ZMDD0nJ8\nRk4e7XMpBz+3F13uhzsxJo7Oz6OB9bUa+h5IOsVtQ/c35mRNDuzcUUbFVmy9\nhX+boQTjYp5hcIN/WMph9RtYpbb76LIi+MSMXsBBGP+pJbgMsrBr8JO+2L+e\nhluhSPDtwEko1Tzxk/8H1Q6ulpsz3Nof735gv5d8Vxn0RslU3VBzqEE6c4tt\ntLYk/GRebz+C6MTNdNGYGed0wtn2eQlgsOAOs+rDD44eSzpxf9e+eFcA4tJq\nuIOkJu+5t3x6ykI3Vp8arPJmcbMMixKNggTUf+ePmk2buL+P1DXTjDQb1ZVt\npYzX6svxvAtdzmvsTBHwRQNxHZmmhI2NTUgBfo0vKCgYMaXCIaG362wzsMq8\n6IAT\r\n=DnqH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/shape":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/density":"11.0.0-canary.4fef8bc1e.0","@material/checkbox":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"11.0.0-canary.4fef8bc1e.0","@material/typography":"11.0.0-canary.4fef8bc1e.0","@material/touch-target":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.4fef8bc1e.0_1614813888642_0.7284400418947921","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/chips","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76d070f6260d079e2d400475f28e95f3d9302ce5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.afae3a3ec.0.tgz","fileCount":83,"integrity":"sha512-E63EE3e/4mI/npQRSZopXse+1g9XxuCOlVRtYifaLLi/83IpomXA8F5fAmWg81rJP4/BW8pfiekgO9vrulRz0Q==","signatures":[{"sig":"MEYCIQDn3vKGxduIh73gcteTwQ2SN5H8q0NPY4Zzo43ZzRaTrwIhALtLIvs3X1OBtFyy7czMpUDaNy1Cr7tsDOqHU+8VO4Jj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB72CRA9TVsSAnZWagAAyAoQAJSNQO1C3VCsiHDDsaCR\nIDbwYRtk4Zkf6ALfYpOx/MDir3XgBw/quAuXBbiQeGEfqsCbzbSqC8ArF1I8\nV8yAeasj6BE0wfpxqJi7UzFjuYGiFWdGraJNvtaexZvjpPBfzwz5a7EMX7R9\nL5s3lrb5Vscpzf+qOU9/T7G4J/rPjdKNQKHldkodYdXD1ujsI7j3ntH6G1I/\ne15E6p3jTYzz2G6eqf1a5DPli+xYXQU8VT+5gv1NaZKE3BM2+toSWXPp40IE\nss8baCjTQS0PvK4B+K6ILZoh/+d0YVSVxqhUzBO0NHviY270aFSliOcdF3ER\nIYXUY+kcNnu4w5ouYYaq4pdIfwzsRQcPj2fDhdLLURJ4x3CAVp2kOl8GR+Ys\nLrG2QFRcuO5zlR7cGbBoemJKd1m4wo5nFnQHMmWsnPLbGtieH0d/0Wb6nh3O\nHVW/G9xfZB3k9dWpRtapFcfnSy4SmkZCyow/HUjW7B3unLNNavs5Dmo/+mrC\nfq2N8xQ+wQAhgstkXYpC/MjqQBA6z8vFNo6BMBXVSyOSaIKUUDwT4PGaaYFb\nEayuzsk5DrrqPzs43HQpw2btK/ypQI1TJpg5dqaxvWrhFl7gtllsQsIcoUJM\nOnbZA92dBp9NoxJSd2qrwClK4wf3ocFvW8DREL0DUUL19Fw8lT/H1jqEwr+Q\nxCQf\r\n=5yfG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/shape":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/density":"11.0.0-canary.afae3a3ec.0","@material/checkbox":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/elevation":"11.0.0-canary.afae3a3ec.0","@material/typography":"11.0.0-canary.afae3a3ec.0","@material/touch-target":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.afae3a3ec.0_1614814966082_0.6818741615495991","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/chips","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a612fb68149f2fe07eb660180af274d5135a19f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.0a0b10f22.0.tgz","fileCount":83,"integrity":"sha512-9hwk5xBeE8xkUKBab5UFxblMAjT+Gf1REXY5vXYpz1izLJJYBAnU0I4SH1r6AhVoqi2BoLNbQhyG76gjyetTTg==","signatures":[{"sig":"MEYCIQCiChm3gbyGrerj7MNPX5l8+diCkfFkWVRR+I6RDMo5+QIhAI/T071JI3uGzczsHUc4T1lDbZThnqafLu8cRWq1E/S1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCN8CRA9TVsSAnZWagAAdjMQAIrpmbEnYEtp/VL5Gyq7\n68WRZKDVdCG1S5dK+07UzBV2TzFbizI1dxN2puHteDv37KFWRwcKhmYPV1/J\ny9EmzmRd7YA/qvmiiSh9AWR7i4CXGZiTV9QqdnsVfBBkKKdtKEPB13NuMY3L\nqyw1AUdvdLEucAhFPGxHpYwzAZnXy/59nOAOiPFuLwhTAqFrvT7lH/BRIGx7\nqK7H+Xgolu21I7xSTNkrEt/C7TOrRttXvAHd/jhP7qiF+zBf8pEwCKp2Q+OT\nrrhFM+q/MAlFTIpuOvTynXvCxpIHEANVqkLpHnn6BHj5GPpKb97StGJTTsCL\nbY3lJGBJB0ZGFDf8j5qKJoQ7gETqWkzOj2EVKaFeobWc53HPqmDo4kboTqq2\n48rFj2fhK59fre8bzmQ0DmaI65V34IrARYdQm9W+ylRHEn9XmVTl11xNmNsl\nm1WzO5BdkAukmeqOkW1j3Snu1yU8ckuOaNwNOZrtftbD1OHj5h7bCJHxlWIw\nXaGiP2k/suVKBkSpt8Cg0Sf5fAWAX1vBTdLz5z5kKBKsRsUkZilCkGiVChep\nlsVL+jTmerdrXmXrVvYvomKKaakBsE0JO9bBU1K5mXG6TBpnTpNLbhMnlOCy\nTCwFj2i9zHRRtX/t9cDcCN9Rhzih7/9svX8K7X42uQ0AqdXUJOEKjnk980uP\ndApo\r\n=D+Fr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/shape":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/density":"11.0.0-canary.0a0b10f22.0","@material/checkbox":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/elevation":"11.0.0-canary.0a0b10f22.0","@material/typography":"11.0.0-canary.0a0b10f22.0","@material/touch-target":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.0a0b10f22.0_1614816123795_0.4099775030731465","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/chips","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9478451fcc9b4bee04bd77f3563c610202ff165f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.6f678a91a.0.tgz","fileCount":83,"integrity":"sha512-yDoRQGJOsmBmo0cakzvuWB5Nu9w/s3yz/xRyJJgT9d/oYpKcx9xy+9Pb8h04LyIIvoUpvQjGv5XRmS7nG9MaXg==","signatures":[{"sig":"MEUCIGKZuNh91mPlfo2IOmEjnzA59F2IH8DeKDUBZQ+sgr1TAiEA3+emgfZBx2leOmE5NlzQS9Vg07gEdj4k+7CLXLmrlJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSmnCRA9TVsSAnZWagAAxQIP/AslViN6ezM46bj5EZkD\njZBXYF/0hoZj6II/pkfyvx+Igttsfh4aub7eghF2bxcVeIwunj+cwBpcmyR/\n64Xr+7NgkSkAZCAb31ecZ97fPm9izTLKfLRKKrEz0T8T6tqJcntcrWs8fiDH\nbMY4CaGp6Q4OzT+821xO1hTusaAcakvF8EZbkK9VGDvO+EgItb6XrLY41WEF\nMB8GKWvom3PuYRt7ATu/9hwEvTr2wiNasTPejWERdnfh+OtSeBQI+rIFAmem\nsukkjRoAmADVB6M1elE0SwXVSzvk4m7Mx6BvG3CgLB3L9Rv9K4AFqeGgcQGr\nGVQT7E0kK/b0wQF74OpCbyxUq7gM0OhSXBtllqHKCogGt11UIoYvKCDkttwS\nNpI1asioV9OBrYFkUaPjt0kJDdp0DcWTbhqOkCeEFsNKb1JxFzErA6XZIYUI\ncjcUvxODjmHarOiG+lKiVe4QYGX3xT3rArVPpzIjqlX5vKWputGGrLaWGtNq\nSHnWtbwwTlH2pSYUY+C0WbaADNmdJeRRzg97y2bDPnStgqpO6M3KP2p7Pn4u\nDmCAFAzjrTIFXE/e7ElHDBwa5YIedFDLcUYL2sumC1HO4jmsI658txd2283h\n4mXK45zBEZb+b6gpxIXDxQoETMYXXpyLZKWZk33DnlQEr4U1ItOAdFN+JLX+\nVNyv\r\n=ezsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/shape":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/density":"11.0.0-canary.6f678a91a.0","@material/checkbox":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/elevation":"11.0.0-canary.6f678a91a.0","@material/typography":"11.0.0-canary.6f678a91a.0","@material/touch-target":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.6f678a91a.0_1614883238439_0.3803088406689026","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/chips","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"891c21c9241d8a8b51497b00b74af3768f97e90f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f5f1b613c.0.tgz","fileCount":83,"integrity":"sha512-izpGY4JvpfOROg6m2zUFB2IkN5LLbJK7oWAxRN2tdohDfwXpuJjd7H3fPT43Ga/b2OLAyMOyDr32bMIr4ux70g==","signatures":[{"sig":"MEQCIB0mYf5KNzZmNNxjW7VkEHGbXozZGfuZwvRUXLM7SIoqAiAPHmuonERSNbKFfgfWtGp7WZXvw4zIkG4CcEI7bFcH9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUgaCRA9TVsSAnZWagAA3U4P/jvuQ8GGgd1oLh+x+ddp\nDgtPiLmVN8dkCGgcBi01dLlVghfmUPAwWp4PJPutQl4G9j2I5+PDFdgDisdO\nLuyL7yj1xTpkS2/EZe+2TrZi3sNTAkeaxTN9Pp/JDSvehYwmBeItxafHFN5n\nTWOrDLjWJ1irRqjLiJPk9FQerX/MX+q4VUluIp5egzBOM8yZQnq47yxR8Kvo\nlj3JcjFL3zs76JTtZfQC51SAiP6UGgWfmtJB3wI7i1X8D+5CQs4yFAH5okr5\nsl1QwVSYQ9CrR0cK6Q2zWv2gYRaftmBIiX2c5U7fRhhmYDripO8xNiukwdKI\n3BcoJjTmuan0qt36UubWEf8rtl35ukzufcrwGA+uxFqGy8l2RPqYw3lZ44Rj\nSZtlOZJ4MYkOGIVz8AiLJfhq6F4oiUIyrn9QaCAv/Dj2ET1qtZcip6/AOmvg\nzRkz96rDJdxr61K5xoG2bcqXW3zSZ4cAjXvRpLcXfoKINGoRMfDmFEp1go/o\nAUeJafsnso510p8PLz25x08IooX5BBmpZe61r4G/tcU0MtCgvJxhh/dZbllp\nejF6GN3lyzb75I6vnCsR/WT6z4YXeX8ot3lPbf37/m1wXm41Wn25Gb58cVo/\n7uI8WtOELVCRaKgQjvJgEmqmCFOTB2Pz3gTAot7nBXWH9Iw7Co+StZ+PIgHm\nsnjl\r\n=j+bS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/shape":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/density":"11.0.0-canary.f5f1b613c.0","@material/checkbox":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/elevation":"11.0.0-canary.f5f1b613c.0","@material/typography":"11.0.0-canary.f5f1b613c.0","@material/touch-target":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f5f1b613c.0_1614891034197_0.9811259852158387","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/chips","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.606e767ef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7f5224ee597ccc67bea174ce1bda487d993a9d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.606e767ef.0.tgz","fileCount":83,"integrity":"sha512-Kvlypu14mShwbTKeyeUSE/icWwkECWk0wW1E0UWw1zxst5LAngbu7IGxLiNyTKIkVn+F1Y9RiNXGmc2iHPebNQ==","signatures":[{"sig":"MEQCIGtBKBYBxFuMA152tzv53R1MrWKJII9PwVGuUnOCu6pCAiB+YCBhhf0WHa60tDVkImthd6W1lT/gMOvhgLwyqAezpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVUtCRA9TVsSAnZWagAAoXAQAIQqwiKqz3Ri7egxTHWQ\nQ3KUZ1VuEYZl0oqjzvwSOJmKuBIrGa/5lEkPsCC1O8osI7v7aGDBsaIpkeU0\nm90S0x4G4VJxOxBlERcaHfbyVOgan66/LKJVz5vU6l686ZIUnEGew7m/aPKT\nhkT941KrydrCT5RfNiGzxoHUpbykVZiCNmOP3ghqD1VUBGCw7lFxXuoHh8O4\nmqKCJPPbRgQ8TJ0C28Ra1CQBIt031wC8dZIBJxS1HFJV42vQHP3gyn6gmeKc\nxM/HnMJk5EkCABQv8setU5h7QQCK6h4KBpkorGSVun+eDnFig3EjWFI4m2p/\nRuYF3Fdab9Z36o9WdH1rkROzMp0pQt39wCw2kpUDfj4SWnlREek1oskqkAbe\nS0NrPXZSefqrHvQDxYsD5vFXmewOcAOgqmSWKNnrkoNzNikfPPQjYRSooUVI\n42c0tC6elHekROp5Hu/I7gH9746hYTyYv6tkSVZjVkIoogrJtyRPfc5oSK27\nOKfNiZhWbK94agbPnGSNInIdJiY4W3Aj4sFKsjJhn/WCdeZwt9F0sZ8V41P+\nWFJgcxWOvxyJEMJNADmGH3r2VW0fI0vSLlKfjNdus506tXor4y9cp/3l9msO\nDlui/ZtVBjJ14pjklLDVGvbJ5JQ3CbJDDJydENrgI7IqXr/hUAXfk4IBVH4o\nHCKe\r\n=Crkq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/shape":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/density":"11.0.0-canary.606e767ef.0","@material/checkbox":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/elevation":"11.0.0-canary.606e767ef.0","@material/typography":"11.0.0-canary.606e767ef.0","@material/touch-target":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.606e767ef.0_1614894380479_0.8409638732904214","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/chips","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9888ce6df12c879759a7b9d20b6862c7618b8ff0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":83,"integrity":"sha512-J/KnQnEXaEZ1Jj/dNsmQsj0pbam3Mu59RqRl8PUqpBRGtd0idenQDpKCbmNU39UEhFnZl29VKjKYWXSxWfddwA==","signatures":[{"sig":"MEUCIC7UCUsI/j5o2DhMtLexGc/5pWnAgLk7AwAah/J4+EDLAiEAx3I/GjtzXP1bkAZR7p7FgcHbNo51PNyuIxPrs+OPACA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwe9CRA9TVsSAnZWagAA6uoP/iR+Q5v5zDT+pplXGp7r\nnwV51Kqcf7PaPw85W7Ic0QUAmn83FSpLfigO+ToswFu03Yqga0S6fFMst3D/\nKnDtIp24OL3/5W+9n0k5+DSKojbfl6D+dD+Px+BvCokGaAF1opoJ5G8rnP4u\ny6jWrmsvk2Po1V18KN2fg0SA3Dyx4ld3GeiXZdY36ZMzB/nZxKYivtQ2+ixu\nzteJvoanevTVQh1NinrqjPulTsJ4cAfi76i+gay9bfdiMeHdyvlv7WWOMJVE\nItAEN75D1IPeI6Epwz+7wl2HD1DQYvAHRYDrWKlDBXOBZw9e+ZF+bcFeBTsN\n+6QASslQC3Jua5TGdD1gP3HQe+ai9Y6GbJNWjOcNqWWaTxqvsjnZDM/SSvtB\nCGvS6Q66kJcMZJt4XiuNInP4j+58gcDrSph9jCprQOK7V/0bi90fv6kMyndp\novd5Bnfj7DOTih6bFMFWvIYpbKMfVOvhI8lqqbDXqiBiNNVCqdwLy+7pfRKV\nqObu/dDZxOoCR3OSoloNbgoHOpZ9Fliplvkdbth5G05ADmQdv4BgY+qUxPYb\n6LLiy9V3mSbLMpKKQFI111Xr1nl9DeQL1TE1TUQVLFQ3wqQPclJPgVMS9Ud8\nZdWmlvssv4s7Evm2iJlmCuC10iSVd2EvcYeH2HB/KMTMgKHaro5GWs+H7drk\nYFd4\r\n=OhII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/shape":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/density":"11.0.0-canary.f77a4dd1a.0","@material/checkbox":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"11.0.0-canary.f77a4dd1a.0","@material/typography":"11.0.0-canary.f77a4dd1a.0","@material/touch-target":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f77a4dd1a.0_1615005628470_0.6206570058887753","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/chips","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0481c4a5887fcba583f4c9e61ee568d09300a2ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":83,"integrity":"sha512-NVRpo8jTRkiWeV3R2dw/2H6ZKUctgm+Ta7Plcs+gIPcX9+OZmyxF+B3RJeX+ffnjWapPeRTD6Ygvkbg5/FxP+w==","signatures":[{"sig":"MEQCIALSezBW8+m3lObk7+idvxq5OrD8nxypouhPLE9vLRrhAiBUPFYcPY40RXNMH+FC7kdNznXdwxkOFuHBfec2Rj7Lgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqjdCRA9TVsSAnZWagAAe1AP/iwMOIyAOHz4+jzBuCmT\nPnQbEXBUbijA7NpM5XvDUpUUMRHc3jf8JCDrn02fxMPWFh0or3mqxP3rkpFK\ndNf/lfKdcHC8H+5gAE2xxxqTrl3rxfAK7WUr3++sUExN+RUePgltN00tmYgz\n+DDCiWMZFIPgtrr/XXZ0ET9a5Kq5yoZdD2dicBF/X/jHllYmtGvoYUTZSM8e\nkSaeMz9CakckCBu202o7PU9q+Yip1WJFCs462NTg92nsdfqcB4lhHdcjadO4\nfeNTKK7Cug4kDanScG104yvo8QI7p/wXh4HHvCT9iowIZk9izpUfy+tkAJKD\n6xou3xTGe4IgA4fu+1Zv6z2lmanHhaEny/IILFuQeofuZ3lCDSlrZ6sXbedn\nWsji7P0qcRGDvdD2ihfIPQHj/Hh18oUhL0UKhcpkEGbHLuEH4V0GhEBPtOKS\nLl/C5YYmU3Z7BiQo9bBAyKLVMBkIaWK8oRN1QAfjAY/+dA0v4yoVMPAjCg9J\n49S9Cj621pWqxkqiXKsOyU+sGW6+7/LdNGayh5ycdLc1vD899VnmT46XqmfN\nG48LOWQXdj3q25eU93W0bF+8jfz/fIIswTyDvb7cMLM5wTh7t8JoatpdIl+V\nVyCLFPPenSxgXO9JC4iRa75PIXv7wyOtVp+4Nh8ZwYxNLR+/xjE35XHr0h91\nXr8R\r\n=jAxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/shape":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/density":"11.0.0-canary.2d6ba2c23.0","@material/checkbox":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"11.0.0-canary.2d6ba2c23.0","@material/typography":"11.0.0-canary.2d6ba2c23.0","@material/touch-target":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.2d6ba2c23.0_1615243484769_0.03941487342457228","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/chips","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93dcf063e1b2cfec3cac209dd96facec9855d683","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.7522dcaca.0.tgz","fileCount":83,"integrity":"sha512-XwCsfsGcdi8FNWVMWs4gCrTyE4ea8QM8rNiyo5yGmjH9jx1O3jhwE25Vx/xoSrt+2QaCrWmcDwB47TV+IZkNSQ==","signatures":[{"sig":"MEUCIGnfk2u/WD7OMoDluNriDCgEF6EpLxposhMw8StjbLWgAiEA9vMJmrCGraTIy354+Y+oArTCpeukNo8yPZnGsMn9cvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsEWCRA9TVsSAnZWagAAWPcP/3GIcRbI9E9wCdbR7A8Q\nNeoVKGER8vjWghryPiJqO0DBzSxc3l6lfZ0ejXrGJWtgCyKuGlgovlAoB3LE\nrZI4F0qK0+irDEbnBAv7QQp6uI7S7QLX5M7HOK/qutu+YwQx2YWh7PTK21+o\n4IqeXyECqd8jikeSDEtgLuyj4pLRxbyDN9wnRyHEnV56jXFZCcMc98nEjj8u\nUgt/dCsb9xkMR1ZbaVQPeQ/5yKIRu56eAvRIbPoi2nchxPI55/Chm7U+EEHZ\ngSJxNEzG52W19RAUMnBfg/PmOg9TSKsVgRfGYUIaHHuKlk6Ag+kbmB98ms/Y\naZTzgy1QM2mRL2snFLEXSu7QTV9RTDLT2b3pUjj++Xz3ong6+9hUfcawMija\nAVDxgXFwWq9hWOxePSZ7pGLyMRWeC+7Ky2Bdm4P7hPBcbDvByH0jCfkltmEg\nhJknD2FmIb7JKg5DAD+Or+u//5tXEVoJE4sMQKy2AvJ+xBHEPWOTtsNLWGHf\ntI5LNMCYIjE/MekC3uV9MMcnviKPFi8xfm9yEDgOWRuDBP4pQmKIGJMC3ffT\nqj6zlwRYNrwOeEl+rc5WozxxPNI1IA/gxUbBM0HVefBGjlEiKunYBAvfE2T/\nRk2wMrV3x03IMem+0S62ZHIaRSsF96NLEKBV2Glf8HeIimelZGRfmFLtfqlN\nyHiN\r\n=uKjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/shape":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/density":"11.0.0-canary.7522dcaca.0","@material/checkbox":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/elevation":"11.0.0-canary.7522dcaca.0","@material/typography":"11.0.0-canary.7522dcaca.0","@material/touch-target":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.7522dcaca.0_1615249686327_0.5200774323233952","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/chips","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac60e8dbc174a1e2c95fbc863d5ab73c1badc8a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.5c0ab7401.0.tgz","fileCount":83,"integrity":"sha512-b2MH5y3JMbQsU3q4muc7TZX95j5cROPMzUJoG9yeTo+0UCisGj1/SCc/1Gds4JgGVB/XU93vE/m47aFqJqO59g==","signatures":[{"sig":"MEYCIQDUwOAFubgAMnFBGUNnko/c6Mg+olXQcfhwTb+XGz5IswIhAJ3cFXhS1wYfGORdYlC+NYSIeQ0Zl/l9Zl5tRRnxiLCA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/xKCRA9TVsSAnZWagAAV9IP/3mOn9SftFI+IyLeMWCN\nP1wf45z2N+FgUol69P+mCphEzS7mBtCsSyXP2D4BYxguGsoJRtcEI4LnCNze\nBwSOjcM+XXoC5Dqm0rT8hZGAfEgcJQuOeZCIRLNwUzSDw2/+chougpra11IZ\nvGtLrx38+aIlJYhi5P28aifCtbTA17pU6K27vtmLbRUjnHTXg7q4INAXB4It\ngvbi0cas3yBk0CUn6G35zoA/Q3P6hg9pmJgWDKzWBcGE58qJL/ZAYC8UpENL\n2NquizQUdwkhoNGambGefE5/yGuCeVKgxx4uSVnxZvvyGcjPuyYD9xP7KGsR\nq95QT0RZYGwrY6T2tHMsomogKGxiNwHa1+uS0LgbDZznOtFeIQtfdL6cSBHB\n2i/n9pQF7l4RN+Zh5xbcWZck4PM2glpZqmMGBR1RaEVEeeUyVPSNl8lpHntN\ntstZn5CRhDf9pACK1b6caFd7dOC6Yy1wxNjm/LMn4Ei8491V2AMnjtYCC03x\njThsaq5fGWBHYDOM5SozpwPqDTPbLA0OXATwnCoY3yXbaY6d7EJhVQq0wpsC\nLRrNezh7saCcZgFHT8k3rG+rUeMG1Es7+tCxGjsiU3S3eo4RM19KsPAiAznf\ngqTXkKDjr73MOxSW+QnFi4h6ldwLANR9c4pykjKWw5B9aZ6sEXrWpQ22Lx+h\n7G/2\r\n=TNqU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/shape":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/density":"11.0.0-canary.5c0ab7401.0","@material/checkbox":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/elevation":"11.0.0-canary.5c0ab7401.0","@material/typography":"11.0.0-canary.5c0ab7401.0","@material/touch-target":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.5c0ab7401.0_1615330377595_0.3909647929037676","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/chips","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46a27bc615a16ae08d2c1e4addbac89b1da3d762","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.59010b6dc.0.tgz","fileCount":83,"integrity":"sha512-aHrMQI+JzOsEw5OGIyHRVqySFkQplsxnjVIigixkJwijE44Yi6w9H8Lqo6WecmtHKy1bjJV/0cS46sF/qrg+BA==","signatures":[{"sig":"MEYCIQCGIvVgRO4XezTh5cgRxAm3+fwvcfMyS8fv7UR2j+lp8gIhAPSc2thrFUlKlP8pFi+9d5lA08QlDW0eTKkQolUgv4cN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPqTCRA9TVsSAnZWagAADuoQAKEXZwzsjtWXZGHGypab\nHMwb4SaVSDPAS1C5ZBLKSJpF/LZE/PQvg/tdZlxiFjjULSUTzt/EMf9zcWBJ\noD3yDvkpgBjraIaPY+2ruIFJ0xrvbBoLSpykNhMLOKSo2+Rwg0MhYHcW4zxL\n7KTKKyEd2mbu4DAoB1PJLUc2Z0Q145dgqdJYZVIgexZVWxR72rx0ebVGnrLH\nQ4t1YSNvycGcrcOV+xuyaY3afTWXT85D6vqMrmBtdsKWlT/n5+/q1n7kDTPW\nZATmWlt5c9RZ+ipVOpCeNbCNFJ7j1W0i0PYm/kxzmQ+XuGaXE7YjM74kGwk4\nkYoLqJNA1DbrtzkYGIZb8Nfg8wS3L1UZ0SQkflKmrtIQK5bN/VddumZTVFFx\nDbvxNOE6IApvElCoh/CyabnW212cQANULInRa9y5VrpY0iD0BTcrpuasEHut\nb4UxZRymuOPzXdotcE0EwFKcKuT0TEPcnBZEHGy4r9obRr7Rz02vl6ffkt1e\njpxmhQfQu7xIbGi88BRpcURnHPM20DgS1qO2wLN3qgE3F91tHNQVI84Ay6FT\nyJk6O77wDIeWQ7ca70vFEyVpz/5pmRUNfTUcEUsaREw6nQphDM4mouizzTER\nuFuT5gxaSKih1mUvCAqmq7h4Ptp5R0BfolxW3sZ0+1md8+/un5xlNVca0219\nVqi7\r\n=wzu3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/shape":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/density":"11.0.0-canary.59010b6dc.0","@material/checkbox":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/elevation":"11.0.0-canary.59010b6dc.0","@material/typography":"11.0.0-canary.59010b6dc.0","@material/touch-target":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.59010b6dc.0_1615395474592_0.3463625121416434","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/chips","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3972a0baeb5859487238f5106e93d4d599e9244a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.9e52f5544.0.tgz","fileCount":83,"integrity":"sha512-9+oFuhlR4N56m2stnauYXZoat4UpZiC8QtEwpkB56tMWJQTUEd93uoOWOxVY9QpPNF9bdlgOf8/fwJH8AsBLdQ==","signatures":[{"sig":"MEYCIQCBTzFvINyvqqghavVlZRmBD4pvGEjRe57htLUCjHUsNwIhAPe/RcJdqLixYeAm5S+BFjN7p+gQPC/pQsvBvtY5HV+V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVVsCRA9TVsSAnZWagAASRcP/0BylisDHcuyU0ySHvQF\nxisTWV8xDZziyZFa/TxE45WbKOCWHGbQaUtDldzhelmqb3hafBlMfNgIXEnr\nwQ4U3LlgpvWG6oX+rHgZzC64YEvYDbNVpjCLQ3ETVyplZWtwHRnb0AvHnAFb\nIQwyMErChKpX6QO5JGHDf6D8pLo8bx8FrNAuSV0e8ak4OPFGqjvfXWMkXjdj\n39wY6xtMuK0RKh303dPJ37HVgWI+1fKMNWZ38F33XuxdQvE9A9rtZwTfF1+q\nPJDe/tSp+a6NyAaA/yhnhdctt4q9mlc72S+HNgdevlictqYScGwwjZDOPxVi\nDfQB9GW/5aN4DKK9e13GTxV8YT12iTlvU0MijdVNYJA1b9LfH2BrrOXbmuTk\n+KC5EhpmNWsICiglQjdy8RMXiJS2kVNeIMsIezJDYmMB5QiQnRItMnEH5o8N\nevamV9CmDau2l+nqScAcpjGIuUt+SzEXBWw7owdFwkTwYMynGE8q7i2vjvKe\n0efzfaJDjXShHOL+nkeXbsp5xrFwpVXyeZbyzBdpt+hQb357oPooVVf0/zVV\n0mb8UXZeFNOXnhonC1a18njiPs47s42Pnai5K7DonMsZgFENY0AFDpE9sLQz\n2NniWk7j1WWjNFUpjiMjL58zBzLvw0vErhMhRgKnzVt35WlRENIOMqc1zMi7\ns/iw\r\n=aoy+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/shape":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/density":"11.0.0-canary.9e52f5544.0","@material/checkbox":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/elevation":"11.0.0-canary.9e52f5544.0","@material/typography":"11.0.0-canary.9e52f5544.0","@material/touch-target":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.9e52f5544.0_1615418731697_0.3708299036080349","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/chips","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.a678806f5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e317de998895cfd50e05c32c63811d13d88981c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.a678806f5.0.tgz","fileCount":83,"integrity":"sha512-J19022WEzCtw4sJVvA4XIikKJaNMrs18Qv+txpsl3kMQTAJWBI+4VpdIoXH1QFRicj3ykt2L67EupN9fgNtE9A==","signatures":[{"sig":"MEUCIQD/6t/kLxGQvWKLeQx+v8EOMpwZJbxg+PpRwJvhDkxixwIgJQsrCWzr1qb9S9fHbkNe7Cdssp9RbhgTrX321GyJYA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXd8CRA9TVsSAnZWagAAddAQAJFQjheCIfiWdDwBLZAZ\nlQ5nLy48tyOd/U8b2tUIhqUTlEv2LOr6pfNPfF33/InYCBxmEgYf6id/TZfh\n4xmlHlN5txjDQrUw0stNdFQx9HRBy1QqsRfkZDUjXYXxbmZTAB0aOK2s6+fy\nTKHwWTLFu7h7WxBtsUKV+KEVLccwZhtIHwdPbGwUT3HNfHixRGt1D95S5pqQ\n23pZsiBjhCuF8IzqWTVbb1SsaN1vfXfIpH6f99qBtXsfgbVMWe/kIy5fRGjc\nGZaim/xr80S6MtRGL9jeb76d8/uK0LdcImidXvK+joRWdVfPVGfojZh1/M0U\ngJYUDf2q9jEkbKET0p0rEfqPonzF0tin4mWMnJTcEoMAgPcnsfqZLXO5cJNC\nd9wFcWJZv9Zjyyp6srK6c9vaWzuKcsAIcjN1+fGsNBMczZEfgZJzWBmXm4TO\n0xFWoajJ8crAzhdSY1Z+zlcPHTCVd98gGcPPhhzqlhTxFFA8O/4bpgJxbMQx\n+MX0t0sCpSKUqlBLU5lKWkXue8jf244i7/+picS8VUk899sgZERmwu7T0XWL\nQMAPFDKwpJ0KeQoeuKrpGGDZbNAQT0pYOsvqvYNqSTHXxtQrv08nRs2oe2/X\nXq4heOBLxLG7JH7AF2pFshplAw/vjddzftmrhtdu+Un4T9ser8MUiKRTy+Pk\ncEEi\r\n=LU9F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/shape":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/density":"11.0.0-canary.a678806f5.0","@material/checkbox":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/elevation":"11.0.0-canary.a678806f5.0","@material/typography":"11.0.0-canary.a678806f5.0","@material/touch-target":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.a678806f5.0_1615427451542_0.8416402919937878","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/chips","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d4014b4d516b0f2146d2236d988a5e1b4343ea9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.b2d22df5b.0.tgz","fileCount":83,"integrity":"sha512-El3OiMDBnSAOFsb0tuExB9im9IoJiCp1WIsTJvnmPLzGCZc9vU5A3ygjXa+RFsJHqUehiqOh82IFYy6T7qkhUg==","signatures":[{"sig":"MEUCIQDu0aQVq5SD5o53MlEBFKhoBPavfT0nMODe0pyTf7TSBgIgdfBF6suXQ8zNQvmYOE7Mdpr+e54m/IT+LgLRDNA85N4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk1ZCRA9TVsSAnZWagAAlfIP/RyZ+3ZchanFiIA2dnZ8\nUllz5Y5ZcgXcg2gF2MWMIBwYlOiaxjvxU0gJm42zUIQvRly5rgSrHoQ2rBPv\na/RjfNuOYxdchdnNxSuQzK5YoerzWKVZkUmLoAU84ReNwysg4Wg8lprDc/Cp\n3Su+s8TOD27mBU699VwGrcSn0HS/VfRotxUYfnUO/3lK0RPkV8OjG8qiwxcN\nXninZJ4Ls3E2rV7U77L88/kp/W5DAAQo2HGitwfs4Ijs0DEwt9hDppeT1YbD\n3vEMIgDP66JUpOqqqlLTPsTtsuE2Xio7LqEtiRly2R44HnqKMrg9r/r5nW/j\nH4ITe5k9smXgcPU8F/462eLBp4870LXgG3poQAaCu10Vg0ye+XpTvSUNmCZc\nINLTXfK6/xmlN6xBNx3t4u0jLia7upHOPpijbtBwYRmqk5PwcR1U2Pkb5oNn\nQCVR6mfHzC9pxEBukROL0JLzMqa+zbxsJh8abb/XzAGddg920CHgT93OOAgc\nBXyo3lQBmXyN9brKTvKLOqAvLel663QG+3xnq9LdJXoE+LE3n4CMPin7Q0W7\nqBI6osSdkh5n2SfAxYBrx9D76E5OG//ZS10/AYh+o3op/8ZIfU9EBIHyCcCk\nX1ts2ctUU8hzcDRT6hlhHMYXd3czLbwxcee3FTibHGmOGk0z4IDMD2HEEJy9\n0Ku9\r\n=j53w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/shape":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/density":"11.0.0-canary.b2d22df5b.0","@material/checkbox":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/elevation":"11.0.0-canary.b2d22df5b.0","@material/typography":"11.0.0-canary.b2d22df5b.0","@material/touch-target":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.b2d22df5b.0_1615482201147_0.758362446100002","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/chips","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.81911b707.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"131f2ead7282b5431fbfd43ee97ef9f8e88d672f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.81911b707.0.tgz","fileCount":83,"integrity":"sha512-zHFRjnOyAeD6Pctc/duDT4Y1mDy1rsMoz0VKD7p0VMeFYytGKuI5babCU4Ua1zqQLypxpykx96Qwt1z7WqHOAw==","signatures":[{"sig":"MEUCIBFFeZIh0Ns7Z9CUfrR92vfxZmNkm/YR/oWzbMoSo5TGAiEAo/S65h6N7TNteE7lDcMih8zIRfq6yEdIhu+4RIfeHDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1000924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmA3CRA9TVsSAnZWagAA8OgP/195sMwan/qr1QeR3IPG\nV+0KDLQ2WUY0L23hIQ+jbL+vaSzQSCaYtjYn+X3ax7zzNEWfEZAbuxgrx9Hq\nZv4khfQK0H0SsUp7S+4B2EaDV25WrPpJ2fyukr0E9L0xrtFiig5FY7D9QTVP\n3UltUpniib4r0HRD0tcD6xo99f5f3GjDuRkF05P13SkKWyySjDHeiV1uUlGT\n3FwCqZi1hND6e3vYmx8mVl6+VGsHidMUzCOm11LubscomdVmXk3yanUwWss3\ntPie6Zdbk8INKGQIRiMFXKKuIwz67ocM+IEh6CFaIRCya1XJLT8mPhmEPTI+\nLLL4OWfzLmXKS0qD80mQs/9MYPaOchFUMqpzytmqusCZG3Hjo0kRoHJJnaVg\nppOLVR+9+KqRsJoA3xQPWD5ReZGioOz/hRdP8h9IxIbtTrz664Ltz+z+nqRE\nZH95hbAf3KXWnYxCBGXzD7/vObCqPjh9VtnvORSLE8bFUU9ZPZAS8rQAHFpj\nJS4bfrs4QXsE5+0pAGbDxls9DaPE+wrHqCMrB13Zvf41rsCGQRulmP/eOAUL\nWp6wEjwn5cpLngOkj+Rt5luU0OyT1XiOLh4VlR4OZMG8Z1U38NbBZbk4XLfk\nRUkqVxqu6BX9I1dM+gnrB2GGNffe7crN+NYH6lXli9VMBBTP4O+mNFJzAL1i\nc13Z\r\n=1xjZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/shape":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/density":"11.0.0-canary.81911b707.0","@material/checkbox":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/elevation":"11.0.0-canary.81911b707.0","@material/typography":"11.0.0-canary.81911b707.0","@material/touch-target":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.81911b707.0_1615487031427_0.5256129791561104","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/chips","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"924cd167f9335d9a69a22e0daf27b635db1032bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.9eeb35c38.0.tgz","fileCount":106,"integrity":"sha512-aeSJmGyN19F02ncEeQApEA58tieCxQrb18oM6ZghpfHHVtHd5hUwi0X7y1rGFQzTUTOiDMlxbRU3jCezppnpyg==","signatures":[{"sig":"MEUCIBxlkgjKaIfxyTPYexuX2rnyT03l7U26FeQ7A7BOrCcCAiEAiuwuC3Bkof1uxnipXt8tKASrEMAYRSBXNQe5wFTPuvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1041231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnF1CRA9TVsSAnZWagAA6NMP/joogBXHc+igP3IxrIkz\nEvwncylvvlOcPsP5f7foV9FJBxY+GckQJv7xJATuYgWhth4wN44OE7jtI40u\ncXKtKinXRaxNvkdf0/wHznaa5LazZQ+uVb325hou//797HcPLOjZSEcT+aEc\n2ZrLx3kIiNSrb7frgSNxU1dS6n01H4TlsrD7hY6cjCQNpu8KJOC3Wdv0uAfv\nqoo3yZFWmzidUy3Jv5nYZxtk3AevKhl9UzJvAgqdMwXP8d435bKbR58Y2Ggu\nOxq2jheIkvFtCQXevTAznbX6C3sjjq2nYAxZVVHePPJZBsEQdllkuppCs/NO\ndi4+aZOcKnfY9e91P++cATBLyU/zk2ZrlwzVaXYjuQR6X2JWZfDGMfSRFhVm\n9koV0fxQBrnXmPg6fz/C17FJ+WqT9AnKZ9sA7OmmpM4H3UQH1jQ/IA/5os94\nBjekO7YoXlgr1uXCi84G0CatRDTONqqKoG31cAnUS6/n9PgZFb0nV8Fctel4\n6qhbHg9dXD3jhqckdfFM6EyOSC/i2YvU9+qnjdR5w4m8t1OepQMIBXirGu9M\n1F3O+j1zLqe+jYqlpgUg1cPKRyrv28oLcneDWJGO9EUvJcfcHDwKq/VfH9oT\nwbCYIa0b0skfGfHkxG42mssttqVgHQaXBwHk8odsx/ThmuNcoBKsr8m9RcyL\nJn4z\r\n=9D6E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/shape":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/density":"11.0.0-canary.9eeb35c38.0","@material/checkbox":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/elevation":"11.0.0-canary.9eeb35c38.0","@material/typography":"11.0.0-canary.9eeb35c38.0","@material/touch-target":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.9eeb35c38.0_1615491444547_0.5801811701774755","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/chips","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6dc020fbd99cbf5e3074c20d27fdaed0b22551a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.12be3e95a.0.tgz","fileCount":106,"integrity":"sha512-8pqBp2Zjb6oMzMhvlPjzSdtKwK06qI3XYpnYJX+KWGJ9NAPOahfMghib8L1z+RQfojOoDjk/03C/FfbITaE1/Q==","signatures":[{"sig":"MEUCIQDWfJTAPTC0ZpWMRoYdDf7nIX94/W9Mhe8QPWPrdvur+gIge0VDESIya99DcHarMH5OR+/X4dCphAFiBitj4Gh2C0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1041231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnc6CRA9TVsSAnZWagAA6WQP/1++iRyRBM9tZIdqAClh\nP24BX68zpAivn7Sbxz+4XhueM9GjRJVnN6Kqo+HARgghRZ6fNRJz8E07PyQA\n3GVYoONOLd9JktKUMiWjuKxavmlUJaU/HUmYTcOUhEzpwQWRaAcDBfV8Krzo\nZa/PStpbdiVpwl4Nd7pGtHj1Cwj23cSJZTjQ6TNSP6tHSsHgPtc5H3os7ADS\n9Oucp/Ce/vZdJTIzFfkLieePd97j7CYs77JwU1EI0bdeDcuuaO4gT60UGAHm\noW/djCwDNG4UWiYlGzmVUzsZy/J7DIqVVDGKzbRQBFc3fHx7wWO5/cmU4ud9\naEUK9ZJEUjg5fSerOodfp07Xt9nX6ip0klFHx7QMYFgwWa5C6HdgRXL70qZp\nkIfU+wtk5wvEORjmSScbjDwjYR5QJBMJSThdFcFfR2nc5LzPhLPHN63x0rg7\naFx7ub8U1Hy48O/7U++fZiBvWT+Xsppod5UbnoWm02ynKq/7q4lSFw6zOW4g\nqDn02X/Ra6SOsTWJ41Hb+EZCC+WhCmLiuBTw/bS1/CSAkEkuuMU/V6f4VAwV\niphxRa2CgZ1zcLErqHnyamUNzfMLljjfCtNmfdWEAEzmVFfIjzqi1gGpyQa4\nsgurqToZuzpR1LmbD2wCJ5AcsHBhwjx1WlIGRunabZhkmwNbfGhe9V8ftgGu\nrwYT\r\n=xGO4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/shape":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/density":"11.0.0-canary.12be3e95a.0","@material/checkbox":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/elevation":"11.0.0-canary.12be3e95a.0","@material/typography":"11.0.0-canary.12be3e95a.0","@material/touch-target":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.12be3e95a.0_1615492922014_0.23278223803792297","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/chips","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50ffc8750031352889c9ed6b34467c0a50599e33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.e683bdf4a.0.tgz","fileCount":126,"integrity":"sha512-t3th+VoUKu7grF1M5qGiO32fymhAunRcvUQ2I+R+OuejXrV9l88WO9ELYJA8ZE9x1wUt41TK3iPt50mKBK1D5g==","signatures":[{"sig":"MEUCIQDEJ5vXvM+9SLsA2mbi1Nhv/saF9HcxUmdc9BzsENT2XQIgbZ0suNUL8eLO1z+oq4aT7BILwCzrUT/2TrzPzZP/Kig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1067392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnjyCRA9TVsSAnZWagAAHgIQAJeTu70p/HCzki35ONey\niPdDMsolL7h2Mmq8ApMzkE3Eh0phDm7PgfM0jW242nVNgZACCwB6SR7ZHnuV\nsAZO7ySVA8NeL6zFy0UQoUOGr9MWCWhpgpcmGBN1nKOnFblvoq5oBoQzUI8b\nMmOD7Lc5rMQ2npqB4ak/hsFtwKdfAFAsTuXS2ei4BeoLK3Ao0FLgNOVVZJEK\naFzaib7e9W090irPvlOjXoHpc9GeP4B6cq1FwiVfyS2t+l3w0YalpXg8xufW\nwEaMbMj4XD+iRs/Mb+cqs4l1huv1dN0qKUIT3zRWOBDNVx9IEkuqznxiNFiF\niJteXNb1C0+u698yjFbdEo9vDh0sfdHdjjmS0LJFk68Ly/ND55R16CER3mZs\nb+hwl18mkvJJ/iUfOfnhkvo+1v960xtnpIKlYaK5OkoGHGurLyvrW+C0f1pb\nvpoLiyzAjhx5lBUDRPKzD1VzzJjNv10Tcig3VdAIl7pkeXodIlx95VS6kZvW\nvG3YW9ynqhaEGxJojM0b4OXlM6Myq1ByYPHMvwMbVZ8KiOwuKv+7S7rmmsI1\nXA9IFY/czrL8+RcSPuJq7rIoznIbWeBrcZg8fj/xs6nth15cvxYOcd1ZcC7D\nNYFh4b/tvOxCP7Xci1kR2o1YxaQQCFjhm6JZ3AaJvMz2blpSgCUnaC9rzpFK\naPu1\r\n=/dGu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/shape":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/density":"11.0.0-canary.e683bdf4a.0","@material/checkbox":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/elevation":"11.0.0-canary.e683bdf4a.0","@material/typography":"11.0.0-canary.e683bdf4a.0","@material/touch-target":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.e683bdf4a.0_1615493362218_0.180150582122782","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/chips","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"859862d7efc5d21878525d5587e89140e71b5bbc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.a07b6d486.0.tgz","fileCount":126,"integrity":"sha512-2FK/3HXsraig84Cp9WF0VA7sgpe4AikHyXCZWyJTqRwiJM4HFQkv5ILMiuiLD6sfwAOLKkCtMLZMqTvwDo9P7g==","signatures":[{"sig":"MEYCIQD7xrmp9serWKR8tMMDf6fTZvm3cDZ9LhU5CzQESR8YLQIhAPChc8UXcYqPm/TPMf9OztgzfyImvtrq3YC6tHdr4r3d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1067392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn6pCRA9TVsSAnZWagAA1hMP/2lcs6BuZjZZ6llDsHEw\nvxCEfhX4qKF43JV962uTaAcJvk/uQL4UlR2lsOrM8zC6pIouVqRSnIkHplMd\nB9zKbQQryM9f5m0slOHdn43C0hkm/3atPbHr4/jriUdnUVhVLtJf/U/wdr/j\ntxtt/fEHEtYOzzXHNdnSSbitBv6xMe0KJvweZTMjOhXAjr1GMJXZlt+e3c9C\nuXcOIy4euaKT3feyYxPxhw+gIAAEK2hzSR+mqXJr2K1+syvzi3YsmaG3Tyoi\n6H38jHfNTrNjAJzTu6PIbKxFtMxg2MxeyJ9q7phc/4rxDuzIH59Ey6G31esN\nEwGw1e5lCpejU4TCE6wkrgADXqWv0hEdvY2Hw4VvnlQ5hRTdPb8yhMBFdsZO\nzz2zQjGW2Vk2cSk50w0hcv7zDMfuv21wEjCN78EQPHm0cJoEOqtgSZ4cNcvL\n3MTBqV01Atr/1faLWuOJUH+4erEnelE7fkciQ6pw8meaqu4QQk2zGVY8WB4Q\nliUTgZUlL7k4eAt6E5pXpC0ELEaWtu6aMnl8ot6DaLPB7/E4sCnk0nkkG3n2\nd97PnuDYG8et8BD35A9PNFA8x+iAn0YZ+QbLDTdTI+Ocm+MJFMahd0CFBen5\nNLx+VaXVnmWE7jO6OUk/Kue/8xhNB7eM5/Q9AAbBdfxtb6hflnQ9JFSgbi/e\nFERZ\r\n=tfMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/shape":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/density":"11.0.0-canary.a07b6d486.0","@material/checkbox":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/elevation":"11.0.0-canary.a07b6d486.0","@material/typography":"11.0.0-canary.a07b6d486.0","@material/touch-target":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.a07b6d486.0_1615494824582_0.19887866650024977","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/chips","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.1e0653477.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02da4bf8cb8ea5ffd90d8be8f3c1983a736ea98d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.1e0653477.0.tgz","fileCount":126,"integrity":"sha512-36uOrjcQFypj1Zk4NzJxs/x+PjeVZwVSTRy8BwrTa4AMUedyh3E+P10jijqOzfWheyEskAxGVT7fod1mjGJVsg==","signatures":[{"sig":"MEQCIC2YgpavNDE5hA9BUvfSmhTlQd8qWj/2xgH7HDQ21r0LAiBoWgMHxikRbaeM4FxQ+M85iAkC/n/YXj5Ww0D9Yw5IPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1067392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoB6CRA9TVsSAnZWagAAiQ0P/jEFpOBvDGzIS0f98ZWd\nA4fiSoqY4Y0bUcvSsRbwHLf+cddOebOIchAXNkCo//4qXOxZxZeWYDR8kSv5\nKPhXH9iNpx2hSDq0IfEJZZk2uQXn6hhNbvJr2tu0xhDYouwRA7RD3zKC7bmV\nFWBamDTjEWqTGpDkqQRVmrHNjUdl+roLPPsQSIHZqKwtcnrAtUvEymDysFRr\nDMNBtU2fIVd5CL/h2CfwfNkdjwfMqHxdnpuCBIMdUsUeqqgtXP/VmOuA8hd9\nlOAiC27mStmjqiz6jotwEjl3R1F/Bk3FmeHjsc1tTZmb1i/7w/8jUo/9HWgN\nksSqybemmXzsdQHF/SgfrlFPkyNx5IXJTM3sonXR5adEJ7oKeNKq72l/OcgP\nr7KScBbDUctyCXdwX/dbRoasOvOx+VqR95mIQTJCLBoTscBf8UZKNZw4sN5/\nrGk0Qu1RIizy2s0D1ZP3fWXJjIwJqXhSMh9u7iVKYvX8gHnj3FAsfk9Uvaaj\nY17yKGWdEHI3Fl7Kort+r7gJZgRAAokSYGPfH936x64N6Ra9SNo80NAeoTy0\n83JXxJeUSFGtjg1IdFksh2SP+iefLNKfkg1V94XXK8mxjP1m9GwSY4NzhILT\nl41fGeuJ3Ny7YpOhS2oXO36hIjpCADFPSh+7A9L53wXdEAtFQS15qgLnmtzp\n6j1L\r\n=87nE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/shape":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/density":"11.0.0-canary.1e0653477.0","@material/checkbox":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/elevation":"11.0.0-canary.1e0653477.0","@material/typography":"11.0.0-canary.1e0653477.0","@material/touch-target":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.1e0653477.0_1615495290356_0.6984763419027455","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/chips","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7a10c0d8d56ecc9269b62b61881ed0b778c3cef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.148e8cfcc.0.tgz","fileCount":143,"integrity":"sha512-rYT2qfQXNRjJuv+RhISDygo3Yc4sYFGQczx5Gi7gfTEHUJ3gNEUcm1fRqmlqSDnwwT6uX5wcog5oEdwScR6pIw==","signatures":[{"sig":"MEYCIQC8xnMfAm6WpZyui5QDMmD65KtkLq+99WILOIrHCPXP0AIhAPTd1y/Kc2KpL9xcrQpFCk1T9jlmcDw6E3g79i31QLZo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp1eCRA9TVsSAnZWagAALL8P/11T4Jw/KgDF5cA17Uzr\nGKfVirjNLroxQaRMncjGhggjuo/0I9Rw0XEyRn2cwgYxqdDmFsxE1sTj70/+\nbYkAu8Og9wi2IqJWA4iOXcPThGEUsFoYvDIW5Vj0AdMv662TM+VZSD8h92kD\nbKbmVDxhIHEpSyFmgINYg/+gcL2NYTfuMue6wDokhGdrmIepWQ8o0UurXuLN\niJzQIYe3RKpVxha+4GipyQi4wFINRbeqbIKNKshcA+2ogRmkLEcSPUoDYLsw\nnimF7FbVDA8kK50MtN3HnvXknThTTbBX4dGykXoae4AefgBBOXALTqjZShmL\nYEx/jZvCwfN9AgGxopHDrj4JknbctrMXIHzAgBSEXunxbOKs2RuY7FOdt9A1\nHY/1pYiZJHv22SkVjvoew/8psybVT6sIwWdoeddq0luXLYkHQFMjle2jTHC0\nOcrU584IVaS+jYqoAizuaQKwspaf02BbAdrNPLwWw3Fg63JMK13sbfZ8rdqt\nl+kneOsJJvaXDU6VuGSQ+ywvgqGEuRZnBRhCopHAHCi6xfj/fshUOb3Q2igv\niE0zwWVJEms2jH875bOg+q4qHbmOun25dXumpigJ4fSvFuNwtU8E4AsN7g7Q\nDujrNHmY19FCnS7sPhjyIAC2bOJZcr1qbaas5HNaGfq0/gWndkBIhh1VBvTl\neWhR\r\n=CQHx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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\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":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/shape":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/density":"11.0.0-canary.148e8cfcc.0","@material/checkbox":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/elevation":"11.0.0-canary.148e8cfcc.0","@material/typography":"11.0.0-canary.148e8cfcc.0","@material/touch-target":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.148e8cfcc.0_1615502685825_0.7326416563814979","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/chips","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.73a227194.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4139c570c0c637ef6e783e26706017ba35d66c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.73a227194.0.tgz","fileCount":154,"integrity":"sha512-ov1br97tRre0124bsgu0+MVdOBBCCLQbtqkFynCVCs+rq4AghKkI0kzPh+G9bZVwHjVLeBAgpd5hf76Dp5TKSA==","signatures":[{"sig":"MEYCIQDoeZiMecw20bSEppfdrAb5HUtDBTZwlzlehEG8CdH8+gIhAOIoArqWTbKB5ZRvSEAoyoEZWg6P6Y9WgSTiNAPTKu4B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1069840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrTGCRA9TVsSAnZWagAAPb0P/0rH4bSbACMzu3XFZriL\nBMJTumq+Db5EAHoCXBNApMexH3lvXyZ5mA/FRx3NF9Gl/gi9cItPtiZ7oQcg\nfdkL05jsIg1LuN8bqGRH09UAkjkZp9ewkWRaTBRIB/CWbEPhkRZPF9Sl8Lhc\nwf4mS0YyzicmfEM4v+Ipb61rqevLC0mHzuJq2OL6GXWyzoejr5KfC6XOQpwp\nRCLQGBxF7sbkPO7Fs/q78JbYa194hmz6CDAPl/bVUqwfX1Ri2IdS8mX/CfgR\nB+W/N/e0un6p5FLn9akEZjYPFkD4g7mdapkUf2Iro92Kt3KE41oIUWXBMh84\nTCQREW92ybudC0sgKHLdn1PkZhHy9WzL1Hs8TNiD58dGA2uD+u6pRWQ1MuW/\nTMyomNA+tMFEAtmiDaWDz92yytr/gd8TlV6CzNf4KsQkU3aAhYQmRyHM+Tgf\nbiwLzX0l1L0DwWPTonshkASuQDupiAVmXvjM+/BIOCuhMcAgRmR5TA/3NIKU\nVmLaSitFJPcuN/2TmMHipRtHhBIgX15dGuwL9QjBwM31K4msaJChNJ4oMDXw\n8hi/PSTWoVhDSU1MkwYEj/tRBuwD6tq7eq8IHFQKGoC95Sq5R6fbLrSf0mbK\n7KHxVVMTCQy5PVGdNICFxmNo8Xwq/HTwVjPKfoTjGY2n2IS0K7Cj92YP3dP0\nnkBA\r\n=HRWy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/shape":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/density":"11.0.0-canary.73a227194.0","@material/checkbox":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/elevation":"11.0.0-canary.73a227194.0","@material/typography":"11.0.0-canary.73a227194.0","@material/touch-target":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.73a227194.0_1615508678022_0.6864208793461255","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/chips","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8915d9d28b1c2b15b2dfaade6b1b24a1e407329e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f8579b7ea.0.tgz","fileCount":154,"integrity":"sha512-uXTwxzzRJMX8vCYlU7T9bw4/pqOnd1Yo5JLvhFpEcWsC8hi2C6aCW20OJ5RmL3S/K1d0hD1xVwdFUf5jNXoqCQ==","signatures":[{"sig":"MEQCIDHwtgvrb4Y0fljvkPKYgALuUwZHXiTn1sCy2qEFqbyXAiBwQoMx+ghQjJquVHf7CHTI0ontUKMM1kCwa6EF/By4JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB2XCRA9TVsSAnZWagAAXNoQAJzYvi676h+15NqF16wL\n9jv9KVgWIDArFnZWHWTRyRcqZjA8zQsQzhEq2a192FLgNhXfN7DdGa1DRJhO\n1YZTuFyCTXmKl8021fYDxlwsrn/CRwVGHGCsd1A9XvndBNKn8UEf+9r65Bog\nR+NQQg1+lAnaXbbFaSFhcUNauEUnJN1++KYBYr2hegFHIehB19+Wsd/rG95g\n3mN5+H39aVmO7eDbP2RQMOASfwFXzXNHTTStUa0nYwZU9n8RRrMtBspneVAi\nNU3TQyE0loSbHg38/RsBbYfn15016NF7Bx08+Zue2UGl7779kEPkoUaOYet6\nxgcrJQCjoXI923WR6gp59YNBR6F0BQhSAG9I4fH319gT/rL1FcvLo77aQCRc\nIqiLMtlSIyoWPsNk+j9UjGzHVJIjF0RBFfy2e39hKAsHv6WKdgmkPdGdpLjC\nOcR3UpZjl0WGLNJwRk2HZDENy1x4sONQpC1AJTLh9IdKmU56yWkk9hyoQ/NP\nXWp0CRYwHDA/cvekXVQt8BoDpT5q9SnKgJv2w1Bba/ICkpjDbWCSioxcrHwK\nQffxSoHlHDo15/IRReTZQrkAVprBZ6/vlfPKMf4rNL+Jw0uS11zChP+JKss/\n+xyA5lKYQh+r8g1ZftPf7+Ao0hUMkAf3oIQtS22lVEu0I7pMH1/48uVmTSiW\n1GFW\r\n=aNTf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/shape":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/density":"11.0.0-canary.f8579b7ea.0","@material/checkbox":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/elevation":"11.0.0-canary.f8579b7ea.0","@material/typography":"11.0.0-canary.f8579b7ea.0","@material/touch-target":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f8579b7ea.0_1615601047221_0.40945542761468756","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/chips","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5672ac8d7f5a772e0968d896a66d523ea618a594","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.d2a39d300.0.tgz","fileCount":154,"integrity":"sha512-dQBqfGDAfW1u47sZ92AXZIp8kN4bp+VNVJJj2c/HXWkYQSGmwdiVxKLUqb4tBB6QBlOydNZACpv3dX8b8ehVaQ==","signatures":[{"sig":"MEQCIFjSGMRD4vSjroLVdD8ViO3AKyltoYCHl4sVrcjNB20jAiB5fHs85z6LHLuq3tfflOm023O6lcA/LvuByQXnZzP++A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/1aCRA9TVsSAnZWagAA9xcP/itJx4kqZ7UyxWekJtJ8\nVZ0RcbbRoHHRh+JgfAZeAfyQJMbEtyZTfH4NQFWBBV3WUz3sVfXKPZ0ZsLRa\nLsrDXRJsiMilGY+iqpfnaWLz0jGvLSy+as2r86QCuqVufg6VZ69XM+KdLURW\nwtE2GJa3PW9L1olrp44t/n4buxZfgrOe5xyro9zhblhW+WG3kuv1Nw9j/87T\nWQRmiTG2RmNLKoKdyCL1iaqyiszOI7ikCA9IvUYjPXll2HJWBTSdrbQdiuJp\neFiU719mC6dUDU8vYJcAh/27MEYR2ITL0n+P7TO+ouN+Hc+AbVVlXcoPOCKM\nOMsRNRVYIVZ1nCQ754VbAI+1ftcgMqKpW83PxZoo1qfV4GoQRwiAOrUW0B/7\niAxRQbjh6xyaEcTx4IAz0WYUMWNC0jAczg6mQHGTGKGujoMAvgJOqTJHajG7\nEwOB2RGSz/NxSyKzVyt+z7Gzf770OaMb3NU/kpmEWGXSt2l9W6nHUkMwWhBx\ndWfB+YLfi2+nyexH3Mg/jMJPtbRZd3FnQIFP7WgAuUCgM1dC/uBSmR1Sjagv\n2UH+DVBJ0t5aH7MCrGISiRCg1GLKH2Oi8JujBVBSISrQo4i90fq4Uen/avQF\n68dULryRbZrQMh1jmRVKaapYdA5FXLWNbIf23kFbS8DG+Rf8N9pNpanqD5MD\n9Jw7\r\n=1Imd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/shape":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/density":"11.0.0-canary.d2a39d300.0","@material/checkbox":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/elevation":"11.0.0-canary.d2a39d300.0","@material/typography":"11.0.0-canary.d2a39d300.0","@material/touch-target":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.d2a39d300.0_1615854937857_0.9509246931513045","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/chips","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bfe7bf89793cae613cc1c48455bf0be4d767636","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.7cf67823e.0.tgz","fileCount":154,"integrity":"sha512-nK4/VD+CHc/QjF1EOzJco3Pq/armABm2sPUDs7xA48RnS5+dG+mVxEIKfFf2HmNqQv5EoMSMS/I8Luhr4qhRJw==","signatures":[{"sig":"MEQCICROTWQgtf5ywFu0p4RMvms62wJjaEXSEdoeuhGs7c1BAiB8bruJtAPB2hD6HYS4WPgjr/tSkzHgstGrDGWNSW+rlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPb3CRA9TVsSAnZWagAAzNIP/1hnq+L23oMIJO18U7Qi\nl40dye0SDCzgQGQISn/nahUNaIw0ujGRu606FhGX52641Ksk491dO0hzY/bb\n3WxF0rEji9XeKYrX9Gl0yyuyz5GJM8HxUBD1KIehncI9fLymFCsm312TOsrG\niBX96LtvOB7NiWdPiD8a3XsRmxipuSc6sd6e+vSxT6e43daJgfL7rtjYWUOn\ngjjGAjPeQapXOyev8J8sWE+p5E/HPqjvQYcCxDRZbHnp8EY2n4UyYXs8+r03\nB8Lk63ARoRhqniCk8UgfcC0wsvcza0snNCjFZw1XPIwy0ONzLKwwHnD/vRTR\n3/ITBFnkNAZ+pw6txp9eoOtdCrPeVMhkZzCkI81oe/AU8qxpGFer+3XdUn6h\nhEx8YZcFgbi6SVUWA4UFGs9FcFVXgfBl7LjtsL7HR7HjV2MWTCbDXGZNaEwD\n6d+dLIwgspGir9FyhZEjl0Az8ONN+zO9LBSjal4Npnbn+YY9jvRKSYLBzDzO\n78KEBlAunxIOAPAL7iMk5ap8D8EqoVvjbUHRJg1py3BiRWGyzik+EooY5mT+\nRSlHpAK2LFiH1paQwIz8C49NkZ7LxDo4zoL7PUxeF39tAPo833iZ4IV38xtU\nmn57Iqudf5Bb0pszwjpxwVZ7/hCCSOOYke5EP1+aydCUSBCOMD61zJZR6MDq\n3oQH\r\n=w12k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/shape":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/density":"11.0.0-canary.7cf67823e.0","@material/checkbox":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/elevation":"11.0.0-canary.7cf67823e.0","@material/typography":"11.0.0-canary.7cf67823e.0","@material/touch-target":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.7cf67823e.0_1615918838630_0.5064769492089503","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/chips","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.67d780c79.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fb89cb5f6549a59998267cafa2a28c3e1722106","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.67d780c79.0.tgz","fileCount":154,"integrity":"sha512-Ak1UtbFNStdgOiCV2HtJWlemwhKFteGoqDIR0vOuWY3kF/grITRtXlUn+2bEYwIHR0sHeZMkQPzI2iY9sYK5nA==","signatures":[{"sig":"MEUCIQDVn6bHbJVbPKZLkId8tLwz7phHD35C7XVqcYefkhrtcgIgftXvNPwPoux3oKKKj11WXffYMbIdCwIPsk99JBdMOPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQuHCRA9TVsSAnZWagAACMcP/jxxzGMRn2ovsngZ1Vjm\nBlMSLNoE6omO0OuTj6ksENKVqBAa1VaPyttuy07eWqa9g2YHCd9rKvCyEcEM\nE3m12io2mB4ly0OkJZqCkbSXJvEprj00vZHSFezUIkHduONTupZz424KQYZJ\nUXkvE0sGnYZj7TIk3hMZdcpfERZWJ27uCiu+hhpnDqJA8VX3Negw0CNF9MAQ\nVTcV4tZ9zP2IqjP13a88eBZk8fs8ehK5HSIiR97Bj7ALperZZa8jYiYYBcun\nwv/Pm1gf5r3dgZRL+ZtwhAT5e8j9f5Eywdmjih1m5r3ZpHTMERp9yf24vBik\nNH0kWy0EytT8eAJXDy8UpmirbP7cPqccNWVTQojOBxnTVCrrKdoyR37VLvAY\nadxBAFIh/IMgIQT/pRjYjtFxpQhzl11pKXiUvFaeDyvDkXVb18XRiWmtT8LF\nCEX8LaLt93ZKKkRYnX3RLv5VX1Q98urbPgB0+4oCMp6bN835R+OVEeRs1slm\nI/vNSUp18Uolm6FIDAF8F8nS62qz3GbjjSKcTYL9wPmZ55R03WdLMFMiQgju\nTRZrJbWuFjXQ3QOHZLgtRPIgY9CTVCwk/Xg66sT6yLCUErDd2yJfAU2DZBgV\nNfQCISdPldZvNneusu9BfihzsF3Do8yR+/I0az/BYHkJu+PAtIx6lDGl/kiP\nPWXj\r\n=oG29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/shape":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/density":"11.0.0-canary.67d780c79.0","@material/checkbox":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/elevation":"11.0.0-canary.67d780c79.0","@material/typography":"11.0.0-canary.67d780c79.0","@material/touch-target":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.67d780c79.0_1615924102629_0.33862442163806605","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/chips","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cedb14c8d3166a06ceb15c3d9567e2618e7759e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.0f358ddae.0.tgz","fileCount":154,"integrity":"sha512-BruNNlLPYRN52Pcg8BXU3t4fE8gQ/10OjetUnFLyiZgVtrKrJsFtZfl/2h4yCDEig96RgQqjRfmGyJ3J5KMvJg==","signatures":[{"sig":"MEUCIBIVa3EYBUyCH9jdoYz5kpFdVczqXw+cPODkN7xnvIWYAiEAxX56dVF5oGRykY0vI65MzpmdaGZlBno3J+++508ldVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS1qCRA9TVsSAnZWagAAm+QQAJ85h33/jfstRObNQ1qI\nBsECNhaHvo1EtKveCJLTSJgFYUL1+1TT2flvUM774J0J3IynwoT0+SAMHqw3\n3PBhYzA+KI3rws5YAFknnYQ6cLlh6+oF3kb8PYmB5j51uoesHz1pnM+K8Cbp\nC0bF1M3537+q7oxlCLxJo8w1vcprWUWYWBC9yqRv7ciIwOW98FcbpoFP8oTT\nh6OlDb6lIb0L9kLKopdCIkWx7lns4KZLA+ilL5aBgpnKVO5ZkFS2QKAN/kDr\nkROhjizx1aJx2BoqmFgTwSrHLOaOQMT9W7XpWK5ZZL7Z/Iwwri3KIn6cV7Fe\ng4sai0iCGiqHGaDM5aijDZNBfJyWos1qSdx21ouJAhadOzrzbZ44hmZ/X3sA\nFdZXFYuMN8wbT6fuevKqxip/7CQQlcu3fgvYrkVWP3X6eprXJgu1+S5AMe4M\nQr3Vr11t1oQ7Fm2Znde7+aKMu5Bt+XexgnqYehfjeygcvqlvOxvIQE+cZT66\np1Afv/3wcDJH/tn060O5MsXWhFMRaoQfiooNGbv1uUgjxlJsmkGhb+jUsQAo\nRTgN6jjqYztzIH6XBmnzCluyYyqO9z8I4MshMCrsBafx2htZGIRH2i+iNe3i\n/+vcQyZuxfYYcHyNgKeo1XwkYvl790eLKMTeKW3BDacESSxYiPjlxAC4ok/u\nmrVy\r\n=pMuJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/shape":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/density":"11.0.0-canary.0f358ddae.0","@material/checkbox":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/elevation":"11.0.0-canary.0f358ddae.0","@material/typography":"11.0.0-canary.0f358ddae.0","@material/touch-target":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.0f358ddae.0_1615932777435_0.5111632880581714","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/chips","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"986d11932309f32d9088ff9ecc46aecba9f666b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.67eb0df80.0.tgz","fileCount":154,"integrity":"sha512-hxibPKRhVbTxuQxSZLsu8b6wEv/h8rYaAB3fbgkbJnwhsmvZubgaYjEcq0A/AYjcKyuShNC7mvGKSi0tR40VCA==","signatures":[{"sig":"MEQCIEFeH7hQXn/IQ/xIrD8pV35q3cWwPez1rVHzfEOIeiWcAiAwcYLjYR9rVJUIUNUP5HPnu59E+tA/NUaf9M7OzX/RYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTPHCRA9TVsSAnZWagAAW6QQAIiCU+plqgP0tV8/7Cj1\naAr/6PhU6j0dwRSWxrxIlQNccyAN+aXEoQZTgxm34wmWcpIh4qOkCj4slgGe\nVmt797fabHTEOzrxK6FkGTQx43Qgy9+hJjwzo++Qg0bV8zGFiaP0t/jdlyft\nubs/4N65oGBV9WGo36OpvRpZLWcq1El85YJcUuPf6CxzJwUsiYpA6YXz1Xdu\nnbnhm2bj7DNJFOB3QKgT6PHkpQdAE9im+gu5YbRY3c8ywLtYBmh8Uebh9C8W\nsJpFpYZ88tNOYJ+0rislh2DopDf3do60Mu8L8/yWOnaqNtivtiqxfLSyAdti\nK76l9/Xw+rcmhG4xW0wttoALA5UrOMXb+W3WwdTtu1CABvQV1ufZiumLVyEG\nwQXVy+5zwyt1ze4s3adauFSy1kaBnGgUe1sMrpg9ZqONpfqFWIjJ+RVRP30n\n2AIf1jbbDm32mg2yPR/s+NB+esyGn5rfgspaDA28vGdp4Mh8oULILtWqMw1c\nT5IRm5v++5HvYFvwnA63vzwtpOnw6SFuz3SRbU5CLReN75+BpzBVeN97pzKR\nBvxSYUswjmR2KhqL7rqYLedtLDUNc9Hln0zeatsoI4bEAvQC/N80bEcYJGV8\ntdAJVeUFk8oSS3AVfzw6Os4Ulf046+83Nfq6oNoKAnXqTrWlH3A8mDlA4gqd\nk2om\r\n=M3R9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/shape":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/density":"11.0.0-canary.67eb0df80.0","@material/checkbox":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/elevation":"11.0.0-canary.67eb0df80.0","@material/typography":"11.0.0-canary.67eb0df80.0","@material/touch-target":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.67eb0df80.0_1615934407067_0.39256055525196776","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/chips","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86c68798ea16b1e653dd10c3a60ab182801df4bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.941ca3b3c.0.tgz","fileCount":154,"integrity":"sha512-Oc29N27p3rXAQ3k2vVHZRFUln5dfOyAfTwzpixe0cCsG+/5ZzaGh8WbUzyIIeuxNAijwMvE1yfquXkbRWuTr4A==","signatures":[{"sig":"MEUCIBwGagJxTt7G25z1Pb+vs8RcupN0ogSm9rDUO9qb9WdqAiEA/5M4jdzEKHPgQPIRgAh/MRWtrbd/XgfRJvkILzLvptc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQ1CRA9TVsSAnZWagAAATEP/2xJO5vgqiPw3NyOV/cd\nIibDLJiYFgDoSYCMQmUna/aQ7zxcDM0kE8mRP+ohh7itiGR++I4aOBf3I0D7\nFI3DTdyaN6L0nRbp+fr4hKNl5SJOtMDJGEe0kccaCilghrxcn+9sTKglvk7I\nPoT1lnOWtoqvJj9nlE1g6SUkNf3pzqtfc09QRN07XxsL3StX8fn2GZvwgO2e\nXS0DrznxTyiZHrKsjJ+kJIJvR4eAEuQVlulOoTE/0qv5rwpeW9NAvxUeDPvE\nRZgjwJw2wBxXzmxZVkkNyWyXyeN0gPOCwRD5gDDMBbHkuVlyjuSHJ7ICzZ/b\nlajtyoNCCJz4kboY6hkSFp7L6WQPwMb9pDkNIkUOl+xC2Oexua9SS1feDkyx\n5dy4BqhOrUwblnB1mywyQh8MEv+YfQgj8hAL33YRLSRwZA1UL8vZlEnru7II\nBApYL8aCMLUBDWmROKSJiG3CIZSrR5dHnhwqGKUksT7QRM8kibpx6OpZ8D0h\nj4spq+39HBj9aaYY0p9kNYnIEPtkyIGudzvUVA3pHTW63wqjuNt0FzbHdH/+\nspSQZAUktLX0DRwIrS5hE+FllybLy8/KOudNCIRfINHYJ3eTSTyWb5+5pEnn\n79RGU4t9PrLdjoCciRG0dLi4MvILN7XsC6jKD1XIALFtbf4xlL/xwjFdBql0\nLBB4\r\n=YgUU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/shape":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/density":"11.0.0-canary.941ca3b3c.0","@material/checkbox":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/elevation":"11.0.0-canary.941ca3b3c.0","@material/typography":"11.0.0-canary.941ca3b3c.0","@material/touch-target":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.941ca3b3c.0_1615934516649_0.03211459950198203","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/chips","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d852fb4bea170a52201c73006c9c40321519cd41","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.3344d12ad.0.tgz","fileCount":154,"integrity":"sha512-5QX3TDAhRkhrEfzZ61DbPyAvnzIsUrXMBIVrJELTJ08IZEqpqfzR2e4qYGtS1DKCDyqMlcS5Qr3E8EjSrlwH5A==","signatures":[{"sig":"MEUCIQCI4hr1cPmBkWtUsZWhicJ3dTec5cEGdpiHLQuzVDvUqgIgRtzyGy8dOJ82NHzCMRBYCxLa92F5r3Xm1cg6o0ZvJs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdOnCRA9TVsSAnZWagAA2hgP/29xQlga+XvxY05+6D4c\n4eFNOWLHWHjZ+07uwrapoeL+Che0/MDNwjWNTCQLbEq2PQjEWH9TaDPjOrB5\nwbOkCCAcgWrmJqMksVcMXQGTax15p1AzT76WqGld0dITBfyjlVaqfGDEAu2S\nBiqkL4JYRWtUrg4MdhNjeBlfJScFrepmTRSdmcCMGO5Vzb+qvf3uqz5/CM87\nXZLeZCW8OFffG6U3KwINzpvaV1RduYTu7DUFaG/zLS1/dBz35RBNdpPFRkTd\nylZ000md6ofrrJB9dwrnVpP8ukQFgjgzfwDHHglw0qANXba70OHbKQz7VLmy\notz1RLsuLBuaIXQ0HFAKhmy8wAWFspHG5wloA/b6kiL+10oAcPFUzf+hFB9N\nU/EQp4X3fnicx5kQiLNxoYb9dpxiX69dBn/GrYwN/jH5VJpFEnWQmTljiYHG\n/D38eIq4+TWOQ/3rG16x4foQB0WDvKuHa2GcETEkrWQMk3IWdhHlkFMygjI0\nnwZQxvfkfMeZIEYAGbutsg13D4aUFlHidB+3fK7ptZS04F7kik0GId1FpKQx\nlYMTG+Bw4FBqjsL8L+gYYvhGagSyBrbxU8ZdrYwesKw/qZ0wcLmnfMgtlhRH\n+xA1PopkXgq50SNoC1J4xYDWdPbNHz6wyRLEPqCkuugKwjKlFD6Sj4YivmV9\njR9Y\r\n=7jQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/shape":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/density":"11.0.0-canary.3344d12ad.0","@material/checkbox":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/elevation":"11.0.0-canary.3344d12ad.0","@material/typography":"11.0.0-canary.3344d12ad.0","@material/touch-target":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.3344d12ad.0_1615975334654_0.8093764726468471","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/chips","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.6072ed604.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac6cbcad87d5d91dceba784b3824c93062c0f7c5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.6072ed604.0.tgz","fileCount":154,"integrity":"sha512-YB/Y7RdzwPlyuRe0Dv1ZKa/63uw5NY5Gzyi9WQ1jD9g2XxD1PPKdIXgUJnIq1jOBhXDHdRqmkn36dxs65atDtQ==","signatures":[{"sig":"MEYCIQCizdEEf9mtVDzcvtb04s4/sP0yMqdzNH+ji/YmHuJ3QgIhAIvJMDxOuXoucBzI9mZV8G1icX9L06IH0XOVxSze7wTb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonsCRA9TVsSAnZWagAA4kgP/0fHjl3Nu0BGq/F4XIak\nmNrayDTqNWtl+13pZ7qmzuJdUapvozLu38mvqIXz4Uz1lG/rGllRTpwFdS32\nGiQ95hWNnxAkSxEntk1p2St1Bn8ktt5dsvVdfw+cbqP7JIs/FUmVkaPbjxaI\na5sgwVctQAbXcHM20ztIhNMl3NXiB86UPKlpwxepBJcFLUJ3LVNb3WKURDa3\nm5fzdm6I4MqLCvIJXuS8cziESM8gcRet/UcJLlQwpnqDs+03ZAmA1uqv+xbU\n89dYhnqv7eyy1fBKWqD49wkCHs5W3AVzCope37STBSMB8xkV138WOkOttkis\nj23qDdv+YFhElFe3H8nJJq1qi9DkmODFA7EeYPmyLifhXmI2vB5ngcBoMRS/\nTCkEIbAh+HjyU4TZupZDMVPlnxcOfxLg/tUt0MRD4uTvlYe4fGlCl7eu78z2\nvy4EVCZVWyJZ7safeSGWtXx6wbAhWoT06YrNBhVn5n7OGIT/MS56rbdwDrme\nRrtxGrc1rkF4OexXl89vDeOjqeAKm+3pUU0bKBVXmHX/QzXu2YGsTcyY4Z6S\neB/PEtJe2bB7jgaEo60EVg2uZcR6sxnEbMcxh/7/hCPInmteNc3J2s2GWViV\nAN/KddeIWO7toDBQewt0bqPwv8gPFy94VfqjLg1zRvx8JaZQ+HgLjlTUtrMF\nqg9v\r\n=XydA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/shape":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/density":"11.0.0-canary.6072ed604.0","@material/checkbox":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/elevation":"11.0.0-canary.6072ed604.0","@material/typography":"11.0.0-canary.6072ed604.0","@material/touch-target":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.6072ed604.0_1616021995803_0.2232967462015376","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/chips","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d5adb2efb4169f825f5d8b15a98baf3371e388d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.d3a6862af.0.tgz","fileCount":154,"integrity":"sha512-OkJDXMbwLrkZWC99L0CpzYOuG8hz/N4DcYpOnPiVgKpYj6bY/zYkt6KWafdpm5SXJcMfOmBaOBekwVCagOtnww==","signatures":[{"sig":"MEYCIQCY1V6ov8vEse7Bq8SR1nC0l1NngZqmEaIEY3Rnu1/KLAIhAMPqzHf+rG3Wvd3wmV4QUXnWXORBnVctQNTKK1exzQVa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU33xCRA9TVsSAnZWagAAoCgP/3MAb386rdIKiZcBlhRy\nGjrYpr42YLtXdACjcbEINe93/6Q2zQc2SA8ILa11pJisjNedGP6AGW28pC6d\nP8wpfaPKm7KI1lRFyO5BKcy9YL0KVRSFfeV3X7BmOXOtn7fvqzj1gYmYJ/iF\n1HI22eDj4ophcW1g79jZ67zF+x0J5e/C2MSMqRpO02u2zUF9QTRtYhrKOF9V\n2XLkYvJT0OFGpIzum/l7FhAtiWbW+mFXhB2Bd0w3dK9TttGayuRlUVIYmJLg\n7BXg4OWBgUvRAZZEapPvH2JchDF5kCcJOxDh7Z2WdYeWmnNG2asab4VSg/XI\n9ihupOmZ2bLwCTNzGoD2KewVuPHJV4hUckSjlKC3v/35m5aO/zlLoAkLdIXB\nZa8emtgjKcfx1myJiO9nmF+llTmkXD2Gz/I/vGzw9Kxus2NFIyeucmdzAcx5\nKHI4kapxvifkmezREhOJjpXqBInsWmmSbJGOxeJzvd2U+mZv+nP6SVGa3S4I\nnUAEq0hAFmofBhx7D0qagUIvtuzZb2WRjyLxduniajH2tPYCgbxDIjsXDmXe\n11Vs6cFmxrlLzEkgFmHOOVy+Kx6o+rQYQSBCvIIbnQ63mvhArMutCSHggW4p\nIcAXCkC/g7yS/tt3AyFkw7wWra6Vic6ApEzi7ylFZqvIuYyb6tFENHHEPMQW\nTeXS\r\n=7Gvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Chips (deprecated)\"\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 (deprecated)\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":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/shape":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/density":"11.0.0-canary.d3a6862af.0","@material/checkbox":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/elevation":"11.0.0-canary.d3a6862af.0","@material/typography":"11.0.0-canary.d3a6862af.0","@material/touch-target":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.d3a6862af.0_1616084464514_0.6795593564983833","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/chips","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc803de5b7ec1be86693d8231a20993ff69f7cb7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.40dd242d5.0.tgz","fileCount":88,"integrity":"sha512-fCVB3Y4RD845r5smB+DH09aCcMFgrUVzUMZQT/3/vQ+qUdZK1MLm7P0H4lZ0uyNxu9pqP1Dj0TZi4afPzib5Ag==","signatures":[{"sig":"MEYCIQDbCC3TVy8NwoB8nA21etNiU+nKtQ5le5ZXl3WmRDqVhgIhAKrgpJOJjwM9yRQuQfBt2p3fKjjci1izZ5eV4ma/uMqv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8OWCRA9TVsSAnZWagAAh28P/2/a0qkKEe9Ge39cAHx/\ngGbnL4LByoVipd+ti9yG8Ex9nCEQlXZ2WHqfYPI6ipHy5SKH3zCWXGCduWMt\nrNnNbS1XK4XDFSBWs5MHl0PwUVQGEecBni8X9I04ErxYbtZUMRkkvgntnL5B\ngndyoWtXnNagdvqhwAnKn+4o4x2egzgEU2zgVkvKFbyD0+h1+GjraHTG/fUu\nslIWhFXOVoi/8QGaBfcTxncbmiXFmdO+70/FY5JE2zywsehgVEJWaiz8ayXW\n2JxVbMD0rSfrhngYpOXMcHltdldCertumUil8mNmHn5HhyidT0f+qqIEEHqY\nf2t8pjg8YszFSw/Dt3ErTwiQR0vjTlNB3BzyzZVrghh93tkQigkRxl87wAAN\nQMf6yMz+thFOO0tj+2EuvQ1N3jOHWkXCupBtlpfYdy4ZbyTNzldjYAFpUCzO\nQ+D9gIKGzo4z1bj63V/21dfsVnDy1x3e27ujCPfbZA2BYLuZCpNaB5JQSZAA\nsG60I93LiWve34TzBUdNj7TteybZtXGNvuyjzGpJhR6JB1ia8OKb8wqWEa6N\nSt2s6Gn8JQdb5/7ytH1sTdaXF4DPHlIZmrPlaq/6AuP/EdauY/aW3q1iKWs1\nJOIBzotncaHB2FtnF6y87Qyql6Fwtl7b3eUmFARH4c16b6+C9V8D7z+r53Mf\niskT\r\n=vRbG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/shape":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/density":"11.0.0-canary.40dd242d5.0","@material/checkbox":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/elevation":"11.0.0-canary.40dd242d5.0","@material/typography":"11.0.0-canary.40dd242d5.0","@material/touch-target":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.40dd242d5.0_1616102293528_0.03382158679001601","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/chips","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99cab6a7169f5b82449e2c83fe844d03e1d96ed2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.ec8f8465f.0.tgz","fileCount":88,"integrity":"sha512-uNNhuSxQxB2orGRQYYhmafgcFAh/FfIF/xvh4dvdwyP/Fm5Zf259UrHPn6B7MGbUhW66jKfKbG06q4SmR6plQQ==","signatures":[{"sig":"MEQCIEjMrUt1O3s4XHwlaS5y2zVTjsj+YTdTRJym6Wrx7NWOAiBM/VD01SjGjhgA95Tv4xZ8CrKZmpsDoukoG84qW3YGRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8nkCRA9TVsSAnZWagAAINEP/3A3crQVFVX2JzP/XylB\nYH8WVrmm4wL0p1SXYp/4BU9oqj/Q9+iJrouSXdlJBaEESsxbWUrTjPcLF+mo\nFTPyKf/WwgQ+WADmj/DWlzE4eXuneoxqSw0GLU0IUznhSMx2QzXYLAOcjdlo\nZIFPrlo5ePVJYPkQXjPjfR3Plys/6VVYJ0sWium2uYgC18Kg59MK8mkJQ3hv\nA0NAnzUib5C4JKEtvC67INu6fIloJH8bfCafIc+MT4V4h4skMJqQLwn6s8Mx\n8pp0Fb57VuGFqnl4iIFDLioUhJWRDPIa3F+KMhe1drSSDsmnQ9+tavDDeK6l\n51ZgBW0Fpe0tOsCHQp0mOz04n5mTPYI818jMKxfcZT2dOQMVmRbMQCs0am6/\nfU1EDRtr6rmUGA5/9VmISc8zNLMkEm3GE2E/1mbNPI3lOmL6AjJTL7PCf2/t\nV7+LT7rlg9Ahx7lYYCbL7ENrdKTze3Gjr5bCK4TbFlrDiugFiHo4joVTLyEI\n/evAd4Ty+OB9O1aGLBtICHJzVLLZDyLnR0nk5q8aI/fzjtA6QGapz53fvfpp\nw90MGiVK013R3Pv89EpFZRBrTmseDTHAH3DmT3Q+h1qrWEw0ZnADPvzV0ldK\nCeagzCI+NRjATx6beL98Sj/kwM8iI2MNjwNEFNZU8+FgjorlDd8UT2i8hTnh\nzqj7\r\n=Sygm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/shape":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/density":"11.0.0-canary.ec8f8465f.0","@material/checkbox":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/elevation":"11.0.0-canary.ec8f8465f.0","@material/typography":"11.0.0-canary.ec8f8465f.0","@material/touch-target":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.ec8f8465f.0_1616103907779_0.19396331850356852","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/chips","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.da38969ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b27ec0c75ba967afe61bb248cc346d121a1cb2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.da38969ec.0.tgz","fileCount":88,"integrity":"sha512-OKo+hgWuHynzv1O7m5YveyuMNgubkA6ILc/n7E3yme7+nf6PrvLUrRO5qDQ+OlAp3TZWF6hY3vbLieRLnZPN8g==","signatures":[{"sig":"MEYCIQCzoq93w7/3d/onN+7nV5cAYJsb8PV1BFl4OOIPa/GKVQIhAJ8Qn9lbrmmTRrtoKsStIHW2/X05W63WPrpZ1LCxCREy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9HKCRA9TVsSAnZWagAABpcP/0x24xmper3qrimydqpx\nVL2a2KgSqRzQZwu/f4oVigmrdTLn+8hvFIDvqWVoUlbhvSmDs/O3JxLY9moR\nQD6hUs8C3LKFXOoQ2P9QaN2eSP1LNGlhCb/bzIJ0s/ShgbiCG1dkbM3K0+RC\nAjn13NT7OeZMBrtz5OU5UHq53sQOZssodbi67W7AuHOaLgvx0x30XGwl7cVQ\ninihx8/PTsiS1pRSkmlbnGPrWjMUC4d+E2PYEUpiVXzKwO4senDov/mBVVQ+\ne4VvWFOAcpwu63ABgHu0/YiR5GfTA/liL+eHSCYPigdjnrgcib4tNgMyRGcR\nniRbc2InObC4EoF92yLNttKgNjtv1by1ueo6inN58NgnXTHxdeyZKaEA8cLS\ni/f5R68yxW6got5vt1a8+vVKBJPM11pfkKrlQuWAu8wyjYjjBS1Q/lkjennD\nH66TH/oeuTALFdj/IRAedlwU6PTHOw17lfZ3wgRVMZMO4AOS/UTzY4ktLEIg\nCzLWyEVIRp0pFFe0832keoqZArJgrGTGTYHJaUp2O1ia9xTFMhK32zenYga1\nj2sO8Bnrn3RJSbYHu+58y3V6nyVrA6RmK1pKb6z8PacXGmJ20ao04r2EWQlI\n5g/84a96qzsRUZXMpQMfrRX1Edj3ZFgDvGy6uAe7nGw3vetgzf62GUp1TooQ\nRy2k\r\n=gs/I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/shape":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/density":"11.0.0-canary.da38969ec.0","@material/checkbox":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/elevation":"11.0.0-canary.da38969ec.0","@material/typography":"11.0.0-canary.da38969ec.0","@material/touch-target":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.da38969ec.0_1616105929483_0.4290385632426057","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/chips","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f5246264d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc680a481c8b22fd746307b6df4823a359efbc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f5246264d.0.tgz","fileCount":88,"integrity":"sha512-dMqb0DG9IgupG+CAJ7jSVWJuhs3TVEN+Hpdf6mJDH9YVOJVGUwlf/TsHvRsRRToWVAVSfQLywIQ+vq0sSNmdYQ==","signatures":[{"sig":"MEYCIQDQv4wPmY0TCHL57tnG8xDewV0fazogT1Q7Po97FOrRIwIhAKIp0nmDcGpqvrT+seyiN4O7qFX/AJz5n4REbwpvpPz2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/KsCRA9TVsSAnZWagAAWwIP/11kP273HBOBgc2qreyl\nbX0vqwjgt2aNb3hy5piwMYhK5yYsyp3hTulkcY7vihtasSNrFKrjJOHKiW+Q\ne1XNVEPK8oJNwoJJa2VfZ8i3CKEgyns9/II06lQtjPik6A7Gl7pbpXtDf53a\nLShgyH5Nmf8ODbyaC2Jr8QAytmD9Qhl4LU5rUFJ3ykeEpI5anACkhf3qduxY\nCu+qBl+rbPHkyHWNRWQFHrV3SIFl2LYDfRQ5VYBnWtq74axyMwdK5jl3Z0Wk\nNn2XuPgTO/JxiPSYJ+tUzfE4UX+Cp4PJaPrYwm9Ka0vR4tWcOljROq8NAoL9\nu+AqQEsLpdAhHZFXFXbVf2qbYTTdgWi5858G6xaw6CYVK6N8F+5ZYtue1iMX\n+TcmsoB0dy8Xu+aOb+XdI8/+MewAzsgndln/LKj95f/Djt7FNAgdAJvxTfay\nN6DEbBw9iedNdxFTGLI8A9OBEkV3an71cd6BFtEfpfgHgxDBoSnU46UVg1xP\nv8dqPhxxHBC8+7ApzOMvD8fr1aQYyTz0cmY1wZlGnO4Kzupp/4W64mRHrwdV\nUb3Bk6j7zJOsHGA89djsW+qPCRZWl+48yfgUO2F14umt4IH6pLjhLU6AxZYM\njaMk/8ymL9d0u/Sd7gsNNqYWm09+ZXEkwbv00v5JaUdrffF6Mj9/IRA95F6X\nb5mA\r\n=76L0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/shape":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/density":"11.0.0-canary.f5246264d.0","@material/checkbox":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/elevation":"11.0.0-canary.f5246264d.0","@material/typography":"11.0.0-canary.f5246264d.0","@material/touch-target":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f5246264d.0_1616114347580_0.4781928288246249","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/chips","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"748266f2d3f8bd6341ee8960d491fc9fbaa8073b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.03d34bbad.0.tgz","fileCount":115,"integrity":"sha512-47c+/pTYofPQXSKlk3BLzyWGLjhjfc7h4mxw3+3TdHNmoVjTf4TMBPM5YFY8wMyUC2yQPWBcOs8+aLNJB0QJuw==","signatures":[{"sig":"MEUCIHUQL9WlvdkpO+17XlsfsVHLlXYHTm5Mx0joppJ38bCTAiEAt19xI0qHbEIO0KMW9GGT0mEtaXa71Oh7gEJVEXXFdyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/WkCRA9TVsSAnZWagAA/VAP/2Xs2Hkg2krAkQkHZzFb\nwbUptw1hCnGHHmbv6m96MIGgxF4UNTVas9ztyGIk/oGWFVPmQZXn2mkcofhl\nGu72/KU2LirGiGgwrkGidcCLkVav1Q8r0pnbOFEggSNtUB2F6k3wKsVe6ZHl\nsjoxULnRJ+iO4W3MQTxpOWJ+0gIupVZHvSF0l7hlK5B6FAXs/KUkIiH5Ebk0\nUwuNSPt2Vk/x6Xj1nm/hn2ADtE9Gepo4kxbj7lwRAF3nUvCSCVt7wm8D07WK\n0d3foS1TAEQpfqmdlWNDG2yBwUaEgMCzqFHUnc5++5/Je8CUZ34sTBobJphF\n5NGteDofLRw5H5Tyqd3RKNG8/i4TEVdRS/7kXFHtEfFtqFLg7szt0yBEFfR5\nldIwNIDMrYLgqVtB82IGbjpcufzGAfhktopINNBy/O+dLykI0c00qz3mL1ef\nwhwTx6xzSkvIQnS6h53qkUPzjoG38BjrVzj9BZ1Jfw6LSkpp+VV/CAVLVkA3\nm5dnTAXJVJDDHsTCLxSvSuQ+KqcHHR73C02r1KBcei5bMzYOe4Y1E5IsUHZr\nIaaI8qy9nEP71BCrNkR1gh7uuABqnkxpxyJNqi1HW0haNhEXtKV+V+hgWaD2\nOIfyOnFGCYuMsaj2XYMLO81kkY9QpYS5B6wf54XvRFu7FM219r1a08jPjp1H\nOGde\r\n=c1ni\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/shape":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/density":"11.0.0-canary.03d34bbad.0","@material/checkbox":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/elevation":"11.0.0-canary.03d34bbad.0","@material/typography":"11.0.0-canary.03d34bbad.0","@material/touch-target":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.03d34bbad.0_1616115108331_0.3114308064395075","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/chips","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75337e922463d0b2dd889b8cc13c6cc0710948fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.cbc57c600.0.tgz","fileCount":133,"integrity":"sha512-GeNo/Csj+ED7fyzJIUZOGvKLH1uu0x8Xjuq9A9c+bIWgZmbpKEq6elkwaq9S4oUmD/cP+DXhugAV4dKFcU03mw==","signatures":[{"sig":"MEUCIA2oACj8au1XZ51l1tWshvligkgOu0/m5neuhIIoAoh2AiEA0g8cRMvT0Yq1NES3jfgnO4F9lkaL7bCcBvAWA6zogIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1124857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/eeCRA9TVsSAnZWagAAonsQAJXHaLvh8YLsv1/oGO2j\nYRaKwJq08EUYP7uECFPGewNrNJWRtzrez9ipByKWlFDD2tVboCQQMsfcwS0/\nGsOd6swPcU+gyxz+SaT9wiz+dmWcYOkXA/gBMaEKSPZGmzDrxA9XVD3uxvXe\nh8hQaT2l4opBCDVi+ERtf8tpNLMr6wng1SD8Np71z/SABAPnB1w12ZSU1QqP\njFUhLtnFU9fC/hGI3i3gAqdRBQLQhREdxKiO8a87Bb8uc4iH7+ouVZaROsrm\nmy9Ho3lH3LcGxiNk7xuwwdCoMkzGOdAjz8tGKPMXNISSbVyWMNZttIuO+j0s\nXy1/r23fst1JeWkM2bOAXWuECpf02AjwJ8szFIHVp/NvR7873VvvdsTNRHa9\ndBYDGlmrrjR+QEISGgeRQpxOih4qnmL6otPERvFyYJ3AZdbzm02wWr/CGKMK\n2By/NBemezrrUzt/pi5QLKrDKioScch9a5OlBQlirYpaFiapi2p/N2G10qKp\n9KPgEvPeMFuPAKD27aHVaTal7SJVtKiz9FBfWy+2ss0hT/TMSpWmczQYyTXA\ncOWbW1/Q8W0Hy80gtLnmiCkFy6vV85I1ZKyAaU+AZM8BiFZPYlTn/zAWpz/h\nwg+GESRaIpVxPYQOtBsgUOvpcTRSp4FKzHvsFXUnW2r8ZRxr5Ike4VL3x7mC\nLcAG\r\n=teTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/shape":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/density":"11.0.0-canary.cbc57c600.0","@material/checkbox":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/elevation":"11.0.0-canary.cbc57c600.0","@material/typography":"11.0.0-canary.cbc57c600.0","@material/touch-target":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.cbc57c600.0_1616115613868_0.03707745598842305","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/chips","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1ff85d9314fe26d0c827e275c9edf01a7ef9851","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":151,"integrity":"sha512-3/ow8K1xASWSL5Xphh7eI85odYi55P3D/XXI+FrduUQuXOyEuPjmmDbqQILeDe45+WYxq4JFAwwdvmsu3dgbxw==","signatures":[{"sig":"MEUCIQC9IaKldaS3u/4HqAvabaxPOboGlANFe/zl6KLtLgYx3wIgKNYkJZzai+QmU/cOrc8YdmFZOmuk9hb6+MpxVjjKh9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1185988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/rBCRA9TVsSAnZWagAA7g0P/0FJ0s8/AdIsgyeCgAOA\nDQYQRIrBCUGWImHVgH6LmUVSpCw01WJdTX8+eZCzJCO0cQrACFovMCYeIwqU\nDpV8I/O2COs1QM60v/zLsY9yZNpfE2wgHvGf+JwAgwjYRTfD/nCKs5anP7Gf\nAnhUMHXtXRlF8ydl8Oi54gzxurcEMCHfSMW++g0UnURLEiXBY3OJH6Qt7KsK\nT8gzi0vzK6mBTPjvZHdoRZhJbmoclcbSi2EkS4WfUlIxsKSo5wdqWHZuzbit\nxkmer5IXkJrq3qCFNSzEJ1dI6ug/JoN6wj+3NrXziTNCpT6hvOzHiTkFq93d\n2t1VsE+wvL8lkV9uAk18CPg/K2xL3laUyoD1LWhst6Q9ECWuvCyZslMcRSgV\nQKGhZckaIt4sBT5icjztgQDEKYTmiEZkIjl8QH8hzmQvMCJS1nsX7Kcz2Hcz\nOyu6z4XyG2G+nrjf09c07xgX+MRgZkdLrWhakXH1f4/GAymL4VMxow+9M+Jj\nwW5U9FM03rifdfYDJ1AB1xXqb/ToKJC+7ETnpCXFApGJgHhfvteJC6YZBGzU\n4PQIz7+it5awOVas1qAdZQyPrQ2jEK1lF2pIb8Wjk+8KMKs3fpR9ylphCPFp\ni1wSP+gkq3XOZFMBaYqlmwzQ/WgekeZRw40XkV9iXGgR+V1TT7nV7swzas3N\nRrSw\r\n=AAQF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/shape":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/density":"11.0.0-canary.d6c5bcf37.0","@material/checkbox":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"11.0.0-canary.d6c5bcf37.0","@material/typography":"11.0.0-canary.d6c5bcf37.0","@material/touch-target":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.d6c5bcf37.0_1616116416322_0.783966011759706","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/chips","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4a52eda32a497b11e4db9ae36dd3d232db21ef2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.fefc668d7.0.tgz","fileCount":157,"integrity":"sha512-iHronrrBGb3ZeeuDEb5TtxbxPLqyIsjzVyprYEK/Jp8fmlGEqSTAcKglyYYRVk+bEDEepE/1bphztIvx66ECIQ==","signatures":[{"sig":"MEYCIQCbsxgEtXF5aLm3P0k8QaYBytz2DbiEPKNaBCL3a32eBgIhAJpFZb2uQSMUGym0+KbmOz68RZm1iVfknjfaVUM/pmx1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1235207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/+dCRA9TVsSAnZWagAA2NAP/iCmHtUlU04sg61l/uy8\ns+fmhAB+DnKIxgTRPEFp+2pyHCc867cxpT9aVpAttFU9GPGbEF/+Ebx02zSc\n/Ec3snCKAfQyvMdqUjh65d07906sdHgfmv/bZuzQxriywpkONARrOhv/3f4/\n+37ktZinzlBM06f3dSIUxG/OYqeP50WgpD1ze5ox1ASR3SAjoZR+2wmuIk9A\neYHFR2hRi5OjuZcPHcMDWjApmu893D/bn3HkNj25j2M3vV5FlKZ0S8w+MH8A\nEl90Dbm9tc+pnUtB9noeCtWiyNxmbfIBRD81b6ud6cAQ973ZFDyu14mJiO4C\nJJWZYRiSw944oH2RjkhYhoQXzZkN+1juDHjlQli4QnAtL6ZrOrMfILl8B31v\n4Nnt8Spk+DYkOooF+/Tu3e4Ft9zAaPg1HiAgAPd6QpOZlhVFRRONFTIw4VUI\nhRRe5O3MnPBq30MhjvO8S71zkIdeZfhMmWBB6O+7nPwh+KVxsam3DsbFXW8X\nc8xYm3rqapTp7LWG/yzTFtDH+ejFD0+QyRpC+hN5c7Wx/Jg+htey478XF1+G\nPThVYlcnDQb62GTdbJRh5mat7fxM/BU+26h6hgdEiyaSSfcNbsg5IaRgzgXq\nbNSmh9lgltVH0KLXnnzQ9iLSLbl58l57+46SmjpnOvLxGJEktGahkgfsOp3F\nZmeD\r\n=8SjN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/shape":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/density":"11.0.0-canary.fefc668d7.0","@material/checkbox":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/elevation":"11.0.0-canary.fefc668d7.0","@material/typography":"11.0.0-canary.fefc668d7.0","@material/touch-target":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.fefc668d7.0_1616117660745_0.275860111477785","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/chips","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19e976695aa14d9db5bd15c264b316d593c7f7dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.faa7d3226.0.tgz","fileCount":157,"integrity":"sha512-ds/Dx9s8i7mOarQbxRZGg4yHt7b6Fi18KOp6+52sharh262SNmo0x554qLye5jGQphltU9QdrdPwI0JJHucYRw==","signatures":[{"sig":"MEUCIQCTwEkMBZt6pqJ7nX4ty2JoJKeYst6FuSH2G5FGzW6cwwIgNv9XhlvN50lbeSYtaMievau/5/O1nCmvlbAesDp52MM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1235175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOMHCRA9TVsSAnZWagAAikIP/1i82G8UaYfmjbUhKOeZ\nkKLChk3zZV31BQpme7tnaggYL3AUXLqamORyawMdxn1vVZ6XLZgb45+8pkAb\ng8/IDhrqvEVHTbHGxa5Hxpe5n5m7EfEnqpHIDwdpr0y3j3KEb7159gntp9JL\njg1M+x/D1qpD63c+xEBUz0ePTHOILF4l+3jJQtQKhuObqbTevq9rd+LlPEGb\n1Pxp8L7JQuohzjMlvy36jWkuXnw0mVSbGCm+ExQ0biRaM5AMJOogxJxTxMcN\nQPS8gXDZ/lK72mkFZvTx1GM6/j3CuPLBPneuVyzbF92t+agZDVM3HnUSipYe\nF8iWbzBU+OI38+6Tx5a4zKo0Lk1+pwkUU/ZQMdpEuw8WLmeswvK4NoZ2VdpT\npsSvm45sJ/vjqnUW4yiTF/3FEbNweoht2x1qqMCJLaw6x1I4CJshOFP/Mi3i\nclRwJbb+5FpsDTpxn3V0Q4FmGivjE2pFCty4kN5k7YoGWAXhJE9Z37NACd2N\nu13h3N/pzyvtI4TuzDgtdx1AROypfzwcsC2DOvQb6+j6MOR52Lm7UBsG1U5S\nP6Vk4Okv1p1+zpUDrkYGjDPVOqyTv5veKBzzxefISlQW7dfl7dGGxzT8MqwF\nebQHwm3miDxY/nfxECMuQLGroaFAvtoTFOlqnaaVaeRwVz6MCFAudEd0xO9L\nRiq8\r\n=rE5q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/shape":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/density":"11.0.0-canary.faa7d3226.0","@material/checkbox":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/elevation":"11.0.0-canary.faa7d3226.0","@material/typography":"11.0.0-canary.faa7d3226.0","@material/touch-target":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.faa7d3226.0_1616175877981_0.5933555961696415","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/chips","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f61f422013c836a92046b091e7b60d1a585ef55d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.c60449bc8.0.tgz","fileCount":157,"integrity":"sha512-h4tTc2vvLVWPePmziG/CPaX2Ahb3p7sK5U7d1A1QOcUR6cBBNwuTatVFS7JWLAzeyQRGFQ2s6n44JWwL5q31sA==","signatures":[{"sig":"MEUCIDFsjQXHP63owJBvSwU5yaLT4OYaQaJ2ytL/t6gfrIv9AiEA6uoEaJtF/mcZj7UxHZtF7tpPP+Mig8futst1/wC8Mdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1235175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOfzCRA9TVsSAnZWagAAPCAP+gIvoRwfqcuQiSgvOdW7\n8IvgJLAjQ+lNhKO9Ya0q2+AvcS+/VhoLZB8uk6uHUFu4sEJO1mIOlzVw8OBv\nb8MPtgdJekjECaeyyWo3vEeZvzkWnrWjihxn106emsTdDiaV6C8Yv8xw0xGH\nc0+6Bz8upjRJVrQKk75iZeTBuIp5VOFFHGQakyTK/moHMlpqLNTNyX18aKsJ\nzs3KjllVhmKY1nDY685dK33P1UZPfjxERBg4pU0mB5OGDTxh9ydHrOC0v9il\nQEbC1RtteZ9PVix5lwDiKlk2rBTGUw7w7QHMhPtjMuKAJfa2mSg/y54enbOx\nN/C7vczsgxpPZMrg7krB1xQ2RP3YEq5TmLHQVMW7MEz9QzQHvkMvFBXa16/9\nmhcwpoC/eXmyljXprP6ZR0BWCa8fA976BfJWkIdEluc53h0/IuOgAsi9zig8\nBv0FQ7nFzXW9zGZF4ouotMiWSzCZgpcJrqEJWBMiuO9BrcWycHPxKMG5z4No\n2Fi+BJUb/1hXlaoyY39RsH++NYzblMetsZIshU3yptturs+klOGKMRc7O0Di\nCc0PEUrGpdP7h/4exQ2EmCiPgv/QWdhWCYqZ7fZC+aBuCthe71+U826p/Qkt\nvhxsPW9hpfDL0NHfBxLwWCvexQTbSrY5oWJjTKT5Ycuz7VBMJu0aHrlA4/mo\n+6j5\r\n=wLbO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/shape":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/density":"11.0.0-canary.c60449bc8.0","@material/checkbox":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/elevation":"11.0.0-canary.c60449bc8.0","@material/typography":"11.0.0-canary.c60449bc8.0","@material/touch-target":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.c60449bc8.0_1616177138688_0.7661853103994964","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/chips","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"001721f562b32fb79514180a00d47af77475ab14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.5f0fc444a.0.tgz","fileCount":157,"integrity":"sha512-b0BjhB4GDBu9nkqpgkobO2mK5A//S4Tb2KukhiaKwrU0gETAjZNsLwN87rjw3frk1ZyDFQnj305/CgHnkzo5EA==","signatures":[{"sig":"MEUCIQCxhhDtwL5Ka3+JIkRQjn2MYDZMifUm1Y1wOT0Fc67leAIgWICGQfyhG3M8U+Gd/CCL1F/6DNgWmr3xOEqMiz6DXUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1235175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO+UCRA9TVsSAnZWagAA0aIQAIYt9MmxNA1jZgGOk4uH\nvzZFKjuQbAg2XmkmpIKffSN1CP/xUD09X7JFouTCtPuF0ZN+LiEsYUQ3UMoR\nv67rBxtwINA3Qzpp01pXQcZyAHRB5BTNOHMpdhTOthmy8R6mXX8c2bpl38fP\nFYyqb52Y8/pHshyOvlQRzhlepvcYmQRC5DbOZwZf0LRikCUG39FYKF4b1Ntm\nat/J326i/LXZ6u2wiPustFrSX9IMJIhl6469lRpki/THmWhrXZ8ulDKKXeJC\nW14n5IsrUbJrXnjo6g5JipKtc4xhLEPFWbhhoLitQiscYkw0zECr05hW1m1g\nyL3yVijAYujbW9BKN0bKoYK94P5BDQG/2Qzo3gmdKUSE60+4YseOXhCVhHVP\nngSydCTIl8wSr+iaHIg2NnpGrezqlKH7yKN0BisRp0Xwp7RzANh4uxbMCQya\nA7WDf263IzUs0dQ9t/w38XxJ6i/WuY++Zk2wTNpba3EPgwTGf9cdKLHA9edr\nFA3N5MVjLQ0EJ6hTGJLkBmasSATqSElWEzlEhLq6i3CM1kWw7M2NtH8DWnf6\nx9NtsqICbWa24uR/1dLiK5KqvZb7/itcF7mlndaeWvIWImommJS5vXx+xNlO\n215hdRPlrv786VysTH7E64TkDViRzOUuRzzCgN0zdFY51Px98Y7+pKLwNXsS\nrDPv\r\n=/k5z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/shape":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/density":"11.0.0-canary.5f0fc444a.0","@material/checkbox":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/elevation":"11.0.0-canary.5f0fc444a.0","@material/typography":"11.0.0-canary.5f0fc444a.0","@material/touch-target":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.5f0fc444a.0_1616179091951_0.0270254683910387","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/chips","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.4567a750d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c427606e6820a7d38b79ac5596a484aa1c19c10d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.4567a750d.0.tgz","fileCount":157,"integrity":"sha512-Hty8EGtagRqm9eRAhBs6XGWvOA0qMKumZj4EZpBT81K0PFXx6KBJ8BqLO07mF1LwXACANYPp5Im/f1hri4zfwA==","signatures":[{"sig":"MEYCIQCmcDxSqbj/fNgxW2BBaRykL/L/fhu0tPn6wpMHlTpMlQIhAOxmZsKX7qYcfw9iwMBsxsZ9Joo7nmgSLsZVB4cBKS8P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1235505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVkWCRA9TVsSAnZWagAAWT0P/j2Hwr/HZCYT00ftGXoz\n0c5iooLqMm0tmpP1F7/aCnNVE0masMMgqjWcUr0klngjUG1noEcKFxfn0l2a\nYtuxg2JwamR2n1AasHVbeO7PnBZyGh0Gm9Fc0CJp1HpjTPPYDT5pU0xemuE6\njVZdHZt/8S/k6DyZgLzXTcwcIvOa0tsEsnMWFE1D+LNDrZhyFEUJk1SEiu3l\ne0NYf4rjB5vG9ZkyD0OQiFM4yfSdJJzl32Y05Lp58zST+nblo5FAuwSdEgPq\ndq8/nc1eN570TN3w7fNBUuw/sPgbopyDqW0TEPlGWvJsLC5znJwlZz5BGsXZ\nzD3LBg1K1QLKXlBjSja0uIGCBq95rjQ+SYIHK6BXWYJDChjgAayQs9H3W8/L\no+/SSAG0pQCzR8IlnwSGotpmN/e8sG4OjnXSiFj3SA34oeEko2hNEM4u5jBU\nGxAx6tFhpoFxjDySXzj21KD7JeOG6qORyPL3a5yRnDObDGtvszYQFMxAIRpv\nq7x0T2BPhZApa9rXOepX8hGp9hkyRdemcksk+VGIbLOayu2c8eifYvr6valG\nkfw+uVVhB5Het5uLTcDuZuefbGLDIbu7CeZ1UYcW8Ua6SRmAiFJSZmtM42pM\np8l3vvadwObTTYllvtxPRx4PQNzZPPpADRj6uqVGb2Z0lxdhCX4bFsIs6/VY\nZiER\r\n=hFx1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/shape":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/density":"11.0.0-canary.4567a750d.0","@material/checkbox":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/elevation":"11.0.0-canary.4567a750d.0","@material/typography":"11.0.0-canary.4567a750d.0","@material/touch-target":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.4567a750d.0_1616206102010_0.33930543605124486","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/chips","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9d7ad2c2b625d593e4941984c2f1a698d4fbe89","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.0cde52f5a.0.tgz","fileCount":157,"integrity":"sha512-w2mTqAg55g4PjibY/4DwGb4y/IvLbi05+nu9Erfff6XnnrUTf4Vf0w0k/uq8lEMS30DyBuE1fLJNYAAQKLbkvw==","signatures":[{"sig":"MEYCIQCPC7EoB7vRAHbgOKYh2MYEZcfSOdwjuxZYf1ktlWTGEAIhAOeoEut2n/ojOFH4KaLOLJRy03dAJ6YCkbPpHNTdz/fK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1240201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTBKCRA9TVsSAnZWagAAcVEP/092sO6SHN5fWMISky3u\nbZ8ovYFs2QhkRt4VfPiB0tCKw53BLagWIK6DyFeSscK7A8bHk8UBRH70IIl6\nIQ8+vGnPX0EfjCf9e8XCFY6/dKD+fXmepPWaxkI9D+gXHgNu3U5eK04q6x3F\nin2GRBXLP3F+MlqgihrXTrtB/OWKsvwpKmWv4Z9OkC6229wp2nzc/B4QV/5B\niJO9rPmkmwia3a+ol6ciKHIPQUHnxAgBC3A7NiJNdanLMWUWupUch/McHsv9\nqv9hl5jdzOcZ0uXSwzZoAHys7FuqRr6IQShpjuL4DPc9dwr0J1Brpv8WZrxz\n1yvR0qLrNFeogV6Sj3iWyEXpUzf+wTbuxaSC6JIg9pNbJt3oLQsCPtbWL72K\nW+2+IYHsEbPtgTr4e4nF212BtVZ6eu4ZEAQLQQ1etp+WpP9dieXsqoS75oAz\nqjSSJDVjc5Xve47Maey5A01kItfaaAZSqvRIKFlIu9ap7pemYK/BDvsmhC0N\nFvwq0P8P5f5cGQv/B76ydlgoVufmeeG9Ce3qffmjxLV2qs7UA9uK1fr09lhV\nnDgOsEYS76+jNbz7Vdjtizaebxuu0yTE9EoT/11+5PHUo4IJiGVYtRKk4mSS\nHbRSlS1k22iwNDAEGfq7FrEtRyASDyq1xBaQQJwbC6pvro3LYcxkkfM8h6jt\n2IgY\r\n=48/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/shape":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/density":"11.0.0-canary.0cde52f5a.0","@material/checkbox":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/elevation":"11.0.0-canary.0cde52f5a.0","@material/typography":"11.0.0-canary.0cde52f5a.0","@material/touch-target":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.0cde52f5a.0_1616457802308_0.9301855827496539","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/chips","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5be6159b724cba5597f5ca304cda355876ecb28e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.48f4b67fb.0.tgz","fileCount":157,"integrity":"sha512-KcCp47hICuUtkS6zAPOtva6VOQoQVgFYpISaBbQCBxKYvNnerfe9vRPIlBZeQ+lk7ZiqQsPAr6rUMET0as2Rsw==","signatures":[{"sig":"MEYCIQDxM1hP9VK7XLgrAb2dOANECkbfMkzviVJmL8eSaGT+mQIhAMh5djZeRs+Z4k/NtPv8Drf6ZleN9ehBW7S+1XCidNj7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkepCRA9TVsSAnZWagAAi/kP+wTXNla528Quws8wld0i\nHu3ki014gdsJQa48EwekcdtJWJgG2Jv2WUkkBC8diZ6saSZlOF2GonZ7n2Je\nLfqI3lrsQzSJ3c7zAD9z89yK4EjHHSbpRDqsgMDnRpkJ5ASNbiXGsy9eWXwx\nsy2BMeT5c3JY/9VCBf5wTNmQUCjTzvdWz0Fm9nyzoJJxHkv+iqpWdblgXNFn\nysLcAAOUFn+jm8moTTuZ2CTfHPjB6U5A6x2fNRfoCPhGYtaAWv+FSRBikjZ9\nFUthDsbI1ro9WwH2mtp2qFeXivkPEH9sRhHORiknWajpj29lyTMfVuU8PfYt\nCb6rHIXI19OyKCUjGqt1FdXmr8HPXOEwqF5RsqKZDNMEazIK70uvY0p93Tfq\ntFOcy+GjZVC2Esud9VCL7uO9/dBH/A8xED7tkKLL+rEbZX7gD5t9qwn3coHw\nVtDcuKPLGEtQMagdddE4xOwAsj6PM0z6iYmyqhyqQ8OsgleKpvBCGu7HBfy1\nAJvDdR5UcuozBLxhAZ4DIvIkSdmDm6+r0NUd4McO08TAvTtpq+R+/HOC+8IX\nYGQnDNzAcqeyt+G8TJoZNpmp/9k4nJVB3CcUQf3v9Oi2vuKFt8OuKI190weN\nCBI4LRWNmC+OwDZ8V6OGcH5x20QyiZnvZ+7A7NLKe8BTGFhovZDXhL9g7177\nJSSO\r\n=EWzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/shape":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/density":"11.0.0-canary.48f4b67fb.0","@material/checkbox":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/elevation":"11.0.0-canary.48f4b67fb.0","@material/typography":"11.0.0-canary.48f4b67fb.0","@material/touch-target":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.48f4b67fb.0_1616529321323_0.9444847414220086","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/chips","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"477e0a5385e034975d4331c3824648168d585754","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.0b8cff734.0.tgz","fileCount":157,"integrity":"sha512-/TMxBaiU2yUIdmNcDd3C0DqEItadRRhXIKN3DHUdMW87fnvlron27skEIIPWcJ5sUF7HpRSu17mc+ra1YwpiMQ==","signatures":[{"sig":"MEQCIE/IVtxfKZNzRc3z3nqMKX+BPqicUHhFy0JhtG5wArayAiA1icYE8KlwUHEjadi7YyszZ2cKV65w/xC2YK0BP9oxzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknzCRA9TVsSAnZWagAAYgoP/ie1Ykh5+FdDNwHUWhK2\nORvX7SG1uEsUVwHlo77YGG3mcvmll2M4el7ntPxHI7rpzU85PkQiqQX3JTuD\nk3xL5ceaPe4cjykUpFD+DIxd3IL8wVFK3ogWm+9AhCgC3man5SNUcHunUntZ\nV7AhY17EdjuwOAVTT5Hx0nSybBxP6qjEPLKXlfSd2WS4O3+aaNQlxwJc1utL\n84LQHgwKcGxu+pHJNOaWGVUp2tL3+igl1nBQ9vP26xT+WsQtdwlbbnMjpOLF\nNPPZ8GQKU0Vlgpn2ZhTU/9Yr7+DoR6aHXhL8H64jRBaLSqLmUokY1U64HPqq\nd/71QHLVX3SD9sayzMQf0Fu6d19Z9m2oQwXw69FZdmF/0vdOQjWsZUfCOU5+\nXbCh4uYDvOST2S585esnyrqlqVa1dE40gN3fNJKRNkLCb7NiFiPFHVhIh5LA\nHeXWUJDP1pIBZ2x7mU7f3xrWR4p9pO4wzfrYsBF9Fiuj5nhCIx+CWkWhodTd\nKRhTmIF6Hiti3pplw9uQdc82jvJ0NwYcs8812fo3JISI0RNG+/dJ1ByY6jqi\nqSqEc5tLK6CR2YjWlYui2pomcplusuHUOKdyXf3C8Cv6bmc22WhWejB+5rvu\nVdpNQYL5f1smbN+Am51RK8QkuGo49flEathyDvW9iY5lQ7KVcm0QO4pJ5zYe\nCKUh\r\n=2V+j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/shape":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/density":"11.0.0-canary.0b8cff734.0","@material/checkbox":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/elevation":"11.0.0-canary.0b8cff734.0","@material/typography":"11.0.0-canary.0b8cff734.0","@material/touch-target":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.0b8cff734.0_1616529906165_0.23187415384012544","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/chips","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.8943b991f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c036723dd8deb2c95d0736e8c92bcd1bd18d4a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.8943b991f.0.tgz","fileCount":157,"integrity":"sha512-mIj8gZArS89a2ARYKXkzdhOzxHStUZWnCoQ0jaSXHScGo0edm8OJcRp5Vhv2CoQm0lZebvTds5MvgzY1JNMejw==","signatures":[{"sig":"MEUCICCiKF7Mmq9Epf6yVO38GFU6ccj4iQFQqTFJ+DE9cDkSAiEAuil2OlBBggm6yLDXWhnMWwiBqSEJzlaJQGDlIJcCxKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk/QCRA9TVsSAnZWagAA8yYP+wVu89SR9u+JxPB3OP6z\nURaHmaJv1oJqK7fMekcUpStYQT7VNASlDDAHn13YQEWl5je4++4+A147CaLy\nCpS+he52d+Utm7PiHwKHekyPnVrUoKimPU3wBRfP8zQuqrDvCmyhrR4k+kMt\nEgPRaS5ppDvWWaRJR3ebSo+YAtTIxHfA+7QoOFwJAEvAJLYNJMoZmM9ePBmC\nhCgt8gWs6QrjRsaqGxS8JVcHXiOzErCAIbxNy5OnOha2knTA4PBINLNPPulU\nUR4Ql2UJB2TQM9efKVPZ8BiVjjV51rsF1bKllDt40GxcirlEBVdwngDWplD3\n1aJtF+xHiMx4UVHZ1Hv40SBSXeNW0MvRqHxkaDIoNPnBPLi5RMpUVM89i1g/\nO8iuysZ2llsG1TdnxDBH+veir/QPxtw0SbQ/cuMnxqaTc8mZ2wOQJn+Tnd3M\nG/kU5svGmqfNYJxqMPZiHXq0SLIhJdNc0/U4tdJwPrZJ705OvIhT24AZ8EBS\nWNlyZAKk27HWJ6tjiNaHHOSUebZnNGQULN+JuEJBjc3m+DwPRnAXeAey/4Qz\n+DtAIlsUh99rFk6V/su1TCKE/2thxoUmtPV5CL/W9Y0Iy76rGnVaAhPeQq1A\nnEn2xjCpbR7IwA1XDI0uABkO8hYivF8R0LqvCYiOcg9ACSzvIrBrTl2zdEeO\n0PW/\r\n=8cAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/shape":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/density":"11.0.0-canary.8943b991f.0","@material/checkbox":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/elevation":"11.0.0-canary.8943b991f.0","@material/typography":"11.0.0-canary.8943b991f.0","@material/touch-target":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.8943b991f.0_1616531407414_0.7172400768619318","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/chips","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"751584479cf3cb48ebf58d1ba891680d2fcc23d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.3955d8d3d.0.tgz","fileCount":157,"integrity":"sha512-r+8xTFw/k9CJDODzr0vfUHkHx3mH2qF3xypL9KNF5GUc9y1IpgIYcpRMKaYvnMHMrYfex0+8CIG0lKehga7D4A==","signatures":[{"sig":"MEQCIGFn3ZuUFdGwya6gRgyrt3P71JlucBZihAPv72Vd9HZZAiB3fiFprOU354LQVy6YSBEFc7rvd5FYGmgxAJV8HkLi4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5AmCRA9TVsSAnZWagAA0kkP/AuEzTPkTF84nTXFL+oD\n1UAhRtT0fUo/wFmWJg+1+PQLX/o+thxBN6vHJPoBsBXVNrs1PQbuyfAQ8PAD\nlD3ghh6Jm5bJXQ9JnOqN97m5whzgqEYkOOJnFQnjPEiNqXOwMapOLw6fiEGj\nSdWShgUhKkBJDJ7eg5FlFxg4i/XkyDml0JNENKq6K1N249XA0cUCPH5Crgz2\nSCSf71OS416sLQpIcuA20MZg2mWzLwiwKmL92YMhH37CUfd4SfQIF2+ZLTug\nhMaQb6ow2gKmYP2hcgfOh8917LdI52LwF1HPu3gwN5Ge8egvWvsOTJRpww1k\ny+XAuV6ihfDyc8Hw8IgBnyJXHeOHnlFynzFFwN0GAxbrSgzlON2xFRb83Jvt\nEbAx4vEFirME3VbShoJDTAq89706UBHkyxMjBeWN6/INBfBWV2Tk9NPS0APa\nUhrWn1wf6TCQnqzX/8n0vSd50Q0YUfB7dfFGJw8qM1TvVx9CUnV7nui/BN+b\nuUdGE9r1FssyoC90l4iYtBJZKI/bLw28GsLcEP4FXegyf/V1R8OmMNk1GVZf\nfYv192vboeptc2aBx+4tAVG7DPUDTBl/ZGjYlr4oYHl5jQifRYHFXuVHW9US\nB4fMTqZaqhSdZXPf0WE5m0plVGNTy+S4Rbmi8v5Ycjf1qXyjwwWKL54PvmjS\nLIrD\r\n=kxDf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/shape":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/density":"11.0.0-canary.3955d8d3d.0","@material/checkbox":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/elevation":"11.0.0-canary.3955d8d3d.0","@material/typography":"11.0.0-canary.3955d8d3d.0","@material/touch-target":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.3955d8d3d.0_1616613414352_0.4100687124495328","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/chips","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e98f96bb127c17dbbd36c90faa91e2152cd8a3db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.23ea2d85e.0.tgz","fileCount":157,"integrity":"sha512-Abhqd9RjyuqTAtYQPPbB6Y77d0BKCXhpOZw/5cZKWNFGlhNL4F5sIhf1g2/TBzaGNA0nAPHmdQJeM0U1G2U/0g==","signatures":[{"sig":"MEQCIHAEiBpunrzy6ED1oxEYhAEhzJdFdpaZywc7GUGRbfJcAiBMCGP7iJhLsA3R/ZFAY7om72r4M1oHJ+VIjEEsyA5MAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMleCRA9TVsSAnZWagAAbAkP/3WL+qiqRycMeTfORNz9\np5tA0GHejyte8K5PUbcCsi3gnce4Q3mQGIQYnDVI0GTaTZCiIGo24eUm8Zaw\n93egzBP4A6Z86KviOWeLgwIjsQVhZdLmeuDBA4FomIXxoLotBmLXBXU4daBB\noIgTNqsr/tuiHJ/EFHvJdp55GWRp1hQFDfK0kg2iFIv+2PuocC8iSWNqEWeZ\nl8YS8S1f2+poo8suSn0ixITxeCi7yoX7MKLe3o+0Pw8CVLviQNlAqMbR8GCL\nUm1Pt0rV13amDTbOEMRnut5fLmtABVO61l18ZMAX8TtDFBaMmrUTWnDeu72r\nPE7JXpNOfsDcR1rmAEeC4hxVZIs8Lc9Hl7xUPHMo7YfafaGFH/E9TVxgyY9R\nrZm7a1zc5gFArG2WGZ+0DEAdzgmvbEKh2lB6fitQuayBobw0FYapd2jKJGYG\n3tQgC9XQOrObKA0DRnInyqOa+KBwyFqQSEsZRBWyaJmCCfwGHptsd+LHPmxb\n2UzjTXqp0q1d7tnCyCwTZmGnHxuWK0siuMyBSjAalv6LoXeNBtVkuCQ5sPZq\nfmOvTGERFsoP4TWo21NVz3wq3obhH55s2GYfraPMKhwSaRysk/vL61X2WR8F\nFT9Ze8hL/8T78w4JIrc9xQ/wis1xtD7vKh1CIcyXbguJFeW/9vyIMNqN2QSw\ngY2a\r\n=WbR4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/shape":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/density":"11.0.0-canary.23ea2d85e.0","@material/checkbox":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/elevation":"11.0.0-canary.23ea2d85e.0","@material/typography":"11.0.0-canary.23ea2d85e.0","@material/touch-target":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.23ea2d85e.0_1616693597698_0.5847892863557989","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/chips","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9118dd644abe8b71045067439ee1edd07453e854","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.e3ec22f45.0.tgz","fileCount":157,"integrity":"sha512-yzOV8DYpDE10fzuaEseLsIVmiyN/QyfbtAd+GeSToYJzQs/lPqmA21YzclTJTSCJvBSrkb77sFck9od/FN7guA==","signatures":[{"sig":"MEUCICSl4pba0nISwZZfR2hvm4aA62d6J3m5KUxUrkzPTmMcAiEAgpA4WyZyMfuJBq+yPNqcrldevIriq749A0Kdg9Z/8Q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM8fCRA9TVsSAnZWagAAli8QAJYhmuQ8mDOVr2SN55e7\ncSBvkCtBqyO6UYQ3wtwFU5EWDokTgUPILxNmnSHHeRN0eHWfwJdKudPONpw3\npcRMG7wdBT947OrG/helods11okoLJODwsyaxb4YCQ19BtyypPbBVvbg4Q3c\nMYHlWA8X9ygR0KuJ14TEShFkZSqzJZxI6V67i/RB36h0w009dhUNotD/vNyl\n6ycVG1j468pR0i2n7qNenp2/D+p8AFEXPWOOzfb7qPKBTRDbSUuuaDaHktpL\nlyyfWjVZVZB8FWHD9MxdrGzLEQGpNLaXn83yzN4kijB3wNytuis6Cnis5RBH\nLAkr1sXHN1ZFW1wPKZu9/vVlmXuR0C/Rr4rECKkDT5EqHuR5wC8sB6Mii6e+\nn2RiKVCX7xsEEacJ3kBZ627bg7Zj1P+mUAAuVUbBKFUoBDOgYINviFKgQn/H\nhPcad+y1ry/qv7WTxvfOTWK7/f4q/amLu12GJ5cg5EyK6wSILl1zhCfZaFGo\nKB9FbLq6xbm6uRh7vDT8rQmjwxfuH9kCBU3TVxPQWhxH84GCOWRAkA6SZlJo\nO1heljoEuF7Xrr0WzX0ND5amyYjDo15YaAUVi3qblongOERi+byCJXcmEmAW\n/yMYtpxjgvjmpBnmEivowQj5jBNsj8nojRDma1cnH1KWRXzqkFisvYlNoaaw\nBGEO\r\n=+pH/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e3ec22f45.0","@material/rtl":"11.0.0-canary.e3ec22f45.0","@material/base":"11.0.0-canary.e3ec22f45.0","@material/shape":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/ripple":"11.0.0-canary.e3ec22f45.0","@material/density":"11.0.0-canary.e3ec22f45.0","@material/checkbox":"11.0.0-canary.e3ec22f45.0","@material/animation":"11.0.0-canary.e3ec22f45.0","@material/elevation":"11.0.0-canary.e3ec22f45.0","@material/typography":"11.0.0-canary.e3ec22f45.0","@material/touch-target":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.e3ec22f45.0_1616695070770_0.0324815605132589","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/chips","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d17128c3420e85446141d10cc2d73a778fa7644","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.4ceb42220.0.tgz","fileCount":157,"integrity":"sha512-xk12M0RAsqOjF1QttmTGNIrpto8frC2Fx+Y+jQ4ADuKZewnlo7gKJtJrIXW+T8hBHdTR2uGSze+6Xw2st87uLA==","signatures":[{"sig":"MEUCIQC2uS7zTFrc/vrYiYQJ229norbkwsvesUi4efjACHtU0AIgQABYDHN/+CvQLVxcC4MJE86Di302W4fqO4h7xMFt4Js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZQHCRA9TVsSAnZWagAAu/oP/1J8fnbT5Z2SMNfhl/K4\nqvwcAjAa6zoJsp0tZMBbZ1Oxa3EFuEl/RI18zfV4ntQJt7ead9hd9/cGpt5F\n9DfCSP8+SKR5wqazsZzgBJyNWwHI8jcg5+4MUKunmYZ0lgpbQ/DF4I6XvzfE\nOiote1R/WAUHr68lxgJfpqh+ysYKQd3Y1M6UNd2Lf1FyE14F7SuCsbQcgmtw\nKYMS2Gr8PJiU1oF/Z0+kK5B+BWhbhXJoi4Roj6n+EEcrCRaDadUQgLj7q/wi\nfjmdubzx+jBtjyDalYSJEqw+4eDRWHy0zGPDVGksgepWeZjV18VICm8Vmf0m\nOk1vpQM6Fz4ySu06sKMCAsyGLA2jY7SUOhzR8Pnau6X7mbm0JTWCox6TiYix\n/wZ39SekAP3xSU9ZdCXmJ7/a2CBRdC6VAJCyv+w+AGHgnVpDddVWe5GAm7UE\neI45opKBo6YDFCoz71V6eqZBe+o/iPtqX/1z5/o49cMpPPVvNhvQl6rBcwdr\n1QQ+dGyWpVx+HLeL8KJJ/Wrjg4ZB6S8ydmeZZ51h2wLcPSy+jX0VqnngfbRH\nu9TQwaaHVqe/k/Sg3qaefzL4Jrm1sQvzCuPKcbCGei2wxiPsE+PXCVPsLAhX\n3cv09PrHvekV1zmJtoEpFJOc34mL5UwA8nWwPh8xSNmECxqH/PAmJxjk4tMV\nWlwz\r\n=Oj/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/shape":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/density":"11.0.0-canary.4ceb42220.0","@material/checkbox":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/elevation":"11.0.0-canary.4ceb42220.0","@material/typography":"11.0.0-canary.4ceb42220.0","@material/touch-target":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.4ceb42220.0_1616745479107_0.5942133206894078","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/chips","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27a14e1428ad2b0f473b414d7fe69ae59e4af63a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.dc9c84023.0.tgz","fileCount":157,"integrity":"sha512-1l2O10WroMZz/PX+lYPytO0eW8lKRyIXFP9t1U40tcIOVv3DzkNwjMG3/xXOGgjWAUYeIfi8+o8XXfe40D9Zpg==","signatures":[{"sig":"MEYCIQC8JBlUHDChiPs4TPipVtD9rFjOl+0MgPVcn/mNfdJdXgIhAI/pzE+7duSF5BUiz2F/2mx+9EhRpfM/W5794uUa9QW4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2SpCRA9TVsSAnZWagAA/wEP/iqN3vLZuccM52a2QAq0\nGyUd+xfERHwabzSqq/BCpEJAwEb9Mx6W1LvHbo3oM+DWvEMZGWWXvBwMz3jo\nrVDpbU6LKqdT7c94gO0yJbch0yWGimx4iXYe0qMkWWZ2nNms9/bSsnCQqfUE\nZ4OOW1Ps8XG3d5qvhQjvbLEJAExXaC7+9ObolBVkneMPR4Q1qW7BqET54VPA\nqfZfz2CWEEn6OonWgon9uBX58WQ1BqlQQS0FN2clJyscw2kJIezWIAC+OM+C\nYPQsBYsMkA78p9pA+nCUW5HcaBvTPVCkD/D6Djo9fFUWb1TAa7yfHhyhq4Fo\nBQEI4LzeJkMC9fBfo16WXfMQxFZsF3/+nbM0r3X4w1TB9Sf2ux+HidTaA/Cg\nt36OwMjMJRkR93ofr076kfzL3xbOCdAdVKzzajW44wPN7hMmOw9hME1xbFCX\nS7X7POxNTmy3Yf2qo1IhW4P2WtRw6l2perLImuKrUz+41LP296dk0LaVbmmw\n2QnFewAOm+pgkRnXicRBqCab5Pf5q9pR6N8i91jpKGQoSIA2+TId+FnALDT9\nedf/nZhOLE++fcD5l4nxKM2ndJOeF3GrgZNePIcWSBqltDiJSKFbaNG3H9e7\nYj/RRKLsxOdlz3zRimpX9LyFahAcB+ZJKnmE1Th8XR6817gBZfzAASt+U9xc\nL/oI\r\n=ffTN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/shape":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/density":"11.0.0-canary.dc9c84023.0","@material/checkbox":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/elevation":"11.0.0-canary.dc9c84023.0","@material/typography":"11.0.0-canary.dc9c84023.0","@material/touch-target":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.dc9c84023.0_1617126568650_0.7174984309808861","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/chips","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.56fc26962.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7205703eea36f3496778c1915fd6c0ae9122869e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.56fc26962.0.tgz","fileCount":157,"integrity":"sha512-S1oVAShi/rnCPGlGjCU8WbQ3tAKR/a9XAnTF9g2cdfc4FB0R0SvTwrDldSYzVjiPkvBzfR18/baOKd8FV0fRKA==","signatures":[{"sig":"MEUCIAn3W3dL66EziioRHssZg98shgscyZdyFo7fDFaL/B6+AiEAzMNoLz5RGFLk0WIH5MIcFTFOKy4LSEiYmYCNFMJxgsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8B9CRA9TVsSAnZWagAAVL8P/25BiHXSpdDNpSmuLzEt\nel0CKRrwJI8FtIw9ngXDbF0ARIoD1eQ8DsEW+JvSc1O8o5UPVNct93ayHgW6\nMWrylZjGdXXYCIm9U5uf9uAjen+cQOJEGbDLqPxVu2eAdF9dBDzAw9zjA66W\nCFET8zrwfGg+hOoMbNh7L36dMPlbD75CQKWIRZtcgRrB6Zg429RvVik//xV5\nnddx9sOGT1uB8q37DRUOq5WofpMNzhBeop65cNKivRxPuB4p47BFItg4YgeM\nR6uLdBl8O7QV7KLrLJugPlbursM3ls22P+flRBFjclriTE9FrTVHSfrb3jgy\nN9ZRJF+iO2MGsXJ5r2NuxfYU2ByK7hjYsSXznfnhCABNXITV3Z0lFuOMSkcs\nxF7YlwNDGW3WKi80Q4C83sWD6BS5ZM3xJ9qKIONtLq9guuEDkTZhLeNc1O0K\nJlzuRIg1mTQkIvBVoFERaSQeTD3Ci10FIUq9tuRV1iIp0mW4GEBvxpCN2ZE0\nHpJiZTmwkChpJFUnnSrE0ZM42R8sg3MDyVz+hCKzhXpRA6d8KquNXsNaFwG8\nAOku21pihRAGhsmITk7KZdXXEuEvE6m6wzxuEE0GrggNiNY4fXzXrPWgkU/y\nkSs8eY6TetWM/plYCLKOGEKIDdIk7tZRA2v5grFDWaZaO8v1Vnb33OhkmcBL\nbmVr\r\n=92ZL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/shape":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/density":"11.0.0-canary.56fc26962.0","@material/checkbox":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/elevation":"11.0.0-canary.56fc26962.0","@material/typography":"11.0.0-canary.56fc26962.0","@material/touch-target":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.56fc26962.0_1617150076892_0.5522731070891003","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/chips","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.bc318250e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ab3c4cb87b4dd1e2b1f251a07ecab4cdbd20dbc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.bc318250e.0.tgz","fileCount":157,"integrity":"sha512-KTwTGK/qS79qXKJdBSnTy9uLKNpa3PYjHo11k5AIf+ppNKD38tOXqlLiltHsE+9Ns0eFTfnAgaugfBu6hwikwA==","signatures":[{"sig":"MEUCIQCTfY2/c05TmtOQj3HOU67gUq/IB3IoySRLa/tTt4zMCQIgXnkAhRGeeFLreJNxDpp7YCda5BqyA8qMF0ydBs9tSqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9GWCRA9TVsSAnZWagAAM6YP/ipZW9mvM6chjj0kPjhw\nVrid/AAxo26VmQc4s7zL6z4r0eTVO/mN48Psg+OXMXrPED0IHDt9/znZN7bu\nRnWgzU1yQJR/n7qPO+qpSmOTOI6fWa+49IueSDEEzvZ4dwrtfpo/WQ38t8ft\nuBaEi1yKW1TBLtEd8ozV2ottpEPbeptVz3fF4nVbOLRzrPY792NsC9K8xTkp\neNhgFFzWDPjRJU0EPg10WV02PxyuQNvm0i9gU5PDt7qVJfNlahZVs+UUYYsy\ntvHMXCCnDN299zgnotZPot3RXnSZL6x2H6+rca1s1PYplODaC50ilfstH3+G\nhfW5+m4x5KrHDFe1i7ao4dWGp/pJSHIgNR1kxx2pBh86nYPq+xT7kg2DjNpQ\nuXnDwAu4EY5PfPBTadKGkTl7IW9ATl/NrF1wF+c7/VZvDHSj7KhQr1hxdBez\n3/f7ZSLBxMgX7oWfF7fwTJTE8aLDj5KBnwHJ1ql0H6jSokZ7KzV6cFH9fMt1\nEyRdAWYQD1Ozt0WBUqBWc0PsvI4yzP7IiglGBXbnpz79v8o9yayVHcRiJ9a7\n9yl68snr3Qf4uTlC0cmBu/fGpjRFqOybE8nI41hknYGVBFCs+V8qO0c6Aq4U\nfeDP3TEQo1rVi1BOR0fgzGrqjHZv3JZICt/fk/z7Rxvq2shCOBqs7dBNUDQe\nbpF0\r\n=yi1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/shape":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/density":"11.0.0-canary.bc318250e.0","@material/checkbox":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/elevation":"11.0.0-canary.bc318250e.0","@material/typography":"11.0.0-canary.bc318250e.0","@material/touch-target":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.bc318250e.0_1617154453716_0.9945551690394048","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/chips","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e74c109144a4526015884bf8994e8deb86d2ea3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.edaee19aa.0.tgz","fileCount":157,"integrity":"sha512-5k8QoxowQoiitb4NrhSj28HdFZHAS3o880UhO3xygRyU/+NVzTTbMsN4VtAQwVlKiyDXgpR2ug/Iq43ZnAJQDw==","signatures":[{"sig":"MEQCIFP1q2yVzW2m2j8lQ9mvzTC5hXpVCcSpvGAM3JZtEsbWAiB7UXAlRcDuegoFO4Ooy+AQukPQSDxGyYrvF3iwK+mP7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9qVCRA9TVsSAnZWagAAbs8P/RIoykG6+5bTyfgmzpMt\nywf8kYQxRDURbVyqeKm7m/LpknqWscPVh1SYllZveZ42dxP1JHJMlJBLjBFL\nfIIMwXEeFxQH6iDgp8DadYeYRPbrjNxgVBYK8nivXw8/2kaUaZ4gFzVN+1Pr\n8LXp8limOJDi9KAKElJ0PC0olSAgg8qQEFp0sPo2exlrsmB9KSKpsJ+TerrR\nvKAccJc8MwCMEda5jd2v6UkAND4gWzcKSh5xavmhpSHjjhcVh36mNPWqJOHG\nFSfnhsLVZl8FreIIZDHOuiD0xorHSk5/0LA5/x89o9d/bCXIP9pNtKB2FH7P\nLuV5aq8FbxRElxeJSXCx5Si2PXcsBGQnEIVQetZmpplfnGYfllSZKl/js/2o\nWZipUzjz6ZbbLd90NfZfufYdB3iIbdQiVq5UbiU8+eO9jLz8GxZnILkwUJct\n3MLN1p48nHWL3NethNCMX3YP34bWqsawHMAx4xaMMRWKyphlGTdS/i3CgcFS\nklpWkE+BX2XhEl2wH59FL1R/R3GW9oP2yjqLZsstE+dc7arCZsLfjt4NnPD3\nV88q6RQeVc77wlGEcoGyxLgkGnLoy/gL8n03d+oMm/228sdvMzuB7Z0WaRB7\n4RuZEY+stYR6UnJtD5bGoxyS4h4mcNmJWOztuTD6aFUiYWES1cc4QE6x47eh\nQNEe\r\n=7sV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/shape":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/density":"11.0.0-canary.edaee19aa.0","@material/checkbox":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/elevation":"11.0.0-canary.edaee19aa.0","@material/typography":"11.0.0-canary.edaee19aa.0","@material/touch-target":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.edaee19aa.0_1617156756637_0.4352902516134711","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/chips","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.24609b822.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1f2180e85ea3ba387f55724a8d18f8f94f289b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.24609b822.0.tgz","fileCount":157,"integrity":"sha512-YDv8WdyPW4ZCkZ/OwZWhCl95VK52sJYYNVUtp1iAflj68jOaZIfUl++ji1D/gUpBc0uUAyC1syTbN3jBiq7MiA==","signatures":[{"sig":"MEYCIQCLB577NzFH5UpoAnvybItBfdiUt/GnZ4pUQWsjrRUFpgIhAMb1CKoqH4Ao4/y3uJ2hZl1iFKPyYb0fqiynEtuKpw1c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJUCRA9TVsSAnZWagAAwJcQAI1MXpAOqQlDYYW774PL\nIEbMuAdc1hqfjMTVt8djprgmJSF/0P1vwswfzz258n+3ZiXgNILugmPSH+s3\nsjJpkEAWuz6x72bi9fNNLzbRXOFL7EgYtPGZP5htZ7I92NrYIeWDP2djVtgQ\nrL8+QTgARs/UFycPhB+AWEUb/11xh8CL0NcH3716jd1O4KDbW1L1qaefynDe\nlKIxQY+TpmLiULlG75Juk+U0y+8vvGK7E6gMjE7eO3uHMqGs9IGkxBj5o1o7\nKBeELjGS/ZWSkpHBYHi1ezZCnvBjjdRDoS9w42lbtq/7eGXsIjY3PQRpanGI\n9o2z8XxMSxTPUKZVSdSjTEZZoNr/yywP7iELEiQfmiB0pQ9uIIYwd8PWwAOr\nARhwmzSnlwH5/TWha6MbVUigWyRDIDMDn4N0QnbvXDyxCVQOxuZ0BBegyQJm\nnHZ8/6LXrBz5fxuYLnZMuZg6Kd2g26q2HFEkhUeAArFEj3Zj3nIRkav/exjM\nhIFwg+1qXvY2pIEQLpUp/CgDaABd7wtB0xdriPbowAAqfN+tC+6GUiDbHseW\nyS+Ly3Eb8NeF7kbH2wqGIkPRt0cnB9fLDi0nZsyTVpUOkHfZsW3TVMvXx+X0\n0cboee1mq74Z0RRn2ddU629hFocxXmxcxlXDrxbij51CgJD6egm2JMFkwo3S\nU/1j\r\n=UVFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/shape":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/density":"11.0.0-canary.24609b822.0","@material/checkbox":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/elevation":"11.0.0-canary.24609b822.0","@material/typography":"11.0.0-canary.24609b822.0","@material/touch-target":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.24609b822.0_1617224275460_0.176012274721713","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/chips","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2de65348e34df66803721bd7ce9fb1cdbca37036","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":157,"integrity":"sha512-npg9kadY412t5ziRv6KAAu9GWn0tIzS9ER8Rq/J4ZECB3HTg7fkiarmF5bBrSMWCpMZpIuKy1ZDD6HlQ/bzOgQ==","signatures":[{"sig":"MEUCIQDQmdguNOphTFqR0A74c/VtaI14sacXojlWWeKAL8YJcAIgAZQwNJ4EbkUhtIX1dYFlPtN+0x2mRavEOBETqnym2V8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeFpCRA9TVsSAnZWagAA3LsP/jaRgNZS/DPmJTjOmue/\nz5P9TklBSayiH/ADRnA0MgImaeIzkzT41HeOxi8cGVU4fBzyWLEdxHHuyH4T\n+G8wdTZyuUEsjVFgAg1OCZe/0G6t3M19wtFPcz49qoaGbE8+HJVpG8+Mrlvx\n4lGJcqvSwXFjKWiusVE6TfkWsndjWJfrh0tmdUnpNTQ9mHj5pTDuh73/G6D7\nWWRvP61oLP59kS0PXxm5IHtS5kesBF0W5HhhdPWbeR9rHKWAPPvQ3jferP8C\nZAPKbkydkKFfmTuVrlFUxy4M9Xmi+pSBM+LKiVjV7PZK3iozgnu5Q1/pqSYP\nzhTnuXkYB+W3o6vhggdhJJzO9hEDlmuQ5VJ3sDiu6CdU7yJXChyV6bMiulxo\nMGqhPZ38RFE9KOoHgHbvxDoy97ukUZHCRJcrJ3T62L3GKd4cjngPhivn4i1i\n1vU/trBtsOP6RTD836aoif1lxHGFTdAVf5s6AtwllApICnIZMzP097qGgLFW\nKh3LzY2vHsGEmUw3U2BqoxIHAyAZvVeSZl8ASKk9sisaKEq1HrrMKJUbxGsY\nCPfpqOfv0YmOx6FtFY9so/UbvPTDUpPhC+VyBBm63kGGxSKul7ngjj4CqQlT\nHAVdpYu1rcmHGhvd4P7ylWtUzqKMUFZir0jkTuX0AhVsbkz8JaHiThy62Vwv\n/l0b\r\n=wz2F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/shape":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/density":"11.0.0-canary.b6cddc2b7.0","@material/checkbox":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"11.0.0-canary.b6cddc2b7.0","@material/typography":"11.0.0-canary.b6cddc2b7.0","@material/touch-target":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.b6cddc2b7.0_1617289576689_0.13546877917008104","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/chips","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.94937c78c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2556b0926092b444aeab2fa46c3bc01db1865579","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.94937c78c.0.tgz","fileCount":157,"integrity":"sha512-54P0dSx6tHd2z7vauQdSKKF8AMf7M/9X9/DZWKAhrfb/utiHsYweVvzIjhyTCLxRCbGWCM8KSOzYoB/MfTFxQA==","signatures":[{"sig":"MEYCIQDDfjwa+6/XDQUyO+PocUjtwhv/5wKZS6TAENXutgAYFAIhALS0rZZs5Gl00yi214XHAHbMMYRzZK8noQchDOxTOLdn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjSgCRA9TVsSAnZWagAAZ1YQAIu89HctpgFdbT2GxCER\n45qU4mTeDyHdj1syi9ha/jQymsUmq7Yevfe2nw4YqiUtSWlaDkJYf9PqG/dY\nPagetCvE1GR4P76XvG+z1gj7b2zZGgURaesS28ssPgQ8MTuvYGX5Xm5d8wcg\nfohqiEVJEKEU93woIB5DreQuE8Mvvc8XI7LYyhxZzk4jAa6i5SvgfqT4SZkN\ntncmMNpuHEuov/lOPVogUnl8cJVBmA4HtapjBxdpmwNV/EUZdIgIIB4QKJpr\nsG32rdsAE2naJ9Vlus0Zx7ADZ9SAuiIsagBPPWfD1rJoOdGm03TedLP+R715\nNd10zeBdEmnsnnneo1YDhEZOCXwBXe6TjXkfb5ICRE2PB/MemvPp1xYYQHtf\nXTTHF2DWZ0wIA6GAXlunzFhtngu2XHwH96mEfkkJfr9lO3zNpvZdaUyVX96F\nSVB1UJFfeOu83G7gmcV4G1r1PZUbN9KoG6/FrHdwso+XcBX0j8LGJdA0KYGu\nG4dDwpkYZu9KZ8BbO7zHLJexFO8VNpeWOtmZbKU73HZQBvmE0y+nsiR21rur\nKFapvtSuI9JW7pXz4aHWsmqE0ptz4/mgQ2+2/t2L8XtzmuaMRIciX7gKQEpl\nUa7Gq7eHnvKmbUnxKgD4dTRbUODEd39HT5bNqsK+eaw5Ir2VLfmgkYB06Z0d\nm+w6\r\n=JNks\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/shape":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/density":"11.0.0-canary.94937c78c.0","@material/checkbox":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/elevation":"11.0.0-canary.94937c78c.0","@material/typography":"11.0.0-canary.94937c78c.0","@material/touch-target":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.94937c78c.0_1617310880231_0.06203231125899511","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/chips","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36f70171df00f4cecf960db8f71fecad263a6d8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.e7202cb57.0.tgz","fileCount":157,"integrity":"sha512-XNBMMibDLXHOhJpwjziMyC2efZHQvz/0QPxToeU5TMKixjouKw9usTOYg1Hbf0uUgisk6OlNqfTLZUxeaIUO3w==","signatures":[{"sig":"MEQCIH6KlTBfM57dPoapYIs8VuzhizAO+uavQgjn/ZIflyOAAiAA07y7xdJNGCiiwOaajAxLjYicqG+FyuajqqrRHJ57lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk2TCRA9TVsSAnZWagAANQ0P/j+KZh+CdQIBCkQFxW6+\nbrunXWfIZpHqwfWxkCifVNAu4lHOGRhGa4moE/zsgzx1SaYZ6y8YbFi2R9s1\nG9OhqTjT+NUl9pHHfhkdfqwhXylgLur5ektTUU8aL4BHk5GIfgQgjCEVJOe7\n2nTiwfbUsTtOg1Y4tQ934A1k3nXbbiivkbvtEM6MqhpqsdjtmeuxBkfEwrTM\n9t4CO4vkg3LsEdkLk1fgsgj/aHM9jzL1SaomTt/8Tf7Piwo78yKnHmWJNHWS\naLUBSJb7U6PKbPSPTEgbXPno0tjGuIaHi0q0JHqGKxZLmq0y9fVEzTecMkIf\nkvSfVJbCD9BG3e6TOGQ7vBPmSUO/ypaLqiaQiWisgyQIKI1FotCscTBevo6n\nvD/jdab5WRgzC4AQW05ivFUcAbMteJ1/HiRahb7N2W8fdl0IOQwOUtPsePI7\nKfZ1DFkl0sN5wqe04E4I1zsuj50ko5bPYW/Bz0bmFw/kHLcFpXqftXcnpIc7\nE/IIVhTuOOjb6L4FwJC5BFW9XnK6LMWNaRHPqiAsQAf/isbCMQYXePmnwmLZ\nz03Brp0S80qJkiNh72PF0oyZ2oIdMUK49+HTRc5w576q42r/TUpKOXfTyxlI\n3HMgOp621Ram0wGC98smSgvJsrmYBe4FARZ6zjVZRDczkZ1XgmRx0lDsU8n9\nh51m\r\n=1eiT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/shape":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/density":"11.0.0-canary.e7202cb57.0","@material/checkbox":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/elevation":"11.0.0-canary.e7202cb57.0","@material/typography":"11.0.0-canary.e7202cb57.0","@material/touch-target":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.e7202cb57.0_1617317267053_0.9273379216838222","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/chips","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.1f636b205.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82f9d8fec7324314c76278c92a59319677001ab3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.1f636b205.0.tgz","fileCount":157,"integrity":"sha512-2dktDB+xtMogWhQyVfS8gH9ABxZc6Nlkk7qhVnuUpMo/uDTZoPvNLUx/pk5IlZhmi+rB6tzFgcRkcGMJf1OBLg==","signatures":[{"sig":"MEQCIA8/u8DNyNRzphneMcs2ohBRNL3nzIvAT19FYl+z9QVvAiBqzTiOB9+l/O++Ij7hMGmb0Q1Hx0yiO2fFMdSmaEE2gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5mkCRA9TVsSAnZWagAAf3gP/AmRWN1OW0/uU+rT8piP\nho/8DYvgzawqIyo+5CikS3TvLQVg5FO89jsc7c7d98Pk31Zp1syhQJNmnu4Y\nJdxuKKLEkkSXiYdT5r6YjmM1vQEwrOH6aiF2Tmr+Vw+1h2/sE5uskxAS9UYW\n9p3hja/WFPPBnqpB78Xyy3z6Wr9twfGdqlUei4vlWIZFJaTleiF4D+5yTs3t\nxJhpiKltt05U0mZz1qUdIji/JNwlDc+k6Aii34rNLOAyWe0CM6vdPkw1Scw9\niNqM29Av2rr0ktRXnfg1IEXxhMhJclG0ToGY4OS2etnbPv3TZuThWr6bNjgO\nMHa2bT/P6bHIoitmObyUeUI606nrzDKON26s2QENnqRqaZts6+Qpjn/aylbi\nh3b+GsmOW89dYGNjBFjg3IAfpc8h5mIPv/U5ZUecFRjQkB3+nTiHxAMT07kk\nKeGQAzN8b3w4X548pmozEiWi826J9HUKdNnFAMQx4vAolqSxfHixt0squ4ov\nwZUVZhAS3dOvbPEfsIL65Vav9cyMFnSkHC4vG5utPndwXcmFpVS3sM4K0fBv\na2iSPYoPYINYZ2h9soq/h6/IfMmDDPSvtC+DVe38dGiCZbrBdiy8+fi9GoFL\npmuegGjpCr2c6IU4F7EiPzh+Sa6ihohI+YcCIuxinYCy6gjUXrMyBITk08DR\ngp76\r\n=Rrul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/shape":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/density":"11.0.0-canary.1f636b205.0","@material/checkbox":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/elevation":"11.0.0-canary.1f636b205.0","@material/typography":"11.0.0-canary.1f636b205.0","@material/touch-target":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.1f636b205.0_1617402276312_0.32769195467949985","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/chips","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.94f50b260.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"254987fc2ce1a6528b782299d1b48ebb5b9a2390","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.94f50b260.0.tgz","fileCount":157,"integrity":"sha512-bi2i6SUHEmfOV7FvQUPWr8aKMn30woa/P9oRjz/0XDe1+SLMFMGGSz6Nd37IyxOcH3fwmg3fQhGM3wf3xKWg8A==","signatures":[{"sig":"MEQCICfLtZ8NbAhlcmwPtzr81SQio1Bwier4LiKGS78i+LX2AiBivniuUo+eOyFGeD0+ILZ0UHNYZ4of/pip7SVJh0vnBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydbCRA9TVsSAnZWagAAQlAP/iwlRCsype5E607s7/n1\nwAgiwVd1cKilhLuwUEAKJx6w4wJGf5oAP7GoGEpM1yt0vj7hdsx4VII4M+cF\n2VuQMG10Z60oZT//w28oMCu/gVRA/iZ9zing4yUhk5btZlFCDRyQHJhS2oko\nyLIfVyDWn82UB+DC1Ijh2jii1qDMIh/eIzzH2tEe345fy7Lu2sPoaKDAJD+0\ngmaHUa7vNTRCipLpzXtR5BhrPgbXgima6B7J5PU/tw8JJM5KidgwniItHDVY\nW4aTtnCOFqc3fYsa/B8tHVcG4DEvD/SNY4TKT/piW04G/wDZ95R4rySKvu14\nDDk5QmN2sPr9suJL3Kkiz5/d6u2NA+0DZdSiqyeaBgTkrnDddP1qSg8Iyy+e\npjkXZ+pjjXPR1OfK5VswsUVhF16ybF2d3UWImLwb8Eln22chv/W5JkTsC50L\nUm2Tw6eVPTrDoeG/QlC+oOgb9C3I1ELTAF93h8hBRoybcMF0hbmqwzxyA4ek\nLA04IW6GU0xHUlp8NMxknppqB05MTrcd0QzEVfTIKrX3hQXz9dGFupfhIMlp\n3bp6vzMAo2QG8fTcfMGY2LU7V592n7YUz6Vho8Em82R6R460OX6LUW0Aptm8\n5BXISsDIYMBvEtFFrFR743+PHXtjOA+9DrP8ChrmD9feFm8uMOtjzRj9wG2N\ngVHf\r\n=JdCq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/shape":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/density":"11.0.0-canary.94f50b260.0","@material/checkbox":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/elevation":"11.0.0-canary.94f50b260.0","@material/typography":"11.0.0-canary.94f50b260.0","@material/touch-target":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.94f50b260.0_1617635162685_0.5983576988802777","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/chips","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77a3e1addad8f16c41613b6365e751a04f0779c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.a4009b80a.0.tgz","fileCount":157,"integrity":"sha512-L5lOeHoRLcExMPcTy1YiwvJkfts+0v/r3Zsfsp7G0BKsz/lUBFjSd7KyrfQmdCOtQ2B7/VuUsj5MEnRuhyEzzQ==","signatures":[{"sig":"MEUCIBkfkxfDxPz5yTi4Qi5K9wxgmRKny0ToATaXDkOGIDExAiEAuwMtjJBC48SXjPh8es/c5rEyHzTr9eH7ZBOxuYcAOaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4i5CRA9TVsSAnZWagAAlL8P/i6DT4JBxq8lYH2zOZsP\nniO4bqlkjj9owuLH8kmy2RhwTZBepyv8xZ7g7f87bJaZWgDz+xvxCQ6EwDrh\nZ0VW81qxx8CKrgE/YZvcLktdmD9ynCb7xKrRfENAHTm2e2F0VHxuGZhsG8am\n1hgmiRAq7Sm3MZw7ShBhgvmbZAGqFsUJ/gO3mu8R0bfnqM/pMyW454g4E1vM\nticIabQB4MAglc8YT40VhAbgj+eIUGOC0ccdJ1VcyEt1/5YJI5JevqbK8a4Q\nTVWHU95tng3kBfHgwtoXoc0qapByLf+gABfvKHvYRP4s0qyTPwHN2ulTTg4f\nRnvJeAMMWkIdZtbDq1bjuAVrrvPxCCPNf4dhqPaqEhsvCbRnRtqEQjTCngVp\nf9kLpKl0IT8368KmzZJRF2LoCUWHSTlkf67HDOOaECXsU4d4q4EYQ7LY19hw\nGbZZirC6BZv6MpJMCdF7iDuGdAHtHYnT87alxTSh9qmLKmCnvEmtzu8tPEKw\nTG7FZExRa0198oCyfc96ZmzTaK8Ww4dht/NRQ3nxyflkVcGf7+dzlbr8MVNT\niimbza43sBcYDsf8VzlyNkHSgYd6obfiTD+s6W1eY40iUWKDM5htS/4TfIZs\nMFiFVDyhfNEgK7pCOpestoZyRIcCzLQIaSDnV39tU2bqq4QAk0k32qs5Jqs8\nELSU\r\n=SM/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/shape":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/density":"11.0.0-canary.a4009b80a.0","@material/checkbox":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/elevation":"11.0.0-canary.a4009b80a.0","@material/typography":"11.0.0-canary.a4009b80a.0","@material/touch-target":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.a4009b80a.0_1617660088844_0.9734734368879236","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/chips","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f15682a09490b35a82e0d2f9a8ef811926565da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.15604bd0d.0.tgz","fileCount":157,"integrity":"sha512-PHTN9yV1Wi797Y3lmwWEq2R3jVILShJDua/mw8HEBGu9pHpPDglNkVMEYgtdepjjLK1Y58xP6ymAnCgi3mkbKw==","signatures":[{"sig":"MEYCIQCXkuJhGN1bFq65v0NUQHePHA8Vdys4h3BMbwTHL9vNpAIhANfWvyIjpFnEg3+Ty13Y4vmKrCBJJvi58ZVX2CwYQqx6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5J7CRA9TVsSAnZWagAAXuAP/irTJZ4mDah21JKwBM2F\nnZeeAjOxLhhj2vulY9P7ZEh8CwRy7p/0J0P3P5pJUgkIu5KvV1hkgGZDaWpr\nRH9waqyQFm21IuCPwH7E5LbPQjQWBCUQaMpRLj2weiIkO3+cxSNb/XTxSmmR\nzysEUuB7EAkOfXj5fiqGapMZVXxX9cNvqNtoUKv2BZKzG02cpCVMmx2FuB4D\n5j8Ra41tBa8C2QFg342XUduR4Y9azdTPY2W7Qz1XbnUA09gvMJrtR+R5oUvr\nWoU3dHC/D+rXs8TBtyReeQs8lnYvxaxnVpcqP2EoJ4So3kqh8ovfG0ofRIDr\nhUPQ4TkRQOMW2d0xsjRl9vjAdBZ46t1fjrj6wZ/g5LJ9QTa/gPxg2li0IBJk\n21x341MduqqSSh9Vwji5+WBL+4M9jeq2++YHf78I1vDx6nRFu+EBbf9f1lbf\niWfUrUTc7rizU6VvzKVNWQvu8iWzvlMvqrgCbLAwELDodcdfmn47HOH2++/1\nzFil+suShsZU7xo8AQgLwZaOVBV79/hGrhD4Xed4nqZxcI4jM6nDe+KelyMa\n2kTcIYpMVJX6BtUNOqAKTklo5Q4VAuPm7hAQ275EBBqG/euE53XUUH6EbdGJ\nLl55a0cfJrvCr1MQradVp8zmnk/1rSxZPrCdG63Qvx6Q18S6T2W0QYqNMwX+\nIz3u\r\n=GN8/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/shape":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/density":"11.0.0-canary.15604bd0d.0","@material/checkbox":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/elevation":"11.0.0-canary.15604bd0d.0","@material/typography":"11.0.0-canary.15604bd0d.0","@material/touch-target":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.15604bd0d.0_1617662586620_0.35453486402903733","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/chips","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.76da7876c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5150e382c2a872c732922ca3b263f64ed2cb5c94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.76da7876c.0.tgz","fileCount":157,"integrity":"sha512-LRBFdaBoufGh83FS3i8utPrK49cuU5uPI8/2loll+KfifNQzWZK92oAWBTpaDhQepYiAWdO5mjzJGePnxs20cg==","signatures":[{"sig":"MEUCIAjClM1AsSvdQumbKKiNuRkAZlUAlWyBU9RdWeZ2VX5wAiEAyWuNZpkfd1le0iUa+xytFxwE0PiAQ5iTIrh4udcyuGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ7JCRA9TVsSAnZWagAAGiEP/1KYCaLD03x83Hy3AC3W\nXCb6cTqChQvc65v9UP1JF7U3aLWCQEEGm0IM9M70yaMw3XIatKAY8EZ2/27n\nJ1m0pHKvm/BwUlsf9jQk2B2BQqYZB2PvWZRQ4jhGvnhoKUhjd8OgASYgiT3g\nqHAXcVyutsG1pFGxBoJdJbikFTFN938IOhpjroeP9KvbQKg1EVvWYjfAMzQe\nDYYTsQDQo5uH/S+kOl5I29MEKcqpMcDZlqCwwKwjDn/BzAF6pkgiKY4Pgq9B\njzwYGEnpugu3aegGOQARAbNHCgp7VvebIsZHZAzKE5q9BLvznp1l2McCeQrh\nDP7+YBGkTW7lOIR53VavDq9fh8GYzTsOlJGyv571NMBYjgkS4I+TCHAWFcft\n4cr+PhL0JFNYXHYOJRmgq5wjHL5DtxGM2IlM0oCjbNzopteYqbsKgghkVW4y\n7G4Rya3UJ3b6KBnZMbBAZuVkXT7A3KpD0Dptsu55eSVWHNNshfqgZMrBMB0Q\nDsWJxXvdmzGDhnDMaVmwCS1kdQfQ/Va9g4LL71Cg09vSZ6Qo47ZMwY5wTj6h\nfZ1MvpDnIyhIFxfmZMA6I+1RcecjYr91ll6ou5bX2yebhYQLsPCMcR6ssaD5\nhMwihHZFzKCTQhNctfze7sGhpdNR9rhim5iK831MB2zzgIz0m/oBCrmbAGXq\nsjzd\r\n=Uhcg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/shape":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/density":"11.0.0-canary.76da7876c.0","@material/checkbox":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/elevation":"11.0.0-canary.76da7876c.0","@material/typography":"11.0.0-canary.76da7876c.0","@material/touch-target":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.76da7876c.0_1617759944603_0.15439514369477236","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/chips","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8efa9ba58f79d6fd916cf12c79cef579a545957","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":157,"integrity":"sha512-oXgrzaFt+kTugULBVI8Rrm1BnAcq3dp25sQKKcXPg4yZl0R2i/KSvL07/mKeoB3bLJBegXk2VJdAmgCd5WQssw==","signatures":[{"sig":"MEUCIGOWafcGadOOP8l/JIKUyHlwzqNWvFI7outH0DrvI35TAiEAq7PIRQmBw+pLG8eXTZ2I32sb66rCqxl83eAULcIp1CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf/cCRA9TVsSAnZWagAA9/kP/jlBkxxO+1YGob1YarV8\na1Ft88ZAB/LEfOsbYM/m+nxxoxF7XdXXnRZWFXRMsnP9saBFJUnI8DOvFZI4\ne2BzPH96FKwOvECUqKLY7ds0OShLAw1mEr191Pit4/7DIhxnXPAKDaaEG+y6\n5FC6kOY3FzWmTHH1iYwmoOf8FcFWaWPDmzUj6JrKN90jHEuFbZSbm184Na8p\n9E9l8LHcOG8XJD24zcoHRy21yRDgUDKTYAs9XqIp4Zj7Sh7+U5Y86f5NXgB9\n8GXn7I9zdbTmEQfM1Vg1ytoZLuwaZ3GTaz5wBbqqBLtotpKt4yWbmGHEcA/y\nEDS7XyhazMWPaxEf0K+/ePshiKrCHA20x5Ss4WhbAag/cFrGQ9aj8eCjQLZs\nBTEGlbAv0gNBY5Ava2e6qvDb78PdKF/p8sgSbLalM74qtdw/z2KBrvgLT6NX\nAEdRcMv2fvNVBZRvUz+3+wbXQtQU6OP0Y2q5gWZOYJ0esPOldM0mEpKH2XAG\nKu+snon6iniGg8TCsi9CSda44dyhSMjASMB0lc4MLncHapuve4n+23fDswGm\nqpB/0PsNezH/uiPBH1GexIqgK5ym4jL242YLbO6Xx0S4HabaJ8+1VnyGDatn\nt+bs6O7Sax3uk+u0D1YDo2l+FkptK1nOjkkfwsRXHvCSS7k81Nq7NpHz0QO5\nTvRl\r\n=rdDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/shape":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/density":"11.0.0-canary.6bcb6cbd2.0","@material/checkbox":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"11.0.0-canary.6bcb6cbd2.0","@material/typography":"11.0.0-canary.6bcb6cbd2.0","@material/touch-target":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.6bcb6cbd2.0_1617821659777_0.16240429441822712","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/chips","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d7f0e7894f2271bc225cc426bf99ac6b879e395","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.c91e8d141.0.tgz","fileCount":157,"integrity":"sha512-rEr06U6jVXgp06Al+VKw05rRPYWGrvviFy3CKMsnfcFX8Sm7oB48etGYHnAc5aGTkX1DuAXXOKQC7lLjvYe3dQ==","signatures":[{"sig":"MEQCIB23anMj5nFtcmGOYBPVR16hI0dsnGKHSgyx7GyPP4shAiAylA0mygNkpCtXWDrpr+hmeh3s9vB5kt/gtvirxN+M4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgDJCRA9TVsSAnZWagAA5FMP/ApHubUPbAXwrSzhV/R8\njmooJLB4rZcSd8CkR3rvjz3QOp8CpPZttX/QD1Q/NI1HN6gS/FZOGMR1Mbtw\noOQ5HB9p77Kast7pW5awr/oIZUrKkqzyOzS/2a9SBKjjcGi3AFA1xRrohVVK\ne6qNj2urp5mKrWYyR5uVz3hm+wtXSav3MdE1jPUdBA4VQrvkUwQ2E1BIS2WV\nEvEdNzNn4Z+dg0MRgJQg4r03XKvo30uMwCqC3JyyE045JOrlXnSE94kOIbXb\nEJ8IlBqozyRhDDmAykqNSDaaMQ00Y8P4hUdGcpBN9yiYp3ulE3BsBprnjK0/\n4glNACSEpRac8Gv27B/1ACsTe7+k5tsEd5ruZoGAmyJ+kKAR9sa34zhwz9//\ntr30tiJ2YSfQG5VNNW918khL/rJrnZ0BWGaM3oH+ePYCopMkM5i08Ofp6qZF\ncYukqHRd7ajTxHa91x27s3x9a5JtPx8JtFmmbF/ZnIA57nEJ84NcHl3tPJBF\nelLB8uaXcUnFkuZTpVgH2CA4iJVA2eLQt5PnKtJget23GK1xKkheD9XVYb7x\nSSBUlhNKw7HktfUDGOqH3YkmFMsFVqbHcpEES4DiAcLlLIUVRl21NcKG5sJQ\nM50h2xWMn4hvRlrE8tLlncUJJinOPBPv+CB1R5uCXIRThn5WRiKgwxaEVeBH\n9fXG\r\n=dZrZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/shape":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/density":"11.0.0-canary.c91e8d141.0","@material/checkbox":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/elevation":"11.0.0-canary.c91e8d141.0","@material/typography":"11.0.0-canary.c91e8d141.0","@material/touch-target":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.c91e8d141.0_1617821896783_0.5369767750600385","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/chips","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f77c50860.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1235d6fce62e72a2a842cc90d7a876959390216c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f77c50860.0.tgz","fileCount":157,"integrity":"sha512-PRcY2Og+ByxSV7meTwOfAIJICWKwFQz1Xt0O2ZKNuA6iLW316IijIhvmOWsenZ1n9tA5+oeadtqPhc55f5oOOg==","signatures":[{"sig":"MEUCIQCO5u/9pTBj7CBK6B6Dj+u8Ahc2hvPaKePvQIunDtg6xgIgPr0tOFaSj+nmKJAzoAOZYOpS7lUC28d4zw0e+rthnn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyMTCRA9TVsSAnZWagAA/E4P/3XCU32DvhE1+j8Bql8I\nAvVTMmKoQsgnqE0xZ0N23+m4SIQssODcGo/NHiieR0K4jHcNRA6KLvx8Qxuq\nGOXQxsliSjHkVjmKZWDPurTsHgGJ+Rq3UhahmQQ/agsvqCn34CIZOli1KTal\nQkgTLfKRhSlwQEL92RphKvrgFttCF/lojZyVhEbC80yXHjHjmytMHDMt+qPm\n7sFSYjcuHuj/p0jYliCCUFso2sOBFmtMfFGpneiCiIlX6hd2AEimNkQhh/ng\nWZX+Gd06QXU2/wqJp9vJR9SQkCY71yGK32mBBacEyW4sU9ogjyv5QAHJQnD5\naG6FQTqanaqMu3cmk6k+Cu2mjvJhKTTnMQWqYf4WJDLREbHh4F6ALfCPFkIS\n2IqGGztS7gEnkt7D8gGRuDMyI/SKFZRACy3tP3l5mUXDMsN747vixypIkaWf\n2PdxdiWGd6TunBu4jmG+hfR6ijCESmgkaj0i+j/PK+OuXUsVYba8RPeXmdWu\n35/c+hpVSFyptxUfkurGqTV/XBSDSF5IUC4+0Y1MCYxK1lhyFRne/HckH7hj\n9LffN5g/n6hg1KVR9eFZvqZnjEWaojdXmF9Uf/hJ5pBiIqXYPnsarOreMbp7\nF2wH72ltlSl2vAHdTRmdYQuchL+tf9qx4W9buFA23nsbsXPbvCzOBU3nnDLv\nMhO8\r\n=MdZf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/shape":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/density":"11.0.0-canary.f77c50860.0","@material/checkbox":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/elevation":"11.0.0-canary.f77c50860.0","@material/typography":"11.0.0-canary.f77c50860.0","@material/touch-target":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f77c50860.0_1617896211146_0.7157654361855725","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/chips","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"301f9aca73612fe021edda111b71c415cce38418","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.367d88bdb.0.tgz","fileCount":157,"integrity":"sha512-EC1u6l6uiUi9Iu3Yg5yz8iv5XBzfEWAUCRy2jA5sLB6ycAZsnNUxb8TPOuGTRkM8p37osnhQ3SmnV+yaxYCVhg==","signatures":[{"sig":"MEUCIQCFF4xk3w0mK+mkLmtjKfh8+Znd+WjboLPsSypaSDlLgwIgLsAYIlkheXPOosE5Cn/x5yQNC+jRN8w0imQTWi7t3ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGuCRA9TVsSAnZWagAAXeMP/0eCdaQ2zfDxlP4p0IK1\njBqu6iTb73RCoF0SlDYlOeOahqTg6TX9IphRUgaLl74yHd7yUfnFytc8Miuj\nn+cdPKX4wGcjicG1nTTTL5Xp5nbheYV2RYfXFnrxIoC2aUfdvJ7Vpm1EUKwa\n0Fwf2RkASbfsyBjy9Y53uxCAece4n+IZ53yEkFgaJe0BmRl5cfmdPMn1AU1A\n5Xxw+URAM3zpVDDqKbuJbad02gXaApO/PQYnE2EYbHtgp5i/7D5F4LNO3nzz\nIwSQZ3Wd/GRX2EG9cD7R1lSdbQhTIiyZHYhQg3bpsQSkrkyJjCKqKDFkU+7P\nzyIS2T9e933bW5tBwBm+Xs+y0gpZjd2Gg3ITBSwx9NuiTy6JN0+dG9ShsIf7\nttNnDm60BhylQA8m4orHwlWQ7BjnzStxr406HEIkjKxcptQ4A4dM3pR4SEHF\nK6fszryZsmlDHc3SVulPQg+lf/w8d9z0hpHpUTxHLbRvhgNLIlHAkC+qofAt\nH7KezjJtn6y/O9Pv7GmqXkCce/0dfoA++yDwwvf+1E6BKokPJVXTloCD5Crv\not2bpc2tNbByzmLi44lH34qjpUwd4tCesDm04RwTDkKjd3GuIO7e4gYmHNYj\nrrNDWgK0AlLyU8F4GaqiogJJsxEiosH9qrOOnSDia8e4jPsextFqoHWr62Zw\niogf\r\n=NgA8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/shape":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/density":"11.0.0-canary.367d88bdb.0","@material/checkbox":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/elevation":"11.0.0-canary.367d88bdb.0","@material/typography":"11.0.0-canary.367d88bdb.0","@material/touch-target":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.367d88bdb.0_1617899950456_0.3367778110200892","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/chips","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0d1d0cba9b39fd7f6e78a46709ad0ac0770c2ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.0ec437d3b.0.tgz","fileCount":157,"integrity":"sha512-tFv5dA9j9D/+ht9HS27hLocmIhYlPZYFe1j/AqvS+5a5dHIz9ydHup5zjI3mV+pJrLXIa8hpZqrzImsIwYA/8A==","signatures":[{"sig":"MEUCIQDlmQYq0vrDlurIdNGQ2LFFkdtHZhNPNAWrjZ4Y15jF3AIgDsFM0LVqW/v6CXQKB7Ayk/BJnitoDGV59WxNbm+fKUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1sXCRA9TVsSAnZWagAAtAUQAIh5vl0fR+aaQZfSBNAH\n6TFSuZud6U9kScZ5tQNPz+S2LTx0u7SeyFKao3iQtdKjM9WBBPgNl/un8Stt\nvj2/t4aNcMupkpdj9PJO+Jzwqj/2iPHQ/cSPCSyboZVzapZetmaCQDmF3ut8\nF004oL3Gv95McSDtaX14/YTHNr6NqiirmOepAtu5LW0rzhuT8JQhqC5Ho7Qr\n0p1IiCiZhlpbidEX02Gkt91uUozGBGdje6EmVVd3GBuWjpcFgZjLRFHyDvO4\nDAvBhev+ewUXoEePWXGbwRlrghH9C+KnC2ypR99NcMJ31FMgopw9aarndFOi\ngmj5rgYEoSekjI9/p6HJypSXN62Vms1jsTeiLllSFcRerSJ5zmlx65YN409x\nvCNNyjbFBMYsZzQUcSN2J12FU2/lEShTgBGSsElaGxOxsnCtiisp0HcTG6BS\nrr0jFljr3Wb4zmklZTdWOHo/s1EAgUXeoJYHHvRrVFtjvciPRVcaj0uXOvV9\nJxnrDZamhkKCn4ApFHl557IyEBlZk6TnD8q04o6peOaX6iUjswW18HBejrXO\niNs5vPgaSKSc6yXFsgNvs402YnHSfM2+pCHJCFTmywVVIIfPEqrtYK6xhp70\ntdxvklAmcHLo0KG92762thqIxPXJ/MM7OiimfV2gaB1N07qU6vVECOvUqVqJ\n0kvv\r\n=E/8y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/shape":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/density":"11.0.0-canary.0ec437d3b.0","@material/checkbox":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/elevation":"11.0.0-canary.0ec437d3b.0","@material/typography":"11.0.0-canary.0ec437d3b.0","@material/touch-target":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.0ec437d3b.0_1617910550659_0.1969440920002894","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/chips","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe6059b641b10b22d8cfe253dcc134db309cc99b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.b2fa996a1.0.tgz","fileCount":157,"integrity":"sha512-JZYfWwHFd9oOMYRSd22/0taG8jhQZ3F9v2IsOpe3WjgxZbE/fsm620NxVzkJd/1lmJBF/xPdrUnotBQ6vk9n3g==","signatures":[{"sig":"MEQCICSCAb2zJQFyuFc0Xs8VW5bz4CeNSzB5d636KgLScTvIAiBiwbxG786znNM79bP/RAH0VluweSPLOsPEXqCpBD9XQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG7FCRA9TVsSAnZWagAAzBIP/0igHP9gW9+stNtZYRbm\n8K/ZrGwsvsTp7iS1V+gq3rqBgZCZb+Z7bfamCuUP7fKahKq3vpbfuVzzvTaj\nLuohi5gDOXm7OG2NKsR2kkz4607rTyC+0q0DRcsvUzYKsyqOv1mE7v4FJDT3\nyAkXZk4rv109npfe5XZQnY6PAK4MuyMiiL1zflmQERltavDqIj9GEnrTsLVm\n3LC22+BMyTF0jQrTezGAUoQESJHKC2i5kA52IGjOK77coDAqhthznTUdPz+e\nfjNRxCUfNepSmbix0j3vFhugoQMXDGcX0VpD4Fmm+Kgn89qbkPYQl4xtpaN+\npejB4XTglMXr4EKjIsIrGIG7WwY+zH8cJcTrDshR6JjAq00ZuZOMI+oMKR53\nuEpS0kNrjaLSjGFkPGGm8Ug2PpkLXy4ENF7rYHxYPalmAaEGH7NHeKFtK7kz\n/kVmnFxNkxtjXT59dMDzbrXmJd52CRyZ8fWUGOjG/pnmnDj0X5zJXQVE3f0H\nsU90BaWXWSJ/2xiUKQU9QqkQHe49hRXs/qOuXEhOPR6GzeWnzx29swrQ1GK3\naozVNecbanoNDSI/Hk4kEWfYn/RQUV8bZYLkUjVjYyH9mHN06D/SYkq8hviy\ncOb1aEZPaWvg7I5dzzB7bz2jMqYMvBiHimPe8hZu+qdx9a9pvKsXAdgddf3H\ngjMT\r\n=hrTB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/shape":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/density":"11.0.0-canary.b2fa996a1.0","@material/checkbox":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/elevation":"11.0.0-canary.b2fa996a1.0","@material/typography":"11.0.0-canary.b2fa996a1.0","@material/touch-target":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.b2fa996a1.0_1617981124783_0.45324382156736975","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/chips","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.24255c408.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f23390865c37d03f2e179a9f2eaec6080be6b2e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.24255c408.0.tgz","fileCount":157,"integrity":"sha512-ZtVAUZ4cSmix6Gplu/p8uLWKmIdcmGXVhlKBcjzJQacMCcIDN4HUoQlJ8DBDF+TyXHgceh5n2CLJAWl7cBsPAg==","signatures":[{"sig":"MEQCIB4/dI5KWdsp+OeLaPfvtuEf9v3+MVWE5pqpKvMOPNOaAiB+5NSgzEgh+AitbWHu0c8IarXV0kGyAamjqoEADHPTUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLVkCRA9TVsSAnZWagAAslwP/3p0VwvIFVM4fSVqTquc\nqLowSg+4DVIalEU/gFf6eA8tp8H1Oqr9mPnDKK9BySmNBd5SFEdrpwqoa8W4\nCySHr43zBaKXJyQNGgDoZlAKghC/o6Bpwie/37Xqkpc1xVeJ5qhP0SFhuuv9\nOTohZ2xAcIrutMpyEp2YUE3a94KYrWSueayfRxrnXTRQ6P+Vv0H3IlfdITej\nqGIpnW3Eq9URBz16KTU3YckOImWq9J7GFuuO3MVsTWtuSE9LhnYWrWu/5dch\neUDVFDjYO2WJo/N5i6tOgm+ZMlnaQiGQghWzs61jLeXWe3J5RkR06z+3ByyJ\nyOLO8xlc7/3Yzvsu6amSIJssjHZ5dC+Q5Cngf9LTXA65BqyDTc+GHxe+hc/W\nCQJ+yRZDiA2oAXN4dCGtJlCSPNdS0tRsSVI2P2kTdtdiqcw4L8Dxo+ih8l8q\nrgxV+x88/7qnKu+DagWWVyg4IalSVjdfNTXnj2+Wor3GPbO7AzRQa7kA9XMA\nebx0g06Kyzf0avpdpLEyQKgPlBmA8VFYIQfY3nnp+xg6frKNrcwhPqfwX+w2\nzzqqFnIczQsE7PleCuciEH5vU66F5rywcMCaB3zJ68bdwClMR+M3hRlTitah\nqD67Wsm+0X0Lylk82g2cxe81/LizSNqK1TwFG8sVPCQVXnbKTptDlARKISra\no0wP\r\n=gVYv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/shape":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/density":"11.0.0-canary.24255c408.0","@material/checkbox":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/elevation":"11.0.0-canary.24255c408.0","@material/typography":"11.0.0-canary.24255c408.0","@material/touch-target":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.24255c408.0_1617999203632_0.851196464349695","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/chips","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94139ee5a5213be420e80325d1dfea0dd8bdec84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":157,"integrity":"sha512-NuDb/ahiLNIA+FOHUFcfUgDpockfecKTZwwe8sBUBhfherKReHvhoa1vRm7XANJXgRLqe2ks4OsV9g0dgpyPXQ==","signatures":[{"sig":"MEQCIFcuydua0wCNM1rwcjFeS19M/J3Ah/+N5idEHeeNZ6GXAiBPHK9e9uoU1oAG9OBDdP6hQBEzBsp37s2T3j7DX656JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNsMCRA9TVsSAnZWagAAijoP/RkH+9mGMs6C0XDQ+G7J\nBVThfwwu+wUeujTYnOyvtV+HKyVSh0daFnk6ehO9kR80ECUZWd1bWWmaoY2M\nXrPLJCfmxOeU1yc3yaBC9Jy2RhKk3D+f78s/XptLXPO0/hOhhYikVjnRgncl\nSFJuRVxeZyLWFxl4nudXIiXemqaqNNCesvCJiJDFROL0Nc+72lxWVMxFf83q\n3HmzVZQF5L3OlJZF5dCHWNBRI8a+VMdNrIuZd1ijvvhpPeLfh/rCC8QzGCnA\nI3KD2kVYSdyvKFooX77jLRmwo5MPuJ3a0UQLHUh3P3ApxXEkkzqTrJhP+OwG\na952NRntsXJMiFp+D9pKIByDfqMyl0e2JI/lTpRTO4LZ+SFs5kFdSOCBzMHP\nfWTmU2zT+JEKZI31vXi2mTQ9E18LofBvCdM8g0c+E9UefZfmoO1xWdg15qFA\n0gZiPv84Dvni0HI2MhKyTwnYf6tznt7uP3tCwxkbixOuPLg1EQ2oVYV0HNrc\n/TE5h3O664ON5akmQXv3DipVdYcEzPU3MCS0H2vbBGEypjC3IsAdG6hilDiu\nletCiY2bhwbKf4UVfGXZyvct1uPI/HcHrv2fJzqTJ6alyQrQavvhLO21kGX5\ncOV6sML+wlqzZgwuNEw8bdWI3MzeCwfTYSwlVCh1r9TMzwfm4Su28nzVcGXD\ngp/C\r\n=H3C2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/shape":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/density":"11.0.0-canary.7d6a4bb72.0","@material/checkbox":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"11.0.0-canary.7d6a4bb72.0","@material/typography":"11.0.0-canary.7d6a4bb72.0","@material/touch-target":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.7d6a4bb72.0_1618008843978_0.2161964076701408","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/chips","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.352b295c1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d7e591edc1fed3cc4720770081bb76d4690c074","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.352b295c1.0.tgz","fileCount":157,"integrity":"sha512-FJ3gLuZlUI5+iYh5+YYu0y5SuwMY2lPvmiSxjgbY9rH5H0JtXCoBnhiN/lomX4KxCUiBSa145xAYpiPEkO59RQ==","signatures":[{"sig":"MEUCID71nP/aOr5j9nTaI4P/P1x7vl1jf7cFaAjH8MD0l7w3AiEAqP40E55zDRN0ndUa+gYmOZDnXjl6lLdtVZqfk4a5Eyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI5mCRA9TVsSAnZWagAA2b8P/1wBInh/wBcYBLs9qHG2\nXnVFHy0P0mOgvnFJ5Tb0fzbePdm5ShnJG0XjbEo2vPzGGGh98QMUc6WwRRVF\nTDFAhCFAxUfFqMWs1r26s7CMHEO1JMtAhcekoZypnTkv/zeIPcMbtCA3Ql/G\n+d7z15GyqSRNvE1hd/AQtZVM1qL4DnllXBueYgET3lFRU/BrD2B/cU75x20+\nkNM21/CzWfVbIl2C17z2wN2VQS5pcj41WX5bwMmv0ZzBxQ9DxgdJmzsvGv+K\n2J+WWJhXTKUfheXAtAZ51psJz7wC/fvqS+brYGUWR7NCuMrwCdIcJN7n7XS3\np66m6b7UVX3VxkUWXb8NwZM8LKMhVyouwj3mjB3/fQQJKPF2umrBJBvqF3Ic\n/pAk4o7yUCTvwPDjkf/Rgs4FrcsjQCawoDHaR4UffGfNuHgM9LEHa3yG+nqB\nHarxMPAMekcxwntRpu3UKOdk5KH/YGquIne5Hen4mGqu9Zkr2wda5uaoWLhb\nWn7UgKHjiAYDulvvoayUclETgj+pOv4jd7i0pA3JgFy54yIgrNvkXRHpeHqt\nZeMP9ltzVKwYp7O5HNnB6M++AreCjoeisvscjt7xOAS8X/mRDLOY35+Nacoh\ngXY9ajsTMfP9B3uK0FTV69unjy8mXh5Gwq7sHG7m2tZH4Q+/kGzJ/JQ37l93\nUyhy\r\n=EtxH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/shape":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/density":"11.0.0-canary.352b295c1.0","@material/checkbox":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/elevation":"11.0.0-canary.352b295c1.0","@material/typography":"11.0.0-canary.352b295c1.0","@material/touch-target":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.352b295c1.0_1618251366226_0.17374453326650596","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/chips","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98fbe14d4a9b3a515ba7f8054379fd6b5c88fbb5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.ab99b8064.0.tgz","fileCount":157,"integrity":"sha512-+24RqoO8ajcifLJ1s4EzJmxcmwcRaHkSFG+/PNcMohKpuQLSon218rW2lwjnD7foGUQF7LS/z1dpE9wokIBfoA==","signatures":[{"sig":"MEUCIQCJ2Ezs6+KOecwwtSWXkVla40mEt6lBwQ9Y7vb/yRiGhgIgL+TCHpAZiwxI1qtiYGUFnQ97g8VqpHV9j3coCRmxmss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4vCRA9TVsSAnZWagAAMA4QAJYCA2Hs2SrZRBSrP7o0\nlcoeM3B5mWFUqPCusQKdM7dsyFJO/ljYaPP8rOMIwElTZn2P6+Idej2fqSzj\nxx991JPee/7m5uc7RSd+OKsSQs8de/PHZuGvATzvwlmQqp3uixnrdIMW6bto\nrokyrfzvrXZ82rhcch7BnWWeiNVT0rojMfdrvv7o/vMwfLeEH0AUnUw8/Fhp\n21fXUrSUw/6LaWYc2M72ybVds+IY9+pT5rjPL2P6ITh0CMabNxC1VFPgh79U\nwUUlvY17z/oZbYPrEWvjoeT7Rb4wmcghnU+ceNkSklvUOkSJbpvySJOgsYEv\nO+4i/i0VsALyCIIlNDavfnSTH5gyWjgY+M4E7P/36KGm8dxReOFZa4clrpBB\ngxyCi2ZLDjxu5d+/vsMhjY2NmdrFVD79Vv5z/jthsE9GrKSMhG+ZHXjoEk+B\nOW55k7Hd1LfkySEwFYnEUAPsi8k8AIu5pb1yZNjfWXagxnPMV87q34xMLJ1M\nppLnVkSAIsicLSMihRwZBLzZhIo2JO8GFRLR7wkxBoZBZedi3oVoxhGpH4aU\nHSt3LVwGHXROzdQuoeVzvwwvhrAu55y1P8MI10dF4xDZ300v/InQqNDp+B4T\nYHvTr0JqqqbgndzhglT1sWqwifFIM1AHw58kf8f1q/WcnruTWXlF7LXw/cM6\nDFUE\r\n=yAj3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/shape":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/density":"11.0.0-canary.ab99b8064.0","@material/checkbox":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/elevation":"11.0.0-canary.ab99b8064.0","@material/typography":"11.0.0-canary.ab99b8064.0","@material/touch-target":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.ab99b8064.0_1618325039278_0.7629085751505733","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/chips","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60698c1adc1e17ae52aee57b286d1f7058366b83","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.8f0a11e32.0.tgz","fileCount":157,"integrity":"sha512-nWWKG/sJ2Zy6XSaXB95VDH9EOb/u0ne3Gi1oyxwx/Qw6GYi7b0PUbF0mtOBKRlu6nDITgAIU4OxzzKpQr5bFlQ==","signatures":[{"sig":"MEUCIQD7tycbI1R9Z4/QjDCZ5k8qs4ZGOR/cdlFNBqxiw+TEnAIgYEmhebkCfTB8m2MvmJISeU3jvtxu5wqkJE4UmnC5bRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0qTCRA9TVsSAnZWagAAdtMP/0771GvKB2homEOLauCQ\nkIq0kgmf015IfCxQInyga+HhJm5XBTHTsGWaltcf6ZWeh9qLcmjxO/vJByf0\n01nkcW8JfWJvz3bvOsk8R2W/bcU4mdjMnUrbmqJSJx9LlW6hWv2YVVppGQdl\nbiIdOZw8Lez83C6fQdbJoa67o+q8af2hIC+JVBnCY1nC8AEenkfvMreWC6yB\nb/2D5on/E+Td9A5+RkcGpQTWyCNQAiggbbsU9zG88POQrk/PvTZZbPLHte+A\nZ5nH7A/SPm0koVyqkT0u0u8WmYeHnH7TPr27Wk4M7uPFHxFvRvwMGYTOcdU1\nLxbSeWikEVJ5aNYVQFxCyqypf+edy/bkGxDvrZUTUt0EEWSo/5YWR5wJi6T6\ni73EXA7EQ8yDqsIdpD0jDX/fsxa6Nny6AUlQsMAwS+BVL7B2hOejotZrO84v\n4xJuOMRaQ+czvYVilIhj2h5KnYzkN+UvR+ZO8u0HQklvs9Ssp6HaibptNxZ/\nN2/wtFnupdVGn1MItQ7gB8PlRP+xp1qn6nuX7jeJT5cJrrczrjH6UtPAHhmH\nSfP4t15SPD+7JD9Jl2e5DNomslQtOukfVdBansdq989zqtHl8cSQHtFXfMPs\n+oKr3sfuZ9dGQYP+3BxNpOiKE7Bcx/w683kYa6TAUbcAIWDvcAvbQuIpNcAh\nxqhT\r\n=jkRu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/shape":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/density":"11.0.0-canary.8f0a11e32.0","@material/checkbox":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/elevation":"11.0.0-canary.8f0a11e32.0","@material/typography":"11.0.0-canary.8f0a11e32.0","@material/touch-target":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.8f0a11e32.0_1618430610861_0.3328456446401462","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/chips","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1286925ce58cd8fba818164cc3e2c70d9e7be3f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":157,"integrity":"sha512-eD/Vmc5W/EtktY1Uwm9ZP4h/tri4Tw0AzVvsuTk7pQ0W1SReN7w9ciylc6ll+IwfQvbRQFWPagul1nUJvh/5iQ==","signatures":[{"sig":"MEYCIQDccNbr7nOXdKa8mHQger9+Rybo4rCCssNopC0B7yvqiAIhAI6UOSdL4aFMrbek3pPTeiS1sG5WFttWaI2IVHidDhWb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIA2CRA9TVsSAnZWagAA6IoQAIoF/MqWvW3gGy8eoEqa\nMNRgWXTxYe3MBZMJapEWjyb1jMaRHPvVxjwqdeRXg8BYSBvKxjxtjJni3RcK\nFCXknsoybvgurf68YoMkWnf40i+/vE1+Cbngpv0NY+O+VaRtRm1vAi+GfRrJ\n++IUXP8RkWZSji4v20K4LFnHN6htUfTUk4Pg9+l8bpnM32cuMNTE9rd/ogIv\nx1yFdhmF4FdrgTy2zK2v5897r+sUbCz8ojDfPhrNxWzNqtRRxZ7UAb/vyxG+\n4rOy3jPpPhE0cY7Po9I/VZ1/EozJWnc2TpZak/mGtDE5UgDd56FB3nZoaYUk\nwCa5Ftk6qQuv6mWpCthTEHj+cikzB0xXJ/nlgZW5vWJsjq6nUgMhx3VVb4LH\n7VHGkxRay/x8gzQ66Bo9ITx7365skMap0DyQLJVCotuUTwR0WGKXvlun4qGt\ngbS6djtBKiVayoXcXF/RemzQgwgRSPAi+vc1quXkO2hLDT/zp7/U5lNB8kQC\n+82uAA2TtPdSYa/p6TFnIeD96oIHrWue+nCK+Iaoup8pkOPpLO7DjCySG6wT\nro5yUV4EaZ7MBbJXh8sv36HsIEpyxlruBApxOA3bPkowT8Jgr8RMaeWqEwDi\ni+SKNmG9B7h1EUDIJ8HbyaSKthAxDurGn7NUI3DtMMEt54+SmemRWGSMdhar\n8u2E\r\n=4wNl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/shape":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/density":"11.0.0-canary.f5c6db8fc.0","@material/checkbox":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"11.0.0-canary.f5c6db8fc.0","@material/typography":"11.0.0-canary.f5c6db8fc.0","@material/touch-target":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.f5c6db8fc.0_1618509878165_0.8550246814371418","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/chips","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.3793a3143.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b0ffe588f09e1cfc40574493fdb800e63f4c7bc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.3793a3143.0.tgz","fileCount":157,"integrity":"sha512-e+cJisXGVvRX0nMetrZkcNhTGXJoKk8Rd4p98awKH0nnjinppsELW6z5dDsMNgf1EWiqQpmufdNZZSbWPciasg==","signatures":[{"sig":"MEUCIEPZHOTc9926FAmcqWl6JQ0yEq27BDaFYtZrQ7lWdfJfAiEArP3fe0lnnL/kCveOoqzvzTUAi8KqYDKiIIrLzrWfZpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIa1CRA9TVsSAnZWagAAeecP/3QEf6kfndgSRvcgvhOo\nvXmVuA2uAj6WDeMM/HplyTCmPleZ2I8JFBShF3LORs3BltKdKhwFS8uJDVyP\npFby7OnwIBEoozcNPf+rwqSYalvK03Fnhxel6PSAaLjzIAKJfRoZdrgYI3P0\nkovIXr9joOF4w8UktErXBgQx68RnL+bK8AjQfVWqXdjf5PMgThgcUgKNv0OU\nDHds6F0y15/pw0bZ3uF9Kdg8DfoUPW286o0fBBKKwVOp5sCITXZ/lmnIGCgm\nz/74KOOH3jkG4M9cbPk2F9RuthRQbbw8AC+LPY/6Y5ycRO5dKmZPVjZjGhzp\ntgCKRlRUnwK0uGd7WdDf3TuDzxk1UeiJA02kWw1H6Uzrfz7WGBMRDfm5CLJN\nf6CSr9jocO1hqaCvwizrn52e2I1X9pAZtTd/+aCXjATj7g5kyN6bbd5LfoHa\nKmOKAOai1kWfkcVny/3g1rLbWwCAvyw0+TiqkfBLagXnSfWZyWFf2h+Vw3W6\nsJKHTSGO6Ox6ORsv5mAwmF8VsNmQ97ebCh+xx8u1ndGviKHPB9nGxHbnkZw+\nO9RZWzfIawtGJdLcO63I0zAWFEziVVvBJGxTkNUo16k0Ts33ytj04r7Wixwy\n0vq+4xU1cJcEyPlacSGT9c4tuxEhAH4fBLtKDapOTEsTWznJ/HinDFkD1uB1\n0wOf\r\n=s8zx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/shape":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/density":"11.0.0-canary.3793a3143.0","@material/checkbox":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/elevation":"11.0.0-canary.3793a3143.0","@material/typography":"11.0.0-canary.3793a3143.0","@material/touch-target":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.3793a3143.0_1618511540750_0.6709396658285978","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/chips","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9cc5fa8fea1553455264b4ff63b67e9ea7b90a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0-canary.bc104bae7.0.tgz","fileCount":157,"integrity":"sha512-9m8TzDo62eOc27YXxtsmeCLWgVX02NHuYT8ig6aijaCPuSKhdvfc4YsZtCDOVMtEHPLy93zc19G2oe9BVKz81Q==","signatures":[{"sig":"MEUCIDhc9lOEE+jYfLYZdxB5B6Blo4pc1N0Re5OBDSQAR1xrAiEAwceBPBScGRqdPo/XZ2ehVg9O3cvtV8pVVZUv38lr1rI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJgjCRA9TVsSAnZWagAAiHEP/16GPvckN5gpziYqmI4i\nubyuX3qMzz0dXJgNNSk96eTk/fbcF8UUJzFxd4LWkRhxCbnwJ96W1Ondi+Bc\nLQ56mr1Sm4P9xoGQaHlQwAHkYQbivT34xApPOWqxqnq/P0yBHS/WDlnxRMxg\nwrf9xQzchN0JxZruS2ZMpyfA1QNnvCqAj75kyEj4Xd5cADUz2UNYn4jqsRkD\n8p6b7A1xnUDAlsXSV3dkbuqqd18HrXJJrys8SbnlKOWEyv2NfndlBVOy4qK/\nBTn1/WrDDZPPoyvZMzlAg7GWwNxQ7ETU/8J1TULtXfv0UnsQ6g8s2NaPYdDr\na9j0afjtedzMFrVVVPvWeacypj3s4+4dKsscpHvkKIu4qi08yC5wgkvEBb8Q\n0FS7cYbjpFuj8uAZLkmVUg8Pfhxh+84Fgcw+QqjVDxxNaJTOYcSRAKluU+Zq\nF0OXZ/ZoDI0QAyBeeBUYVsR2elpYaj8sCXublBBcWwHWRTQjVhMjo/FL4YKi\nEzoAdv3mS1bpSy08SkDgNuJJvXmmSI3nvo63cKDS5Pj6aJQBDR4OvYBC1paY\npvW8XZ+BHiBKpxY0AqS/M4wnRnvSoAjNIuzSiqPpAQQr0F1sh/5iNQFPh2s/\nz2tC4YA7AszDZpNyfbKS49/DCq5pLWQ7M6lLeRFFWcdBwW7xfukiB2bSWeVl\nN4Gf\r\n=+4l5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/shape":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/density":"11.0.0-canary.bc104bae7.0","@material/checkbox":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/elevation":"11.0.0-canary.bc104bae7.0","@material/typography":"11.0.0-canary.bc104bae7.0","@material/touch-target":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0-canary.bc104bae7.0_1618516002509_0.34430112992813955","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/chips","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f726ab9f657956c7fc775a29c54c62df0dc44c58","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.3f342c3f4.0.tgz","fileCount":157,"integrity":"sha512-hbrQgkVp8Ohoy513Rw5vpyz/32xULIcY/0qK2fXijAh7fg53n3E6bSSTme33cKwVhqd/Yafh4GM1cOoLq8HoTg==","signatures":[{"sig":"MEUCIQD27Jg0U1Rs/vezVYi4zfNq8uwlTL+H0EARhZ19dVk4KQIgUB6senoQDEerctqKzTjE/8xCJqDowFanM39jc9sPv1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMROCRA9TVsSAnZWagAAy6oP+wdb8whwVz14/klTHqaq\nivVnVqM/dgbdrjnXiJg6rt3d+LNvYpIQ1j1jLfkKQx2O6whxtsKQWhCKvtUk\n0jA9zonl2RTDTVihdYAo1qdnmJHxsYaDQVNTj1Htsrn3XVz1z+BGNb0wubYE\nVbYH2OuvI+c24BYVGA34CMtGVhcoHBreH869l+XQBRTN44xHtTDUFEr7hhxF\n2eVU+PThY+GbxwhitJMjazR4a+pr7GSblMdJIokwU7nE6ehNFTK5q7x5N17G\nWnKphyp5Ot7Pxsqnt0SAYFwzGAgiQDPNSt60iz7eknPfLDo5410e4I21KA6t\n/sDCN2kfkDJ+rzJxytIjEbppRin3FAuV4NVMo3r0UoVKxFrfVej3iO9rycUJ\nFDu1NuKD7UaoTp0pJiI0uE6Pk/oxI2SjNNDMWSMn00Ge9P9V2hhLPidWyHjr\n4GbwbQXzXUK0/GTcrknmym5AOHwceaO+uSSIkK84miA6DUxChNVhVptbwSC0\nFhCHqE1ncQvVLs3/BejUNXBaiS9zLlu7lkhdOEZ2pgp4zRkAF0zDjslHeb9x\nb5Y6X0CfdQ5gFX20jne8wHbqXpu5/leQqd91VdBs5SxImAiUwG8+LhFQgjof\nVD9eM15hpAzuJUnrSXFo5Uaktdn6dQDXADkSOkccxxzsjDfhYIaqdspJtC0y\nSFqr\r\n=N8hi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/shape":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/density":"12.0.0-canary.3f342c3f4.0","@material/checkbox":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/elevation":"12.0.0-canary.3f342c3f4.0","@material/typography":"12.0.0-canary.3f342c3f4.0","@material/touch-target":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.3f342c3f4.0_1618527310161_0.6047324170358601","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/chips","version":"11.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@11.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82056fe2be03fee7c47369e6030ac5464b3cb491","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-11.0.0.tgz","fileCount":156,"integrity":"sha512-9gzm0G0e0VQ0SJnfrRws5SOiK+Qi7Crg/FSTsw0Lk5frsHsZt1mKB72d2rOpeXDYb8gox2GUhuO0U/IIc4EIrw==","signatures":[{"sig":"MEQCIGoHZZCr7MZcXT/B7EyKXXol674Uyx1rgbBW4Im+dlk0AiA823CNFQdW7A2EFjoRt7jJB1kj5D47rTO1jUp8Dpm9DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMUuCRA9TVsSAnZWagAAkW4QAJrL5Wiw5ihFaech+evc\nMUlvIKAQRzwjlW84oFWfgImRKc417vadvaB9u8NW4Z2aGJnMR0TStvH0OLzW\nL4xi1RI4ibytd+NYcs77mIARLhGmr4If8t4hVcudYU2rbkt17M8ohSAVIQK0\nxwQ2d7ztheHBw3WxKVrgA3FCa5mK8v9SMxEgp3UCvHrCtkHSQy3mqkNFMh9E\nii+NyVjeA5ZN11inZPUcRu18PxdS+tGILAnZ+BKPgc6U1+Mm2YTBlv/UXhd0\nyIePd1ufIZafloe3xaWgipR6XKFoO1UNAUA002GL4/JQKfnWwdulwKfwhuse\nZAEPneCC7RwwkobJaUJawr63QuYRqNl0Qhk9fg/1trw4MvxIu2Iz1OYflnVR\n3kFcjowphkeqXcG3A84igd6EsJVV0UEyH4+I7MT2RRWjhEKui1QriH3Y/yLJ\nVeU/KgYtQmvEyGVMSqzRNmzuozd8L4jj+N37iyThrQnhgFrUFGDomo9HEVqY\nqI0KfeXim07FiXU2OSIQLetpTRpxdF0sFgQQVhVe1/0XFMhMwXqVpZ/IqTQM\n3klHyudHvD42MObYRCO+yfbJDBELxCPhSd9cHkZD0523RqooeKUcP8oiWEu7\nZQ/C7XWsvFULaTrEYj6NRmqz6YFkfm8E0TGDK6NylR+mXWvyMDoqxRgkaS1W\nlkML\r\n=+J10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/shape":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/density":"^11.0.0","@material/checkbox":"^11.0.0","@material/animation":"^11.0.0","@material/elevation":"^11.0.0","@material/typography":"^11.0.0","@material/touch-target":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_11.0.0_1618527534249_0.03443263376932015","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/chips","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b6086d7dc144bd005193fa0d3af19fe04db2686","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.2ebfc5374.0.tgz","fileCount":157,"integrity":"sha512-17bRm74V15Kcf2gLlqrQCPep/2a6giRoRq6e4P0VYOC63ENyN0KajS4UYcaKA8/lZ85Ce6gS4H8g9aUUKC8nQA==","signatures":[{"sig":"MEYCIQDyksbTeSpCBVDwQspP1uNf2OaDMV4hwKjGcXtGAMmqZQIhAL42OQfSD62ChPDTSs7+qBTfKWUC3Slv04Wx7JFoP6EL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefdwCRA9TVsSAnZWagAAd40P/3SQ24qL4uw8DxSiss8X\naVB5yksc2IXtk5u27mtd0Tmwb14dgI2W+TVNOdZOtd4+8oOvO5o+8yH+5b7B\nqXdHGCHZZM/kU/wvW1lFxB3YBPWoxss8xG711ojWsFeVG1zD7xI2p/CLpFOd\nDRM6EzOKGbTj512ssRyr8DvWuckxcLyHEGkmtkBLOrgcFkCgcIusppLdp8my\n3a/lo8O2ZMFlvcu9O4HBKKSd+Fd2Z2N4JYSceeITEQ9SDKHBWQC1BGQdlQcN\niPaBSFBsE1apqcNXbA8FHjaJ0EdlGpl+3vBp8U9WcZ0iM8wZRtsKA+j9Cpmn\n/NtHYkZoa/eTlm1N6zQ1cgYK37gEnI4sqEDRS34Lu4GOVl+LHyMlbd0+Hr3N\nba7s8FSKFXyfiozwC94/PaIhPyk+xHZjDUOhuAm9pYJZE18Np6vKMQU6s5g+\nXFNgnBgVm7d2C6ck5t5SOJLgXcmPdDVMU4s65/DFxFBgva/jZAswdle1n+hN\nRrkjYuX3ka5wVPTrfI2UTT5Yybxs0RhafGyeccjOkq8+nJqOMcic7JelQq8m\n8GuFK+yHlvmbH38F5Rg+IyieFCwG7grGmaZeZfKu8gBqc/uKldRAE3/LZ3dV\n/HAyCUMzelhlT1Fn3wxnpTPxcQFWDvgFmmunB9En61/vZC2FCthp85kuYJoo\nd+NC\r\n=tV6C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/shape":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/density":"12.0.0-canary.2ebfc5374.0","@material/checkbox":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/elevation":"12.0.0-canary.2ebfc5374.0","@material/typography":"12.0.0-canary.2ebfc5374.0","@material/touch-target":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.2ebfc5374.0_1618605935822_0.013112403923253524","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/chips","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.5631828e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3389e10b1ba829eae5dc6e5f9b84b43fa9c1b689","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.5631828e1.0.tgz","fileCount":157,"integrity":"sha512-Z6Ei3dm3TY4UsP4fVWk3RKooWT9PilewijgXzYCv86etVc38dz8PYPGgasNWT9iOf59vHpn+BJHNhUMTGYfJJw==","signatures":[{"sig":"MEUCICJJzpwiC7SexlufL2kl8QiO5k2HbkJInxJbzLZckUNsAiEAwbUJzY7/EWfcvPAUY8jDNmIi7Q0qqrOsL9VkoYHlKRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepKHCRA9TVsSAnZWagAAIfoQAICVD0ZCE+na3LWkIF7p\nlgIjGURga6pHBMu36cOwogXaYnlsLGRfeXiNo8tFshfUSfjlb6HRqIX/VuE+\nJFOnebping3iMu0cQXO6JmcgShWXNZDUQPI/CC/eg1ugZu60P/WYF4Lhd3E0\nqvoO9dIXPrF0FN6Fi/BXRswAXl5sGF4j9ft6YAdrvDsD5wEF8FBb+DX+55qR\nVlUiEtLB2jV8pe1LVB3SWj4WLTmDU26J3QvEM72hJhHTmn8ArH/nqenKG9zD\no3VOy3HEQHg1YPNJkM+KQ+VqQI3ydetyl09YOnyWVBO+lL45BUSbozMHlknD\nJFwAx34UHasOy/iHuZ9gQQNF673pwwvO7p5IW8QNRoPz3XHBYIpLpO6P0V+N\n142cijmIKhvj0UjDE0nAygzquAGeWzqHrZPBkzv5MrzaxX/5K3NklHYF/utS\nsDP6pDLeydqzZIRFfFT8Mxm5ljO6tMiCVnDTYyA3LCZwfwebcEvyOWP2HWwO\nlJlBhWfn3uhlxzoxHaaW2thZcAl1QtkMsqCFFM4c6DDjyk9/4Js3K9Mw14qa\nl2SNeoS2uv3dhK9LQOE+ew5Yi0LB9A6GCVj19jUmP9apiOzTzuI0wwdsKcW1\nF1PM4Pkf9Z+0c0y/90bLwu5opMscAiAcXHAHmlm09ZpUbc+Ba3H02uq9fKFk\n7iT/\r\n=3PT4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/shape":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/density":"12.0.0-canary.5631828e1.0","@material/checkbox":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/elevation":"12.0.0-canary.5631828e1.0","@material/typography":"12.0.0-canary.5631828e1.0","@material/touch-target":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.5631828e1.0_1618645638544_0.978067757745509","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/chips","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.bd685395b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e69a5d6f14698300884a769365e3bba381816c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.bd685395b.0.tgz","fileCount":157,"integrity":"sha512-EhG/vAvIot3oi1z05TNA+AttcRryJAP6pLRUIa/w2xrvO3iQOnjaUylsxW1NlHWRam5wiCFXYai/6vK6v7vsUA==","signatures":[{"sig":"MEUCIDLjv1kAg9AlOw3sZnZ5lTgd795mkd+1BJ6LjoekOnwbAiEA6ZqeYAEYmMCAkKuiZoPhvtnrYcYqJxTgB7BmVfitcXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7tCRA9TVsSAnZWagAArPYQAIAIXVI46YNoM1tMdp9P\n6c0EEft3+rh1X+NP/7Hk7mUd5jA68PMTCqIElnJl7p6nxTkFD1JfMkQ+ZAhN\npOwnbXenKGiaXlLABEOr1povM0b9Kr1XdD0nF8O4UX4bM2VMufqKKeeWtehZ\ngQL5bZf3Vfm9SNOT+eietifaVgAFpd57+fqbqim1f6wHH9/tiB2AgtVBBqcg\nDELJMxEHgaToTNPZ39+Zua8vPODHjn+7AZXS7mCAlL9XttOVWLTdyZuK4Kok\nxcSHy+xv28lhcP+K4z4amYC2i1wBsg2wij62yGj3lRywtZ3x5Sh3lJq+E94Q\nFrfxP/dLmJBMcG/HvIubDY7rXQVN9J+NWQxnBKMt3gGCe+EjTaOkV4Y56/iM\n/hn588Qw2oBbRogL6CTcjKciNdeUdZUs225Owg/fnTM/6oWgd+PVGeQdrSlx\n286eWjHQ9xbATgfaXOybFgfKLslUfZGdn0CEQ43wS2EDME6sngfm36bHvMvU\nmSnNEOWkb1wd/U5Mr9/91WIHsWyfuPk+8hVwMYV8RrZsqHE+ctRWDTPvL+6F\ndNb9oLG66HAEFmRahXN9yv4v+1eU9ZSFWfE5CYArTFJF4WzCMdcPN1UuqgOO\nx1qnYtps1RhNIHEZWKn6+pEopsvYDWFrRyb27mY5xoF9VEKEeP60YGH56+sz\nu+KM\r\n=3JTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/shape":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/density":"12.0.0-canary.bd685395b.0","@material/checkbox":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/elevation":"12.0.0-canary.bd685395b.0","@material/typography":"12.0.0-canary.bd685395b.0","@material/touch-target":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.bd685395b.0_1618857709474_0.9486346152683871","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/chips","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.b52196498.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e086baf33b67e163b9589c2ed1f646ba6e91d36f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.b52196498.0.tgz","fileCount":157,"integrity":"sha512-AekY8hv18KsRyZL72fTYOgCXjpkSrnRH66yqki6CY2FhNlmP4Y3tThVEthzpOoXWlz7lTNM/dIJcKCMAXXuzuw==","signatures":[{"sig":"MEQCIHnSmyDgCJY7x+lEGvMxcbKmM74Aqb2lY4e/oSWxUDPdAiA51WA4ymrw7ntHpzCsPxgmcZVY1KwStMACtoZLPlCm5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeDbCRA9TVsSAnZWagAA6EoP/1LUViSZL7GJJHCJkjzP\n5Qr2EfYDZmoM0yT5RymIZ0hmKOE3GSFI9b0Pdt7paZnZmic66cBgK4raJ+uM\nXEqTzDhcJSgi1U54CWzFVwEdYhFq1Zq6Jzyhld+9wDazYQnLRl9WywLDMgld\n/IViX93omXgf3CFnXM207zSKtEn9pqZU5lsAGZp54uditWY3+m9bITP/nOZz\nyhQkjdTy2Ed9c6ks1Qm3sRrc606JKKzPgyWOYiiTs4e54hNEyqNV+eKLotP1\nRQOAcNYGSoxGBJPMsnLY9oOfF2A1V+O044z2aMiyagjlFO91sVgaQSAN35rm\nCRCgGLhuktzQy4vUtH3leiCdXTsfUMwFWf6qneE+CS+InzXD+GhJ2TFd1tl5\nlHE8dV+7DJSN/M5SaNqzFRgdJEv6X7cBinDvYQF7EStY3QwC+BuHJgnbbMfT\nYLv1Ze/7QUMGagf7GIbPw0PB+o/QiYc35da14MsuR3vaslAU+RgzHzDzXUMw\n9tXBORqDbsXq7Qna1Cntp9c4FgBkegS15MOJXkfbj9Vq6xfXTx2fDut44JJf\nypwxfGJtaEdsUR7QUdN4YFnsC6VaAIcCtPd0uBvGCIgZJTdbKAqz0QoQhHvl\n9sr5/XIKtVPSDAA45REEcRwUmt0mA4+0W1XJcAn7FGUPqGzCVnMbDXAVgUyr\nnnNc\r\n=RJIW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/shape":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/density":"12.0.0-canary.b52196498.0","@material/checkbox":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/elevation":"12.0.0-canary.b52196498.0","@material/typography":"12.0.0-canary.b52196498.0","@material/touch-target":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.b52196498.0_1618862298951_0.4334920158860074","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/chips","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2789996c60ae6e24860729428d5fb7be8c220ca7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8ba3e298c.0.tgz","fileCount":157,"integrity":"sha512-zKxvuHwkeQzYSRUl7aF3qmU11RRcYSOtbXCmxGJRBD40UelnL3NnME0uQetsul+hluOhwErO615pEN5pOjrYSQ==","signatures":[{"sig":"MEYCIQCtSvsmvYn9O0EOSVYdqugwWdbigEmlFGnbEVWAacAIJAIhAIP6ZFJOqVgVwpCQNShgyLMYP64I44zywGPmT4aHdMgR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDIECRA9TVsSAnZWagAA6mUP/2gmWosHAZpPZfeC0gIo\nsBeWBsJOdL+7YW9BRfK8rtrP9jCOKHLcFwjOqBrwFsZ4JoaB6keZ+NY6B2ZI\n8Uhurg4HpqFG4ygFZCP3cRortZxvyvD4CPV6KLiOux8uZ5GCFi/6mY2oMaJA\ne/aG2qKVxsvyrMaJGo92u51YGOsqjf9M0pSI7QbOq2LK1PaEju++iBQPk/Bw\n2XlslQJRKDEZ6BTTui6x5JPsRC6p86P3TRdNp9eLX6hQR0orPLhU7DSySqn6\nUi8L4wYy4nexH8t2yM5W/+C6HTyBkQEB4dIIfH7QuXaIRa1v23miPtsoageB\nM6qjB39m3PN1AIGjR7IgktHqfqRj1+Ag0JwfDAvytpnJwS1hX7Irc/qKmwiW\npUiWYMFGvRzfQM0j02tA2kbOlOryx1n0y8QRX9OceBHWdz4/QCyb+N7Nwa4F\ngys6teF1ec6i2bV4O7RsRlXePUo07j48fdjp2zydGmmpa93BY68qHf4q1wSS\naQb119IPfyhPnRd+kbDLlWqu915lukMNqyCypPHd9aPFqk9BPHjt7mQrY6Jx\n+MF2gxpzRpZNWT0O+VOfwjWLsm41sRQ+2rDbWsHsj0fNciZP3fp+Jv5riHm4\nvvXLj8yCZZ/k6sBqEX1JCnwsg9e8H/Syi8OmHIF1/CRTZsc05uj/PN4vUVoy\nSdWG\r\n=yGxE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/shape":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/density":"12.0.0-canary.8ba3e298c.0","@material/checkbox":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/elevation":"12.0.0-canary.8ba3e298c.0","@material/typography":"12.0.0-canary.8ba3e298c.0","@material/touch-target":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8ba3e298c.0_1619014147474_0.35222990477447036","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/chips","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.c629eab71.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73a3e94c96585e739d6ea3c5a5f43beb155056a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.c629eab71.0.tgz","fileCount":157,"integrity":"sha512-TT2rUiwfDqo7pKp6m9a4c4g1BTPOU4dgH2FyGqaFGXgHyh654kIodrBlhrC2kpGHNdgNBy0bhKgxViyaYeQ3Eg==","signatures":[{"sig":"MEUCIQCHo/24hxgT5aMBVtcZ+xF4lZhyvpUE1sEH9I5hSOG4PwIgOBA4k1DhyXXhZWlTVT/STcMsH89eyl/i08Sn50bpxVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIPQCRA9TVsSAnZWagAA7YcP/0N1/cFz5hikh8/5RvBW\n8UiY4X68QCM4OktacZzJs+zPFgwF3Ust7ptovyHdZ98zv4g3T4gxMFyXi3Md\neyRUC23Yzp2faleFZx9xqeSnp79XtO3m1Ekgsq4MdrS4wyclWETplNLnd8x7\nQJDIfPlCMcuCI5LBX0vGw1/V99Ok5CfwVuY7dAWwaz2lkrwbGx7RuOdy370F\nlnfTUNGPbOympIPZNwQUFjZ0rGTOe0ZS2CiosyVv/9Sbxyx114auw+dAKDzr\nqOmR4mXT9UdjHe+1f0Krieqr9V67FQ+v8Dxc8n0IStipE4Y8uz9CHZSlmKV7\n9LUv9YCjftI582VFSth83stO4A0BD+O35YlndfKDFlutyRuTpxACZZ9Z0ALE\nycUA08BmcXK8qzf6zfu0da07cTWm6zALKIJi4crLNHJWtvaGPmmaPy4deqfb\ndk0e/lGHxEhtfUdi1FtZhnSLVOH3Y5mG9JJKSmnWq+kn2Al38zdGtAaUiTXn\n/ElnvWerxjbYatgRUO9NnqVJv1OfC2WbrRfpRuDgd2WE3Ug/Qsbuc7ejuB2q\nYCmdMimc00AL7A94SVIMBYva2irLtW1KM3t4xe4WfiWNSBpqv3eq728epIFB\nfUgAfvZU0SOihx+zGkvjyJjbcTOPHgYqSUDwKrvJjEECA3x9tW683EVSNQ5f\neB8T\r\n=EqsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/shape":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/density":"12.0.0-canary.c629eab71.0","@material/checkbox":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/elevation":"12.0.0-canary.c629eab71.0","@material/typography":"12.0.0-canary.c629eab71.0","@material/touch-target":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.c629eab71.0_1619035088096_0.4617216454188555","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/chips","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df0272e2d9428ff097e4f09959ad56321c5ce0ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8ace3b810.0.tgz","fileCount":157,"integrity":"sha512-aUE89N2q74zKpkSpA2JHLV8vo8klNBcDkN1zcDn3+rZ2z4zV8qvJ1l2agH4GyVmM+Vp7lsbWicTI3pesDeLkyQ==","signatures":[{"sig":"MEUCIQDuGfsIffOHkpRwll5ttgz4T53qluvd1pvpEC4AAvl+oQIgH2KFXiBAHLGeGEabWSRYuxlrNoIrKtUXa7SRsYhjuOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1ACRA9TVsSAnZWagAAp/gP/2XkJh8yy2aOEJ4ddk2E\njSPQaHYqBM7/uF2MU60s7zV02W2qtkfItf9Eqodz43bNY6NqOfExw/+QMi8A\nAn9VtpQOtLA/UtNXAGKeY5HMVrzQ2I1A4mDFdYu8GEqVt0q+lC7300kXeS3H\nPqsbYCqi+1WV8clxbPCdT+Mc3jkvn+6vNkUnJrhw+6Z8vSZpPb/rZm1OF01P\nCutip/7UvotoGyCUPf+IFBZ3hiD73QFLqgdmweJazObcM6Z4jNCP3V2PaDhT\nyMJTSF6KucpZZBB+Npdzfu7IAWEAkOjpIwg0UcRyJ0xg7bYn9RHO5Ei5Xd6Y\nCTSTVXk7vQlnfdaKamR2XqEqoQRevNVMkq31dTCyT44jz4y+Yd2ADtxxG353\n4BvFDj5cv53UXdY/xFUzSgdT1Dgx4mO0MTznX+6MXrvjfhVWQXT+basNZGzd\n2gNocfxx/o33fIRYFebNk+d2Qmll9hCnyaImar1EUeQv+fBCdyfVwsane14o\n3xjt81/eCVT9XsUfxHxzHZNuCBV/bVRUc55dietsZ2w18+ir2wm7joRnciKZ\nZ5VQTRu3ScUwXHLe8jC9Xjmbq5khFQtxtoDSLmPkHD2s/iPpBI4y7HiY6zeP\nmh6CAlNQlzseBBiyYrOzIwZzodD1JGcc+h3pWNYiHcqN4waJtS6lPC0QuNhR\njepB\r\n=LXrO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/shape":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/density":"12.0.0-canary.8ace3b810.0","@material/checkbox":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/elevation":"12.0.0-canary.8ace3b810.0","@material/typography":"12.0.0-canary.8ace3b810.0","@material/touch-target":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8ace3b810.0_1619037503617_0.30067879766955063","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/chips","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1d5c59d2b12bbe6a78089b6cb2e9f546928892c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.70beaf42d.0.tgz","fileCount":157,"integrity":"sha512-AuIIcC1GPbDyXT2+J92d7iFl99X82Qvyl+QhRRAOyV7eoDa+PmVdtA3LRrthxyacBJUgaIPW3d3GoGnDUIh2NQ==","signatures":[{"sig":"MEUCIFwX+ORenS15CIDvF78LhfSkItHSJW02ITfIQA9sygkFAiEArw4zmDfnwQNWGns+rYyX/vhU1Cwft69YAu7az8H9sC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/zCRA9TVsSAnZWagAA5zAP/2M0avUAYtc5JR5IV3oU\nhnkiObaCpgacPjONuXdMWdhWDrLbvrHr40T/qUW8cZZ8lo0FNDrdYNyIsl28\nan74m7x5Jq7i7ir/ty/bgGytCTuCLkY7Fcd1vuFVHytgAdKCS76d3tU/oLQJ\n1+oKTyZJxoK2cSjl9z2moA2iH36VJKM34XrIPIKy3jfBrfpElQUK4DpTvC8L\n9aP4Vm/szqIjrErlfgdjYJU4n801AM8AkKXoDyd6PIzAa7+/N/7T20ZYooif\n9x+CNtanOHbFKV2pqquqF6cXcB4sVQqINH2oLBrTNAY16vmYsu9NVPCYPJLy\nAM5/WSt2AYn9mij3+hy/JFAfIXVtICU1LdRtME/6bkGGZKjQsj1QwbE8Jx/b\nFYkxXvG6O/QRL27eMjw1u9BPUnXkU1xAjve1cnhQ1nrgW6c/nFH/kz/0fANC\nI3Oc4lM7VeIPDQ/cGujlWkXaATWNI7FBGVLajtw279HqaBaMB5EtcVH5ImH9\nx1NBiBaTaXHro9ac+w/f3yL9V/Z69Wkt93/luD8G1P9iu60/L1OvQMyg41Uj\n71bN+R40vLRWeXoYe5eCloRGEA3DckJCZEBw7rJa84GfEuZYev8An9g6hF0k\nk5q7CHd5oVCA4b3nawPn9aKNMN1Ri5cdhO++3gkE7ulV3f/AmoorJ3Y8TsXq\n5/s6\r\n=X/xM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/shape":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/density":"12.0.0-canary.70beaf42d.0","@material/checkbox":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/elevation":"12.0.0-canary.70beaf42d.0","@material/typography":"12.0.0-canary.70beaf42d.0","@material/touch-target":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.70beaf42d.0_1619038195110_0.6565917922244213","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/chips","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.cad489689.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f5c98770a9bd64298629f71d7eddd099f4b803","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.cad489689.0.tgz","fileCount":157,"integrity":"sha512-qMpcMhOv1JaxsWZN3lCDhl1VO8JYY4xYIPiOSQsw81RBA+SOgh54qibknWeRic13PAFH85VZFbRKPSvNganHgA==","signatures":[{"sig":"MEUCICavOjGjEEyNim/C+jOOPsCs7CLBV+wWVUl51B3ArD+vAiEAoQ9H1ttKy0nJqYqfBT4L1yatyQf1I9P4k5bechOXKf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggalZCRA9TVsSAnZWagAAa5YP/0OrVsWb76Qmc2DIq77+\njL0hbipyxeT+4UtX4Er6s1pmaz3pF4KqKSI/BOPBunc0LuK8NNEaFFJOpyVM\n2IfBK4eAe11YjIKq9WRFuq3Mkni4eEDC9/7+c9lWUz58rSk5tV7PR7cgTzyw\ntAfEiqadcWz0SWuRBoGQE8AZncKGrGT4vFO0AE9/IFcJBfBAJohE2KovFwbh\nEkzx4DeGgxmdwA7cmWPm5KzlnL148FWjScP1jURCo4KWw6c5qFY6q08W3QdM\nrP4Je+yUYv63VGGMyJEOP0EP4Miqqt/QrANys2xg1SPuDTs15W4j2uzquQfm\nm9zpvthmBeQvgZ9R4RHYC2icXd/ptT1vr1cqBaW2hSzCe0cTOjPBJDlcTUWm\nbtyXo07v16apvho6ZNgOjUeT+ocjIWg1JzTsw5Yuf6Ij2I4HwWRvZ/dCDs6s\njY31y+pOW1ib92CRKD8RiltAWuyeNzv7IhzK35qknNalnfvx/B30r316UeXT\nGwZvej5u4Ixh4syPBW0clGCzd6NE7Li+Ey6kFljR4a1ZKKXplIq4JiocVseT\nKwtGWNsBXUraUAqvqvjNsw27OntUwCJQB6gdgGPL9JPA5c+W657wI1KbjHSb\n25M554+c1RWO8v7DZwnxETO0LFSksKLBqUjMnPWEPYFk5wv5wL0Y16mP+bHU\nMnbY\r\n=YIUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/shape":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/density":"12.0.0-canary.cad489689.0","@material/checkbox":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/elevation":"12.0.0-canary.cad489689.0","@material/typography":"12.0.0-canary.cad489689.0","@material/touch-target":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.cad489689.0_1619110232658_0.8049504081205225","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/chips","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.d928692b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e2e5513db55a64e39f8e2245f94ff53ba8d4c12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.d928692b5.0.tgz","fileCount":157,"integrity":"sha512-vfSmvDudOtP69fvdMFpDQiK5lexaukmXik8RC4JQUzaRbHwhZ7wHXPp2qRLr8VNoe1b7YCeY8OXDU9R0lqx+qg==","signatures":[{"sig":"MEUCIDFCcXgqqtSQi9FG/LFSMzSb2lB+E64uEtpY/L3iRNjjAiEA5iPOAzCgfMTa0W4YmAyTHLVdD9mL4DZ5wIUDQrlwM8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwVFCRA9TVsSAnZWagAABl8P/RD/mOercCsldaKdsnEJ\nMMOlkx3OgfZSnLEJnKHr11Kl/6LOxn/Z6x995IKHSqASqkBcTFBhy18Jo90t\n9G1eA9SOkJ9siaXvHsLGOxhTA5cqrRg/0N+6aMbjoLdw03KQOyHrne9a09Sy\nYeQ76pUSOIUvf6qj6oduwRFKTH/R9MoB/jQwPaQrw5HoLUd8QstDXKV+swm4\nTE15sAsm62bTyrYcRpGhXkJPzzFaC5M5ryn0aU0hiXENHrfv7GkqvsdCvdry\ncJnTbFukfZq2XuA3hNHp8SI7DtxL5l0iRuEUw2MLySAG/QAbCiuok7I9NdMZ\nZ+eSb0m4I+GnZqdLp51c6I74Cas8khVcTK2ubM5iqdnVKeAZVD/UDwGvkh3j\n+bORfPw1bRV1h8dwheQTW17jGOgZUJ41vWEXPjKKI93KMSgoPXHmDJ4I7w5B\nTI3Qbi24O7OhtkLNXMHE9pkBAj0J6lmgIncTTL+G0/Zckk1GvrMR2QTFH/EO\numG+pgem0sxAA0xEhkbGbGhpRwRS8MD6p811Oy/vG5kmWUUabLPopaxSg7d1\nWDWVZQ4OvXNxoWRvp0IT1L7+huyFWJHJPbDUKTGNv7ynWyFvwMJ3GD0wZg0M\nKb1HwzEOz+ph2ytjUeG0OZ7ZOEZrX9AaL44vlkwaidGkuPCJUxpLrR5ipvEX\nYIqn\r\n=ir2g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/shape":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/density":"12.0.0-canary.d928692b5.0","@material/checkbox":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/elevation":"12.0.0-canary.d928692b5.0","@material/typography":"12.0.0-canary.d928692b5.0","@material/touch-target":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.d928692b5.0_1619199300634_0.8965757687173987","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/chips","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"251bbf9a9b2c5c39a49d89132dd2ce48abac47b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8f68de8f3.0.tgz","fileCount":157,"integrity":"sha512-tVy+IPIgafpQI05xTkyH3j3160EH5lxIJX4HGk2PxM4x5VKsjYp0Bh973BfbPKxE/7dyue3wXb3cXAMxBWHATQ==","signatures":[{"sig":"MEYCIQDbWKC7QW7v3+8PjRKhY5b2swKAt9jy/brWx4qU1Dc0LwIhAOHQPCahuyTrMjDl/zshjWOvxV3mX07W9VhaNl1Yruqx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw5aCRA9TVsSAnZWagAAhckQAJbPG+97bTTb62lTprMC\nbBWEeZaclt5HnakC5NkG2hBsg6WVwfE/Edy/TJIWkGQgcL7omDqUwW0Q49Cr\n1fK8tQFDD1VcvlnSxN99ENy+6bd5MTE0AVAcng7WODmsfHLpeOoweApe7B4K\nOPU/5pTkl4PhBGE0Sd+HdFhd/6w0ysWWbJRSthaJs8mxfVGE9riqdwNremL9\ni4x9x9WDJTjOFBT1qafwOvlBEPhfgu0d91L9NTquCOg15Gv+JsbOpDgMt5sI\n9G43qyg9x9EjV89iLEEQUUPBA/FSKHsyN26K8kIIaE4Ib6Fl51FvYqkdR8sM\nQoSGdY//mGeyr5Bw5MWRDSyfLgj4S3PLOyp2Erkd+6FEBEvyBFldMph8yhcC\n+G/ee5z/TWN8exB/63bfnmhUw2dwJaPqLdkWKKFzZK1zjQh9RaDs62FTEEnA\ngRuLxHtR0QTUcZ7+a9Yj42Synq6/qHp46iuop6mrlAWYq/hd4RBlwEZvzmJ2\nTywdDQIFhxNFQw3Fz8OpDIULQCIY6fDNTjwbOy7fe1zXnLIyxl9mS6aRUyjI\ncLFkGHjB6KCOkeSFeJFMHHJ5qH8ucFV+OwPgmuh909y2Fys4nw0lKOofGmR3\nERZ48/LijW2c0+AYF+GyRV9D9EVpBXo4uMxc8s5ZpbXX31bjrAhMvB9jGjUG\n0GMr\r\n=lj3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/shape":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/density":"12.0.0-canary.8f68de8f3.0","@material/checkbox":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/elevation":"12.0.0-canary.8f68de8f3.0","@material/typography":"12.0.0-canary.8f68de8f3.0","@material/touch-target":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8f68de8f3.0_1619201626055_0.16258560997879767","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/chips","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.05753cf77.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"817fb57f4589b84774cb78ae788f2d87d171466c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.05753cf77.0.tgz","fileCount":157,"integrity":"sha512-0cP5mnH3ZhiNdl41AyKybz3m2tQUai0TJnaO/IwyJznZfdRhHVb74QFkEj9CUoMl+DgTOjPN9gX9jQlWG8MKiw==","signatures":[{"sig":"MEUCIQCGRBhaceLW7MEZArnQD4Xo9IxFKjQ/1gvkPkXSkJT4ywIgR/n5W7V8Szhewo9wSPqzPsPijfrdxa+aMww6S5h39pc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1usCRA9TVsSAnZWagAA/moQAKD6j1NPu9BM+llTeWw/\nHgq34P2ctw12zRia0abYS/eQDuBKatmc3gJzVNKE7GtaV5oG+NxeypKrmVzK\ncURX30SPr6EwVcn3tpSZtXcKU9U6LzRucGEWU1sz7lY7EUqMiM1joSo5X+cd\nNh2qQvRneInNWm8R0vGNQIRgNoJtq6BgqCjZU52zCwdGnKkNMJqyCuI0z8No\n4CwZKfXmbsHhyzThmURyxYSimbNkbCr/YwH2v97kSn118AICoTXvy9pgLbuG\nA3QDSxIB3D1/AnT3ykdL19t9B5Rrbk1KnrozyM+GiXoeADmZR8Yc6Z75E6np\ntXrXW+GtXgQANWYWM8x6DJ8cOzfxiLhpi8/cGgeAwtjhzBpTPy6W+o11BFs7\nnj4X3PFDUV6ulT7v7Z9AtVE+QGb4SLxpIwAprMg+RgHCf/5WHroC8tqRi5gW\npxSftW3Oco/hNON4/k9GbV4pthILZIFOIRm5V4MmKmyPWf20TSk7J4sw8gO+\nDssukjAHyS0mjtw2CK1O9Eb4+SXEiv+L4t6jzvcyA9udahrJ79dkMRbki279\nmRR85VRaG8Gb39z9ZtNtwjJPXhm8wXsQMXAInHd7R5UK0Hxsyst0oF9Zea0b\n86VDeinkfCO/YcQvaXSPpkwC69clgACICHWRH5pYp8pfYRLg1ldb40bMDL2N\nECOF\r\n=XH6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/shape":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/density":"12.0.0-canary.05753cf77.0","@material/checkbox":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/elevation":"12.0.0-canary.05753cf77.0","@material/typography":"12.0.0-canary.05753cf77.0","@material/touch-target":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.05753cf77.0_1619221419962_0.05458713417361705","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/chips","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c140e440bfc93f0116e9789606ba9cd5a9e8e987","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.ef43e6d96.0.tgz","fileCount":157,"integrity":"sha512-CRlNULDINU8gUVsfQgn1sgPbp8A/m2dwcl1ONrNWc7o5oIcGtcUGMrWITwbonBHTicuigiSvMXOP/UsY2PRUMg==","signatures":[{"sig":"MEUCIQDbVDIS2u2ukJoE/1GbKlvNv6Ie2xzg0C6zEHcfAsUVlgIgekGbDS9uOFHteYlTngtwrM/2LUUbGHgitEOck/PsNyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg10nCRA9TVsSAnZWagAAQFEP/R1aceZ+tx54keSurM48\nU592JDjM6nn06UYEGLDM3pSrxIOck2Pzkg4uJVW5by3P543a0fdJtZGf15tM\nvNpn8VOWmUPYdxxLp/whPq4pYcKcflzJ4EFUTrzvzfzbUYR+PW+EoiSkqPo6\n0p7eya5UN5a6t6lNHwR3VlO/5BepupxdFY/I+35JRsmUW33r8EILseC4qLow\nVny1+Mi7uRbLAZ/50d446xnXqK+DRoFWdmcKuIgQ84BP8xVZEKaNGYY9yFTU\nGlTGGE0kZjlwG08DHlCvDbjGVfzwxMtLlY49Ob/id85DyXwjzsX/t6HE+jJJ\nCvpTL1IrBn39HJFPAWo+YCcjEEinf8xEWlfs7bugymX7/xwNqqM0SJ4/TyTg\nlqzLHn5d2R2dl96lYULfUEZV7rwg6ottA365uBGcQBiAT3561W8pm5RMcl2C\n+bxNgq4NzS3HayspqvVZdM54lNzX/zGTvmreYPoxpw12fv4Mr9WBG/haO2Fb\nPPxjNI44FwwS1RPmS5koluI0j6GaKtc5Zv2bIOzNeZs346fg+bKznV9Oivrw\nXP49mcvPD+lvFrHy7J/aMT0gPdWUE6vNCoU5JbQXNNPWLklf8qPbtZU2vMI1\nmSipJnQ49/PW0Sbw/GxTFCOqiryn5ZrAQ6IPDALBt3VYnm7L7JnBZ3tqNkSz\nnEGR\r\n=Vfya\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/shape":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/density":"12.0.0-canary.ef43e6d96.0","@material/checkbox":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/elevation":"12.0.0-canary.ef43e6d96.0","@material/typography":"12.0.0-canary.ef43e6d96.0","@material/touch-target":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.ef43e6d96.0_1619221798736_0.5480366730164719","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/chips","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58a2e391a8d3d2c7fd4238c233eb7322bfdcc155","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.197f64fa2.0.tgz","fileCount":157,"integrity":"sha512-AlOEYue7L53LokcT+RgwhmHpUVcxW5vnjaC54zgzNXsLaWxdnMasAsgn1K7wDP4K0IG/1w5pSBdBkB97Dr8SDA==","signatures":[{"sig":"MEQCIGsiBbCG3Kp1ErwkCBSwYo3AhL7CTM00uTMyith2JUEsAiAqatXECSWZOLGJYUL7VMobQF+8p2AO16hdn+e0HK0/3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQCCRA9TVsSAnZWagAAHzsP/ArsMlA0IeEPkXUyaP/0\nKRvlGqg4A875omG1Fwve36U386HHW3MlUJ0t9MAvmWCO2alx2sTbevdtU6Y3\n8pERNNGHOERtneb5gN56hivJ0cazz9OiFul/XtedXusKzzbDEhaA0xe850ey\nHX6KAfOaSHjxotQMGnO4P+lcp6GV0xxsf1vd8SGiQcceRZ8kRgdFARWsP7Bq\n3wY8L+Kpu3gIHr2R93+fIS5WaYN0o5nJGFlq5iOsfvNW1FU54mS3K0ly31XY\nRy1fNBNsCIWK7ayx5btlbteuhGiPGAP3x1I3edAZ9JQU62exJIpETusUPGds\nLEdiUY+4wjWppqpmzm4IYeHDAWL6PVrtaxDqJ8vZ7Fe+9kZL/ulx2d6Hbxd1\nbuGAY0FxS5Jm6Yjdt2O7CX0gQ2hPwJ1bKBPV67VuQ7g5uYa4FPA2kk2ngldH\n/aL7hWCuKt5Iycy0jBjj7re1ItuV/i4z7oPn111F5uPbqDd+zJi1b5T4whkW\nAO6o5iNCFmBVMklacq5w2BKULEn9Rrr5MTSCz+/vZBkwPhvWmHBpbo9BPwFg\nK7bRpnxjbqTkvQPBbpxGmLIKJH+v3CBfhj4Vfcq6Rz1FDOB/OE6yrgM9m9or\ner+az7sgp9/Jrkp40uHO7ELhkkCtPR7x/IAVKk585HvQqGkCjzfEZ4eZvDVo\nNI97\r\n=FP6Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/shape":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/density":"12.0.0-canary.197f64fa2.0","@material/checkbox":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/elevation":"12.0.0-canary.197f64fa2.0","@material/typography":"12.0.0-canary.197f64fa2.0","@material/touch-target":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.197f64fa2.0_1619457025595_0.6088444104027246","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/chips","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0fbc4814eb6d62bda2b373c1dbe515ebea9749e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":157,"integrity":"sha512-LYT0B4DiOXMVwnYAlxIk/cvKsQG1GBpehVKrVkp/iSR7xTFgzNtppfVHh5Q0MPRAfaz4Fb5d44jZOdr+TyKOtA==","signatures":[{"sig":"MEQCIDwzfaSYfmExsUBLsS57f33v7B/OJfRO5P6bNnw+/blaAiBtSmP4r3xTEenYWrRz0iWTsnSofiScMUaRLpCqNQoaeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2bZCRA9TVsSAnZWagAAxT0P/jsrUsEBPRWDf5TuHdNO\nZkN3nfvlYIYXbAXTQXxjHQC+P27BLiebiT7zsm4HDIjr5RfiJyWqkQPGkZD3\nsjub/hZQ3ok6kAETndY/+JUwHEiLDC9ayuUGXt9Ska5CI0Uj6SIMGwNepK8O\niC264Y/tmwLZi4avNcTW5WnRPSsFDqTk5fRHzkC15jmHQ6IU7V2oADx/ZCny\noa2LLqAzbPIcQfDKSRy4O7cQGfNNdHnJgpm06K2dxM5YPOLgTQCQxVpWy1J8\nq2GboVmsRJZ2L6EMV7W82nG9K6x2pkzWhV/LjI2aRuXldBuf4IEldWJ55i+p\ndaJfxHXaa6kzyUN5s+23PW1rAJZKqKXQ9v+LQOLeFgrjNDIAWn9puBf02EhP\nFZJMv7Y93hfj/uixedYs9oZ74PeF3+T4EapSgSY8/5e3YMPnyCSJEMYjTfPg\nyGELUgaEi0Szgu8Z9i/8BMRfJTiU790X97WRK5Rf0sbHbxkynyJrYl2QbPod\nadTYJjFhdU/UXpXge6YWKFljDSDMQd3t45lvNSoTNTVgw15xWZ55hqMZf9fN\nseanAzxUFoAZkeIAT60LWBwYBnOu7+VLtqh4Om92JT2hIK8cy9evNBzOMdyQ\nECGwLpU67XneaLAKCXZhG4tCqPVQEPc4RXraprWV6I6vBweAuPKMTuUkDd4N\nOYfr\r\n=6Rr+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/shape":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/density":"12.0.0-canary.55ad2d7d8.0","@material/checkbox":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"12.0.0-canary.55ad2d7d8.0","@material/typography":"12.0.0-canary.55ad2d7d8.0","@material/touch-target":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.55ad2d7d8.0_1619486424530_0.48796568548206887","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/chips","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"337169cc3a324ae1cb49d0fab125a2277deb9cbe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.ec4ac5234.0.tgz","fileCount":157,"integrity":"sha512-qiK2J3RCfgcQzJEyX3Bhfs9L/IxYBjcS8w7uWnSzZmQnrzV1aePzN+b9LfkCYHo/cwKxtPG+MuoKxPwDlVSRrA==","signatures":[{"sig":"MEQCIEeYyGxASngC6dz3RfFdJkqxV2vXNMTAK2iuAk3GEoJUAiAy67ZJVbNtg8fgiiv0VgB89wmSsBx8JSHtskV1QB34iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8RNCRA9TVsSAnZWagAAC78P/2nLHxEc2sKXmQ6w3BTL\nT8PRfvgvdvyhO18nkNBZdunntb9E/Alnn0X857WK4UTSoyhj4bVrSgNhudhx\n4fkLb31peyoAQjZkX3Zijj58D5VI5F0YZJxCBLrnsQN80h4r2oexK2sjchD9\n3o2ci428J/6uYkrUv7ekNTY/+NFzvgGt6aSGtng7rY2bDuRxQwKa95XTqqUl\nE5nSRS7Vrq/KzQ6nQmMsPKHGbbLcMOBkuOPcTIeRBwM4hc8Eo6q0A7GaykNt\nZ94+0ySwyx0iy6Jl9+Y1q95zC0CilGXnHiizXcK5yCU4EIDl4jbfnHdtwpXc\nQkuYZoctbu4UAi0iS7ApBih+LtVcUhZqJQu8KBV808DwGB9beexPkrkIuAlR\nQlcBnb5gSBopN+MnPmcoe/kJ7MchvbKK4yxuPjVa8T1BYQdARIk6MaPP15lP\nzf8kCLpDNGMG0u/MEX6WSWUjAF0+GPwhs1efLTcdbNxTYjrpURueG08DQ8Ut\n9UrRcXPYywCvSi/hE8liYW9IslMVCfSjXiAJlp3O1Xwn2h2/iYqHw5Cu1Uhz\nyJUbwnhXOqxmae+cVTWRroaZ1pb0xWQEWWOc+wMfz26bs4m9osNR82LP7AJD\nwLlEvKI/RDcJRrFKkpsoOP2RVh6ic9NF6DrsETnwTEOE8Zyn1s/1Grdz0Qj1\nJ5JU\r\n=csTs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/shape":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/density":"12.0.0-canary.ec4ac5234.0","@material/checkbox":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/elevation":"12.0.0-canary.ec4ac5234.0","@material/typography":"12.0.0-canary.ec4ac5234.0","@material/touch-target":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.ec4ac5234.0_1619510348990_0.7450157203042016","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/chips","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"822e91f554c558638bd23bd357e1b12fc575fbc2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.b0579acdb.0.tgz","fileCount":157,"integrity":"sha512-ghacbBgPvjESYgmvyNrtYWDerNlsb4jqWFTn7qa/ar7ORckQ8QfNtcsdOsbh3JTzO6y7NWWcVvT4lIQpiXUmEg==","signatures":[{"sig":"MEUCIQChi+vzCA2/U16KiK6oxEqPOz6tVMdXNV8j5KO2Hvba1QIgMd2ZtoHNFEFf/26uJ6JoC7r6hsutDbD0iPTqd8DfJ5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh80sCRA9TVsSAnZWagAAiaIP/jQiKgIo9X6IV68l/MWH\nM/myCZIvLvlAt+cwR5dRmJsz+knr091Ss/J9Dn0lyc1bnZaWNk8WK3M6rTG4\n3iwDI3niFY9Hn6g6tj4vvrKGzSoH3XaHALs0z/zlm7tnqjVfiPKx6VVWe6FH\nHlrcljF2QeM3+aStVCy8GZ14ovnxLcFLcwm1lWayLOdvLC6yEnTRWMbI4Ued\nH0m5YSxvas8uCRPXUEmfsJOoXH5jSkpt5S08bmPfXaf2LD1EpGJ+Qcp7/Qdl\nAIGcRCu7YeXF5MDw/Eat9eFQqE6ZBO/p3Vq0/TpnBxoir8JMCLTFjyzUSdoI\nghtb8UqXC5Tvl3DG3a0Du163RgCrnBJpEZvhJuG5DjwllPcxm9r/J+lD1PE8\n4tmVFTuB5rSBEVwnZnskch3wk5eWFGE+mdnrLXXbFIX/kfJXOswEU1htR6Zt\n0EwOrCDlviFldMDVviCTaVfAesXmFUmVcPN+6tZlYrOm2UTG+jhAo5Wf2JqU\ng1UvLNc7d9ktZ9NJqmOlsdlXdeqiaYmasLC11pFUy99v7ktn454fOGg162mr\nVN+XpWzlWsM/NhnBToOKQ57qzkGSN8bklNLdAITAdpMXnE3sNueS3Ov3JcOy\nbpxSDu1ggLNKIRZZlYBM50JDXO3mRp/wZSEEJNYimrjfxqxyC9r76n7Juueu\nabxZ\r\n=5Csg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/shape":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/density":"12.0.0-canary.b0579acdb.0","@material/checkbox":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/elevation":"12.0.0-canary.b0579acdb.0","@material/typography":"12.0.0-canary.b0579acdb.0","@material/touch-target":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.b0579acdb.0_1619512620344_0.6994368822117594","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/chips","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3466de58ec5bb11fbf9b31d90b814e7a645475e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":157,"integrity":"sha512-g0egizrI5kRcVNfilxLffjswsjL0t4xTz0/mk4aJT+tAdju4k1WPkqfAN9mSRvYkF/T/e3M8dCg1vL9dFwJTKA==","signatures":[{"sig":"MEQCIBU9rWuM6PR2W2L4hY0CPihx303OInlBFlNE8fVHTIxAAiAX+69Iuzt8sDjdc17Z6E39tcvtNXfx6MNfWBf3TlZ3nQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHroCRA9TVsSAnZWagAAhZ0P/3ocU7nPGj7S1dfDpP1v\nj2o5w9gZdViQNy59DD/JDe/GDCC+lHu7VmlXJfsc5RYvUglJ2XsM5HDwQJqe\nJfqwLfAXE0dVptCuELiS7h1YF0GHuovXdgoaEE2lTNo9CIuYyaMQNEr98XeE\nl/t6m0TkPVE4Ptr4BMfw80V2d1AixMYFQucT89hu3vi1K+6ivCYCEEMUcaYT\n78vfcJYfk1qxqKnbGGHW0quaGJ1FwBDepwWrCo8MPE6PfmZ9rcqJq62FVJll\nxU5QsaKfAJ/AAJfcF4xiG58DbqatylY7pp9+KTuKwa1cs20hSF9ZsrcaUdQW\n2MOIQ3VsADn6JhmotNejB61yHFbo7eW1uxDQIp2qqjHiiwLlPqKOyYZ9TdXR\n8UzJVvFL118o9fefNNIe593pDNGggynZCF6F+24HdFDHN0vWIxNub1QuUCcX\nVCM4v0PApqiRCdVZ3xdUODWYqtc2O4xb/eANsx3Lpcwq6uvFqbFzEhwDyh61\n5SkEQPJ8wlkxY/CSgXR/Lg1TjepxDMPztNra67IAOIsIp2AkSzT16gDyITAC\nv4wM9IDhvzaJF5/7qHpeo4M+mwHr8oOh+Q371/Vo2w1uImM2rMoh4vcWtaMZ\nS3ig/OyOiJIy2h+19Pw74lKWxDFAfg/6vRTNH7s0OEAU9HXhyst86Xl3dUjz\nuvY7\r\n=d9UV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/shape":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/density":"12.0.0-canary.81e2d4ff3.0","@material/checkbox":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"12.0.0-canary.81e2d4ff3.0","@material/typography":"12.0.0-canary.81e2d4ff3.0","@material/touch-target":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.81e2d4ff3.0_1619557096129_0.1120741479195062","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/chips","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45dabba208a7b665a4e94f7a3af3ffba73852384","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.c8edee52c.0.tgz","fileCount":157,"integrity":"sha512-t6RmrwObrEofJKuEsvvg1GY4FniBUjqMH2QEdsamsc4Y8GUUH6TcauBJAZrM18IJN0+/0z+15K4A5jDe+u0RQQ==","signatures":[{"sig":"MEUCIGhD4iqFcAcubsIbG2332QyERfp1io0hRTVK/O3FdJuBAiEA4LHuGOLdtw9SA9OTdqMGRwocfJWU1GeBPo1vFF2Z6ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZBCRA9TVsSAnZWagAA/IIP/Apvh3XzfT+6U7DHMmOH\nxtPFbC9D3xSSXqx/CtxSieOeNZjajJrs/jRNDtsK4u6dvxgIoBpSoBasZMlh\nwOmKedKhBOkMCADNzyeV9V+v8GBTK1Ncad05+ZduA2xUevS5EdZsm2uSzLDx\nbBL15jweo23V2fyyvK37UPxA6Dp8kwzXeQEMnGQQWNIDnb81vjf4VrJGY+4S\nkY9fGPfsTsiort76xyymQH7AfOxABO2w2GUXjiQUfRssRvfXWGZJ7IMj7BHd\npFmXjs1fpTO2uVpD0qT2uU2Tq0HOFWnFV6oGnFvQd1LWrGj2+NSaEt7JOmq+\nAHcM9/vsvfMmVYSaN1zbdo3ly8eGva/Tx8iFWQJi54YVGe/dVbtXOSHcy9yl\njja4JeQaY6dssDuzpLcjQ8PevrB0etGQSm5VEa+p+9bgr4gStQCov3vGmn6e\nGJr+Lp2RRDPEcKuYGWP+hc8nLsA3kxWtGnshj/Q2VpghiM0QxnD9XKkVZJMr\nYpqQQlGa6zLwMFn2H0U/GWNay1wwKH9proOM5RYmOHzAtjE4v6jRGcU+Qv4C\nMVncmtNGbxD/CcAl8Du0hnYNxNLUJqnOAeWpxI/b5CZtBCWD/bHzjdwMX7kb\nRJLNvZJxft8fGyiOlktg5IluV0oSbXNbNEbeTmaXzGs+Kzx9BNJtLw0FPztR\n5F5j\r\n=QcYU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/shape":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/density":"12.0.0-canary.c8edee52c.0","@material/checkbox":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/elevation":"12.0.0-canary.c8edee52c.0","@material/typography":"12.0.0-canary.c8edee52c.0","@material/touch-target":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.c8edee52c.0_1619560001245_0.1502877117699084","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/chips","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b07111258c30a18abcd83803b62129abe138c28","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.f5b6110d6.0.tgz","fileCount":157,"integrity":"sha512-OpEUH00ns3GjjMgJJ8/6ZTwRuvWPw8PtIMgRV+dUlwiaZjuul85krYnGbREufHWde2m+U87sIq7xIVf6u1FEUg==","signatures":[{"sig":"MEYCIQDajw5DgB3EeAXDKaavHim/qWkSS2S1R2xz1x1BBEx3ewIhAMTrVfa9Vo3XNd02vBvZ2D+Ni8GwaqoYwBgl8FUaevju","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiItYCRA9TVsSAnZWagAAKHoP/i3d8aFw4i3mC1CaAb3M\nmpcn1jTat2kcopYwAiVAz1es6bAOkYt79aHXDhxOtrViL52njv1HXgNK8RZR\n5Wu5ujpI6kd2r4+Jorzx3aOn1bEhWnJW4ldsaTuiYVwiEQWMjbT6akbQPCVb\nNMIX5NTIVuzusvWSuphPCG8DETBtluHnfR8LVOtSUS3RMxEP51jy57EsRhq9\nYP0weT56yOyriHnbK/dYHZGx/oSXaf+0MNvNbF6O5Ia1XLQtf6Iq5R1m2n06\n/06QEbxI3tpm3H7CNIJ5v+rawYIZQMWU3+LC9PXlBTsrmAaMu5E+//6SHRyU\nUf7zG0YV/sNNNu5kbqZ0xPlEsUh8oric4FdwozyjUKd5gYt/jokSplrcMwVI\nuEBtUv73CBaQqg6cj7GeqfOkjPqnU7chsVfgnxHRk/TsUKcCKVIlKM2PSodl\nttm7AETEE/GnYiYGZiktt62BCChcJgno1XIBXlBP/Y1rY3GrMcmpnSULOSgr\n9u8sW1FAV7xqZY7xkJ7SLEByQSBeoQegK5C7X6w8Ui1D9TiVYoCPdSdqOY5R\nbobuk0Gd4c3hhQ/0RCXyzxC4BDd4avZ1PJo7m6G+caDQnSOC0qJ0B2URwUTM\nf0A2hzxZpDTP3aTmGH7tXSE7BbSvopGFWB6UGPvMqm+atFGMNQMH0Bt+nKWJ\ngYo1\r\n=gUc9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/shape":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/density":"12.0.0-canary.f5b6110d6.0","@material/checkbox":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/elevation":"12.0.0-canary.f5b6110d6.0","@material/typography":"12.0.0-canary.f5b6110d6.0","@material/touch-target":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.f5b6110d6.0_1619561304077_0.8876030984553731","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/chips","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11e85121cb1adb10c97c673965f21e83289c1b5f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.cee9b9e22.0.tgz","fileCount":157,"integrity":"sha512-Xgoe4h4BD3cyEynnmKaSyhiGfv+eTGkW19C6uELNHDSn0zNbUSdEte0gPydbYztuQa01bg9H4hgO44rFhjnwPQ==","signatures":[{"sig":"MEYCIQCY1in9zW1FTmq7+GhF5hKcNP1gNPWZn9QP+kgbL9SqEgIhANrYljotqxCJ9HRqbcqlgk18q9C+UNMF+kK2Ngux8xKg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKjGCRA9TVsSAnZWagAAV2UP/3n/bdqjuznZtUO9Akpe\npn8XCacI0wIvfUbXYr87BWM4nDAAMvbJ9izXlYUwZ+3/0UbpeeDMRLRuJ4sH\nBY50UaBEYw61qggFBH5v/jAqaZK3VJrLaCnr4E2zIfZlODWJqQUp41AZMgK1\nF9YuafU0ssthHY+dMsUfUEHNV3ILbgNBGTDIsI1Uu++PqlOYvxW3qugB6wqf\n09fQ3cm2PYJiG6K8JJtTh5mlu9iyY1hi1YwX9V4kswXvEa7o22sOSz8rWEZ7\n/u3/ErjCTw+XKhZ6uJKquZQytzkyeMMiFqV30dvXKzwtAe2cWXJEFWr+W8p7\nhVKNQjm8Qab2GLWZOCZOEG2J3q8CaKyw94rXpEcE9nCd1y/sm5MC6Gzni4ez\nqF46t426R6rtGqOT3ayn6Mmx89jduT+ohOjSLE+1Iy+qcCtki+80aF/7WquP\nui9sMEgUvJ0lg/pEIUH9spkxKZswq2GJVnJdj3ARyKlBFi0b4b6fm1S0Wr0c\n0VXiL9CCcweZGnAkXcviHEOEqon+jMhuzSsbJx7yEmz+nk7INnt4mc+phhC3\nCcutRlnO5p0kQUXCt8qEmlu2UkFKLEjwP+N98tLg34tKq5MNaKNzJ0/7uCx+\naygeqRGcXEUJKdtEaMGm5aZW9Q5JyM1EPF7pwkhs901ghiCQxdjAGAFpLb1w\nwG52\r\n=Tijy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/shape":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/density":"12.0.0-canary.cee9b9e22.0","@material/checkbox":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/elevation":"12.0.0-canary.cee9b9e22.0","@material/typography":"12.0.0-canary.cee9b9e22.0","@material/touch-target":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.cee9b9e22.0_1619568838200_0.5812156591696089","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/chips","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e356b510833b01a07db62baeab6a7124477373f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.96e83fca7.0.tgz","fileCount":157,"integrity":"sha512-nN0KOl0JRq4Is6AU8tKf3ozxLpoBpq+lgtX9Eq4XmCklUqdbKM1KiXXscQucaBjW4wp7TODYUBxrzdYodgsxnQ==","signatures":[{"sig":"MEUCIQD3z7HzNn7PPoXRE2GrxY9JIvsLEkeBEAEVCPazmiLlngIgVCspG5lanblPqOoe3bj36keWN6nmEKIboQ6ueVu1gmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMz9CRA9TVsSAnZWagAAVKQP/R9qyGffc7e7ZYB8pI79\n0MP2rY9zUSqBhIFAzFXcP+Xak4kkAzDiylcJZm+AvM9ECbo5i4abL/JyfsBN\nPdS7IiG3GhFEsiJJKhnij2UdUfIJfbZ+7Z9Q+uEutJlCTeL1sCYR0JWhGRmQ\nStzv/rzYrmfbW9fVWa0A7LbThYR1s3K815wN7c1PaPRB6KrFqYZwsRXY1TUi\neIILqpKteefPddG8jLG16gB5GEfZb4YigJdbQavVFqV6X8ina3vnYbu5wYce\nBGe/YxCDwVhnxv6qKdY2UYFp2PsiDqyp9JqPJKipZ6CFHurVct2aKUCOGnrx\n9WMkGf6m1hMsWZT5HE1EmWWngsHxvKdbGKO4xsA/TGBT6tpjxPJ9FS+/TZoi\nvDXY9D7i1znZ3wtE4yw682rNxAbScPdUv8/17OZv0PdZ+f/iB1CIMXtHrCht\nM5AamP970tr/y6PBUCVXpfWFRWAy57LBNioRJJGr/Pk75t7YepOICHEHRtVN\nYYWVhLtOirewOWNlueRqQb959QuOhSN73J39mnS4xVLZHVrBXVIryAUECTmm\n+pOBJ9LLNY/GnNvz8rDK7Q7Pol8661mlU/Rm7suuX6RSJGLXPnz1hw81xN/H\n2iki8O0AAjrm0jRBJ5LDMsLcpEXHA3HdEz/NQol8X+UHzq8MVbVdLn9+QGV6\nm1zj\r\n=+tWl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/shape":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/density":"12.0.0-canary.96e83fca7.0","@material/checkbox":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/elevation":"12.0.0-canary.96e83fca7.0","@material/typography":"12.0.0-canary.96e83fca7.0","@material/touch-target":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.96e83fca7.0_1619578108888_0.7164873577408308","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/chips","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce3d123faffc23c34c5fae0a8462bfc51978df8a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.4c497bd19.0.tgz","fileCount":157,"integrity":"sha512-ESzXycC6JPONrZCIdqcbYpVGv93ZPk4A9vFr+XGLgL1CeLIBVng9pX/Ciu720GVutQR5wTCbWb0RrWvNtWuR/Q==","signatures":[{"sig":"MEUCIBCAHqe4cR57EbWV8Lv8Ns+3mMgrZjV5eC+e7qDTd5g7AiEAkFJyIZ0Jqp+VmI22G3sj2Cj6o8mCcI4ErmuPjs72zP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaFECRA9TVsSAnZWagAAvgkP/1oU2Kp6aBUn/qFK/+Rj\nd3qCyFWslA9S2rBgPnyeh5dzAQ/rXlsjJchVSgUfZOMKqgev+6EJL53WYh5b\nAFZX5y5N7jtDWLJy5OF26QrDZI9/AkNbYE/nmhZO94TuwPSsG+1agajgn1Vr\n4ppDZi4zci6dXmzVCJhV3mG3BZw1PIB4R5gdz2LBEs4J3FwpGN6PbJ6Swsrk\nOykevmQ3M311Sb10xcbdWHC7V/Bzvu1Xvn0Yrsxlqk2QXQ5Ja1d01Dqi2OuQ\nWfk4s/aI+Za/O/OZsKTj+Wwlyzg8/TNgFjMEYPojMWjhhTheTNcROWHKSwil\nL4gu0zKCSWmYVZRp8pbyhlpbcwTtIi6tqq6oC6uoh/GBDSaPDGTQzWu/rsfD\nVeu1rpBmaUr5dvxwB1S3BLgXZue3gqg6dnT7/l0OnefNP1EaJ9ADEoI7/FHQ\nBEtpsKpslX1NmeEePulaPsm6C9N1PmNwdRdEOfYuQ0huhcnXTRulVNsbaeKE\nY8fJGKl9QsKBN7viYM1X1HuRVtVjyXBCmJfQ1n6d7xzmHErPamQOMAtgGJ3L\necGTaSdgX82Co+E+uradkudaU6MTRIF9WyjtHVj1Qi6P5VIKP/Wn3sRpcJGi\n2XA0qHC0ZpjE1xqY4qtuErHB9kCSdin/BzfR5USuE0qqptTA2wk1bD46guDi\nc65M\r\n=cSbY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/shape":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/density":"12.0.0-canary.4c497bd19.0","@material/checkbox":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/elevation":"12.0.0-canary.4c497bd19.0","@material/typography":"12.0.0-canary.4c497bd19.0","@material/touch-target":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.4c497bd19.0_1619632452103_0.9689071700981686","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/chips","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.105b15b96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ae1884839d4fc58e1e389194354a908203fd7a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.105b15b96.0.tgz","fileCount":158,"integrity":"sha512-h90i5RtlCP8+A7pVXQ4w3+e6bROTIX9jK+k5SMZOQgCehEmtxuwOHDQvL4CGvYSqeZIWHo42vkb8io6L6Xf31A==","signatures":[{"sig":"MEQCIBpiSndh/W8fuL/IQTm/NoX1nthawj0vYDBqa+S8t7DNAiAE98JvNskCrqEgx5YonSi159bNwqUpXKlSvb2A68bP+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1250921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiddzCRA9TVsSAnZWagAARD0QAIhV2cWATp3v6Hr6yX0h\np073CcCAf2SR0TTFYW8U/ZDOAJZp8zLZXxhe7dlMK04ZP1nUwo/Egu/aRIQP\namTAhQLj3LnTDPHj9Ehg8hGT6Vw6c6Wdb36DyJGlRAFFb9Bc+Qp1Bqf2WwHh\nBvBmtl5Mj1pGvD1H7V6DI1+B6YJ5nfilHX3T9WXqA/VMQMMCNVTVaBQ+JRnA\nXEoUqOX8WVIGWXyB8S2CLrPzKBHa92oH2I9Qx6PXkVZ003qcDJDtvOuRXHP9\nVot/GsSyVgouzzR13BqOLNcPdc7MjzcvX0xLYJqQSl1aIJsEvHf283ufny3n\nvc6jtiEWijVmmCMgWoG7eqExzx9eTcr3wbqd6tSOz/pLwm47rzx70C2xOtSl\njljhEv4a6ntxqxTrARMPvEygpyEe6AE3NC0F/WRONzUnxtQYD2ZPWXHeWFfK\npPl/T246GLUw++WKP+LqAItz8Zmn5i0VGdYpCZmtzZYhlRxtxT4gKaFjgnbx\nxtcqw9MrBszz6iMInXGmxIPyV25p2jWexMZ/L1xywl0dYLa+Cd4C+r+NURIO\nnJ3xkZzuza7bMq73Nqvh8kRLOk6+0Us2t0px3HS2EXN+8yYwm4qR16CMz0Wn\n+I08BrPO7WE6pTLdmYZliaU3Y732GsdATSzSiJGin5zZuKOFDEExECQhTZ6V\nk002\r\n=JOoe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/shape":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/density":"12.0.0-canary.105b15b96.0","@material/checkbox":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/elevation":"12.0.0-canary.105b15b96.0","@material/typography":"12.0.0-canary.105b15b96.0","@material/touch-target":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.105b15b96.0_1619646322824_0.5884019919781089","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/chips","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d01ced7e522315cbee7bad00cee93a11e9c8387","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.6e20259e3.0.tgz","fileCount":158,"integrity":"sha512-5ntYhj5VkqnPzqzvD6uXKDDiO/PzWtucTtYLxuPcGKrw/Gv1UEg695YwhX8zBGMi8hLbtD4y0jvUhP86Y8EIMQ==","signatures":[{"sig":"MEUCIGTEjnSM3uIBnchDQUuFCg7YN1Zmz3R8lvCzobWNrlD6AiEA4a/YsMIwztLE0+lr2pmkw8lQ7K7HCSSpvW65wOtSTgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1250921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidh7CRA9TVsSAnZWagAA2nIP/j/yJ0mL5uMOz2v0VAdi\nEbVq8jtyaAz9aj7qvF9JLQFwTVq2D2H1IuMq4Q9vt7iLgB3JvGAlGhW5dSkJ\nupRZ5rIS8N1CZMmbnmbT9/fa6RxVmFRiU6Hc5nyy/13uTcbwVofiyZdWCY8t\nLKQTCOP106twnQV8zEtVkTKmvaYFWHpTL5OQjMjwmqjrFbCHjLC979US6hwj\nBt8+PGPhyVXG3ACE32aJa2InrKLvposy+v6itNdMXnZLBHhPpQRXGGs0esgL\nnjvHFv/tCoKyAaESeY2FDnsv1pTdQkHCU80lpCjnlPZEvcNQ9zgzXSDTywFS\n8NWXzmGQETEBx1RCXBjp/Xwb1JX4pyqS1GXpjMnDfA8SS8De3NwaVwalaWgI\nv0aUtVkzBEsgkCuzt6WOI9KxRZWguCkWOws3V3OgPTFGy09L9y058UlV7xdb\nWhv7gIyDi7ljsNQ8CZNGhq4c4tLulQjAdkugT6geBDp2M6pbDepfamyOW90+\n4wdAiSaIDfq/6wJoqH/hLz9xFyl3wle1Q7jv3W+qzH2sI5DWVHyvYlGtAaPm\nd5dnB1wg4u/pC7p5Sven0h2h4GfNTsCtVFTxLhF5E4L9AgN48uzvAXovlBv/\nXmrU0HAwKo1rL91JJcB4fJWRRKQgoj+362A4z1Ch/5thhGMw1j2RHjY6aEad\n197W\r\n=KeFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/shape":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/density":"12.0.0-canary.6e20259e3.0","@material/checkbox":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/elevation":"12.0.0-canary.6e20259e3.0","@material/typography":"12.0.0-canary.6e20259e3.0","@material/touch-target":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.6e20259e3.0_1619646587481_0.57613559882098","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/chips","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"098d32df1a26166fe09e7ff158657362814bb25e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.0f79a5d74.0.tgz","fileCount":158,"integrity":"sha512-mUPhhnBefGrw7TOXxn/TTuAWKXZuG4Q4enJ3+78v5IPkLYmbe+XTYMXGP+VQDwho3q909GPP9T6pHwQ5imIwmg==","signatures":[{"sig":"MEYCIQCW+BAy/34Koh8CTLWam0EDfInf0q53zGcCe8TPTf+RfwIhAL1BClPl+LgBSuzhcZbAciBR8ob//XYof2S/dlG+yY+D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1254842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieUWCRA9TVsSAnZWagAASGoP/1pY7dw6RRErcUmAK0fX\njDk1OVkxw71NU3L9so7V43IHZjNkuJUvAVKbkRKrO+BbZtvtZ4ZCiu3QXDjg\nbzex/3xtFnw4+NykrS7V/YaMd3Jc1r0SD75SwgorrGRdxiu2Go9W6kkMYeWQ\ndOn87UfrR0qmCGTsNpgpWyUUqzdqmHqG6x8Fo+NDCFT6haUqj6fA2uhc1Q5B\nYcyhXO8TisRTmfu93Ko930nqGMRW2mTAlQXBGF5OkH50odPPEVUAuiVbbRbg\naFbqYW7tMKfBbw+lYwTPUMKQt00KnvX8W6hxCxtgL7HARRKQKhSRixMIpqYD\nsY2VlP2jAnKfXLaMTXazQ9hY73m8N+7GVqsf7YKlrj6+yftLKGtaZUUykZJv\njLklcV9+XFrL39bollDqyO4kgAamMF9tFlgNMqIk2a3FfOLlF6ZvUpEE7Nzy\nnD4zT1gVeTdgC7d1w1Smb8wZI1+p+KMfxMqLW8735fIMdg1NP+myMyK/tOqw\n1ymsVg/pBV6rwGKQ3Zr9xviAkR4JbUXtUBlRTIepXUHVpcb9MTVZszyYXUF4\nUXpCf5kAk3pjI36Ex7ONcJ6loWu8KWgjyCf7SDuhCaadd+U2WvdewuPqRESt\nX4b/ngMA5zKPWYJ2pkYhbgPxzbvHSyVD0LkVi5R8SW1KiCD/SxTVZdLRvhaH\nHPfi\r\n=ZJdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/shape":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/density":"12.0.0-canary.0f79a5d74.0","@material/checkbox":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/elevation":"12.0.0-canary.0f79a5d74.0","@material/typography":"12.0.0-canary.0f79a5d74.0","@material/touch-target":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.0f79a5d74.0_1619649813679_0.7318029926012013","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/chips","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ba885e4a17fc863611c8291c7a9fdd8b08b43ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.84f3db9ed.0.tgz","fileCount":158,"integrity":"sha512-Uh0pmtl4X1+nBHIQ75k3KrI8zyQ0vdFhcKLp8o/vAYX7Ot7frIzX1IXu3s3ETyHeZ5tETSNKzRps+Sez+tNQeA==","signatures":[{"sig":"MEYCIQCF53DIh7pZrFSRyAm/O3Iqqslawzc5xIJNykk9psCHoQIhAJvDRr6FRACA0jiC5DePR+H4TeWRVBLzfayZcHjaVCAf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1254842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisA/CRA9TVsSAnZWagAAYggP+gJzPGItX4xjky71XpAM\nd3OOSusJdW0gVAZCyKICH5QCCdPvhx5hocwti88ap0xRny+gR3uJx0JezU+6\n18bBYkFXUCCysGcn9nX7Fpvxdw425tlo0cZpl1wnE8akeAnc0r6IbbeQe+LP\nezE1jfyHbXym9/iBtU6PYyCf7dHiUnCHE6xUcrBMOTxCNcwq+/LTHf/TMrKN\nOBnsaRTcT+oYuZJgkRQadIP9gT/oKY4SToJEMwceUGI7LreNwZ8D6Lm4JhlV\nXmkMz83JjQuJVYAaJoAmjLEoVl0I+feZIxt5RpcKtpG4HpGbK8W4tUQLGZat\neoxyzNbhzBaLD37p7wCvYmj5mCplL5XbeP0tLdynDw/CZhq3TIP5tR9OgYoL\n7DvWEINQcH17bEILae2422sBJW6n+iLogfiPcYbUa44V423r1X+KHOpQtPHz\nAZ1S+TSquZSOT3wUyquJ7RQWPE8zRFxNLeiXSiTLf7CKeZ9m5zqRvUPaRs0J\nOhIDU0ReXnLs15XXVmGlXbJbqI4D1p80aH44KaCAYQugV2E8vceyFpgUg3WG\nO6ceMX0KFlI88bg6vPCy3O97SssUiOkxfTsJ4IGezbQ15njbIUU7Jag6Z1Bm\nEVO/+nnJUq9FflqNDYOAnttfGw8QhEkeO/IRAfPnMC8BgY2Jq8BlbvxVoTfg\n0z4E\r\n=ntP/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/shape":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/density":"12.0.0-canary.84f3db9ed.0","@material/checkbox":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/elevation":"12.0.0-canary.84f3db9ed.0","@material/typography":"12.0.0-canary.84f3db9ed.0","@material/touch-target":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.84f3db9ed.0_1619705918415_0.7372997422987579","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/chips","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9326e3f400830ed96be9890b450ea654b108b784","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8fc29273c.0.tgz","fileCount":158,"integrity":"sha512-kTktrnj32FmaLRQRosNOeoV4cRRt4MI2EDBBwqbV7KXyPnMBa9vxXpMn1T+cU75NlQsUgPiDiML76A9ZPWtVnA==","signatures":[{"sig":"MEYCIQD3GmXGuCbNy8mHeCIJr7+8LSEOj0ou7BYHhunx5Js6rgIhAJxzX5+9TQ34/q2n4FEUFr4m24/3WF1Luf6toinWkQAg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1254842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQECRA9TVsSAnZWagAA8eQP/0cuovTPmGpYlbFJQBab\nYUIqt1Zic70AdGS9OPrG7Iw9ixjTnPoROIfUXfnG/kuNNyvEftX80syZcWA7\nWM7sgOpof9uYYMsvVTdBfq7ordONzQPfQIvcush7TSxlR4t2Hkul4+tsWPVl\nHevEAN9VGrj3+txD3stSQoElKphngR8rgkQdp72ZvcdWop7QJDNAi6IOwnB1\n6Cd6CJVkWE9M0az4Sv12cglEwzl6DkpWLFN50scfxB1S/pcAxKjxQzKOcmc2\n3ocYOJfYJRq0jEhP7nDbklToUAixFpkYEmQ6mgFTx8MZ1J1LiJH5MhSzgt1A\nv/C2uYMZrNN1phzAGQioLY5k1lyKID1e8nmmOH1074Gvc+O/gOLhU7J2LW/D\noMNRuBoT2AnzUIkA8ZMulen/GjHl7hgA0f//jtmf8B3q1SuzFxm0jPRTNtnM\nTrOECBPouk4E6Lrv1yGdrRuHOO/kbc5C1mshgYd1yLIn1ngAsPO/BvGgP7ZM\nUFfRu+z2RQhUTJ6XZkVOD318DV+fe1A8ZVbN855QfYbTnM82Kg3RXA5ww/kP\nPg6esNGQ+kKv1g67wS0JDNemD148FAS0w8f9miyBTiaCDO7L+TE3kdiqj62r\nZjNvtInnN4m5lwDLeCb/nepuqsUMPKzE4EifEJMWWoeN0golxpoML28dCJGb\n1c0b\r\n=DIhw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/shape":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/density":"12.0.0-canary.8fc29273c.0","@material/checkbox":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/elevation":"12.0.0-canary.8fc29273c.0","@material/typography":"12.0.0-canary.8fc29273c.0","@material/touch-target":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8fc29273c.0_1619731459928_0.8134835553316018","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/chips","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"367b6a182194580fdfcddc3cf5a947c450093add","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.c50d20bab.0.tgz","fileCount":158,"integrity":"sha512-Sv3YmlqUY5007p2N6MLKpcU/hPfgMCvd7vpOMRyFWMLw+j5tTPCQKAMsa+WqopIOwgItVW8I51zhEfIVq354EQ==","signatures":[{"sig":"MEUCIEYWLDdvdI8Iu6PkzHbbmiLvnHC01n/bQzZdFi6z7u5tAiEA0zpL33XjlisNu5XXSsxtur1ajQTjVfyiqsltIuD1qpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizsnCRA9TVsSAnZWagAA9NAP/0pUHw2fJ9LnuwrURWwy\nn82qtTavhJ3hcBaaE2MY/75RxgS5NJuGfcbJ7GVqkdcTNV4hZ3MfLC+ggSxg\nUDSRDo4SxysazVWWissUP+nlI80E/04Mwqnmd5s85/SOuiGz07Etfx1NTD0l\nBEOe//SvTki2ce36YK/2yfpcc+G7+u8MsT0frCArR+gBWm1+cljPWFrM8y1/\nka8BfuQsVmGEL4l30UGI1nhJ+6Z8bsHuZZ8Mu3pW8OA/zar41WLuVZsUobfb\noUi7NYj8sPFOxLZj/6Ip+73RjJHHxxemQEw4ZIyw2fsoEmVkqPOXfMDpxa5l\n9NExyn/ZXn88DhlyQrLw81Z0SErvzCbH/Kc//OhWkXcpzBmxxPEI4hjc6/Z2\n/eQdijeGliez9WGHIy9dBBQjW7wbGa7EtxSLvjom8MTONxockrvypZv/DunP\ntXQG16DMeThkvg76otMR3Z/TXbkAaoW7xZ7Ar7kazII9Ea+IBPttra2ROdF/\nf1IISGXxOQhWFepnK3SHn4wTMHQCUe/M+jQqTJda6raW6ItVDdl7OLcv9Sv/\nBHt/JbzfJNOlNIbMfWOa6fc+OoyEnOfALyz78GQ8H04cEgqXQ1DDQY2+Mtbm\nM9LIGrjkzWthCtSrp3nnftHB5maNyNjUKePCDTFkRM2plQWxXdyRc3u55W6N\nQKGh\r\n=VGAo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/shape":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/density":"12.0.0-canary.c50d20bab.0","@material/checkbox":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/elevation":"12.0.0-canary.c50d20bab.0","@material/typography":"12.0.0-canary.c50d20bab.0","@material/touch-target":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.c50d20bab.0_1619737382661_0.1705694190411724","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/chips","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.474836ad0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90eeea08dbb6f9f05fb7dee680bc1de42cebcffb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.474836ad0.0.tgz","fileCount":158,"integrity":"sha512-WBAMmtx0iKbUt0MjbX1LK1QJuopeWCi8T3kB7UzCw97SalVk7jwVMfERvnLFCFjwfSbDe1+K6fx6KHfoyEslcg==","signatures":[{"sig":"MEYCIQDTIr4Q1gIpWdHyN6DD5F5qELjqTh5FKKOcTr8pOeUsfgIhAIjYQrCJi7zjTJw0h/NW2IN/70GQehB/W0CUNX5wglEe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0rCRA9TVsSAnZWagAAevsQAJgnWkL3CD1ZDT5Wo7aq\nzBaOrxylQ6lQ4OMp1wgmgDw32X8uFPcZAsTTinjwpups81448lWMVwpCEOHX\nfLUYRCwJJuA5CgLvjUKfaxuKVZMopAa66j3TJLC/VggjnyZFnraQ3dNM+HPJ\nYbAdiFY5acxumei/SwPPJWAUh+/feusYGM2ucJidkKBoBkaMuXp3SflgtKww\nfipTl4YGukfJKneM1nRPmKA1fimVvvw+ZXThktOcxEeUBZG33iOF4SLWRQ6W\nBF4hEVrVcezI1221UDYejc2L3uwrBArR6k2g0+E9HIIeSZabmxifMifqp86a\ntSA278Jl+NWSO8Nl7jowrhoGFvYnNJWR8FHvZtFGwqRh6QPyjIXbgXGhnLul\nsQLugNZwnDLfY4tsT6LNEAVSYFYN5qtzkSiazmNrDRfx552faDSQFGhg9Qtt\n7aTSBLT0I/x7p2pYxeIdJ+mjeBsFHDsJJP03YfnKCaQNPCU/CHvj16QtI9u+\nYP1HtzLmrj3A/g88TSso1xtKw1Ka5noi20Ao32L4MOKL5BMfrctuqT+JmfNJ\nfQclpMuH2DVAkd9nyEtx6cWXEa3uPR0wnutW8gp/Ke/e66nH7PjVnhZBtN7V\nj5Ai1+0Gux7zvjykm1t3BZLM0cq3mZCZSACClhvyf7MI1ZAy/DdQR0d62sr0\nB3Qf\r\n=rSNu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/shape":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/density":"12.0.0-canary.474836ad0.0","@material/checkbox":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/elevation":"12.0.0-canary.474836ad0.0","@material/typography":"12.0.0-canary.474836ad0.0","@material/touch-target":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.474836ad0.0_1619840298541_0.037955565891804044","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/chips","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3119a617d93578f1a8e164f75afc8d36405f1ac8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.f5ad92287.0.tgz","fileCount":158,"integrity":"sha512-3Ny9T6Q7IEDuQgE5VBnXOHbY+MfZi1PowcunPUr0jY+WGBFRNFkI558c99k6WlLeodnVI1IsoZpyFGEsY6ciNA==","signatures":[{"sig":"MEYCIQCS/ItMIHcWK7e/yNLZr+ogeUt5OJAmlbb5U37YKGdYmAIhALBT0zzxpfmgS9wWzaDAn3ARx3uHfnsJ3hZsQji3ZXaR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD98CRA9TVsSAnZWagAAa1AP/j2NdMSrUnMcsC+DLTnd\n6Kl0eylSfRTcZ3MRB4kVZh9cJPoAlDjFsMkKTipfoDeiAirK6aNRxuulyxE6\nyWJWLhUCUMRi9RgZIbpBDbBKdDIwb1amXRNWck0gEXX5gkCTjSg8j6Q6rJ1e\n+eDgCZMdJDRw2+URiFx3PXN+X9amCmBsm6umVh7ekNxEDFmcIByFTulIkRg4\ncQHw76hLgPz3seLZ+uKHd3+hz3YsFEnH4FzxLFJzFx5d79RAZeqgC5fFXgGZ\n+3huxmcVoM2kpAwxUHaWppS2cFMd6Q8yloLSgDBhfemlNjJCi+7kAqWZx9CM\nsUV5qhbOZymVo3CKQocJvI+6o3S9i0CKi8FgvmXq+HA1ZWL8Nz5joFLJov5R\nFNIS3JMlt70YWbycoz0sGVHbWhPNiEAUX4BAEc3PciB00SzOT/24Pipek9EE\nhvjzx3gci31rAU6hW80N57U+kfUemcUWp81LeNURJwVbZPIFQtgEM8c0y9as\nG4Fa9oMke2ghmp3nQtM2rP4q79uUUc8e5WFx6wnEo2YCJx+yKLbm0mYtLcrP\nasyM+VHpVv/rH79CCICJuDdEAGt4fkNMDt66lxHoAH23eWowh/6bCkwpeGxT\nYMi2VQwi+k1b2MkB5Y8bQHEi0eiKrllnXi//s2jZ8kgBwCQmVwwew49ByZm7\naUE1\r\n=n7h+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/shape":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/density":"12.0.0-canary.f5ad92287.0","@material/checkbox":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/elevation":"12.0.0-canary.f5ad92287.0","@material/typography":"12.0.0-canary.f5ad92287.0","@material/touch-target":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.f5ad92287.0_1620066172435_0.9657510400672535","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/chips","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.af453daf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48a21478cfc7e25b89d8bebb0d86d830d992bf96","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.af453daf8.0.tgz","fileCount":158,"integrity":"sha512-tlQeRWuj8qIl/NWbkmSBu0xCjcf7o5+oM3nH/VxSSVvOOkQDtdLhpnc4hEvsuLusTbx3yKFNqclRS9RDWDoNMw==","signatures":[{"sig":"MEQCICFTfmbZQJjW1D8DUEEp6jGqiKDopQA/WkABYa7c9c/gAiBv9UIBRHsdXjCxaIpCKtCpDBOIwJCju8w3P034jXXKQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEbRCRA9TVsSAnZWagAACv8P/0AZoSK9MJ03reBezVHo\nrN1ILxfHlCXvAa7T/HBlwrkCxtTJmqad5OyhCplHmD49pVcahM6OVBVA+75M\ncEbvuhrTmseOCM+4mGn61cnYSw/QrChV4wN5caUf2cr19r9NXBkJndCCfUyg\nhZagaKvbGrpwW6n8yS7OlSS1bNCXw/rrEPF1Wd1xgeDZrHSK1SeGwUm2iGTY\n40zABMYHxTrbxLE87P0+z+28LLRuQfMCg3HyL9b1dMtb/qZ3nwBQB1CWIFdt\nUcOe5xwwWX9Xo+jGUUeDGERIQ8L2+36NTBttTfIHr1iZHqhcLGQlnAAqj080\nDrQnuHOjUhakYgH+nt5Jwj47/u0AlJWabuKPIUg3+JqAuOKEywMcW76fX+DO\nfJeSqeQ3/DR+GeOWW0Dsr1jmilqv+4WDPGxGpqDIZJN2sYtKuLQAQpscyRTw\nAHr3n4jkeAVXmP6oUtlYyzcS57hLO0qCNLG9B3VJZMtbXBHXmL3wU5+jcWXJ\nlsuS2KXL18E2VvzutZn8CYwnPcVdH2fu02S397cpfG9o7YvM8EJ4C03e6Zhi\nJmBx+bHhHYiRqNHpvKgoXUh0hQWQBhH/MeJkKQul/IhgZtAi/heKfJSeyF/8\n6o1tlkwuycnV36EtSJEAzvINe7KfwUnglAdAIrnfljZIKcAu7yCQIVjU3s9I\nPIvB\r\n=uRBq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/shape":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/density":"12.0.0-canary.af453daf8.0","@material/checkbox":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/elevation":"12.0.0-canary.af453daf8.0","@material/typography":"12.0.0-canary.af453daf8.0","@material/touch-target":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.af453daf8.0_1620068049161_0.27237502634234456","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/chips","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16ea2c46584945b79d9f341321823d0e8e334632","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.1f1918c24.0.tgz","fileCount":158,"integrity":"sha512-nZ3UAxGh297Cb8v6t1DTbvsslggmfwKwR4QdZFb3k+lv3+96QiT6vrGlT+jKKef2+MoF0K5RjJuhXU9guNfraQ==","signatures":[{"sig":"MEYCIQDRiU+6YVXoGoNHZsiYqwJG31O7xNjMb7EkbloCA8liAAIhAPfZR6YTmfk2XUKj/VUyk0jjkjcw0NifPGJtdfLMVGPF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE2fCRA9TVsSAnZWagAAnoUP/0/gS1vErJIlEPAbfuLp\nBjnFUP8YLG1KdaWBwjVOPIJdLYXfHavlwKMg67LJpjA05fj6cyItSt79LEi2\nw9HLgmI6UMmG8DEZ/+gX3SMzER0b0e8auAMPd0c561hn+cNLDqwKGA9XbAjM\n2yfk3qIaTbYX9RvEIol670XjaxArWLrrQzlp8L+dn7biFDQSfILdS670g/3F\n8Cuwq5KytjlExq6LVcvX3XAsWiGsdCborjgsviz8Zgf2Qo3ieVonK7YFql7T\nLikGmbhLmg0ZU4vr2G+/fNBCa7xoLvkGvqvRAEe/4pkcNQSJhG3C2wpoY+G1\nbit4Onsd/0RBtXrZDTu9MQPikU8NGW2idw79pU0zP6VsOzR2E5oa/S+9Qqz4\n4mo7Wv9QTZ62NEDKo7l1p4tIOFSDC/NoYq3MpJb4LOOBRt1H1B3gSl9V2pFY\nT2VVKNGt1ty9tzM30YP8WawCKIcBX1aKJGLqmuwqzO3/Gkt1GsoHSutpJiiH\nyx/xwKgiPvOyzfYOL3wqj67ngkz+04AjRehApRteZR7t5kbAoG27ILSdP4Rh\nZ2fjegzoR3yuu5nXXdPjhn0vZtNc7ILYuhKV7Aw+LUW+1Zm5vUVskOA9lik0\niLGb8NWNqthdnUrjlBJHVd4tVOmQXA0qiTXaNm82oeLuissb3dxAiB5EOVO2\nx5QT\r\n=n2PL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/shape":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/density":"12.0.0-canary.1f1918c24.0","@material/checkbox":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/elevation":"12.0.0-canary.1f1918c24.0","@material/typography":"12.0.0-canary.1f1918c24.0","@material/touch-target":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.1f1918c24.0_1620069790721_0.12546751856438476","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/chips","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.33148231f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93e68992ba45d2ef266455aa9212e6edc5fb04ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.33148231f.0.tgz","fileCount":158,"integrity":"sha512-ugqqRwFQfdB5/e10z51G0GIIk4bzhgJ9ZRc11EuoZCQPeN0A/0MV1WCGjrAXBLuuz37yt+r60INZ69+HG7qVfw==","signatures":[{"sig":"MEQCICpghUyaoLtx2YzbNKGqOZxNHNnY6Q+O5KkYrusz0EuVAiAeb6GhJdiwhl90JWXLxmdT8elKPILtsl5hjxalwBn0YQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFsCRA9TVsSAnZWagAAU7gP/0CpXUm2IK0IPtoTHkRa\nXUJLi/EpjWJoJ0NpTt4swHpZbbliVX1bY/a4RyYGkeTSUkHJ2tZMns8TyZ/B\nGHYl+1XkrFbN3F7A/0apxaccaJx1flkUsiNLlmzjRCWI3gtyiaCkbqknxsZK\nvq1vwLdq1+NCPaiv2LFjQ/kpOR1rE7k0cp59C3MiswhDFsuVPW9mrR4sANOl\nwlJ092CuQCc4G5J7g4Q8Y5V1qVeejpHxlsRNG9zI36zuhzPC3x+f2VY6k3L5\nEzW7r6kCxlRLdmrdm2V7gYJuieGEnRQGZe299qjpSVh0XvlpgGpR2ln6Q/Sl\nH9eLa0ErVAkNPPph34SNRfXfMVTRFPpo5/LKk77h6draGFZu7O/l7f9MyX5/\nH1TkLKrhKYK1wL88plmIKZoi0FiI0dx9DGA6TX4v2TTt/sApku6J65wiV1Xz\nA4ubtY3HW9iGC5OO44lLEAIQpCgzt/0JlmmiJ4djrR3Bub46ubAL9s9pGraI\nByZXlhT/8KKiGhPG9ZnSLyHKSPHkqoe5VAjZfQetSvVZhf8nPuaoHP2aTTd1\n8yZQ9Gz8Pk3M4QH0DlJslLhhd8PXwvqF478lR14miVWutsHQok0nyVTovN1X\n0ZBTSDX6PU37miDvFlAXTb8jUbzxg2LQ0Q+koJn/BTq3fxVDbh4hlrTRGiK1\naYRz\r\n=qIXR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/shape":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/density":"12.0.0-canary.33148231f.0","@material/checkbox":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/elevation":"12.0.0-canary.33148231f.0","@material/typography":"12.0.0-canary.33148231f.0","@material/touch-target":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.33148231f.0_1620070763659_0.7844648855216261","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/chips","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee7db0dab98e8ac100186c27b82f1c6b9ba69d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.06b76fa74.0.tgz","fileCount":158,"integrity":"sha512-LxX4bf+o4LlL3Dp2zBJg/Y2/iS2m9J9byM9au9CbCrCZf6ruAIAvrbC77mIDliircHdez7uBDD5i6Mp8CZK3lw==","signatures":[{"sig":"MEUCIQDapiYMn+1h2qoftbo3iHkoJQJ6fIfwbnjYzrVUK1ioqwIgKkQ2h1Bf6SiN+AVRivMMx0IkFxpHxMMcd//IdksKmfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMxCRA9TVsSAnZWagAAO98QAJT49+ztwacuTcbTU59f\nFGbmAI+n8SUXZMI1x2jlYEvaoDjcpNdVqdz/+C+AWk1Ph6CQiaV4t2xClGHf\n1JXjIZ86lQra0HypVZxIoYwkuSuINguC6lRuokDpwlSxruBD5Zn4oJX2hoPg\nlkWJDLqsvck1g/Wjz5HBxi+NqFL4vV7ajee5jBHPCRXkhA5BbkN7vTTx0tQ3\nhB4hlFAPFK1zkR9MD6W/m2Q9zeu/6zBitSooGmmk4UGzIlefZzSVjyX1ATVL\npli4siEGBB8OdvH/DJOXCB4Oa6KFZaVlOZM2zjR2byRjKTQHbCLk3OlK6NJG\nSFYh93552mYIV99dfx6KD3ZrtcZ14oiBYWAoXqM3YhBti+nWDtONcsE7ZDgI\n1PeiAyaRG0R+hzVvKIpwYpu3pr8qfJM9ptf61zsb2hVmFyQAKKxMTAm7zVcV\nZznXJDP7d8zYYlTThFzAh7lTVBZ37Wzo5Jwg53shG5OLIBxgMu7b9D1MpFmj\nErxocwJmFim85wIEEyRe6qAOg4DT9Tu98y6oH3BeMxZrHT3Ps5NlNR5yTPpt\nJg+LL6ekCTlivHkZoFcKc28Hh7E+G/P3nBzOfknrxR5bKiGLuIBma4sm8xCO\nN4vr/7FHtNhGsRFxd/DjFic+NZ38kdCxqa6K1EIuInUeqeol96n9MTg7BKn4\niSY3\r\n=PD9L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/shape":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/density":"12.0.0-canary.06b76fa74.0","@material/checkbox":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/elevation":"12.0.0-canary.06b76fa74.0","@material/typography":"12.0.0-canary.06b76fa74.0","@material/touch-target":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.06b76fa74.0_1620071216740_0.6193510914971792","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/chips","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.7c5000473.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72ec2ba42796ff7327552ede57c886bc3080021a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.7c5000473.0.tgz","fileCount":158,"integrity":"sha512-YfVMSY/8FYT9Jz35KhPBCbFR7waQrrLQ/nCNWd3aGF4RQA0vicC0l1ytsBL/Sud865IRDshxiP9pMZhHJdz95A==","signatures":[{"sig":"MEYCIQD+x7A3X0/ZSkycjAnDtznzymDndXh5idxc8q16e0+jFwIhAO7PRYcJICrwrd/N75LrDCc7EduCX5Fp87EpdIKvdbm7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHxkCRA9TVsSAnZWagAAhqoP/0I3Nc6ogiH51ZmXryvP\nC7sx+f5y+dD2KyXgNANOb1BvWnBeatxDXX/s6CuoFZdpSqEJF/4WNJEipOAH\n1VqDLo0x8P3ilkYFC7OsOPXgdAkq62DOrU6b6UbAkQP12/G5u3iPMRmSNeFT\nCCPI+0MiFu5P4kR4t2tStj0HNxq6btGFa4Ob0V+Pvp2q2sT1dgGXIHy6N5OA\n0tLjsB98RxUKIB1ohzY5n7G8as4SemjipEX5dHZNVfOXSeNy4R5MQfwP6XwY\n1L3TQNXdH8O8ZgTe2Htea9YOv44rRSDTOyLKdgy/uE1jwPPBD7dWef3yAD7U\nbtDLE78HLSxqUZvfDTcroVEE2bU+T5qaVCheUrgh0DGnPUJjE2/SOl0zw868\nTVPMBh7Hs3kXEHWpLP3p0lfZOAnBq3kYDMOXxtxCAjRlZz3LB78Hv56GvVRr\n/o4fg4a0A7x6dK1+T8sSDPNZUzM2c/At4JRrPHQVrVKn/lbfjbgI2vBwEy3y\nSfyWjqMFJEGqr1FgcsFKyrMrtkVKZuT/3+HTYdgio7nOh2AzHb7XrveTlLpN\neMRHP/T6Kv1WtYXsMKHhHymdvICUZUVOxVaWuWrowIBaZwiCESze+4Ayy9Za\n7LhCrQbHAFQS31dHDljT9fNBOSpjOZ0iDI9AxUI5ylJBJluPp5glOmRKCJuS\nGEXT\r\n=6SM+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/shape":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/density":"12.0.0-canary.7c5000473.0","@material/checkbox":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/elevation":"12.0.0-canary.7c5000473.0","@material/typography":"12.0.0-canary.7c5000473.0","@material/touch-target":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.7c5000473.0_1620081763564_0.8335862142088699","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/chips","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.de997644b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dcafa60791aa75939aaed1c7e3af5be3d54d678","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.de997644b.0.tgz","fileCount":158,"integrity":"sha512-8nyHJybhyWDgBL9oXUMPRoZeMnpQo0g/QiK4Lonc3nj8Me6c8VEOtnkTNbd2Q9WU/Bv/XXwMwkCJiB39dAHpvw==","signatures":[{"sig":"MEQCIFSb6LjZJv8RoXeqNxxVIrJGnV3Cwyhu5ysu2pXqlT7FAiBT63wXCfEkqQLt83uT0jQlNbpS5FXEnLjig6X611Zkwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYRVCRA9TVsSAnZWagAA75gP/RhkfYReOMySFt5MIc+h\no61wvvu8AxsQzpj3Y2ZjgI+gooOZ1cWujB1UdQUWHS+lk8sLPhq6AzR57VyE\nT+z423lhkWZdxVcfauY9Jm0Mr4HUCNm0oHiH8/sxeaRW5XFy/qJ2poUMJQSU\npJaA6RwBCAWtvVKt9UmMt8X2s2s0NqheOPaC3w1hFApaT0qSVMagLQUKgi+g\n1Q4fFqhh3tzUxe/YP+1zJdjC4mUfgRI/rVbRnvgx5s9ne7OrTaA5I2dsudOi\nxJ2iRyfLdcmKLZACb9wEvFKVZxHdKssVGulG18ludaQYDyURwe4HlusX6vtv\n0+VsaEhWBSt10W2WoyAo42PZkUkEm4Q5eZGggFRWvvNB1DscjwTNpuRmbZtS\n+178c4+K0l7hCepRuUERJvmGQx15bOtjb6d19+q0+d0D5BU5uRbGx/gYwIir\nDilI0RvodbMWeBNFKl2W8v//fvtjL5d0svmLOcab38LiL9IbHSbaP6LjtF1m\nN7biMkEvDYNjaEVvxRofPVaCkcqvzLflUHVk5tWcA6Cj4DzEE0lF9emoQdW5\n6DrGhtjTDmI3XFk1uhBiyoSq84AhHX0+yoI12dkpXfEZ8CicGL979ZjqFp+X\n3/0cOcOu7yYzMrFrEVGN7Cx9g1fB6eEoEyqMycNKBBtRduX1+9D66C/rAmVc\neTXY\r\n=uHzr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/shape":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/density":"12.0.0-canary.de997644b.0","@material/checkbox":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/elevation":"12.0.0-canary.de997644b.0","@material/typography":"12.0.0-canary.de997644b.0","@material/touch-target":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.de997644b.0_1620149332784_0.9564289873228304","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/chips","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b82b278ec829dee287b03681466c25ae98fddaa0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":158,"integrity":"sha512-Xu++vRsvAdQCndyI5FvDj+3SlMNUqAIc2rYFir7o2qchrMR7rmZKSguZhqBEkz7e1H8G5qXyGA86Am/HjE8v4Q==","signatures":[{"sig":"MEUCIDuLXEbovk9s79AoI2cRHkSug/mD0HfQeoZrwo7U3vMHAiEAutvl2HP6fy+QY/UD6BGUmL7W0z0SqUYvOhx7wUW5bHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYqcCRA9TVsSAnZWagAAH5sP/i316afjRtP9xj+WDkq7\nZrSHMyzKaqWfiuMwpu/ia0KKIwUtPNdvGqmiCzlAg8Qh6PZ2jNXXxE6YueEV\nMhCsKPTh0ufOs1KskmBmPDKvtF9HFBMEpU7BdCt8ubedVc35Myyrrfe0ORKd\nN0s3CBeKtf9v35jr5jAlfZiQumLCz8bqgfXow1Rf3qPgs/3A5jJ+lvpBsADr\nqDBAH6wLCbA+mi1ybq4yn3eIW2iwlw614Urq2BWs62Tg7Se2VlQO287sdHIs\nVFMUiM29IH3bQQQrCLfydTek93THM6cAzjXvgvaWqN4z0QuSyD8ObHL1RJby\nQdAG8d4R1K1kBHU1twWShSHGS3/Jw+dvYwmHsZNln0k6L1Aqtx2bKVzs44zY\nl6tI5EG6O4U4JIWwlRV8mu915qgWXCFo/sKEKjhdkTLxe2nezbrH4AnVPkAS\nwjQA2R6hvSiCa9cBc+crF1hjKM6XnOSS8P8aYG9CmUokh5VM+TtA5MMP+MVv\nDQJYAfs3GZ+NwKNsemV9Ku93I7qMDEw7yMv8Pq5gkbHcQ9vxmOHLB1g4N+GB\nCF0UELUSANrJN9AmJb2aaP+Pmt2w4iAgJxWQedn3BMTtV2nIk8roVsqJB/ph\ndiRSE+Qfz3kD2+J5yyvGmngI/YADLeKryb89VnAvpoccJudwQeATq4/wHKIn\nmO8g\r\n=mRK5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/shape":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/density":"12.0.0-canary.d4d7f1cc2.0","@material/checkbox":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"12.0.0-canary.d4d7f1cc2.0","@material/typography":"12.0.0-canary.d4d7f1cc2.0","@material/touch-target":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.d4d7f1cc2.0_1620150939697_0.8218595903611245","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/chips","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.be999eb08.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a819e4cfc3f99ba9b235b221d670a35594592430","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.be999eb08.0.tgz","fileCount":158,"integrity":"sha512-unGV5l903O92t8u9KRwgEE5tQ8fHcWkCaoNyOiqJ3UsboFJcPZor2XAvkHaPa4BsCaem2iAkr14KFO+sEnxXSQ==","signatures":[{"sig":"MEUCID6K1hQqoHkoblQl55z7HqnOH+tfMWA0imF7X/z8ApDCAiEAkQgjgma2tf6tuZhd9vgwLb1uvh40JI0fJoBo66xNCCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYv6CRA9TVsSAnZWagAAnOsP/1hJ3KXY9pSVOw7l86KX\njzgMGKJ1YfN7t3GPtQ+A9iPWIMaDosD1R0t7U5KNz1fQ/kabyyICe51sZcRe\nfQQmtWXuvM7xHP7UVPPBVrfjoRa+HyPrZoxDjRTEKcxegMg1BOc60gVAWC0I\nWgQiDQVaqIRL0KJzB1dfutcCEWtRXhWdIXfcHT1rhFqy9JGPwpCUwNK4dqM9\n1gG5lLgAe0t2ZZQSSu007zUSD264e1TMQEI/27bnY6e9i+hZiqT0WK484Gwf\n+taOjDgY3ozeJDrYFrFt2gS1ZE64PI08U25cysO34FTptpxBO5yjEnfiYSSb\npmKnk34WnokJt053T+TjZOJJGa27llbuinArEUqOBTBIzgcqmZJibpR8oznW\nMHwj+WaGr6S8q1AdKLjhrCsdwWKnQbh0z94Wg+BnEL8875K1uVX/tWQo6Ip9\nbM+KycjlCIPOvEM/S/wQdtpTx1k6jIMjU1SauHRVwAt0QQys0mdpEnv+ULKV\nTkm0p/hYbrk6qKxxEAzYucpzPlQ3ZnS8zszCsV/WLBsVH/95WihISvnwFv+B\nJDZg2//ZAvwzI2DwznVHYZ958gpZTGbzMIJCigoSa0oQG7VFb/TrWiMkrIu4\nhK3pbGQpk7VvRWwz5OwErh7eXs+/qWNM720byV7LCUGXQ6u0CGsr0I47oX5q\njse1\r\n=tq0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/shape":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/density":"12.0.0-canary.be999eb08.0","@material/checkbox":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/elevation":"12.0.0-canary.be999eb08.0","@material/typography":"12.0.0-canary.be999eb08.0","@material/touch-target":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.be999eb08.0_1620151290017_0.14024595522402428","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/chips","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d8339e446804b2d0bd396fd05f4ad4ba189b664","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.eda1705fc.0.tgz","fileCount":158,"integrity":"sha512-sXSwQzroE8LPq/Zv8A3fTDrARAtYNziDf+K+yXGA6evPM0J4/oHVuEzB19uB829oPer1L5GSk6z+etS2I4Of0A==","signatures":[{"sig":"MEQCIFzWrUmC/wDRIptf9TerAvhkfdPQF/a+jlWF8TNnL54jAiAvwlGGGMw90sb5D/8dKHxUEh3UJcKK478Kq5RH2s3d8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZxHCRA9TVsSAnZWagAA2xEP/3+94YJ/k3G4OWOlJ5xo\nWwZCMrEgNusC4yPaF5H0Uv4jrZQF/5tietqqq7g9W0pmJl4QCwS8mrSTcBhv\nt/tcAWWB6wHAno1Z9p+inJIJXWb67fEUgXJuaLvCA6xyBEw2TGY7ZvJNb2jf\n2hQ7OdUDy8GlWMS+ysPdRZf/+mT+0wkqtbHsG0Ng+5DOOehqCsjnOn6EnFbu\nMX7/IDuNs3EnpHwKZR/upVJI1hsPgFKCYZIn8VkXoM3dImDSuALeXv7Zmohq\n71UBouaarW2NqOtwZBD+9ENVYAtEatBheR8NxRj/jYMR/I8o7fS9bmBoyzbv\nnE39Cu72G5F+Zjy9GFf2Nh9krMYdaqUwO8HEni45b0N1Wp9Cf0ykjEzQ41Mu\nGrOUyKxsY9E4Cx4KvaQvMBHRwmGHvjFTVm2rIHtZiM+LyYO8ksMnorUhYx9I\n9IHrQEYRQ1TnLEMfNoJqP3xQvjhrix0cyG4KXUWPZolpdlCRNt3qFoUxGGXw\nSzuRd7/iN/Jn/fwltIGgMXwrgGmK0xuFVQ4FlWMawdcbJpW8WmqA1ZBraQlb\n7EIN5i8XkhFpYw97oNFlmDiXdzlYEAa+XZUlKfL9U0qAM3ZhYIrD1JyD8Bxv\n8QYA1I6Vw6qQs6m/UFzsT0VKSoypAJ0pmHgX/HICWXnmKql0RZMdRPLq+mWS\nzHfh\r\n=F1XT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/shape":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/density":"12.0.0-canary.eda1705fc.0","@material/checkbox":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/elevation":"12.0.0-canary.eda1705fc.0","@material/typography":"12.0.0-canary.eda1705fc.0","@material/touch-target":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.eda1705fc.0_1620155462869_0.1964458164550964","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/chips","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.718c90178.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a54118331be70401dcf62943422328c8ecb78e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.718c90178.0.tgz","fileCount":158,"integrity":"sha512-nGxfcCCFYgA/4SfVXR/W9wy1ixOCWfDTQTGwtpQxEHB06ccZq4ksdUPBifWG+gSEEi0+lOSpd28B6lPgqjidHA==","signatures":[{"sig":"MEUCIQCGQIyL+mvIrIPBKuq4svIZktrCCDPStPwBh28BRTo04AIgUg/Xr1HlhlLAvNIV3SpsfIe1wlGBTsSBU6vohA3WQbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaBXCRA9TVsSAnZWagAAnnQP+wUtPLrdXSpEElCl5SY6\nUqR7EKyvuNTQOU6kyhlI16KxlBorA+2OcRsF16o/NQYIQAmSth6Hm/TUAOdm\ns16RDO6NhK45gZngmUfMaDmp8CKXURnOxRVhWuBuuUg6nq4ESn9LfWJtaS64\nG0K3ZS1EN4ESQylTziGwocHo6qoQr3cJCmALNZA2ISmE0oEonyWXs3RJRVJO\nqHKvg6cwO34KW2ikUoD9DbP0cv2fUg6Yl4o+3piA9L5E6kUCtbtglHmdBwNT\nS4qLvAiTmO/rKoGN2cit5jOP9vECp5BzAhDuvHzvQA64o0xAA8fibJyPE0Vw\nC3vZZKeA3a59n0vGqOyoGR6I+Ivu/5bETh9E8L0iJaqmjrqJ3pdZwZvys5Pa\nyPfvFBD8tkOCn7807NnhDk+uyq1d09RVQ7OhtWy7/LuxohPcq8McolyKHfiA\nt3C4QjIwcahtzBUi/TlwuwwaRBpOHqcm/A65noki8sb+zdghaZqBoMggd3+i\nfmXvrphw/00jyrH+e1ao/h47NOrs5Nd9B8iQyuBnNAVUELNRx4z82O/LFECY\nC9A8aCU8ST//ue+SfkhSCCmDFLxqTMfVaEni84vLbTYl7N9Yw4kPmoRcwL1Z\nQprsLT1pa8C9UGJ7+FbPgY0T/ciiMI3ALvCBMpt37x9d6wAIJJPkScGdH3og\nGWZf\r\n=WLI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/shape":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/density":"12.0.0-canary.718c90178.0","@material/checkbox":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/elevation":"12.0.0-canary.718c90178.0","@material/typography":"12.0.0-canary.718c90178.0","@material/touch-target":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.718c90178.0_1620156503166_0.8283091636074451","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/chips","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.0e3917299.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04cd8d842f3cd05f09db2d63a7ecc5ba144a7963","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.0e3917299.0.tgz","fileCount":158,"integrity":"sha512-jMawa5orNqJZi0PuA2k5sa8ULNBjhsx4KLqp9YSxtnuHkxMojyJXyuHTJZuG396XoWTmdbVhcjIcq1K7XO9XCw==","signatures":[{"sig":"MEUCIFTwJtyjv10N2KamJcbbRMQGAC0BjbawqLVBojRhZaPOAiEA28PLJK/C+lTRMk8v8LOuHvxROTqoQ25WvipGrC+RD6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaD4CRA9TVsSAnZWagAA12EP/izkhN0gCfIz2ch2isgL\n6/zfi3jEwkncOnsJAlkV2cTPw0nlKMicEEuLIAi5e1Y3pWiJ4ebW0yKIk+KO\nPCVy1WYE277c1kePt5xKGw/yzOr4BIZBEHSTTmWirYWLv+0G6UTn8ZZjBpmy\nk3Uuc7VAeDZYoGc6F2KRNrNEtaIN8FmTPAPfbF0b3NAJIaTD6zulGnpVMGzx\ncCe/ptDgx9DnJud/brhFA1KVgCLQgAJdgWi2uh1Tc07x7uLKUZVqrpAL6mBM\nF007QQWjvTrZCxYUOEkVVb4iJujFu84EKLuebTdATOsN9B06Bnv5c4+k/9Sz\nkopOEXcGI6P8nBO7RDdKiozEa2KI2dlZ0rnYDbzZqIpueg7anucMPxg+ytm2\nqTN2DJbNV5KIC4ZQgMXe0bydPbOiu3MIPM2/y89C0ryWoDPcQrDeRaVv9BIu\nz0I3Pak8UIVObzmy2wAjfzhe1EJ6JXBiu5zED97//Q3pbDWCfOGykzDntlIw\nMad53M+wrzRn6NphpjyOJ7OFGFg6X2a5n9JNxwqEJZNauIZI+fF1GMqV9Deu\nR1TIUYkBlhuU1gv/n3CKjlMZd2xQMS12hTt3CJOJKe6VPcymhkv5k90LPXzu\nyReIv9xsk2GF7F1rDzw9qOx8JqW+uDGVKZ/GnHyxQFz6E1w/LwJZkQduqb/2\nFVK4\r\n=ZI6Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/shape":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/density":"12.0.0-canary.0e3917299.0","@material/checkbox":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/elevation":"12.0.0-canary.0e3917299.0","@material/typography":"12.0.0-canary.0e3917299.0","@material/touch-target":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.0e3917299.0_1620156663157_0.3206764455186564","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/chips","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89b0043eacbf533dfa84fb284a206e2aa8a90d5b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.836b3c7db.0.tgz","fileCount":158,"integrity":"sha512-dZRCT20JA82Th+vW8ho6UQ95wwCRI6lnBMZMHXhWMhUak8YYhbswnQ13On8obM18m/BD0Sv21Hye2Wt9F8EZSw==","signatures":[{"sig":"MEQCIHY5LJDj22edLXV1KLx4vFJTE5sLuhXbI9YJMqvKyhR5AiAdLJRSW+9nM3mClNeKU2GE27IkrHonsCn3coeW8P7cxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1255275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/WCRA9TVsSAnZWagAAMBkP/ioxzavJQM3KSlzrW4Oz\nWfIl7W1uWW1OKxJvq6nRefsbAWf7p7myzYk6PDnYWwTLRDLDC5wRiD36SiGU\nGGQojiV5qW8c6vJKtnMDUG+q6nrbZyiEQZCKXLk4DJ9/qSsmEdhaT4+o+NDe\n5/Idyyp2FuGEYWEXKF8ieeCMr27+vPuOQHm3upy9yJGBhsq51vA1o28HFskS\nfPKCZeB4bbd+xre4Go6BMxXUECKXwq3jmOOuWQ1U/+pi3XJU2BsLlKg3PajR\nkCyUtEWHVkMJhcSvorHWPQGtQTkuc4IqjaOSdAtrKh64EDV0B76P4DjwUaB3\ncH6jHAFvF37k2Nigerrxw9puetILLdDEGtEC7EQlXaHSPB9X+0H89kGnfZBV\n18UB1KG69YOTQpzD+gGo/DAe1m4RiacdtNkKGzlmXSOUlPP6G19VNJnII+OQ\nyYr7VssV5yWVkeaQNmdY/KEWylmEFUm6AijI6I60wB57cEdtPTWrk2TX9qB5\nMDhpsfM9PFPLQlVkM1jNHE86LVoiRxX1QK/MrKCkF0/YUWzMV2FHZOXdR3R+\nTBzvNZd+MrbUbDYG0AqCzmamx99f3676bZD3r5B6LPeDfQKReQH3bS8v7Hbz\nzrXEwJtUBUMNurdOJip48wnc/H5xSSopvwKxBqxZ1/jHax4Cc8tQdLmen8qr\nSt5L\r\n=kp5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/shape":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/density":"12.0.0-canary.836b3c7db.0","@material/checkbox":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/elevation":"12.0.0-canary.836b3c7db.0","@material/typography":"12.0.0-canary.836b3c7db.0","@material/touch-target":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.836b3c7db.0_1620160470532_0.8415344286530988","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/chips","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df54a4eda7b92bb68aa0b73ffa0955ae7d0347e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.53d4e6d59.0.tgz","fileCount":159,"integrity":"sha512-Qa2nYzUl0fpLYFLBXueLk17GDK3g3OkF9ejhE9092ya68PNmWHLGVS9yZSElZkmIqN83CNNNNME32jN3rhmULA==","signatures":[{"sig":"MEUCIQCybrVakgOSXoGv1KEnt0Ce+GxA2L/R9++2y8fqd24PIgIgcsucAZlHAOKGmEu0+2oCV35Y+S8xoQoYyEC2R3DQMlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbOGCRA9TVsSAnZWagAAuakP/RnbPZlzdHNNH1xE5jdj\nvq9KaTW44uer+vXkCA651q3x0vE7DLC2RI4L91iEk3aMEToPuDGYkYvfugUU\nWn9eT5GwLsN297P03sEdIWbv7VZ+bpyM/bs4uMdvE7a2Rr+zbBkKvhi34j/i\neRGE6lSHak1BPffvoClSyPS/7hoeifDEjyTZXIJbbXkF7uP1vTLgRVjNTZwE\nXwh7fy2OxxhyU1phtlnBUXSkOJ529p2mgOUYFHSEWwOSi9WF550uipMNis43\nl5txOChk2OTPSRkvcqwQOniK36qwsUF8EycN2RhojvR3jVuh/edu0p6r5mlH\npBJFACuiq5bQXXIWXBLAoNsDGMvT/3goLw09xk28maECoiPvnPszCzSEKYsE\nVPW7xwG9+F4mKKqN92iuUUNvi1Z9a1lodLQZsFxgic5FTLlLpcTvon4mqjOs\nz9XPaFtirLhi6cT6rc9idCTJKXsf3/ImfDnqlpDnmafAlgXMIlDG3N17ajYx\nm3WCXOWQwOBoUSHUU+ZYsG/Ysa8PNcbbPuDXzjPQ3025cokqfMWUlsruRwtX\nmHzIyHtOnp6vgb0ecLVx7mr2otx4prLkkpUr0qhki/BUP3UUG8Xh5YWeZLK9\nT9pepYcnzb9W77eVd4D0Ku2rPK7psAkfyK03YU1/+6H3kCKkRSneORioVoIZ\nR90o\r\n=+H36\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/shape":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/density":"12.0.0-canary.53d4e6d59.0","@material/checkbox":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/elevation":"12.0.0-canary.53d4e6d59.0","@material/typography":"12.0.0-canary.53d4e6d59.0","@material/touch-target":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.53d4e6d59.0_1620161414003_0.4101818926650538","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/chips","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.18d147e27.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab57d90928c7ccc0172687393beb675d42854b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.18d147e27.0.tgz","fileCount":159,"integrity":"sha512-0n4TgHpHO0itAn/9i76ZAkzf7A19/f3tw6tY3yuw+nVL2t29KK5V614n8CrIwhTGYFf8EnF8wLQ6vcmOxnGkoA==","signatures":[{"sig":"MEYCIQCp3TUm7fvSqLlLFYUxm+GZcJNXSRr6XSlg/25xRfrJyAIhAMnMo9vajf63Ji4fMQv2ldBK7Q/HnJl5i2ZlDQP4/u0l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbWCCRA9TVsSAnZWagAA/2cP/2Ztu5rEAJGIOx2UJIQ5\nNlVi/SwzqdtOka6lRNbqRypJmR8zKQvz/ysIppZbuf5WVo9rS2tEBS25AVea\ndg9ECbCx/gC0M/7AdY15aaYu0MGm7GhfHGBp3qI8zDTnjg/g8rjkPmxnr1So\nA1kqWvvSNbv+pIaYPdENjp0QUbHpn7AFqmNJe2FgCtVFOn8O0oA9E4VFO7Xf\n0BtwU+UG3f2yTUiagBY8FKjJIhSfmdOjNUs7mlbMNIDxgCc1NhXZMO4Q+2Dg\nB3OEMIi6POuWv0Jr6gHZDhQGcF+UBvR9ZxpqZez3zRpipvIeEKwse7K1y/HL\n6v9eBYELz2KaTbliFQ2SyopSZo0u312ETPNy68kEBOTT0loVdhLWsXPUG/5k\nTZMUoOKzTwNaI/O6iCJOWVQ/SCBX+13yvj02jdpaP44W6j+yZ1s3lZeMxDiu\nDfTHKaJHM4rR1vNO2JudndvTZPhRA6QAXzu50ZPxt4yBWaED4VVaDICyx4BM\ndlSRUNIgqF9n3Nyp5vL0Sgo9hzRHa2ytopvooTideLyl2g3Wt3M9qn5u3Wus\nqyl0ImXCysl7KL/Hv/zJTRuiSAMDqmwnOezC7L4zak/NjYiXrYsIpf0SaBou\nAQ6d+LG0bRugGUmm5LkR5F39+thx/Md9tEmO2Z64K+auwBbX90hD8F/74S2w\n0CUE\r\n=hSs2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/shape":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/density":"12.0.0-canary.18d147e27.0","@material/checkbox":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/elevation":"12.0.0-canary.18d147e27.0","@material/typography":"12.0.0-canary.18d147e27.0","@material/touch-target":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.18d147e27.0_1620161922121_0.13947083649472325","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/chips","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.b9984794e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b07a85970617e07b05a2915dfd0ed4ea908f4cf3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.b9984794e.0.tgz","fileCount":159,"integrity":"sha512-DrjTwOuueViuBLqpnhX4f1kVw6COHepbpz+3DEirPG2mE5zVgNwF+HXKv3YftxECQoG2rcRbWtTeLtwJi9Q+ew==","signatures":[{"sig":"MEUCIQDfxPH0Fr/smRnfgDXF07fqGVdNoys9v2gQJkAYJvY1twIgUA/JnigFmlWt2sFHQiHLQbxKdJrek0oCcdh/qlPN37E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1275670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdLpCRA9TVsSAnZWagAA/5YQAIVwQCq/K3HUm+rgIg4J\nsCc4MoK4TcnJYMwqSyNS66AQ8rviVTsQYUUOKvJuM3x/I8z5HvSqJHJODPtQ\nci65TgtPfiXgus9Q/7Rhvd0CocCDyTSGOWXWqU8Kx4j6GT2NTx7DeXITnqdK\n4RNMTB5MySAqYSPhy9e/BSaGZteVH2WvaLCPseWUIXFoMD6iDsUIE7PzhzWW\nXfjJDrGiExQRg6g4jhpZVnioyn513Dp9dSMOQRFq0sN0Fpf3uWZNpzs00THD\nuE2w5R1S1gJ7pWKxIh5uQRvAcg/AyQERTSgpupjDfjn5UAvy335qSRPqecxB\nEKwEzvkCiY5Jj+sa8BpWtQvycGbsAyMdJDlPUMlpiz3x5s1fHqeEHlCdMqHZ\nufKGw8/D6QGRmTdUkySOfdsduajPqerlWHBQVPvV0tEJ4Syr00VsMbHpfBzR\nqIZOxFxEptX/gseppxlzkjKGiQk9djJ8rxxD2AKa+bpd41nNQhclMQasQQr4\nZ63ejGxSu44swFmcPPYPfTJQo2nbbrhtX3rF5UPFi7pQcdyTKVpEV/pFgPFY\nFlatSQMywSp5QwjJ1QUbxTIV05AoqY5pmeNaKDJ1XuFyB+3ED+F6hKRSnH9x\nQDWVff99Xry7kZHoj5WLc5iwJaNypBQ3STdZMSBJQaSMKG7MGcpY0SS35TNf\ngduC\r\n=u/yl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/shape":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/density":"12.0.0-canary.b9984794e.0","@material/checkbox":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/elevation":"12.0.0-canary.b9984794e.0","@material/typography":"12.0.0-canary.b9984794e.0","@material/touch-target":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.b9984794e.0_1620169449087_0.7785515333932569","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/chips","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc7853513d651801dc6ff61fac446f50c27a10be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":159,"integrity":"sha512-a7T6uwLV4s2RzRnvQwRZOQv/qW4tssBXzZUAq1TtmhrClx74cpsfESkrDFIfyr9pkPTG2ihyKf0SbelqLNYK1Q==","signatures":[{"sig":"MEUCIBifAehhaFSUCwFzqjpkOfLQmICc40O+CwGjyLNqarQRAiEAjELjvjYaZR+z9yq4qrUz+HEtDUsUWAWZQZ0wvIZBdOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1275670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdO7CRA9TVsSAnZWagAAMhQP/1NAi7z9ZX+42lr7oJFP\n6KUaOnPvVQBlveuoJJt3zcTb7cKsGma7+f/uoEyiE0vZ2bpcsZRB142+0oWn\nuO46Cq1YDpv5JIc8y6MCyA78gQAjYUGzNRd43lPj050ISd+6mckxypoAVras\nI0HssDvjd7KMF55ivF5dv57cH39O1FLmVBaB/+h79Hr+e72hCIUF0e/UNyKS\nr4HgSOyUGibNdA1gBiCFv710LFWXG6eHqucH5a59bq1GwuNG3r4PcK5XVxY6\nQPwQ25RfINJ2a6dRKW7ako4bD4EmTplBSwz5NsZHLD2FfI8IpVt1m2aPaUxg\nEz347iNSCdw0gMVWfMXLFc3dHSe+CYlUz/qHGOPrY96QIVVihF7e7DVhSEMK\nBzxWET4QYuEu+GiH9tdwXdMue3oM7zlGTCmYon51Habipfe5AAQwm6n/w8a/\nktqGkbUfQ5fU/amli2aQbbaE35j79DziFTIlX6lYJoFw70ylyp2CFxoMPO3B\nGcWC8WSyDPmv3EqQC3akyMi0ez31PynwYR/tR7sriRgWvpPFtKAu//xn0eIo\nyfSqN7QJb+JmpZxuGvAj0W95IUyZpblihld0cSMirAX61xlsnHwHbLR7UKGm\nvfEMB9tDUNrFhqgWXEYu+s3ajN33jWHH369pFd3uiTWo0h3CMgnPSsFaMIDH\n4WGI\r\n=ypqg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/shape":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/density":"12.0.0-canary.b76f5fc9d.0","@material/checkbox":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"12.0.0-canary.b76f5fc9d.0","@material/typography":"12.0.0-canary.b76f5fc9d.0","@material/touch-target":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.b76f5fc9d.0_1620169659109_0.3304364497230887","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/chips","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b9ff6975253e2b3308282aa40b809f556a25b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.055d4f10a.0.tgz","fileCount":159,"integrity":"sha512-B4zTj7u4vtPzH8/w3PvzjlsMMa0p1kuvl9yiVPCzAmSYDUjUc/Q7iJ6njpG0IATNkN3V2ZA+vUzNzV8ZpZ/ozQ==","signatures":[{"sig":"MEQCIHQaUnmGGF/nl4kr2Ro0W8XUyLbMx9N/c9Ga609gkwjwAiBQbLBQphYIIal+xO8qY9n4nZBk+Xi4tpKqfKe+IyFoEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1275693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkddMCRA9TVsSAnZWagAAkTcP/R93ItSBu6t9XCbrlLEa\nzBaLiKk1WifnFDWQrYuRAsajr/3fYFcqIRAts/q+Sgh0ULSEMzYTjPM2zaSA\nuHClJ/CcysXAgM+luV0LSJCjgiktB2CNNO9IIeL34q6u/icrczKvjSH+rF6V\ntPGPtubDC6gUOueVVpvv/NX5nE/649rpDNYvguMoYysQHmoSM4pB4oyF39Jr\nttE61X9/oaIRZv6oqPUQGiSBjPCOxbpE1braHAd05g+e5P17654z25uDbdVN\nZDXJpCir25BWcpj1j4dJFF/mZxES/GgY37N79PE8dhLNK+Fa0f71KyKq3Is6\nFvjJhwdPWTM8ULz/1uaRQ0BEKOjwD18U6sfhOrWJ5pxQbGBpuBhTGUvUXKGr\nRSIqXlOaBG2C737PRpNQy4k6sFX3bmElIeixqi1QDHBEXuOLiQJCW9iaeOBn\nkRRyE58vRoFbCo+1wKWh5zuW4UsN16PGEZyq5v/RqKSbjXOWNaXwpKxphYTf\nL8IYdFLL08eavhVWpU1fIxn+p+6zXrKPOPWaQSTYa8g2wBSoCg/E+oCpdOOX\n9I2c55d7nB+kfHOqvT7vaLyqHj7E8bTN7oRaU8Rg99CDyV6pMCT7tr17z9iM\nG1EiyNVdUAEEhpIyABd2cJwFyAWLs9apkWTNfnkfNgvjR2hwoHkGa3x5P/zf\nV6XW\r\n=pc6h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/shape":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/density":"12.0.0-canary.055d4f10a.0","@material/checkbox":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/elevation":"12.0.0-canary.055d4f10a.0","@material/typography":"12.0.0-canary.055d4f10a.0","@material/touch-target":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.055d4f10a.0_1620170571936_0.8944336600682103","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/chips","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a6d1f1c8dd9ca06603876441e995a192f240690","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.5b6a46016.0.tgz","fileCount":160,"integrity":"sha512-Rud1Hrl7E+hq+a2ZeKwfXgXTGcCAJshTj5Ll5hEhx+JgNXmk4NcvpkDCLYybg/+Eltv6KhPt02oJ5nTJdWMsxg==","signatures":[{"sig":"MEYCIQCJW1i5WKJquFWMggxrUz6/6TZEAOUIdotjcSO+2gZLkgIhAL4bNfflXzkTR4UrcFLURYUMcLUzo4m/H+ovS2Sqbs6B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1568783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksT4CRA9TVsSAnZWagAAilIP/0dB1dB/UIsz9+psNHYL\n/liAHxt1UBS6J6LTZyFGKHgjgv8JpFIbMs7K3SjP9DkK0LXzrscOgPbX3VfJ\n+l/PbRqp8yW0WR7ojnt2UnVCFkXWN5RgOBojn7QQnIRuXMvue0ans63iTq0G\nTiLoSLaH73AbHze1yZAaGdHBjDtBjxGY88u/K2yCjmRglgNp0Ku6yxfTb49A\nTxOxN7uXOy+E/FPfiz39wbb8dSQ6H2toRYim7r0F2XyG2sY/54PIjyO7ayvM\nIDJffRCsDIpL/31J5aySiQKoA/cxyTxF6tlEk9R4+fQ/K+JwFxAANkRw/c6U\n163frAQZCpTXCGraYFGfknctiqxY+CcHiRAbEl8OQ9jo/BW7XG3bgHLCYShN\njrkDABMEBwK6OK2XiMrMQoYkLp45yY3SF67jaW3x2trenjxX+5Vq+B+l0rVL\nFpbxB11OV48XDQ7oXhBuNx4p1trW+FNRigvh9XzOpbzxNirtUJnZ0oGz1IDQ\nbrA5s7EbnkIk2UetZacWfWkpq1jIVCZHhPhr9TiZevCfptmBgVFWCRIC04jv\nykn7BcRemyIzv0pdUnBk1c48rf9YAUtX1kev7J7IjQCHUaZf6MMjOW+X4eTe\nWYhTTV6g7BJxCJC4fmXw9VxlJar+g4cvupLrYUhbSLxd9kYoupxG2EN04LfI\niqIU\r\n=qRLv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chipset) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chipset#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/shape":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/density":"12.0.0-canary.5b6a46016.0","@material/checkbox":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/elevation":"12.0.0-canary.5b6a46016.0","@material/typography":"12.0.0-canary.5b6a46016.0","@material/touch-target":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.5b6a46016.0_1620231416166_0.6665542092934289","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/chips","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41ea18d8235b99e6b5cf74f7a035bf8af3f2a741","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.33c9a737a.0.tgz","fileCount":160,"integrity":"sha512-+yy8lH26541I9aY+BvoGWLmcu3onvpSxWiv41RAlOHQlIY2RFxp6mHnMSe4L58asKDhp52Zo+HAOHFOhCwvvRQ==","signatures":[{"sig":"MEUCIQCzewXWb2qa5/WQe/xbwFj+DQtbgBpiTusiYPG1HqUckwIgcVyjG9///ihd+uHjK+inIUJs+nfX+FwAWg8azHX/FP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1568947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktWXCRA9TVsSAnZWagAA5ToQAKF04vQlt/o2Z7h0VuoM\nXxaUadBDtyNdb9iHfbGCZhgeTr8DAvxPZiDGayytM95kY4MpfKHn2Lcmh7Mh\nK0zhUUiD9mby6lghk4blHRxwHLZm6TbIrd+Gc2pPJx4ZbyPPxBWuRwaY0t2M\namcqnLIAAlFWsPWFMGRHiBFI+m1fzkPf8NPMevY5XncB3FDAdky2sitfPVgH\n9PfZLZI2TKfR4Ephg/p8tM0lUxsgMJn0xUWx04Tu766rgxHkU2y+S/xHr74x\ntG1Zj8Me4gSmd5Z386ACgcmWMk539+kfWqTtvuI44i0lYdSgukyldZH/Z+KW\nbHNMVC6G6nramaouXhCEhLTsJmWh4EXyasiX82pkW14ugBQkro6K5ywRZ7KA\na6q/IXE1OgEy3HcyHKCAeO3JDZKWl0vGJjAdIawtoxxW1Wyg4NfgJwJ7JPvU\n4p84V9AVWSVcVbiQ3wjVqa02R8+uA/LuKYPZWxQWxfTaJchVI/m77krs+iI7\neZyi9YqKwZ5sZzLhYB8NJECFKoZ9n2aJx4u3N+3WfxOOoZvPK9JBPu5Ev7zO\nyEjERBLPeRvltsnR3b9Kw3OPMtV4pU9h1jn4t+QQJ1o9kB/qRQ3XCoJn5xa4\nytxh56tJpnrJWWl3dGy6073oOQ/c0F5hiVPXLKKp4bd8/UuNR+il9GzRuZkP\nzEYH\r\n=pF/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/shape":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/density":"12.0.0-canary.33c9a737a.0","@material/checkbox":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/elevation":"12.0.0-canary.33c9a737a.0","@material/typography":"12.0.0-canary.33c9a737a.0","@material/touch-target":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.33c9a737a.0_1620235671328_0.9375881235674761","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/chips","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a8cd2a6cbff6f426f8634ba03c1e294c2f576db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.9bc0effaf.0.tgz","fileCount":160,"integrity":"sha512-jRzifgrmZBq+P/Yc3YeF0Nmsxj06xbXJGK9+K4o28G/STsAOmsdi8sQrQXMNs7K9QGdd/0lFxZvXQ2Wg0NUqtw==","signatures":[{"sig":"MEUCIE58BrYefSs4FiZh5yLi+bCLsuWJZTQMzztcsfDr23NNAiEAuVlFGlX9DBrKPb6l0PZxgIdIG9HJNJm+BoU8/VU5CSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1568947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkweWCRA9TVsSAnZWagAAVzEQAJBlJ6/sFb6iOe1PVE7Y\nH0Q9TcSGAz7442YjcTNbM5ZSHQwUQaPdPMrXqoukpf74OEGFVYJKsaED96/K\n0K+wzFwgYHh4rGlJhnAjXxj+Ls+/uMRCtEHRAFHKS8ogzgZ0JuAjr1N7FVPO\n7d+HiXj6noyw9sQQ7GvUNmXBAwEjSYdH6/nj3CXaag71RGeR+8d+wmwaNdej\nM6l/k0+6n+HlBYSDycRL6cU4QpFromABJr8ASAnNJQO6FtymbXipnNPPzfM+\nhqZZvQSoVC65VkEp3WQ8HeXzUxn/IB7QbkFSP90QEvOTswB8Q9rV+WKw+wmm\n1cZmywGaaqM9vafcWpWFPXu98A57mqH5HemHcz5XkLFvgC4xWbfjs+zDRZch\n/bERLc3lHxAVWqXWRALmgNILrTrqVDO6Tubkb1C6VLD+JzBTJCIraKQx9Apx\nkPB8LdxFN8WhotFOwqf5qFJGQUoLX6gyLwEZ/hyJEcdl8yPvgsgqbqEy9qTu\n8fYbpTICtJ+zvcGR4PAcpCbjFOu1w5u1n+Jih1LbxMfpAxH0N8vNT5bACAs/\nWBHqFlCF2i15Mqb24cw4Me7UH40WNJ3OLSHVgpNXeQE5bGBSR982sAA0AdDU\n1wIa5f3DAF1h36px1Mq2XJkNAN9bJE2VMHGl0+yl6A3EhZn/Vc9QWAOeqZXr\n/B2K\r\n=QePt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/shape":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/density":"12.0.0-canary.9bc0effaf.0","@material/checkbox":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/elevation":"12.0.0-canary.9bc0effaf.0","@material/typography":"12.0.0-canary.9bc0effaf.0","@material/touch-target":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.9bc0effaf.0_1620248469488_0.817828729335063","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/chips","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76256c786e00a7ab448db34226937073fe61c445","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":160,"integrity":"sha512-AguQWHrw7xg2KCypmFxPvtXyV8TQGhrvF1BK5A5uNcEzK9BlfksL9JnNb3//j8ZeH4/cyJGwvCPduySHZIwkLQ==","signatures":[{"sig":"MEYCIQCwiav1AYFK1/MjVCp0uOgq67XkhLQTKGc1392szl2abwIhAOll/AOjWXWjUk1H3xgV2PW2EkZsG6UaMm1sUR7CB9Eg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1568947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxEUCRA9TVsSAnZWagAATIEP+wXw/tH33LxHtrUONdfO\n7tZkPtYBVjhTpqsOi+a8AJC98xnwvyr70guEyQLNGUsntUpccasmohgSrByy\nRpzOoSajZI4JolhmUQGTdAfHVdhVwTi2CM8O/Y8bVdCP1L2HS/QrOdIB3VDK\n3Qimdm2DNuxMtJ/5zG0ZkyB2EPkQ39jxI7z8EKNJkKntwMnR3D0F3PDRLtUl\n9/Ek39fxE79NEv3u+6Rms9jLl6jk7i9E1glPI5vBW5v6uIagVP+8ckrI8LhN\nc867ahX1aabxDwKkRwo4hlPQZZmzhTYMzn08tHB2dFKdql7hKP4Fo1fl7ov7\ny3kkn3Zk+uvLSDhERr3LnWyrSZypj4nDFr3BTl6fa2kMSnWF4Cg/H2Ty8kdz\nrqqn7uyEJdVhGErZwtGthCJ4Q7dDsxPHpc3vhODVl8mZ8yHKNnyx3zUToO1f\n7D2je+hJ/jZKD76k+XSimyVt2IPb6peL8IguSfJuTU/aiUY6Gs3VPlorT6fs\nKeB2y/QJ3eFSdTXwVQXCT4gh8I+mu/aZMXWPx62se7AMx4ba5Gyx6ykyWmSL\n093xwIGoaYUDQmggV0L5+zaETueD3NSul5oe/675zzhFFYI8KcoG0QP2wJiZ\n28ROjuLP/o2+g0zKs9INgXvU7nGouDDPhJySm45VI1YiWxoAPBZdunz9Ccaj\nHjAF\r\n=0Nrh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/shape":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/density":"12.0.0-canary.a1e0f2af5.0","@material/checkbox":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"12.0.0-canary.a1e0f2af5.0","@material/typography":"12.0.0-canary.a1e0f2af5.0","@material/touch-target":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.a1e0f2af5.0_1620250900095_0.5128840682802316","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/chips","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.06930c96b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95eb98bada8f47009121af190cceab2d375e84c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.06930c96b.0.tgz","fileCount":160,"integrity":"sha512-MYMooY3hT+dPTxb7rxcrjK2Rvn5CTYpR/zTPy8W/l/WOm9gzQeyTwmWDh5eyw2A6bORom+QPTzxYGFcDgqucbg==","signatures":[{"sig":"MEUCIHwDlLeeaVPBcUFRStpuzDqmSif9xSWtIrebO/w2KKDYAiEA4ph2ShtHjSx7Q3vvKwJEQW258dBkauodFnwke49cFR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1575432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzhCRA9TVsSAnZWagAAdlEP/j29NDbfBJi7PZPWEPay\nuICa20+1QpvbO8wq1ka07SWRfpJf1fsKHPCZdZIqFu13VXHak4i6B2wI7U2G\ndoJ4pZ5oNOzf2quH5hyoYxZZwArkouJciroZtfF5Mg5GYlvJWgAuOMtcGGim\na7GPrG1SnVrJ8MQwG51QPYw5JQphIXXEeocNs3SoQX75/X5jpENW398UutDG\nyUpXhyQwxZ6HIzjqe5TuRec22m1XKaHtZDhaUHHHIaY4HMCIsyrjSALkropx\nUG3sk8iCcUE1pQ5rLdgVm5k3FTCKUqlkQBKJhPU31ycyoXRQVWMgXienu+Rs\nto3NOjcnMoPKyb7sAXl5jOFZLWXy9bvp29iSCKFQaqLLTwHQGLt6waGbGfua\nDOAK/1YQ+mXCjs53So0VhnooUWyjKLF+f9BocOV2RlJHtPn5ExlBH9ko4p6z\nGpRhkxJdzfUwgH9D17cFqqewv8raMaYj6AFwcS3UYDyU8iAY2Q8gghziR5GN\nHYk2I6Xi5W/0HrUNng40QqP+T+04xjMf+RzxbIVeVCZSvaoHG8pDy2cR0ey8\nz/ZCnSUSeFp+bU8GAcAzbkyxE7fwjlcPyvWbaQsB8zRUMGhvq6ZgeWVaizsZ\nptyZhGWW8SUOzveibrZXYN6WecJLkZBjxHyKhexFFFNjfnCBvr5E/z/XoQdT\nwBLr\r\n=A39b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/shape":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/density":"12.0.0-canary.06930c96b.0","@material/checkbox":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/elevation":"12.0.0-canary.06930c96b.0","@material/typography":"12.0.0-canary.06930c96b.0","@material/touch-target":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.06930c96b.0_1620258016896_0.9600703473142671","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/chips","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a2ded3c0201271a53a602ba684de335acaec835","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.03f525f9f.0.tgz","fileCount":160,"integrity":"sha512-p7jjrYaxOT6B9SCekprG46q4rpnAE7Baj9fE7RoYa0gm7SBkBImjSyfb7i5ddkNpLi8NxmDHaB47oziAavyWhQ==","signatures":[{"sig":"MEUCIQDyJIoMI3ehuu9vPKLDvPfzkEzDrkjYMvd4AI1snZYX2wIgFZ2KPVK3UFAjRQ9XXWWAcq/MfmrGZf7Aqtxr7S/9g18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1575432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzivCRA9TVsSAnZWagAAnLgP/jFNb76xjzezSRfMgck0\nH7LAHT0CUUM2zGVdrOnS5hL1Mw6+uAmyuqibbhIqJAKFtx+jKqMr7Aed+m1o\nEPUysT0vzjveF48NECSsBafRKbdjkrnXHSEWYxGBcL0QE+CJ+mMS1LryLD9/\nRiHKmoYvyOeEpnCUbLTa6gg5Ug7ugJpEWBC746VSUoiGzliwtiOmDXKDCgdM\namfXhA8VS4TenBuBJ8sQ4+fpGpkrB68t7wzZlAceFA50PY9CwyLRrKut6Enu\nyBpYpl9JxALpw4ywMzKVvrjJ5O+K/hyMVbZEYEVPCvUp/I9yXDwF6fU5VjT2\nB/Rfk7hT6DwXuSdN8TomaHZ9GBqks1ElQpzXNMqK/oRsEeldWvhFsBG39R4E\ncEJ2PAW27yIQNHx6CDBCyW8E9pIQvLPBJzK6z4ltasohyy7/KIaf669I+2EB\n7d9Asyp2nb3y5IBYbT+ruR08MEFIx05hWZPzKTuuYFzNFH8Olb2793Bu9eNH\nJIYvPcIffoNncnYXho4wROx9VL+eOW6M38wfE5wXirbunk2tw36miYCIzEdm\ndwOx9vfnn3lVLDDVQW5FYpLVQfmGCWMarOhjec/9KbqHjsNqhIW3onXTw6b6\nFsVLexvGNeZwgi0Sg2cSAQ5I0kIHoKT7XoJJ0bP4+CamxXpH0ZMnptbid1nU\nBO9X\r\n=jOHU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/shape":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/density":"12.0.0-canary.03f525f9f.0","@material/checkbox":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/elevation":"12.0.0-canary.03f525f9f.0","@material/typography":"12.0.0-canary.03f525f9f.0","@material/touch-target":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.03f525f9f.0_1620261038658_0.9827333335882078","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/chips","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc0f4f6244a4fd0d6be025ff2f01e86f57b9c4d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.e82ba2a26.0.tgz","fileCount":160,"integrity":"sha512-Zpo1NiYmioFSnOO4q8vpiXyf4BttjY4rAb3rHnoBSlGj2bG3eCLm06yNrC4Kh1mUB60jZC95O2til0HEFYIGYQ==","signatures":[{"sig":"MEQCIBceTdOI/hdjfjtzrK366y/L7vTGoY/q65lZJniGj9gJAiATC5ymptN9DmXqLuGz5PlpOV77qWOvA9nqedtJii61Xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1575277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBH0CRA9TVsSAnZWagAAPTAP/2uiq6tkkdG+mzNXLuo0\nocwA3MFhXltIl0qMhxMM3SQsISaqo83XcMkRqr5sIWO/B53WhFlSjcH9+m/r\nPrRAKaeydbcyQb9Xmay+nH++33EZvE5LpnPvGDF4OyM6AG/qG18P04FdG5n5\nDOL8iXjkVJlO7FFGmQhavEHL+1PdujnhAN+i1E9OaVa81QB0GO06UoIkk/LB\n/7wrx0cXaNR6bO3eMZEcs1/ZsmnjoY2/RtNHbFr6J/uRJzzeHIEOuVFewLl/\nVBc6ZYteu4RmgS7YkOlcWC8NBamFNdngRJKvBKmN2cYqBH7hvooa7kEd4856\nJedPLkhdPttSIl5yMWgETIKHeChaF9oxT/FoUI2s00ZNNv1tOrt7pgTCeG7h\neep+0/AwRfkUowP1hgHYOmvZkxAnD/hOTYW09+BsIbIYVYtBpCaS7d1x61B1\nZJ4zgv/8xrG6fAEHmTt4DjKAzwjTxG4QjW1brSN9HZJRlDTt/LHtgBkR+Jcn\np485BzgxQpVqsE87AMZy399Cia/VtHpLlxWs3mipG1XVFAfaaxxrDI0RcoE5\nC2RSKvsGDQpk2l+2ekpjtfPaMpRkK6I2USf03M4uiuFf1Wsa4oYyAnKHV8v9\nQoAaNsBfW8u0uYKij7sqsrQCvnhB/EUcK3vpLyXRWonkbPAyJ5iw2RVcGRcf\nhg/J\r\n=gXNO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/shape":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/density":"12.0.0-canary.e82ba2a26.0","@material/checkbox":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/elevation":"12.0.0-canary.e82ba2a26.0","@material/typography":"12.0.0-canary.e82ba2a26.0","@material/touch-target":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.e82ba2a26.0_1620316660150_0.07968090118559079","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/chips","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bfedca44b9d54cbc114077bdde2750c30689967","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":160,"integrity":"sha512-wVac9KIT++JWtkcoIOxIv63w5BdHIANJeTHiP976sD9HsJSy319pUSc+XJyzx7KXR2DH3Ig+9aqE+BdKvYn31g==","signatures":[{"sig":"MEUCIQCNKBhTFMEF2ewNYcshvt3Jm9f+6QGrunwaU2Ms4n4HvgIgYkjAgZh2QZPtET/MxUgpczG2z+ea5hz79jzl2PnFw1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1575277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCeZCRA9TVsSAnZWagAAIo4P/1fT2y3joe15H6bgIxoN\nBJmUzurooi2v6yTRa/eCUGf0uKXy7EMRkjJxh2huYxBxXuexxkU/0Nn7M96b\n5210hQcx4h5cqVG/VJ46wCOrQeCRkBffkEjkykI8U7nGODGRJ97VjMFfdI6U\nuAJKWdvF0jXu3CmwJxtlb5Ml0UrOP+h8gmVn5gQeQG5z3YDmuBcDtD2shkqF\nzp1FMFk5uxDPTPkTBNhOIEMer4ic4KYR0rDy0y3NLsJM5s360h/8G0U3h5Rr\n4MuxWp6h9z2y7NTSpTBvGWa9rMZPhvuUMfQvZekn8T9zCZyEqjjbJJdILrXE\nE4ig/bg0VH1GaaILgeR4jewNE+Yaxgn6AqLIm2WZPk7ibNiQbLQOC+hzy995\nELKhUUryxdWOotV2CN3IzrA6o7GaWJkizr0rT7YPJCnZHgiDhnzdniBTtyNr\nQ8gM2i2kzirFA4KF5A1izab0DXK+vEnr+VStg1saVrL9EjQPgturl4tU2WAl\nBamm6qhCimqrpHMeNwc/8W/2VHj6RYWiwj5/O6Z/aHOE4kbIUC2aeJLerNe0\n9IC2YsXKKXpG/JQ0NROVHDgtYwCdzAbYrneVhZhCtEGP/VArm/DCit8EFzqt\nVvM8G8fbPHDqDKsgQyanISGg6eLVpNeR5mQpm9ekt7n35huFSEc46xu1lR91\nmuXh\r\n=xc8a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/shape":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/density":"12.0.0-canary.fc7c4e5ce.0","@material/checkbox":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"12.0.0-canary.fc7c4e5ce.0","@material/typography":"12.0.0-canary.fc7c4e5ce.0","@material/touch-target":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.fc7c4e5ce.0_1620322201148_0.7714541545284597","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/chips","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.65c04514d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6aa8ce8407c865955177295e0eb5e1bf84810aa5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.65c04514d.0.tgz","fileCount":160,"integrity":"sha512-wa2SnZMQwXj/8etr6tWm5YGE7qRmum21oTBsS2cSBaUWtNUoFgmVO8TFzQSttxsGOCd/NsEH32i7GU5royRldA==","signatures":[{"sig":"MEQCIBgW9qLl/0gjzRXTrhM58wZKLbqSTYpOqWPXMzl4/9iOAiAfOydCJqd/QBl/llihWi/oRhFxJ06dCmPNdzVn3IG3UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDkjCRA9TVsSAnZWagAAMJoP/A147aElpk5bfQ4yBPG4\ntM6Ic5MC8icunnA5xfzBFjBk+CQqLoF/pjN39VHE3+VhB60PQUvHUm8K5gyB\nQ3xUixiA10zTv708BV7CeNqS8uKd2IwEO0nw/XhpVnml26xXMVEKp2yWSEeM\nhb6QaTquNfiqSpQQhd6d56+hGzcO6wKJExCpG4Ytl63Dg3t3YL8D+KpQPzYx\nbNmPws2PZpXcw9RzA/1K2d9ysBbpMv1V/64i0ESojKhhUIvT5MjyS+gFiq3S\n6o4Mp8WBum97Ge00jiIlEXZDcCY4WT9HQZAVtJaJKRBFihPmMUdbbg26EBvK\nRgcnsDIqaF9c3Mkcng2FePi+4Mf/zQLeHZbRf08Lt7XkXL7J59JT6HZwxmmo\nQ04nS4zFlcxNn6EMc8UIky7dF/I5zwfFRnmZvrDOmVkIFiq6MxD/TS4uLyNU\nzBL+Qbx7XFCsOxcuQpKwirDbQa/5t3UckIk61VvE0tKQkclko9lYXA4BjdR1\nTrYYpl0WxEVAxGoUQwLa+1LnS1MuGNPgmJuTYFVHkAORvZRXFTBxT9/PvaTB\nFAjQbcwjewJgTbGQprpEA0C0HoPwse2Rfo3go6oQ4AkKXeQaRZg2YAMXScvy\nOU+TuyIeDHgBHSZrgqcwwlerKQOeypH6UhPNOyYvIPF+rmKWaaAivqeXpMOz\nqAQI\r\n=qQNQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/shape":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/density":"12.0.0-canary.65c04514d.0","@material/checkbox":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/elevation":"12.0.0-canary.65c04514d.0","@material/typography":"12.0.0-canary.65c04514d.0","@material/touch-target":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.65c04514d.0_1620326690624_0.7199608540925853","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/chips","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bdbea90d206406a23aac38fbf6472204fc64ab6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.c97779ca6.0.tgz","fileCount":160,"integrity":"sha512-FyILI3aTyVgtTgM+Kzz54Fmg3f9cXCZwHZNVhsTe10Y202hZCclf3+K7qow1P+IYJkz0V3JzqCsE8lZCIw1Rag==","signatures":[{"sig":"MEYCIQCpcizVk8Ubz91pAogM/pQFcb5vA3XuFoZide+aGyBFqgIhALN57/RgbxO8vSuFdjXrJQLNvv7xrpSQqXMy6adUrMpg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGMTCRA9TVsSAnZWagAABKIP/jnn+PWtxf2NpJmyXSHq\n2NMw2n2hFGSgJ1CZK9tNCsABBwGpomWchGiH259toqtdsvtEB/S12X+URrOi\ni2Nxac/Ws9rdZ0uQ+FnRW3PGP2Hz5NTlo4MP3ZArEcqMKHpqyaY6elktnfCm\nuMFHGMkbXY+nTMh2n68p2tISNcBMcu9vMHhKzMf0QrSj/HC4Qj8JNmGZWGm/\nvVSSMv/ImsDmUxeBbLTGjKjWv0er92ZaxMHnyxiiYVRWhSeV/UPkvxSKc+xd\nvTD6rxQvc0Pj68I9hZMrNC3TCWoVmFBnh4e9cgox3Cn+IKhX5IRASHNdug5n\nAJWoCiB5Br3nkIoVK28zZ02Q4jC3/d/q3mad+wH2vhyRgqEk4e4kM8l7gclD\nAAHU5/u2R9YV9ZBqP/TLqLhyKu4OeTSvp1BI1fFoRkVJdyjSEquFWlSHPTrr\nTJv+PQxmgiBtJbyMVTCzJz8h8LY3ojomdcpWcw2Ab82Ih3q38173EOXPr+ms\n65lohug4nv4BT+/DvbtWCCFycBAsFd3CzdOqozuxyRDlsrSYEgq0BgW960v6\n1H+rdBFaraNjPocrzwqIoEQtxqn5BtHzNPHhosLnd57fdx0BZCVpyALpt4AD\nLBw1VRt/E01tNDx3ruzkFC1XVqjbpPmWLc0R4sCPFImAS5F8E9sQHN4aVCZZ\nzUpC\r\n=f0+K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/shape":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/density":"12.0.0-canary.c97779ca6.0","@material/checkbox":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/elevation":"12.0.0-canary.c97779ca6.0","@material/typography":"12.0.0-canary.c97779ca6.0","@material/touch-target":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.c97779ca6.0_1620337426846_0.6373781559668157","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/chips","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.869d890d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9933584c61bf5f5c26b0cfc5f402743927418d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.869d890d4.0.tgz","fileCount":160,"integrity":"sha512-kD8RMxpP9da1o28cAdeuCLJHBQw3zGWWz8+g/JYZ+6tfWsE6WVRLrSwf8EZmXrcWvVR3GK3stOp4ZETDOpqGwQ==","signatures":[{"sig":"MEQCIGVjkvjBtVMlXWMJh7ZVysff0LjxkwsKpeIoaCA/fa2FAiBgCHTx2hJF46kyXsbVCdrYx6PG2iTVxs/fGLct2rjSHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVqZCRA9TVsSAnZWagAAOOMP/jT02ROC8SE8wlynX69k\nMe/2eVaHfL62bN8Hy24mEbwd7sdYa5s7Q5mdhySJjMS9ueMmiUFC2UIvnUpc\n5bGF1nWmiUFg+c5/YVy4CjDXdzQ1WQXv1T8DxeHWFYrTtWCcbl1Ltkb1MR25\na6Kh9NKjQoITmB5+2bict/SFaeeEZtPkUBtvViosXKdyBedgVcyrlaZnggHY\nlYQb8ZmdHDn5mhYiUNM39qwBBGZdO4yBRzPOgYrm8ULQOWGMEpM2usQuyu2N\nq/sU6hCRGeNPGUELxgI5nZRFpT1CDMr0adQtEKsUMr4RM8LEcxIbSNK2xldb\nJhI3wEkHD5b1ZKjptQTpy9BCnCDyk5zNoGnT+uf0No5NAZMnguW+BcVrAxkU\n74bt+g0gwT5vMqylwWKEnkjOfphsXk7GUtjxEnTIpoc8AqfRcQ/GsGwlmMTT\nkUAi3UlTo05/OTzB7jX92RCKREVP/E/TYVY/0CnqF+5jvmDApbgGTiyeYhlu\nzAjYK4X3jeynNvFlZDq9ahIM+UVigKHr9holblUv2T/0IGSh+zFY6DxpFIRt\nRJNXkul5ukEl72VZc/G7fJAE9HFRrXQkVgHL4pdwHZ12EPQ90AACzCIpCnGj\nfkMIJaOzElJaSOD1zBgUYf1v4/tdETw+I6LBYssrYVgCpS71RldX3e2IR42u\nGk1V\r\n=uH37\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/shape":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/density":"12.0.0-canary.869d890d4.0","@material/checkbox":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/elevation":"12.0.0-canary.869d890d4.0","@material/typography":"12.0.0-canary.869d890d4.0","@material/touch-target":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.869d890d4.0_1620400793010_0.7824068518371301","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/chips","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a0f18950b6ccff78f5a7473ec8f4d831a165841","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.ec22e1da9.0.tgz","fileCount":160,"integrity":"sha512-uoY73tCmo7ixdR8X9Ck3gKbjuy/nqA4o5bvc/okFqtq6uu6z1Ui9IF+uEpCtikzuC3EpQd7ULgWSrmtuThM98w==","signatures":[{"sig":"MEUCIQDeDauiQUQBqOG68fJ7hxs+ZIIFfXGMTvBGmFU78WgI+wIgTEY4bNoymXepya8HVnhtr6RtT2pAzPISVT3BWboTUGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXpHCRA9TVsSAnZWagAAYuMP/iq9rohN0Qv/7HLYZ5TB\n5e3tEuOgoCGu6viYxvY+1aQdLLrRdIND7Zj+f3vFdlGGlxcPtguB90juIJSs\n+b411WWz2TRIaRMxz42TAg/M/smW9RSDylEWkU93vy3su5ttueB4OrZK9WG+\nIcoroSA1UwO+M5ZLJjjEfgHT8w7mH/t/fTXcAl1T3M8y6bDWTCfIbwSiYpLh\n7ZdUg9hjcVUqPtDKAW79nq/j569I6iUh92lrzK+JUgCkWy0FZsf9qGlVnuL+\n537OfDzM3lIbdCYKxt3PV4sdS18msIz/H+ENdhsuqVRUtXXa6irPiPMrvOiM\nGR9sr5Yjl/4PMSrSW9LySX3jPbA+vvBHiu5Ii8aBmNoUdF+Tyt7z6ZpSu+wO\n5HS5OPzA6RFJfBbmClFEYFh6i3c5lPNiRlPo/aZApkE+DzdlBwp0ucvWYuCE\n/8wmm9Nm9WigyxplE6VrZ5MH9AaBVgbf9bN5oScYusC0jmE/Ffyibg57duLz\nhR5jOC8MnWuw3kJdzHzx/lFT4+qf2rbHEsyeEYgZNUMVyJjcL3RdWK0CILNj\nF/708HSMHcEkYsoG4Y3OMlbM7pW1btk1pTa10W/xUdzhi4/HuIlyWj/q7OLO\nLSthShhsKDEt5mKA1PGPkchEcLoC9x0ajHe3aczArFQRSS3/HxChBjbCXn28\nP3z6\r\n=Fg0d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/shape":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/density":"12.0.0-canary.ec22e1da9.0","@material/checkbox":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/elevation":"12.0.0-canary.ec22e1da9.0","@material/typography":"12.0.0-canary.ec22e1da9.0","@material/touch-target":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.ec22e1da9.0_1620671046546_0.16050649649808668","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/chips","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1afeb5395d8ab32f0351d14d5795fb7e402afa08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-nightly.7427449f0.0.tgz","fileCount":160,"integrity":"sha512-PkR9Ud47mOnjgWXf7Znfbl5Bl0UDCLORed9NNJ/goKxQ8UI8Os/zmWzje4bcT3CEIw1cBJ8mjUHhGWnLX+YuLw==","signatures":[{"sig":"MEUCIQDcdsyy7yEu1gdIc8DBL3K11bw4iMapp1T9HDfvK5BbgQIgCZ0jIxrlUNt6UuBqIRspSYD/9rRoBm8I/ePOKNEwFrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX89CRA9TVsSAnZWagAAx18P/AuIW1Laep88CHOkl4c/\nO+pR8Fk1AEr8tLaCdhnTWbWy+6wlLK5CRy+cXOB5GFu8s0yk5C+2iJiVEKoh\nmARV3gfFFsZapJfO34Ld5MVNT8T3PdTV1amCVkvgPNNRWkR0AS5Rp2Eew3Z3\n7TJxGtwcyJhNB5nH28HjNwGSbZKypYF/o5w1dELuY783BW/BeEPFxfnp4v5P\n3xrqkka2W2erX4qa5ihczIvkuagWsJRfdor6N3TyMARgpj9CQjwa0DFN2oK0\n9clHFZR8jv8dWG59S/C2qGzgF59V/oiR6jypr4qoTilMEDVBXZWzl81y20gd\nmrFb1i7+4PRHdy1ebf8x51FI/MA7IFY5hhzxUOfekrZTww8OCOLl/MbnowQU\npVKLPgoLNWdVgSpzrE0OAkrlmjBkBOaBXEusE3zuqBx40z/ffzSk6XIRvI5V\neyW1sYlPFzbW9mPHSfcP//JrcMr/fd2WJTEvm+oqtPYJ8MS0llbSoyzxBIoH\nL8Q0noK5eejIFc+vHZP57VdAVx6YupF8SgCQ9mZ4NP5/Keif8CzFFY2NCDUZ\nRAWp9bfO3RzL5M/LKInMjhQT76FYvDRJ2Fl/sMJNzXAGa2Vys3P6hEziGz1d\nWNf9w26nw/szCvEfiDHY3IoEn92k7qIsxi9QpENdB9O/AGtLDKSTOgp9FrY9\nFdOK\r\n=NJ0C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"anonymous","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/shape":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/density":"12.0.0-nightly.7427449f0.0","@material/checkbox":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/elevation":"12.0.0-nightly.7427449f0.0","@material/typography":"12.0.0-nightly.7427449f0.0","@material/touch-target":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-nightly.7427449f0.0_1620672316874_0.06868519711251908","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/chips","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6583836e5f9d9798c82b3a839b6dd4f5b0653910","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.957cc3bf5.0.tgz","fileCount":160,"integrity":"sha512-VzbfREl4fFLYHkB9jreOq7RmEn30Prn0ZK0XNCrq7m92Zk+sqFZMHEOKEp9oMqdx/uxFF8fdz8BSIktBzRZcsA==","signatures":[{"sig":"MEYCIQD+tGcRlaDjT2wDP18/JzLFWha5LBKsETnv2haO43ZIjwIhAOeI3TXXfuZwhSHeJrnTqI6Oo/mgDQDZBGlnQ5XjVGS6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaxICRA9TVsSAnZWagAA3h8P/1QKordYSO7W0L29ecmV\nBq/X47POFw7FbnsTTCn5zkK9PNy0gPS8AjtYnqkxE7NBTltcCHAwBINagzmy\nn+uYLj3H2tVaHmtlk+Zq34nME1HWfMfNDYR1Z18kyPDjFNYDwwnxYiUU3I9P\niXoOi2vjPWiowCoGub1Bjq3RCsKfzY4xBNDJtn6+Auhdi9mO+KXqQVAZFVMh\nCsDhRA+weKrSFnyUBvZWLcDmDi/JwSipEhk2RbdbTAS1P2yPxLcw/0oPtWm0\nZN2mOkoI6xwwatxdX+TzluzKjtqrFoKaZauvtud9kwdTGOFnwpnJkfCyt2ay\nbKCInxZePZn3RcLllhXasqHI6WlyxELww0oa80YWPclP5tk3i0MOUsUIW6xs\n9xjbk2cUfylstzAgeEPrPEOFhxrXcGK81XwFZAgQBRMZYJHSuX09/wPLk7Ny\nSbYMSrNzz6hme1nDqBvVHL6WlDqw06ZuQTyRPVXyA65NYmM3zizhu12ffQbf\nEyh8lCMSUKuYY0jNsc75Yl8uC0YzkJGJJloToG0/AYngA0n2kEgsRvib4iDk\nXV5mqRTXmX5/qthBQo2WYBdOdPSGfv69zBvgMrcKInPq5WTpDIJw25MMGaeZ\noeOLznTrvOGW+KVy0WQG3bzPc6SO6mI27PBjCseaq/T17GdMKw5Q3fcP/v+4\nbT6y\r\n=71O7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/shape":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/density":"12.0.0-canary.957cc3bf5.0","@material/checkbox":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/elevation":"12.0.0-canary.957cc3bf5.0","@material/typography":"12.0.0-canary.957cc3bf5.0","@material/touch-target":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.957cc3bf5.0_1620683848131_0.45268239079651074","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/chips","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0462876e296f15b72b1758d6a00607b0dda7b413","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.88a33cd70.0.tgz","fileCount":160,"integrity":"sha512-U1w4nNFslWcj9j4duRHD3ykOtr6IPE/5Y6w+mTGbedCpeB8vdaaQjsQGQpJdxmYn+7mT64C3WuZXVdaJYggKMg==","signatures":[{"sig":"MEUCIQDDLNHbeICcXML/EYosscdrkejE93L1QEiVHtrtXBeGFgIgVGVQJ8Hu0P3aUU1Aey74WGqDtS+/LBJ4KYKlr1TbWL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcs9CRA9TVsSAnZWagAALqkQAJp1Zfcr8aers9vhjqmv\nsW9mPy6ImxPNstpdF1izm06Ak/i6raTRXHBy+KWmz/tctop3RgmGJbRmcyEL\nRi+wwhZuVSCphuU+CTvPitiIBi3LSoQmu+bpokGt5YRlKlPBvk/V4JX3tf7j\nlGGcnxFjveI7jdQY2PYXdq2a2ntDK7UFPdo/zzls1Xf5qa51ihCjUaxWptue\nZNRyHgwZn1vX4HqldXltZFbb+z/Qb0jDxkzz6JttqX18wMWATUmGaf/2ekd4\nZPr2wuMMxPwqEARDaK+30mae3zs+lEWJQSA9+96b/dYoqrFs0uQShfzPoEFH\nRZT/300dsMcKqZlv8mN8uma6kURYBHlNTQADuoGSpts1BtcvH6TCdL9V9Gmf\nRBQubNmF+ISTWotrBDEgqxvg8fuGKIMGI3v0z1FVLk8FcHbfwVnu2bsdS03o\nhiyWb4W7eW33UPl0+bzcGIUf8/R4pGDUr3Mr7nEWOBWKmU5VWfbp96UH/vvG\nM8MdMwr3muC2oPlxcvpMFrUc+GX/3McIbWMwuJc2oOIeNyavNfEOIWQvsaG8\nNobNkZFakcDf7CAAFRbrsKa+SUmwdig7dxv8XpEf8OZrJLoLpcEfXuKDplT/\nbTDYU2FD3ZObHZJw7PyaQeAN8zKEe0T4NLSIWyaNafmLQR3VLYwbH6zEd7Aj\noh9S\r\n=zAQg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/shape":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/density":"12.0.0-canary.88a33cd70.0","@material/checkbox":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/elevation":"12.0.0-canary.88a33cd70.0","@material/typography":"12.0.0-canary.88a33cd70.0","@material/touch-target":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.88a33cd70.0_1620691772989_0.2786943696317752","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/chips","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfbc26f55b732cccffa78c51f5ab2af9e6a27fb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.d20dc6dba.0.tgz","fileCount":160,"integrity":"sha512-WO8W2HbEx9sqIQqjvXJJL70OjOTDwilgl2qTeYJFv/NNFkNRBJBvlG8GQIKBZaiFzyAsNLatXiWaEkQABdNLpQ==","signatures":[{"sig":"MEUCIQCUQ3kzNF/H/diqH5yM2kXD8vAGE+5FbonCJtH4mw8n3AIgDdPEZG0Y4PE+jt7npsVNTmUfN/oXdSitGBKsizhejHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc8SCRA9TVsSAnZWagAAzP0P/Rrsduk1naeo8Ykwu3mv\nD8Zi8kc0IlkVgixEAmVv2btFtqBneyGRgXOkolo8wzt2eISl4YAJtFkX+sQo\nPfrcZ+m7WbvbOE3WH4hei512NWhvkil9MF0NpfVS1T1fhVvQ/TU3+BF/Yt9L\nH8CrbHM1Q2wnAn5j1k34bHkl0Oc31KSTeAsV4Ph+fbv6I0B/ZtXvnyyXjRLO\n9duNpH9eG5DEJy6z8j/zwcP8NdpOQlBwcVzfi4kPID4weaPKfjgTALiSACz/\nMx1Tm8cs9cLswG0OVptbxkpVwo5IgCgrQJ/e4xYzTHx8GM4dAWaY+uQNxXPg\noogIhLoI5ufNPAXvSFSERSaPenbhv5rd4wARoXRtb+huvZLoVdr6O2SR64iB\n+B9MzUiDG+UHA7XbCQX6lnrEslzo5M8fpsWe55SEayQKFnfk9BFvrSex0YEo\nhvIqjkLDZu1L4Ok8BFzV3HTJwoxhg/+ClT1eJomjYHvvljQ+g3KybBnQGC6X\n+7XeJb3GoPluzwRDyI57xoJvRfjEkhFfXZK0gW1H8uO76a2gPbNWFURoOfzP\njeyGHYjrRxSUcWVWYdpeni6w6iGZs7IZtwSWMEtNqpvp2Vi5A7fnh01T6tuP\n+ljPYzZxSVw+bZTw8LF+m+OP26WfqJ2UzruEPD3Og11nccQS/zUHZke84lXl\nqz1G\r\n=WKx1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/shape":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/density":"12.0.0-canary.d20dc6dba.0","@material/checkbox":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/elevation":"12.0.0-canary.d20dc6dba.0","@material/typography":"12.0.0-canary.d20dc6dba.0","@material/touch-target":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.d20dc6dba.0_1620692753555_0.06657369614470166","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/chips","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba63b070a6514bbeeee52745236019d394098496","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":160,"integrity":"sha512-Nwj1heeRxbxgFkIGoxVIn7+z6wiXiTqqJlFEWJSlv7DyICnpyB0ucE/2KAWtDlQ4MI+URrioSe6+ffrjdropWw==","signatures":[{"sig":"MEYCIQD2AJxJFYBlyL11BEYjgZeEdajXdAEyURe6QPovOZ03JQIhALiz31eUgcKkS7wcR2UjfB+8YF+011ICer/oO3hZudce","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdbgCRA9TVsSAnZWagAAVncP/0xDcOyFahnQ/e5BxGca\n3i+Po7P7t8HbHRvFYevIeOl2j8bibGWQyF7T+UEC71r6qocHLTcHXNBINghq\nOuIwCewyLpWkGarcX2kYfCOpZ+Y0RhZstCr6zypU5cE8Q9qqA8OQ060KYp5f\n7K5NOAMWtd1hbS5F/fhstVEIY+jl0i2suB3DbDQEtvC1mT6BNF4IDYicLRGP\n4enFRQtUjUDoeNOUGOQPWzz7Av6JfdsRv6CVGziXJnVIkEuEprbjTxEcINfs\nAXcPp6YXnVCrTlVmmEayC6t6axUjS3koprqFtiQ/RPqPWAVSyYzVyRN4FeLe\nAOTHsE6UI1kzm57X732bZarTfJ7HPhuPClJ2dNaZvxIBGOpN1QBavvrjZzDC\n1uClxuypOo8qt6DmKCExeIATSWpHyV9Cm1cO0BdEgDXEOehB2YG6AYGRWMBm\nufI7IagbeS0YZWXoAKOIA5SfjytfFkWxL/s7+0pn7XCQJZFXtCxK28ZZ+xw9\n+zvtnlq87Mg3L/bFNSOxQ3wVE9d3wWvqvsTngEztpfNHqTNY3M/yqEI9tPIN\n5ZbeyJKoQ4prlG7XZTZersDeQCpnVgKUeqnNAKAMevk0UjddAlUcPu+9SMFX\n3pM/4PPJBGev6kAKXj7ymJx/cmRkXSuBG2+TC1a30kRAv/wdXlcN/mkEXQYy\nJr0K\r\n=pfpb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/density":"12.0.0-canary.0ce2fdb02.0","@material/checkbox":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"12.0.0-canary.0ce2fdb02.0","@material/typography":"12.0.0-canary.0ce2fdb02.0","@material/touch-target":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.0ce2fdb02.0_1620694751936_0.5644910522912399","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/chips","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.cb162da37.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a84e16189b26a7533a37b544b80a17fcc04c0bfd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.cb162da37.0.tgz","fileCount":160,"integrity":"sha512-UW0EpUEjusfDPB5WqwAj24/BbTqhpa9MjT+2g2dzQczBfxN27XxN0Wfn6FxTFJEMPlJo8ehcnFoYmWXyQsGs3g==","signatures":[{"sig":"MEUCIQD7VSer2t/cj6hDz2ol6AF620t8nRQD+p0UhQJ8s77XEwIgd3/SIdocApxIHv6lSqjlON8dLbIMs5ICFNOlThiPh6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeTnCRA9TVsSAnZWagAARPsP/2RWtQUs4JZLp+TwHVpq\nby5aROoigRKjJOfS/LnXPBB4DS+x7p/uvGUDm+zNWRfmMW0qp+iWkgkKYKMm\neGYulDrr2lkdMlmdL1rO+KPPg/KxeUIvF76AGl4inTv9pnCX997kY6dDC60n\nCZzDn5V6LOilWrfRoCUALujbz6jpeR+D/UTCySV8BarxxvzpOt/C7GQPYK4k\nexjVRC0uelHuZFENWHGKhASP5xIt4z11yg5zfge21GcxKXUkG2U75iVFwYXf\ndA6RD/KIsQWWi+/QGFNNNJaqQg5b8e+7qCg+DhQtsIBV+0vgohARFweDZCzA\n7Q1zFl5jtloww012sM4Eoxn5SGesJ0Y6dYH3wpvl5vopyvYKTquB3lOrgWMH\n7ZelCjZuKdmKANFENbcU/hTdmKFG8JsOx0Fj6rYx7oWprQYJfEDw49uk30A0\naQQx/W8Anb3CoofheIqnxZt0dlIvF3XsyGiJHq3tZ7sqCHf56YNqO1j2HyIS\nlJb/d3L6sGyhtD/IVcf4nDzsqqEyZsjr6Pd2bP0Ts/vP/GnUbes34AVOsn+I\n4wiE0rFY09qGgzoCweb6E1G1+wAXb+teQ2rqJK/D5u3rFwT/F5nAwiOui3Cn\nSSVI4AhWowyDGQ+kw62GI0XFAwRkVPRudv7CVA40qzoZTp2sHjwGQYiqUgQC\n/vQS\r\n=SIO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/density":"12.0.0-canary.cb162da37.0","@material/checkbox":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/elevation":"12.0.0-canary.cb162da37.0","@material/typography":"12.0.0-canary.cb162da37.0","@material/touch-target":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.cb162da37.0_1620698342906_0.6272519674606587","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/chips","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b6d26bf2757f96819ca7e0db4ab3c91602524f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.573dc7ffd.0.tgz","fileCount":160,"integrity":"sha512-BwRTCASZD5XJzzrqlm1WX783+wIhnKBlJiHKtNwmKKjgz4X7T29iVD0Dwa6mT8VOKPJ4FlFg95IJQabGGC/Iuw==","signatures":[{"sig":"MEYCIQCsiyHkeaQiVg0DLj+kLdBDura1P65V3thlzykFLWLVvgIhAJSxXa4i8JMYXfPgp6TFeZiehzyMX6+qqj9XtrN+Mthf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmelTCRA9TVsSAnZWagAABKQP/j4t7REzSlYh1HsCD8bl\nQ2tJE3EPa2Itwj38ZlJsiyvFhaUz89gxx7lldwTi3S7HwKuRRVAWnAo+b3iY\n1PgBVRqetA545UEC1Zz9Vpkubg5oAoSr3xOjjGq+Mig+UxHObAqxNiOtc+1f\nAVWQrVVG2Kr/1yQ7AQffA2/mzCGmr0fxf1pyEf36bkbsdOpeeBhYtuU0wAB7\nZfHa+Y4BUx77gkPMV8zU/dHBIUJ1opkIIThOI8LUCOPREfJ6UVQxB8hsbvAt\nb71wesz4qlGI4HNtRKDFAR30TGN5YkGCwdVKOsF6tqnrmOGXF6zVUFu62Jfs\nGmKAWpMyKIbna6mghjaF7SHsY8Esews/YYSLskIHcKblJHzddE6rtV7ox4qp\n1OyRF5jq11Nt2D/n/vGu9OijeslX0wGybey6IkWDVMF44Wd+ZCbTd70BrtVZ\nEULz9s96lKZkh191egK4kWFPwffwAmFY4JUD6ijVTJsE1wmMxjShaso3fG08\n2/8iC6oqrYFLX5PO7Zc0/8Dd3tHkme5I9WmXJLK4bJwmeeO1KpQ7du+u9Aw6\nV75qIhmnt2S/AcEuHbvge6mD0hOdRkpAzlWKwqq5hNwnLDu84AaWa40AFwNw\n3/Xd5Pnm7orZlpe5pqMRGgSrecZbM/jRLtFGW7T6NEzYshw+Dx2NKqvboCV+\nJJmW\r\n=giJ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/density":"12.0.0-canary.573dc7ffd.0","@material/checkbox":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/elevation":"12.0.0-canary.573dc7ffd.0","@material/typography":"12.0.0-canary.573dc7ffd.0","@material/touch-target":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.573dc7ffd.0_1620699474674_0.36494619886562285","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/chips","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b140c1db242e1038d1916a9ecebec33a587f34e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":160,"integrity":"sha512-BCNLb3xyYZ6O/8cbFYHRMw+uz4uA2Rz0GuBHv8GIJvZNBSYvQg4cXQKGglLszeRk7eX4BCH6m0RAA80LREOHUg==","signatures":[{"sig":"MEYCIQDtpDnwwNsHAbuKWp74n29+UAxHURk4AVXjSCkGSVg2BwIhAJGVWEqhLaAx5+QRLyLDNju96oRDPyRSTmjTTtqfhNij","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxHcCRA9TVsSAnZWagAAsb4P/jH4g2bqdW2dlYtJkz1j\nsurmmqyyIBtRgKld1rfkdu2r61KlVpwvuoroDPSeu5vswn3IZauW/l9+/kGK\nLQCtX8RMv2I2EEtqk+aIiqgoPYZmhscM23cLHmfwzL24+nodUPB8brvGkOd3\neOeBjtTCOrUPorJTYMn7HOiO0dqDMLj/fvOW9VJyhj6uTZd/wMd6RFXFgfO1\nn1ndWEtB+oecJDAg3kjpo/YWU9gYfdzRTMDwbGPHoOhbTzLVJzdbaA5PJsLI\n8De38VGj6atl2AyDqRGndr0QBn+5B8OkL+fQTQC3mrrHxcv7bFqBwjfR5XMr\nldYqOxNx4KTTW+H1Z7bsBPL9H+DXXiQcjb0PDbuaatv7+hoIkc1QeaEZ6fsd\nTMT8GjcNYi+dL8ikKuqvy6UFbZh82/SJGrlnEE2Z7b70ZXC6TKWumKKn41Ix\nxopsFunNYbv5aG6hwC+dJrV4y0KGDX13UwgM1+wms7WcAX9HXu9CqRp0VxKd\nygTpXFz3j1KwnSkNGBa9M5JTacLS6wwSuZFtnat+aINLMoNOZD2HV7X3iJuE\nl9rsVfCfvPzxPCE3TaoQD/ubO6fUSDzpU4SermmHlv4JdbF9aXRhUsPu47PI\naU6RtNIejI32hoQF9/2MwQ1fNXXuercddM5ps97K8P4RbgJuc3XlapMrB00O\nwv7C\r\n=w94r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/density":"12.0.0-canary.d5f6ad3fe.0","@material/checkbox":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"12.0.0-canary.d5f6ad3fe.0","@material/typography":"12.0.0-canary.d5f6ad3fe.0","@material/touch-target":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.d5f6ad3fe.0_1620775387772_0.0430579650467513","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/chips","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d71feb1b68b6e771cd4e8a0b8f29a409bb01cd7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.25751d2ed.0.tgz","fileCount":160,"integrity":"sha512-1oZsGWjWW3tTd8J4z6hVXke59Sb4udlgf+myRtsYBtzKYGy+Em9/jooZShEtG1gHNRThKFBFOfrZEYCObIG1ZQ==","signatures":[{"sig":"MEUCIQD9x+MzfpHZBh4SARbducys8hWc82AUIQFTupuKIcmEcAIgWBzowbjjeDm1rsaP8WFXvK6ob2sOKoyAkrQqgcVa8CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnABICRA9TVsSAnZWagAA8BkQAIMQwV1Kr00OS/zGiqiy\nmjiL4gDxGRhw4Jq6o6eDUSi4REi0gBZ6PfA7f7xg+viToAYGu7iARyTfLGAL\nHbzOVYUCJoHau9c/doTnWSvvKQLJD4bzLH8Z+XdBs+pd/FVsDmoeGsW8EHTh\nmChszF16z0JyzTMt1PU/ADLYA+t+mM+/s0vpWco16LQ12Ny8nIG48dpfR4H0\ndSaWRK2/42NjbZGuSZ8apmULwRgC2mT68tYjkSbi2ak0PAmlk0CtCoAlS7r5\nPgZO1h+B4eBGwQ1Xlf1sXfaWz4FI/TnvlvIqbNVvCPea9RLpVjc63vgVv9b+\nhhFyF3au9tXwrauvGLK5tuR5c0t3OstBSaqnu113xXTX0JLG+vbwO6T3YvZG\nnU2GQCl2OAHPK6sda68Wp57rAP4UPvCDR/twair2SIQwoJfZb3LWVeVnVb63\nADws0C8bz3iJ8XyWhDyGJ72S1wnJ6vTihvZ6pWtSmLcqF6xtrqde4fClIUVd\ne4q9JcfW5Ja/afocFy+QTvxOjwbwLYVXedA9FkFUqb0dZoJSBbIfoC3RMkXa\nTBy5wWrDsz2GXpbOK2qY6c85T9KAsla3g8kgFWseLwXF3JeEKFXuzhF+NIzP\n9nYXnMlH6TSYujnERNGK+v7ssYHfbMy6dzQiNQ/Kvbn72w6UBINbkCAeCKnx\nCGZr\r\n=tUFW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/density":"12.0.0-canary.25751d2ed.0","@material/checkbox":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/elevation":"12.0.0-canary.25751d2ed.0","@material/typography":"12.0.0-canary.25751d2ed.0","@material/touch-target":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.25751d2ed.0_1620836424451_0.9863848763414262","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/chips","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"169e502901978ac4143b80e524a4f8d5ab370933","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.a23ecb682.0.tgz","fileCount":160,"integrity":"sha512-2NtL30rwBDbPwF8tS5xPWc91IH5k0pMPAUzxdsA32B6Qd5s/fkPIlf4rif7ciJUjN0RgmFRJCMgHe5tguvx87A==","signatures":[{"sig":"MEQCIB+FMtnFkDDBBol4jDZ5lU0m3GC/pOEvEsgzzMY9A62CAiBrvMKjKpTMnFQmAJs4xqnbOuDgN1g3xbnDt4kP1jDWLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB1WCRA9TVsSAnZWagAARsIP/25zwEOIt9lPqn7IAtz7\n7ASoyYgIJ8421z+YlXcF/CkFx9NBm8gtuU1cqJtCh95i/4FoiFuAP4sTl2GN\n6kbAbqIxW5+EtVQFfoZ6iLs0JNDWt5Bbs+DEQmOUjVXBRcQY47CdDpOBvDlu\nqJpEt909A/oNxqbQHF3mzGlBdjs0OMYOHt7glNsoXiRttFfDVAyMBWDCGSzJ\nV618c5pfNA5q0MnkN9HKo4ks0kIEHvx2IBXU1s6vnxaPQCOg2czcelaMcsL5\nN39AV9ycDaIi7Tkh4v15sbV1SgXhkCqpMWIOdZQ1WCZl6Cap7PT3g/+vLEz3\nueOnw4L7ZWGuLfWji7HdE/eGQy4uNaZCnkAocZX/nSTpZOw+IHwT85MmMGba\nZKTZ+FfHVUC679n/mHbjIu8gE1xleNGgr6n5UdaUKm0lsDq1f4atl41n5gKC\nB9WYcWfFFGuh1avbF+eD5lEsx4pBtLW0GGZ8fgLT9hNS9FajU72akdXUt4cl\nD0KcyeGpD8LYh6Ks8XeXwT8F4CG3nb4tumGp/h8VXbseMxYLq9s0seRYi2gt\ngxAxalDcqBoah4c2FOWrdYq2srSL8k15w6rj4cxURv+hdrgSLEScvTVPEayL\nuFUjCzY6QS9aLoNVkESsnFEAaqAmTbQx3DYaU/fKo/2OPTq0L264ktGClg85\nh0/T\r\n=RFXf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/shape":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/density":"12.0.0-canary.a23ecb682.0","@material/checkbox":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/elevation":"12.0.0-canary.a23ecb682.0","@material/typography":"12.0.0-canary.a23ecb682.0","@material/touch-target":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.a23ecb682.0_1620843861559_0.5973427526175901","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/chips","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.33a954852.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29046be4e2d97508fc8587b191ec0268d9d896a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.33a954852.0.tgz","fileCount":160,"integrity":"sha512-S/oIWv1yguF0kQXK2ULxpraFqbJqhm6vOg7ZdSW13/rMjRuB0FqQYEM68FjsErD90HTVV57zXJRKOSsAr59MGg==","signatures":[{"sig":"MEQCIC5IdX9PsssLpseyg8DmNmgdDzqYwwyahCFIiHPYe9d0AiB4aTNIdNGFLIe4Mh8G9MFTH48yck+4DPjg35wtM1d7kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUDiCRA9TVsSAnZWagAAOG8P/0J2DLp43d+n6bR7AjmV\nUsJAPYxcblNDgfCM+Wym2eqrSJhKwzsuhr+twxa/u4AHafyY0X1ZmRrgfnEP\nMWHFkGWJpzj+gO9kqf+Lk4VllK8gsOVS0fbvsCtTiBry5Q6xGJw1ZG2Ov+g8\n1BrlXdU1gaqg+mMUAbmGfEqOoCv3Vhmvq9JQkwuX7LuoLCvP+lhqgCEkOOAz\nMMpPs77L3y8dKS21B1zMwjVFc6Gv2YMeDXttGQjkREXWx33oCDSIxvQ37kNf\nnlpwczNYpaV4V4nllhAMTKS9+SCBi+KYSaAwAxYK3vuHDEruKMWE1sqoWDzM\n4u0XSllKCJ04relWVfl8G/DANx8drvzCk/ay6A8us89EOB8BSl2fYkFbZ5wC\npM+6blwV1QO27oesazneuhWe9SqF/bCN49fkyKxR0hbp9XbJEVfFQwWjpANH\nfhCuRK2MkHCJvDuEsUX6XYIO2eek5u7b2PZOkugDWAceVwtNWMg2CLC0N1I/\ntizq5zBT2+f5Kk8Q/Io2lbj6pfMlEUdVsofbpW771v61EEcN3mKTxUrQdGqI\nMQAEe4PX2XA6lJYZdr15JG/Ioc6r4eCZ3X1bMpRNcjw0XSYimOTisltSXOtl\nuEOyARtPqnJt5SyVP1yZi0PjqUYJ03VH2QwVSzm3rkc03mCze+Qpko6Scpy4\nM2Xq\r\n=Qho6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/density":"12.0.0-canary.33a954852.0","@material/checkbox":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/elevation":"12.0.0-canary.33a954852.0","@material/typography":"12.0.0-canary.33a954852.0","@material/touch-target":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.33a954852.0_1620918498323_0.7268866264917844","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/chips","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.a4484849b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c247e2539c2b4f14e6326675d388036852622b07","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.a4484849b.0.tgz","fileCount":160,"integrity":"sha512-TF+kjUoy7KhUE+O0CgYZ2wjBC7fnb7mOj8AmGc4nc0SSCjVzBmEscOEP13oBs5HYN5ikRHXZ7KmDt+MJxplnwA==","signatures":[{"sig":"MEYCIQC/5sPi3EOxmXxnUUF07XqZIENg/F34Fv8hYbGJjd6fzAIhAO4XPqxm6tep2bsV/oPnCsNuifytw8jKUxUgsoOrrIxr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUZZCRA9TVsSAnZWagAAaCAQAJDrist0jLu65F0pQ5SV\nrLILPmIdezctSN9bQaaYH3vQcY/jYPYZPzGVnwzyHPeGjTP8HAyBijGDQMz1\ndhiZ83n8EmdP9hoIOIQgDxil3L4mrPBBtA4rzihfNmtNvvAsXCKZZX3ROfcx\noQrAcwOalcp3231jUknxL9C8EnoPFpJJ49YBh+bsStgHQAIyA0JRgI6e0qsM\n84VdjrVTqNgoXKHHWzbDjDOruqx/yh/3cnaj2UWsDoE6TfQpVHz3Gmqk8hzR\ndruoUlUViU43mHEUNeekGhaGqF4mD7k+CY44egPTfYZwUKOnNGqpUUGvwOLK\nnnlH4Cy6hs0Fp9AQM+YUgYcCPSY6nBO2RvRhYvnfhUmeRm8TrnrXl3f0llEa\nNg29PR+09A+2wZWlovKbc146T/hyVSeQUh4u5VOrtGrwpSsgctsES05dPJW8\nsrYbaN+aPjaup5xQRlwzUel606dmbHRIr50VM090vAw3OJ/uJVbWfC9eJ5ZU\nIO7Hj9zCb6OxsVvP1ybvmSOGKz9gUmTY05wGA1EbgBe8n+9CjsiBDLPZVNvT\nc79Zua+gI1dT9eGU5gW+1iAYdFg/euLaA7+aT7sBYKG0nG9/2K6Lh2rvyiIV\n7V8Jqk/wXESBLabI+THswdpNvI5G2JDbVbdAE9vWVSbvXCkZBCIQAkbeXI5e\nRwb+\r\n=+JOL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/density":"12.0.0-canary.a4484849b.0","@material/checkbox":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/elevation":"12.0.0-canary.a4484849b.0","@material/typography":"12.0.0-canary.a4484849b.0","@material/touch-target":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.a4484849b.0_1620919897385_0.5914944792111394","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/chips","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3711363463105152bcc8f534c6efb633c53a207","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.b4c3f513e.0.tgz","fileCount":160,"integrity":"sha512-dbGibHl11OivcyxeXYeRLWEsHILj9oZTEXU0oMVKeVV2yYVUm8HAyXbUT60y/Bi9oIKK6DtclqTJTdNbX8jOaA==","signatures":[{"sig":"MEQCIB/q+q2KsevONt9SDTOQ3K4fHY+EqHp21V9/flspGzWiAiB68QquWJKnvDDadFd6DA6Tac1j9q0qXAzWSmRV/E/F2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU8jCRA9TVsSAnZWagAAn1cQAJq7/VkA/e5ed/zjGWe3\nHetCd066ndQ/9EjzcH5Sw3jGhC2EyOZ/OER+ylyVvWEMOczAYYskFoglHnll\nLcuS69PC4EQIYK2pb8ctWvWb1OdSHMpYlMiASZtauOOxxkjLmqbIe7ErLKRf\nIYJShJBZpPS4cQMCn23eTg+q/HAY90/tAzmoA0Hvfdc3CX77aENGygANdHqj\nX+DpN31ByB139HY2gJah+Lf7ThREpPqxHB/DWo/06NiJPv7f5PYn0ZOC3TWP\nWDWebdgarv4b7sIT+t09Mxirzzqxc/xcBA5xBqHLkwcZN7NZnRkM0ietr9LW\nHB+l0p2InKh8ZLq9bcM51cqO+9R8VrmYE4VGwXLzIA0Q1Nk1kqTGpktig4tp\n8cT5Q4aBuZaD4+s0s1ZErUfrLYoz+yquWzpepPdfFT1xg7B9Nc1jhBYd/ZTJ\noUq9s998E09BYEGIY1DOG/trSleVJViJxqRX/K1jmXOXqIV7s7toXy/EKATr\n16BASfmix42bAdSf8LpuvqAGIdojpYTv5kvblsdbxAypVkKX0Rvld18K/w0c\nMYVZ9Jw9J5kua5SdJvDukwxP5Dfz7AN8lN0zC33EIIc0QBgnJdNi3FVy91I4\nRR9zdh0l5IAQCiWNxUaK/aRNCZj7/KYMYZAmmD5EurgJ2pEfgzDeXx4I2Y+6\ni0fy\r\n=HRU9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/density":"12.0.0-canary.b4c3f513e.0","@material/checkbox":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/elevation":"12.0.0-canary.b4c3f513e.0","@material/typography":"12.0.0-canary.b4c3f513e.0","@material/touch-target":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.b4c3f513e.0_1620922146827_0.9234226068117319","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/chips","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0827604c15a6ef0d49ab7765b9e0c0a1679c160b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.1a8d06483.0.tgz","fileCount":160,"integrity":"sha512-STRAaLD5OFKOYehb97wWurNMuj9nDyt/kdFjOqeBZk2b7fXYaG7bV1hMydR+LO0W6znOhubX2Zt6inNZvI56XQ==","signatures":[{"sig":"MEUCIHEnnldSPP6eHRr6XC5pnvnV28sbHB2yToExcdX8rzRRAiEAns+rgsfxhM7PX7vgwZW8nD1c6Xh7rl7V9zVVCe+r7IQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVBZCRA9TVsSAnZWagAA3uoQAJJZX39QCYTKkI4B2I1D\nuto3iDhGe6RYkTlkcL5qfTkMU84Fiz7LyYwNvYoV1Ktj8h7VcSFlnoq6uEvE\nqnsvvDDHbIRFqc0YDU29zNlqIkiwqN2q80fQydeZlT76ncciD9MDVlKLVLfP\nMW0NMzt2+KkV+nMpLpOqY4FZ+VOjhDbJWmW/AF1vtw2bx7mENpCSwMd3iB4s\nrPVa5Uj9q+ZpzdpOQ+NxcLGdUMUq0aieRO7L2DK5MNfBH0wb3Rexco6NItEb\nePQwP3k3g1XmqzwbbyQeLm/zxixf3TtkCqN++firnICZ1+imP1XVLEdXnmZo\n67Rx9QZl20J5m4fzPZmCmpCuGLjzzxBP2Wp8meSGKcoi0D2mNifFiLLyvHWG\nSwIeU6qg4riXzkK1Z7RPdAfASa8ZnykKFZxKYRkfSYQDKQO8m0IhMH/h8Pwu\nLbXh8EMiGT9hsOgV5o2+fHHT4wQUxiqbMV57ywq1IFSFpvXEHevBTxvLHv6J\nlHIIhCGjBcjVqbc1vKMHjpK1fmlrkdEP9atWt7r9LW5pXQC36WUcpEQCJBB7\n3Nmco0kUT2z1oWwTuQ2HGLfwlPuTly/bxhfD4evTStKLPsTPNmlQoIZltedb\n/w+3GZSOwq9gVHtFVKvgd+N9TP9LeF6ouO0ULGDNIb0/pzrfZAAKzYVy37C2\niYfC\r\n=hDJ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/shape":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/density":"12.0.0-canary.1a8d06483.0","@material/checkbox":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/elevation":"12.0.0-canary.1a8d06483.0","@material/typography":"12.0.0-canary.1a8d06483.0","@material/touch-target":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.1a8d06483.0_1620922457034_0.003538010159124916","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/chips","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8e6081836.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"192416eecabbc6a066e949d486966eb06fd70c80","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8e6081836.0.tgz","fileCount":160,"integrity":"sha512-OvF/Ahgf65TigiRX88aOXhLK/+/Z+IIDOvjZmpNugbovep6P65Io/plqTUWOkaF3UhTgJsRS6hzvAFZxzsV/iw==","signatures":[{"sig":"MEYCIQCOnM9KbtVzbbn63WO9OqXBc6gi08GnASNoD82URuXKBQIhAIOQHe1ZiqlUXs+qNiz5pdhrfXiZPBBH8ciJQSGXrKth","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1576016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu57CRA9TVsSAnZWagAAnfkP/2pBHujqXHoC7U85bNMX\n1XuBGZe81+m9YkLbGJ2ATkLC5Qme0wtNN/R7cDtoBqWnPhazjjKIDPMbLis6\n+L2YjQYW1oTcN2C685xdqbaWN+02CSBim25pxpvFTjrA6efqcBxlQDNVMtSL\nXVL5zb/+kN9ChXB3JfZsw7EizEgXpgry1kwIQ/f7e08vVaxCfJupS5DUy+eX\npEsHfT6OvmOjYw9FD/4HfXTo+fLlPplStfSRIAMNpN+gJdJfJSni/fW749Cr\n4eB8Fj4TfNwjeD3Z+Tuf/i5ZCwAobZE3QzyhyB1RwCVhtTYO7RzFQQJnQvRb\nbWEL6ThDleVM3UE6SbJP9Ty0REQTvfx4EWY9T2mPO1fSQJrsiIKkT+/M5ylF\n/EkyNz+t5HjOEZGvLX9AGSv1iyWbV9qBKZZzCdsOFk4qFl0E2sxHzT8jnvhg\nwbHvgrMcuLO2zrnUhelvh/r0rk56+DlXSs3PunziV/2Q5vurFNmbp2KneCdn\nYqtRuXfYz3JTfBTi6QNbW0svcj6dryYcY6SOtyaCMrIRMusIrJQO5NVjqWpf\nC8m9fE/FJ2y77QHONX6rxzI1+cR3wCDGOuH3zoPXal68+QgNwVeRR50AqE+X\nF/UdDjjAHmLubsJ9UMWh3W28iBH/WrxhoRPMrXK6l2zR9yIbLZHtQ92u5FKR\nPWPH\r\n=hDKR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/density":"12.0.0-canary.8e6081836.0","@material/checkbox":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/elevation":"12.0.0-canary.8e6081836.0","@material/typography":"12.0.0-canary.8e6081836.0","@material/touch-target":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8e6081836.0_1621028474926_0.7866512930276166","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/chips","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968c1c27a3b3ba894fb07a2ff7229f5bc368ae93","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":160,"integrity":"sha512-UMESPHoQElipSSFSFlkhdrv2Kd7OOl/TeHJPwFd52Z5PLQBYOo/XeuajAO7lIyuLOKoiApc8o4AhpiJptvzorg==","signatures":[{"sig":"MEYCIQCSZN55pQGww2mun2OvlmdI3dh7kdnKLyIyRBFVfAiPCAIhANpKodMcyOHgfew2i9/rNp1ASaLiiaoyrvt7UHQm6gRr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1578450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvGUCRA9TVsSAnZWagAA5UsP/ivgJ0Ih1jZTbgRtWJu9\nvyxvGO7oJu/WnbhtbLKgPt6Fh5Q3ppazOX2OLPPdf8++RJIYv7BEtsvlTwrA\nlYH/Py0nLnVgEz/bpNJ+dB5ySSUkg7X5G2Gs19f7p2Y3miAgfofvjdFLLm9A\nG8s3hhKYZQ/fIZwzhBM/q53RnM5iiNza/z0WkrBUB9Le+goinO96IFA61GX5\npD++QborRvxftgbX0yC3SMDIVu+tJfE/Qbg5VPO/PPH+a2DyLBUmqT6LgPaA\nKVAwpTlmP+UI/MQDfFBGIAdNADlOKCrealZOX5hMZ09RDrRkseAN5yJrAUwK\nQvi2rY7dFtZA3N3jn1W2r29RmP4SSH6I+PufwvKRuyMSvBT1pxMdizrjgMi/\nALjBXqfwD+K6jA4NCpUSw4GRDLY8o4ha3mAJL89ws2jtRi8fM/jD5OD+xxYU\n6xa8aMC3gJN3zExVN6eh0l7Ie9bMA+xvjpwUWKlQyDUwiHKudis04OhQPWfr\nXISs5bUhFNCKmqK0f8r1gFu5BA4ZE5gAS4IlUhy/uEW3gUo+GKnEV84380sA\n78d8ABfTe8F4iJBZC8jPsJmTPOd+W+vdBVIA1pHLXR+SgaJuKtjallhSgvRV\n0YaEGfQ0l0LSq2B4fCMSVrNh/waL2FE1Ak/f1QuR+Vf/yIzOVhrTyRx/Uh76\nYZzA\r\n=ZpmD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/density":"12.0.0-canary.a2b0f4cee.0","@material/checkbox":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"12.0.0-canary.a2b0f4cee.0","@material/typography":"12.0.0-canary.a2b0f4cee.0","@material/touch-target":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.a2b0f4cee.0_1621029268293_0.27612645628547616","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/chips","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74433baeb4a50cfa9a4639ba17df0caf7292e7ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.e8e39ad19.0.tgz","fileCount":160,"integrity":"sha512-pn8F4sNmv2kJCbT0UD7qeYv+bh+bTsdoKhC7t0nqZkeyISLZfaCd2VsW/8/MLJfMbQ7BzqlXVkfjyef6SiuBiw==","signatures":[{"sig":"MEQCIA5dEv9W8F23Y3k+EnQR+KxtzNFDoH4KXoOaPzQIQFsYAiAJoBQEFQJRHDZrTVXlyn10MokIgDMJ7ARHbVOUVjMX6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1578450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/5CRA9TVsSAnZWagAA87IQAIbnET/vFkOSOrQpFisH\nGH7SU8cB/R56EcyRjBPe6q59Bc1qQaagIH9x5dYhbsL8OFoxpQ7U8Gvxr6vG\nMQkwSq/ntIsQD2lhudyQK0HG35FXxiYYvEoRFrPQmoi22L7YZELBw6QT3jwB\nJ39VVHI+sFJjakmK0J+iA5qTlX3kN+HtTS1weBggiirI0sTZsE699GwgQAwY\nswoL3vI37/CTXnNoIh802IfY1p58VyL8V8OQq2XFm8+1FTsPk5rh3niFbLEp\nWXda8ka6SeHsqD8dBNKxhfj48GTo3MZjkHX5N9bWJvOIiA10OSKrRwwl9pdb\nEao/cNcsYnIY4J+nGiaL5BtySxwXjN/MNmede+I1+8EB2f7Nlt6WWGGhFs9W\n6pDsQ8xpv/KURWYRROKrVrO0o5ezaVLvigS/AMJuQ4k/b1BlRGw3lMYMCnKv\n/xu0R04BgBV2/WrVT7LptlsmtM5vx4UV9YQ7Q21DVFRYCCa/U1s6AcsJPSem\nhScsnbZdzWG0VQjZwMYw7uTyQ3Vkb4Nw+fP/9XFpxlQTeHtXE3j6nqFEgXiB\nQFI3mFwQz3zaaaekuoDEIlp/ksu9/XnLugVXFARMsL/fObcE+vtGrl7c0C4J\ndjvD8lmCGevdwHA1FcNhSohXEimuFVmD8SMfjKaUbXe4sxYROf8Ba/s1G6PL\nI68P\r\n=NLyB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/density":"12.0.0-canary.e8e39ad19.0","@material/checkbox":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/elevation":"12.0.0-canary.e8e39ad19.0","@material/typography":"12.0.0-canary.e8e39ad19.0","@material/touch-target":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.e8e39ad19.0_1621368825350_0.739261392562206","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/chips","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"676e56b4bcfeef3147e91c050a548e99152b9a34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":160,"integrity":"sha512-T9m5vsIkcL4sUI0qoDrNEa0YuOfuZLX6paafh1FXHI6CAi8hhLL8pBxfIaZwMyQAnozaGdpLCQ45nGQZzJEi3g==","signatures":[{"sig":"MEUCIFggkfpzjSygwl6XzYofXOzigppZwHWwIJy74m+k1WbUAiEAg6dldAqRxnxk0UGMNk/mYSv0fQPlzNIPs1ko2t5mGmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1578450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS64CRA9TVsSAnZWagAA51AP/RPt7jRrKB9JVEOmfSMB\n13CSMOxpYBQgL8wnQfRBY+84FlU3mgZbNP4csbKLZy5MF6bGJnlUHA1ougES\n9YnmzyPUagdj7Qu+Irfck94V1g7Y/Fe8GczBMum48UJyTnaEuiacjbiTEl8n\nr3GgSewb2UMFPrFhNr0iQx6rBGzYZh/GexDBsr4WJa664bUh3zpDX9UnPRA5\n5P4Rv5eNB1cPGbj/2JHCASh/NDLAqCceyn3jiJWGDd0Ydn82jtDDggngkB1t\nxRBgyThWvMG5CHwOQZuI1thqNjbbcTSNCHiK17BORWHmVXZJkWVbj4l/SCPh\neQFr/yWN5pTqfmaAyfsu0BJmLUREkR2YDj5F06fET0dw34FaETerE9Kyz2C1\ngZmapDqLCHmrGcDS+WWActjqG33N8xsk+FfAP6u/Z6N5z57HliM4XtHWjn3N\nGPwVDbMJze3innfBU/r1InTITc4mDV0N8pbFnf5PskPm2Fp7syzmO3tsGv7M\nNzdSgQXHFUtIReyXmP6c4gmZBSSci/k74cApuAehPMMBX4V8QSdZdlu1gCug\nbIGqU3/tx0Wep7vJCJgDlly3t5Jvkstr4k+mx6ZblN9AH3XK74vJeV4Zx6sY\nDL4fkCXlni8NsDrmpuxj/7mk562Wgm6fkLRK1HfHuEsMff0CyyleeSfCvSMO\nzPKW\r\n=MrUl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/shape":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/density":"12.0.0-canary.4bb5eea2b.0","@material/checkbox":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"12.0.0-canary.4bb5eea2b.0","@material/typography":"12.0.0-canary.4bb5eea2b.0","@material/touch-target":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.4bb5eea2b.0_1621438135670_0.529790337637954","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/chips","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd21a6a662a42b3776bb31d6ac766031530fc2cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.ccce99cd6.0.tgz","fileCount":160,"integrity":"sha512-E8WBKCYQhGooJFJw8TjOllWiPNLhB3yVjzNiYMJfBP7g5dPIok0Qv5Xz2hfmK2FI7ubthyB5rRhuILU7ekmmSQ==","signatures":[{"sig":"MEUCIDjp4aEPuFABm/cf+uXyXG2v0vxFv5sjGQsD9ERvVHs0AiEAqQ7Ebm9mqNNEX0x1Q3knFhXNuQJKIzGpDb8Gk7V0aUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1578450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbP1CRA9TVsSAnZWagAA0uwP/1vDYT6KPf0qJwT+2cg1\n1REfbHiHy7nDJR3dr59NLLbG2EEf3Id59QadtzgZzpjynFj3LY5OczHIk4iK\nK3U4S1xFG4uvvg2WJHTBaSINeLd9pe8vU01CJQIlMzidAuSfkMdf6zZ7CkM7\n4K5hE8kmAgm8DTFRvDg/Fgk1+Ljz0+JJIkcFN01vkg0mjyura4gR5DUph9Wo\n8UpqzbfD2Vio3KFKsu+ZDWwaXKrgcPDG+vDxdwDbqqO8JMxqV9FUIKvFZJBR\n0u5Fl94kO/zB0glb+1NgC9cGmNviyvJeQdCqIYeNrt+zhIK0S/S0H3sYYDMK\nYnQJeiRAGbBQB6pDAxnY4FWyFbn7o0Blrzz4C3b/IrULWh5puBDVL/12deTL\nW+SnrKpKtiKgFQ7YGI0kOfAwqVZ1iba0CykQQ87d6xotOEz7bTIj1JMDyJER\nMBe0F8eNj4exHVaCYdYYQdMO3qmGdbU5tYyKRmWFr7XQAiPEfrukBD/1Mjpg\nWrl1mBUu6lXY65ILBcJ1OS6pBSYDGzsRrNRNfXHU420+MPsSYMfvYTqV4Hod\n1CfgyCQtp5Fgydwmm4VxSfLb7kM2sUxhKOkaP1o5jy38eT6H7HHxe1lVeGNI\nlzoZEusB+vTeFxPVs9WdghPh0A1gbDWWgUQ27AiVvXYp40ckQp1dkZim13hs\n3s5W\r\n=hqUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/density":"12.0.0-canary.ccce99cd6.0","@material/checkbox":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/elevation":"12.0.0-canary.ccce99cd6.0","@material/typography":"12.0.0-canary.ccce99cd6.0","@material/touch-target":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.ccce99cd6.0_1621472244531_0.41687371924298566","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/chips","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.14767a8db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"887f6d1f11991ed0e6e0a7644b83a2867a1f71f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.14767a8db.0.tgz","fileCount":160,"integrity":"sha512-U3Y5n1oS62Bub4DEgwa8TVgZ/9iTR5eratrRoshlk3TsV1aCeVY+g+/BiE30pBU0InSfI2+fJGltWJMBMWmwdg==","signatures":[{"sig":"MEYCIQDTFPbLlIX7IfQLLNdbk2R3RG52TAqVpq49MSjEQw3G6QIhAJ9nuR70Td9ZaU1v7wOVPmCoi/NLRKO/a5g1sgfVx/x9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1578504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsv3CRA9TVsSAnZWagAAP7wQAJH497Vi9DyBbQfc24Oc\ngAfr6IisL6Y4uKSA4aYJnF7er1GzNwqtt6d24WJMWV5qbYntsi9A7Pmip6uX\n412auAaMmzYGfeQuyTsQPswkqCzDvdQlMEgmTRFPmUQJ/6jBEbULz1kqVASc\nT+A1/ec5af1pWwW03JyH+P2IodIH/Eygv+aLjUtPFra/7BTzD4rdIrpLXaG5\n1fiQLMxQ0DjM04oT9/1qAdY+7SZGmqrpBCWop1L6kIEwBKBT3e4wmNFU608h\nGRvX+P6PWDUOU+bDOA5w7yE7qMmiehEODhGuVHpaESpqfgclEPbABUqjsJRr\nt4VIuZ8edFmdiRoqLhh2EfireRq3bLHWMiMN5HYnSMS4w5wv1CaT3R9GwReO\nOmPsGi0uU/Fy4x0iLRDHK/GIUWNB+Swvfkqvmlg3BQ2tLWTCyJ28X4YlLzpN\n73h43/VW2xPjnJMsbFvn759/04zuShTLzvVX59mXcvvazogyKOB/z8Qv28tQ\n/el4m5NIv9ijKIWOr/n7dld9q292CBAyAp22P2tnj54cq+ixDUYR+NSLoGBr\nK/FWmidlaB5+WCqjL9RM05xGTc6+mpWiWGsd6Z8wbZdKfcwcnwJneX1woFnp\nH8FXXLTwKzEnaRCPBUZQ3tYviigsPr4RWY4AhtiuSbbZ3HEWGLieFSUsoJb3\nWtkv\r\n=8cXD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/density":"12.0.0-canary.14767a8db.0","@material/checkbox":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/elevation":"12.0.0-canary.14767a8db.0","@material/typography":"12.0.0-canary.14767a8db.0","@material/touch-target":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.14767a8db.0_1621543927126_0.12280008409293441","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/chips","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f66000d8923e88ae2bf81d4d86dd4f7de1382319","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.22c6dcff9.0.tgz","fileCount":160,"integrity":"sha512-nOhHZjfvGq9wXYl1mXRJlV/JkePusTXSvRN/hD3HyT0miuXmvGzROrZ9asBKm58mB2IkaoLjQiadb2NBhP7cTA==","signatures":[{"sig":"MEUCIQD/Ggg4JfgkLdxON1egcyL4EJj/gfcEul2TV+4cYWFcFgIgU4OAcBe9mR1FCzxZbmQpjzuWgSFN3VWVbczEDZcetrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1578504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PxCRA9TVsSAnZWagAAeDwP/RQ4l06jaAeuvMu94Tjd\nCiAc/cnPPHZjAH/RZByeYI1bfmT68audqw7ycuz8Mnbz7PqULH5cXgRAR/cU\n1q6Q6gRrswgWpLKT/9f+tdbTHRCow9wOCcOOlRtKTmeMmTYOwVHS3xBYXGlG\nwpKIQLCFYFDroUj6rnzRAl+7L7XEnBt07G4TPY0PCRE4+1BjJOJtu+WNgSdB\nRpwHSUvw1jNotFwLWRFhT2gh9vzZnqYCWiOqZW7xn9ZUsEdPl2nl4fuLFMgc\n5Hy37ISfXmdN7zQBLmA47FFkxYxQpT39hJvOzxHinwtAWpllOvSBRU9pQOze\niwOY/Li73DOQteuxtc5let8GKiuUV96zOujJmSIflF/lC6VFXHA3w2js8P6T\nh0NbibOMlCYTg7WkdMqYPfjZcCm4ve5y0Z3kORS0QVfsYBqnjS04fAJUpchM\nUWbxQXIQ1aLivRMYLRLAUVgXYUtBWn+Y68sdMLL3PGBd4GVvV5O3qDDXwflc\nzUPmIma32HmzFsfQKrh9oD34ko1eInKgRd7ufGwm5SUzFrLF/cbhacoWvg1T\nJ2kc92DpBxh/zqMe6NR+a33pnvbhFNTURFz8jiFp+oo3uI+hUux/Qw5lLK3t\nzoO8bSLE5NM12CEsBt2GabcxTWJXReHE9zkzgBzzhI5nLJDBS9ctDCdY2JOP\n0rCL\r\n=Qsd4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/density":"12.0.0-canary.22c6dcff9.0","@material/checkbox":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/elevation":"12.0.0-canary.22c6dcff9.0","@material/typography":"12.0.0-canary.22c6dcff9.0","@material/touch-target":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.22c6dcff9.0_1621869553388_0.6620921122034038","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/chips","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.fadab3372.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c76052f623ebfb4758d7ef04e90a8e1cdc6ac3ba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.fadab3372.0.tgz","fileCount":160,"integrity":"sha512-bSTx06LfNsVK6ZkJeGlE+bZCOS8G0K6sHO2MCfOHR1qAn2QSss5T3IInFYboYZ2aYUpVWXzc1LWWZp//UTJZXQ==","signatures":[{"sig":"MEUCIG/vQzjZevq//HHHERj8ZqoO5rWa3CxlX+KPofxk6V62AiEAhB9z6xLGgx3v1WB8jP2m3z2YsKYUah2ZQ/1lXXaVDHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1578778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88CCRA9TVsSAnZWagAABWYQAJDhM4gaeFLl3YVXgaVa\nngt8HcqRd2CLIh8SDaop5FfWYI/nzKey07feDEkXKXsqCWgsHPTAKKzifreS\njsg2JSC9KtKju5FxcuQRdPLX1oPDo/3gbmymtAMP92MdgnHv7oMoZ8CJLfZ3\nazoqQ8se3Uo4tNTeJwY9DKmLogGoxENsGrHhZrH1GJ+hDLIRJTZV+sZnlx2p\nWnKt4VVNqNNn324ipyxdKtPK7l47TDxwt4C+/+ikwCQn+tzp9EL140+uDFS+\niG2jiR3fGdl83IUBAMok3Xz7c5MLsBlS5nCTHAutAxR8fEe2eUdcNsPS9eBV\nB/mYPbasUv6TZI31uxaG/1YUEV3aS+1lUzaddw320kUpPzkFWKUCwaNt3ZXU\ngKKbB9WGAckdgr9JBKoENiG9qX0VR7soWn2astkDnAgZe+atxBNNQdr+sXaC\nfNn2+snMdznQyqZlx7nfDuJuhwt/CdtzcVUILFSVVSsEsA49QseknQ6cHHgs\nkGePKped5pDG2aC52H6BWs4E4fdVEr8HwI46mbQupvq/PXABpr0dt3Q6n5k0\nQ9gm+CGJfD8ImhyDBHWk1HZ47u5ZEf8KfIXnMnw2ssW47rC1RyKRt/BhfE0n\nAE7KadDgcTMHm0m6vNYyO1MdG3wrYqmLwON9N8224/zrGQK5Up+I8x+5gm+z\nyb6D\r\n=KMGN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/shape":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/density":"12.0.0-canary.fadab3372.0","@material/checkbox":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/elevation":"12.0.0-canary.fadab3372.0","@material/typography":"12.0.0-canary.fadab3372.0","@material/touch-target":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.fadab3372.0_1621872385770_0.3698058229321928","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/chips","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbe16f8e23f05543816d84572b76cd7484025414","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.caa73aeee.0.tgz","fileCount":160,"integrity":"sha512-cXKl5HhK8d11S1at7w5VK6FkU6rzm95djTZ6mo+Us/C55/SlrvHpAtk8+VR/7QFB5wqPg+xUiLm9AuUOEYorHQ==","signatures":[{"sig":"MEUCIQDE+yx5kis5cX+mPN6v8OFgcbik7gHVR0TsxNpdrHcI2QIgMlKOX22cSyrLRreUUoZKQ7d+QunHiQ+pcPL0z4AdhAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1579348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZmCRA9TVsSAnZWagAAbJAP+wdFP0DNAeboGKkeumOP\nbJZ1RIBPEmYGd7cfUPuUwySgCGAlt/NHPfxkW9/tYUqxldoCelFca5mLL3Of\nciHz5oyA3dCgBolQISV9C+WkjfRAIG2QhS+Typ4Y9MUC41I1sKTV8GpVwFXL\nUyddTGze6BrLL86wkV7aWdljdAnG7D1PJmx4mcdLPD9eHVETBN9/8FfaRDDv\nBaEvn+0VLmm4hBC8w7jwJOxF36N6PmfQUQKiyaGav8V2wHbRrEXU2GWu1Zs5\nf/h5+adCQ9cdYrzJl4PG5kWfPMpcNifAEoi3JIBncl6ChGsE5MxkNlSWFsmg\njzN0Tv80YtYX8prGoqv02gqL+W4f4mueQxjKUYFCaNO7J+cbCjhHPxF472jc\nj78LO5ta5imgSxxqkg2XBTupmPL5Z/lCi7I5HnxeYF4PJWfVR8Trazo1OgM/\nBlWRBCvT8eqOrbWJtZk1XHGh0cmt/NlP63vVlk3o6DAhQMVHmJ35tHUThvds\nuuaK/ew+5SfWNolAB4wT6i3F5NF3+/mYPB0TzYt7FeY8+Cpg8NjxyRmWgqn5\n+lHosFudUfIruJ6qJoLr6H/AD2Qj3vHFauhbmf4nlPatWxTyiNtTsCyTvpnH\nS7g5fggZnc94xxsNNdCNPQmUljN5NsCCRlXs14e5eztcWLowOnMhq0OvkWmp\ns9a4\r\n=yaC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/density":"12.0.0-canary.caa73aeee.0","@material/checkbox":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/elevation":"12.0.0-canary.caa73aeee.0","@material/typography":"12.0.0-canary.caa73aeee.0","@material/touch-target":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.caa73aeee.0_1621952101974_0.8219072973673414","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/chips","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61defa02d6bd0127b1b644ea7ecc39d045d94fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":160,"integrity":"sha512-YZ049sSbTr6GRwntM+LvLkO5eUZEHD5RM4KtlOpIsL/A4k6s8J9x8S+koBN99rNVGbLagEVkvm6XVeA2HU33gQ==","signatures":[{"sig":"MEYCIQCwWIgkirOKDiy2zfpYIEMHPwPrpixP3lN3yHZ4RgZc1AIhAKoGrVKXwbdf9KeuCKTbbqCDSNpLa23pxiO5p65oqEN5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1579348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+xCRA9TVsSAnZWagAAGY8P/0mhBncyOc8KsIkZ/x9J\n8tp8hbbf/ySnCSIKNWdpCSnGO4f4Sw3Fpj0Og1eK2PWLm83GFfh0xiu9+73C\nk/5Rb/qJAJIG391E7xev/hDYbSY7quK4XXJgVCwCoobjOmlG+VvTFglK39e4\nZFsjYP1Pqv34jdn6qzAB6VduqDQTGvU2yMbgtxFvC4VBjyzSoOMtSKsi/q+5\n1ww1FJlduN+vVvMCYxtU/vvoZ5RHS17mVnDLE28hZmwpF0xXtHAD/grIJMSZ\n8a2HBbxS+j1slW0mq9I/4GDrN+tWSQl0AK9ENI21a/IXuSEGehA9M79IG8KP\n7DduE9bMSXFoe8461tQeqnTnUstchdAuN1dAr8vGJourDaGYlXDWEbj3wbA4\n3JBviXVOjErEdvc/Tb3s28nIOIcEAyYrKnDSMsQDG0WrSNaSZugqdIIm3Rm3\nB9NNAoQPNbY2d1kgnraHeZseYvOQgk0GvS3csgj9BaPmHN4MTz2sfRs1VJmU\n8e4dozX7BiO6egeMsSPqPRXd7xJZqdlqcn2wwmsAVN7M0qFOjT/KBtdT8yyG\nWlghP4bUnxZB43YtBCIhRrQjTGAx1uP01tZl7uz1p2+SyBuWgAZP3pTTTSP6\n2mWLCDQA2Bv9wJme28fb+LLC2bUAqiuEu8arfBQTI5ib4VLC+ncF9kMjv9Fm\nXsqh\r\n=J/j7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/shape":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/density":"12.0.0-canary.ec31ae1ed.0","@material/checkbox":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"12.0.0-canary.ec31ae1ed.0","@material/typography":"12.0.0-canary.ec31ae1ed.0","@material/touch-target":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.ec31ae1ed.0_1621974960675_0.8441205692715763","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/chips","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8530d3514.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7a2295b538dd5ebabba619946fd7ac81fc673a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8530d3514.0.tgz","fileCount":160,"integrity":"sha512-JpxtRiBxOKJxqKqEEogp06U98SNrQoFcYw3DP4BRM4s2I+cSIjAejyWDexyWbF9sN8U3RjrDRdEU5WfKf6aXgA==","signatures":[{"sig":"MEQCIQD1WpSncqAaXx2SLDqsiOPIHSuLUllMWtyBy3Ava/7Y8AIfdDEJh7j8Bt0KtXOXI9mSkXcE8/eyt3psdnfJwSNsOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1580568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8NKCRA9TVsSAnZWagAADp0QAJUqsRb5CaSxjy3IUaFD\nZNL+7XgsObaWAnS5iF7KBW/GjRId/v7z8y5AynA0AN1xvxrNyf7qoUXJ1Wt3\nAHECsEAD4TEHGitGQZLO/EILgALgARz42bkNLcVDaVOhHHDtn0r6xar/OicU\ntxKWE2Lb5gmcJ82BWCQvHE4tGeeaZJUvHYDQzEtL5hr+dPo4ZdlsI/yVtdXv\nAuzCgvS8IunRhwxM2I4ZnhlhA0qOOFzV7WSt3Q+8xdiB+OUieonllfjl0hjU\nbIcxW5V9+OuaWGN/n+1b2WuHm90vTDlghy9Dm3/GjmTqYxR0gHJn9q5pKM7j\nbe9TVYN60JIqZ8rYv3DPV9NSAJBfOOshzm0yDUPVPN1VyxvaB/bK98u3enO6\n8t1uKFWMGmymc4taInvtHyzy5xPty3JGtfrXFNM0qn+FJftQDPctxLDclMJf\ncIj+OLHQDnT25lXnagFoIqavzdz9e26Q/h0tCfbZokW9qQHo962cQjjCQHSD\nBX76D4TpWDg5FyrgdhjIz9P6x6YLULIpbTuVNGZacymFPF+KrFVF2Bomp01s\nbUZJVcZF1GIjKWdG3Sh/ayojAfAodKyiI3aYpNwRX+960OJHhD6cX4/K/pDC\neN0bBIe0gl8n1gfxOTKqdxS80IN9d9HByz2FH9vUWxrX9kZT70JVG5X9nDtX\nNuyv\r\n=5UVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/shape":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/density":"12.0.0-canary.8530d3514.0","@material/checkbox":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/elevation":"12.0.0-canary.8530d3514.0","@material/typography":"12.0.0-canary.8530d3514.0","@material/touch-target":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8530d3514.0_1622131529976_0.8597883730129248","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/chips","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d91ac1e7d20a595341ba0034cd4b62faaa146cbb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.00b5899dc.0.tgz","fileCount":160,"integrity":"sha512-T5liAt/+fD+aIpHLsb7chT96K00Txq2LmLwFZgIwZ9EJDjAISpgkjox4HYT+fN623KFKejGHQ8s4fyU1n8FxWw==","signatures":[{"sig":"MEYCIQD6DystvsX7cPX39uCOXECzOSt4DthTa5qdDH6i3udTWgIhAO4NW/SDbaNZtueTh58aJmoJvlJ2Fd/PQ41PECRlUs1I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1580568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriyCRA9TVsSAnZWagAAdcIP/R/C6Jhiks1U/j3hzMxf\nby3QmKOckO7mJdeO9h9LGHm6f1sbvTbJkzGvf/yUa5mdWlPs91WzrbrYjvV2\nV9a5PYp3cicE7AD/H9BXsyd8QVE6GXy4XvPtiDgVAM6VWx4QLQAL9Xf2D8fr\nxfZKlkXblwZTaFnYu+t3t18xolhJlrfu0oPo8B2lO21bicAvEeVaOnGuOXZs\nvHQRxP856wk4vpyvnfKy5Qtj7/ic260wv91hr85Lml4Qie+9RuvhtYglqv/T\nunTgcdUXGIGnR+WJdP61BV8mpvAkFCc3uP625hSVQ9mcB8Zt625qQLp7sl75\nELYGFH87bNSqM+ve5aqHcc53I60e9805TadcKpeKXKSGDCXFb+ZlNB6vLZz/\ny/IxSbSaE200Hf6C2XiCuTzoZBkceI6020b2Xygk0teO0v14N6gdRvDgXvVX\n3Xq6MsCUd+Wd0S38SqLDs991jG/3It6VyVwc3Ef7mOCNSnJYDpiprLHkCK+t\njJzUkAelY4F532AfJ2Fo49x0rgpuh+CSnUbDRaubyqV0nHer5GlRplfR+2GE\nb47nH4KwXFKaVOTNt5Rj7p5cKeWUVCQyALSyzjnqKJmKJGFCiqyYsUM7aWM0\nUQDOqfFB1yDoxtd4xLT09DOfx3/hM4k2mADeAuwYs5stm9Z34sVPT/qCB2QW\nVy1q\r\n=vahW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/shape":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/density":"12.0.0-canary.00b5899dc.0","@material/checkbox":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/elevation":"12.0.0-canary.00b5899dc.0","@material/typography":"12.0.0-canary.00b5899dc.0","@material/touch-target":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.00b5899dc.0_1622587569846_0.04200446765106802","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/chips","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b43950d57e9a2a7e4ea3a993c15287b366cc5f6f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.f1525ea3e.0.tgz","fileCount":160,"integrity":"sha512-tzTh4GRVZhDzhCGvGxgTdTseur0FkGEjn8KUTuE1cma/8J5VYb5GDq1rPxAZa3h1Xl8JzlIbEoObL68CLzb+YA==","signatures":[{"sig":"MEYCIQD6yThmQOZ2E6I4QhSnyrIQ4MXFdOdX0CacUBFWywxBywIhAIyHMozCvM27F3y4P7zfDsh7I/x+lmBvvMFcwVDoPrwd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1580568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN81CRA9TVsSAnZWagAASCoQAIYpOpIQcXc/yf02vTxL\nSndrIR0bS6M7LiwWRfJxo3AXpRB5KDRDu5Am/pIuWYAniy4myYr3CPfGUZDz\nP72mUXn2LgnmDKYWIy1DH7oKN2kUe5TaTfWMuulprpuFOFFtdIlq6bPWgxfx\nyZHVqt+7IgpDeHvemsBXzgryEMVmA61ldkTcoOwMDqfGhRb50E7+IMAW8r2x\n7fU/kiLs7KNNccR34luqBZcYnqYXBK755ovwmgaY3z/9Atrt3tn30ekmPvHl\nLQCLiTnFPcLDJ25vTbmqbU94hputjaL8HJsRpfl7lAbQvY/OROElbWwBKrrU\nP6D2F5WjZs57+D3gscmgypDg1gwRwHzI5LIsPhH/H8RYStEchvdORD8iGH/H\nTYuBwqhdGmJgb/SZnDe7IhKd25TKaio4FeHtN8WogZ3aNXeH/PNUC0tmeX/p\np//4XRMu8IRl+ayl2QkoHZzQpSPHVvbu3mIEt+iGa4JpQ9Nja7SaUlne0PAU\nULmtjSkXLv2ibg6NPbKL2u7Tc1V32y/34p9JO8IjC6MXJIQN/x4qwTrauFZi\n21T0JLh2+M/TU6qNPW8Vg0V/Kj5r09RQMxkVPZLdOON8Ou4YDTgEB5OV2asL\nEWQHWv33xpWAJdXDudlZU24chzlTBQYkPO0AVxCNsj0O6nBy7GhoNTmJAD+9\n2s6l\r\n=UtF9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/density":"12.0.0-canary.f1525ea3e.0","@material/checkbox":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/elevation":"12.0.0-canary.f1525ea3e.0","@material/typography":"12.0.0-canary.f1525ea3e.0","@material/touch-target":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.f1525ea3e.0_1622728501187_0.294133544892919","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/chips","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.464a00286.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fae47c74d63d152a99ef7fb793e3ecfeaf59cf0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.464a00286.0.tgz","fileCount":160,"integrity":"sha512-lS2OMXgXmbJHiiOB5WYIfwdwKy2UPCYwTkoeSoQC0nAaJpXbmRTjRZXxyQT5PSOAMOoa9sPtJ004ZdA7LhuQmg==","signatures":[{"sig":"MEYCIQDPbnWgL9Pqzv7K2rkdTl5Sl6UrEiE4+KiiP7QRTY9aYwIhANPm4XIck+WBgzmq8DU2oHaLLaYb/eH5lOHMWL56JM0n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1580704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOtXCRA9TVsSAnZWagAAHMkQAJ1clti7rkbEN8vukzDm\nHb1lnuBVoaOpdh980QGNtW6uZ23TX02l0Z8WASRGAkU50Q7l+gJC8koOg9tE\n6hJDPaUIuC+spokRwUOqB/SwokiqCfKzCr0JhDpwjKsAcNldmp3hpa7yAeF2\npsc3kk3UzCWORKS4vHt1pwKM1ug5vbBTXCsRlLjOqriYx9WZGSE5PvnHwkbt\nMROuaQDLpAcydp9WY9ZlIS8dZTIqfsAcH2FbqvXulcLAFk6IFFah/G5+u+nr\n7FOls270Em6zsrqfhrqTQrV509IsBKMxtXIkcNeFAPYLOK57qvb5wW0SK7oa\nKhWlQkX1WfFNp8r4luuVPR0Rg4oBteC46MxSrmpbPyf55WBOuimPnVyZ0rpV\nCb6vGEb7mAIMg/3NaXxi0ZklwzB3KaH7g9NFAgGMeBgT015CYlKwwBTU4Sqo\ngUc97zNYDHETOCiLhIQQYLv4TtZj0D2GWhiaoT66T2Yq0qrs37l3ihANF46e\nJKUUr7MQJRp+sokLZxUPdS2TsEMJe5oFdBrgLmIbZjuFTKUNsmDuDpLKENLK\nbLZ03GYvD8Ns4vGG4f7gNiYRNpvguZTagWILffHBJs6hAAib9958X4j/rGh5\ntBcwN6EFcuR/2CqrEOFncn1ImGkEGOuhpBtDb7W+NqljaiXPo5B8YJeykenl\ntzBu\r\n=uf2Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/density":"12.0.0-canary.464a00286.0","@material/checkbox":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/elevation":"12.0.0-canary.464a00286.0","@material/typography":"12.0.0-canary.464a00286.0","@material/touch-target":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.464a00286.0_1622731607223_0.9063193060414132","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/chips","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.474de7878.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76bc890e6fad91c9da6f0e1d53cad3c784109eee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.474de7878.0.tgz","fileCount":160,"integrity":"sha512-kUhiDDpvr6rjYJn/bPHVa+gGhNECJKGAKcotfsI1zTPZ1g2Un/w5AEfX4CkXeeKIAqm4f4j4cvshbdlVQ9ZMWA==","signatures":[{"sig":"MEQCIC4EapdOXcCncViSWkRqtyBO7g20hbvU4ycxbkLq5tDFAiASD8TMG5/ueTvguIBaXU9QvC3yCOLpJzBfr4WJ8fdR3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1580704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPHoCRA9TVsSAnZWagAARw4QAISqxJZUuF98XMAJRBPG\nzg3HW9DMgzkA6UMMk4rzWgaSxA/cIEjng+6606HvgHy0yAOFJoJl+niopH1Q\nBAt7wQSGFcw3q1oFk5Mi3GCXLG54Ez4uIrZxDdsNIOK+JlGLEYdRipOJYaIR\npUW0Huwkkq0fVm4tMHiyq86FiF93d45PICISeRCfwCVJC6HbDtImRCpf5fJK\n44VYKsrtZU5+ypO7gUHT+itnJIPCV7VXBA2b+y32KnSv17/oy/BFA6ll/HnA\nF4pzMJGE7aK/JFDckDLNUOu8GXmRgbS+ObOhy7eXa5rjhA3uwEpigHl1rk5N\nqsX7oMFbOt1met1rC7UhXb87+xDLtGMe5mrheXbC0c4jdNU84w+1ISWwp9Jm\nlftiDIDDNC+tw+iKFbKLGBIJK7pL6fJmxKuz72gUg5Hg38cG6XPfY5cZu7hA\nCIFS1hcV6FO5Iouncj3wC2lkcKf15JtiodF1S5Hv+2IZ+0BykMw32yOVMu4s\nzekpND6H7T5fqNUc928nksKYGCT0jEQprcNoQCvTJQkT4wEL0KrJe6asmYKw\na0IXjmXG1E9/ZOEqcjgowV8bF66MESYgHs5WW0kOKh8v6Vojy/ODpdg8/1uZ\nk7pSb93jcWbtEmxVUR9Kvmg2dHGpbuAZhYanBYok1s5WaZS2w/4ijMsR5hTP\nLH5o\r\n=tgj6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/shape":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/density":"12.0.0-canary.474de7878.0","@material/checkbox":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/elevation":"12.0.0-canary.474de7878.0","@material/typography":"12.0.0-canary.474de7878.0","@material/touch-target":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.474de7878.0_1622733288266_0.37369689782828863","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/chips","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dda7506e79fa54e3a6fc25a7d948c5655552244","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.b87ebf74d.0.tgz","fileCount":160,"integrity":"sha512-u6Wcmu+orbIqCo4yV+GvfjMTB4nXRGU9Kb08nVwxPURGyOaF6BKjQwW8BMjUQ3MVcSBWRZdbS2RlFwDfMvgGZw==","signatures":[{"sig":"MEQCIFIIsTdNDQ+rLQmwrUWQuZinhV1ePjUCnJNJ41/Mm9uiAiBWbLUuS9hjcdyW1+zhcvbkE1NVhULtksETlFa/fZ37cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1580704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWNCRA9TVsSAnZWagAAxNAP/3zlHUSAdpvHpRXjaPZb\nR9InLWC8NrnNJctoO4cRYs9oIYaVxK9zM574rNmVvmqcTUCwmokTxS5wqPg5\nygnm4+eLi/yvHk3ZZucL0JbPUrS7msrhl9RnfuG0kM6X4gwqQ34KLzVBZpiz\n7PdUeyPzFTAN/MYjHCwrbCxwm8etQPiwBwxcIVPiPQSzvWPTuqzviIOKRmgQ\nQzPjYTohFjPwYpRXF8KbEARPP6Yurk8nkPFLtQ4TPIdKAT/7R1PDTiqtRdl5\n/Jrg2np9Bpe9/+/2SIv3ezNNMF4Cq2419OZBH4oeWtaNgisHyJy75hRIawMt\nmWUfbHk1pTfUAZHloBFs8VrIDnI4sCfgDAXPkpmQDZItwIKgA0JSGhJnQsSz\nuK6eWvbLptqQNnqye19lwbhs4PeYBQxBPKK+uMLqrgNJlN4zQyPmdXT7zy09\nOOJFU5h0a/ab7SPSvX0bHpyfn1OkqEgXu+qtoXpnN5kgZAM/s3gR/0kOgewl\n6n3DaEzdeOVSsQG4hTns006z3Qs1xY77iHPK/2/5ma/MSULDdQiWqeTbCXzP\nqx8t5FP0y4x9ZtfrpqbDA5xKjMaHz41zO4Hb40RHUSs4pDz+HKqwHcS/NhSR\njssTrOEqe8MJGenhWUaDxhrt0MiYW7p6IGpWa5ExoU+4fXck0+b+DBS/sdZ9\nwSwL\r\n=QxgL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/density":"12.0.0-canary.b87ebf74d.0","@material/checkbox":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/elevation":"12.0.0-canary.b87ebf74d.0","@material/typography":"12.0.0-canary.b87ebf74d.0","@material/touch-target":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.b87ebf74d.0_1622742412938_0.5999963450647716","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/chips","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"836e0f6cbce7d1f75c0e789c6392788213161856","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.2daa49b35.0.tgz","fileCount":160,"integrity":"sha512-o8kJe+9ikPd5gEjpqbrNzeW9cXYU7WV0Wj58Nguemg+gpx04eAi0M5zX8mAsFPj+h3g0qieQlii0moe8gFtpZQ==","signatures":[{"sig":"MEQCIDqb7Fmv341i6aTXuZJmemOB7h3mCY7DAoS7nDc70TRHAiAaWHt7p/u8+tXLvi7MJzXyOJebrURMFil3m0SZmZhMWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFyCRA9TVsSAnZWagAAlycP/AwdA6pP+JuZlsf9aUVM\ntbMZBbC17kMQoaJ1XiRbO/wd8vrVp7uJcJCCnAiXxb9thasosdcTGd0CDZTV\n61DlxreODV2jV87dKM21cp6ExSBKHsH3s60oNQEG6hfYs2qxw5T1dnxZ2EXd\nr/+kXsx7TFyIlDpD2Pf5nWqQKSOsW3bc1VxYOBcVlyAWpCvs2+fsfk7jWs/6\nzdSGp20dkMiQEs2jb+f0ijgd9fRP0xTqYj72SiWrwJ5bLYL/3chOe+4A0F0M\n4/HujASTw8nb+r/SdDjc88EVxrb77o5y6zsIvC+ur4U1O/ZR1WqW6r3jXi3i\n90vNRL2XBvB1wzQKaZcNpjXCIUYRbdPtr82zrtG3oGSgKSccGDKVGD9ovaY6\nU7f01dgBamXLfh/5R0Kr5g4RzV8/zCayUsZSvOyrXstfnqN7mjHmuKf3qmNL\nmAG1e9UiGFfFeBGLBUqdIVOOARIKHFsX9ubQZPk6UlsvkghAqq7JfdcII1+B\nVV3qxhASGlmPERKQYce+BoXxADR0ioMnihCj0xQlneHBko0wZ0EgyLtXRvZ9\nJdjYYyFpOMGOPb9lc5uSK7OJ53W0gX7cnxbApLAc9kC5+XXsq+3aFpjbR+Uk\nIVJOXFB6kcXW7WQ1e+Z5HFu5A9/qB3ywaOtRN/ZeF+8FLhhxA24Jreds7xiB\nqNfp\r\n=RJaL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/density":"12.0.0-canary.2daa49b35.0","@material/checkbox":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/elevation":"12.0.0-canary.2daa49b35.0","@material/typography":"12.0.0-canary.2daa49b35.0","@material/touch-target":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.2daa49b35.0_1622823282479_0.6460253887133869","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/chips","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.08db3d737.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c787b7583b3f066afd674d1eedd140c3f1f44c77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.08db3d737.0.tgz","fileCount":160,"integrity":"sha512-pMYJR51n8Ty0iz/pbZl7x95Fa/SMFSSEzGllVvlBf0I5Pwz6puIK7zOyqoPIH5IuHvp6UpUaDEH9/hBnAf4K4g==","signatures":[{"sig":"MEUCIB3cvWDAkvpln/GfayDA/7i0StnUa3PlgrSPopQL6c2TAiEAhGBAJpJy0kHhRCWUwRvfkyBNYIiR76qhJGsTU82ul7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoIwCRA9TVsSAnZWagAAiUMP/j/kCMmjpUCYZxAkGhRb\nN1WEY3w13bB7PCa0gOlfTUfnqEAOy1rhnUFSVeuvI+PDNwogVf1Onki8OwTA\nTsmqxtkkQWtIKqF5xArZmlAUXkXrz/hYl/daYi7apZrH9Jk04y6QTK8P1dYb\ns2Pq0T+vXFvrTl9VKb7tcxCFBzjUvnDlvDNbITLNcNM2kiu+wscGD4PSlm7i\nXK9w6dj8k8iSm3jTdgsSesTfnVn+ygwWMfYnG1cVxjyRqjpAnZhM+mu8noEa\nRD+ewTsWkv1opqpU9kDWa2m8F4wbkFKPzLnpGUmZFfSHfqMfBAm3GAIzgfZS\nkhiUyPjai3B/EzgnC7U0r0ZwCnCSGQNPNYqPiDbMLqJ41iA3SDC3SFDHQX5K\nfWiTCedHCZ2oxkZjk0ty1F6cMXQ4QQcpuI/emTfl48hHRbdzaqe3hQFvltMt\nrIdFCLxdBVlZhERYJwH/XWvCRjdrqCFEZvQCLDqeTqDoxYMuZe0vE7nOJExl\nCjm6/Zzz35HxK2Of1haXRIL/Gam1AdEpoKoCQGRWzn/yM+xvnQmr7eZTXZ9v\nT+BrGuqgZaOQPhnvNfaY2VbtsQlevf0Cn0VVPqxDs01LPQ6L91QVIDfEvP5J\nWu3QwlUPf8HgFpYbxfx9sO9L8tEm3U0BPnEfJiPViLO5/yamR6DE29sq8l9p\nF3pL\r\n=/Kdc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/density":"12.0.0-canary.08db3d737.0","@material/checkbox":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/elevation":"12.0.0-canary.08db3d737.0","@material/typography":"12.0.0-canary.08db3d737.0","@material/touch-target":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.08db3d737.0_1622835760635_0.8140968105842474","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/chips","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.5823407a7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e4fe46c48e73621769ae9b4d4ba627237ec69db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.5823407a7.0.tgz","fileCount":160,"integrity":"sha512-NzbN0h+FRpQ/EmsjKcqOuRe9dkWh9V1Xe9PzPCyLwUxLMiHMfCdxJ6Jglbbj/pEO3nhjikQg1zUoibxjT81hIw==","signatures":[{"sig":"MEQCIDMzsG/b+t0VeNVTrBK87xQEh50c6RKJEzaxUukWiIQJAiA8AzxcvX+4b372QIqias5TPJ2kp9as6a1fDlpEgmTYIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr56CRA9TVsSAnZWagAAYUwP+wX3hlah/Ry7FS5W3XBq\n5p1hQux5Ttz74qfn1JRr60RpmzC0GrrXvPwOsNDI+m50HXqIekjUu75ihsc4\nF5mxOFRjbh8dYbXNR2O3qOq5cHsbMXoQc7yg++YX7q63b04x01ix1RDBodEZ\nAsxVkzsaHvQRhMSw/fEEUrf+AS1SaiNjS4bccu9IMERYS1I1x+bpy9XgkTIB\nN13qEDlgvtWNr4jFRQFYW1B1MOa8I8Xh4+30SqnEFQQLJnhCtOq6dVSMDxG+\nse5P8XlB8SEARb3WQGuepJA3TiGgWnyautKSprGVYFNV8jfpXmQTjFHg7t91\nwsQEiG8qAj8lI2xyNY4pTBS+t2ZH2Qt22pJuMkrpgd/PSAdVEW/c2XhphTl2\npqjUCIn3HOOfoPKxc4p7gowf/BoLQ7ZzwlKmh9Os9T3R0/HMUTRSLKt0yCWn\n1hrgLtShsHbe1o67iS91LWFRKG1x9rDefgyIqmULx3aLdLczG5q3HuMzBVAb\n7j3cLIzWn+H7uRsvlWYEDXYfA0+tTqKmtoxc9DLCbXz+2RdCCiFL7DrFOgeF\nHfyJdO4kac0N0G0oZQkMlDoAAOxK6KHip5omhzS5Vm+z/I8JbvaUwSWBEFeS\nwECVjVMuDsl2ICYQAlhgjX7H407M/z63txR2Aoq9D+ICgcalgmco5YjoysOa\nt1aP\r\n=XnXh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/density":"12.0.0-canary.5823407a7.0","@material/checkbox":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/elevation":"12.0.0-canary.5823407a7.0","@material/typography":"12.0.0-canary.5823407a7.0","@material/touch-target":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.5823407a7.0_1623113338535_0.4662754695524125","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/chips","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95ed0964fa54fea2bc9c32e7f1268bbd2739b3af","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.23b0c5e22.0.tgz","fileCount":160,"integrity":"sha512-ouMemIuS4tiXGjynH/SjwsD0h4pCsE3DRBMBOFyDbCNP7j8pipIUAfadVOa9KJoqj6SVumxOzp2lDv5z1is7uw==","signatures":[{"sig":"MEQCIHvASp9wC631vCBFWgXiDPmmJS99HAQUMWMMcDCALTugAiBIyYk2kOB43ozsj3F4sc8d+kIw4MzCxJs2iB6Ks4fkqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5lYCRA9TVsSAnZWagAAxEMQAJZ2R3rJCnb3Y9UUcCJY\ncRh+/I1pOUHCOmYwx/dS08uekYdKxEMFwx3Tx43uNbogT5N1i01XK+ODBACK\nd4NLLEkCBWJcmAfHJFBgB0MxjGk8MWwimB8Rxq8FMq9uK+IiRhocuZK9fjIe\nLwZNnU9kJHj9eXwxjBcLR8BMUbxEMdufbgZssjrDX4f6++xKDjpzRi7NpJ/s\n5hP/3YN2usYhop459hnEi7A4F5Rgl8x3sY/TyXPUtFvJKJ1g4G3Dagw614xu\nX03hXt7fi8FBNXACkfWkr8/bVyM/7kks3++7zBrf45f+Vm4B3cNXCbMawxk4\nW4IvUFSUco78Xai8ziAMckfRiYJfZ/viSl7/+yI3mo2hjsuY8KrxrSku0Tj3\n5hGGIgyuA61u5VFAZoVITqNF3zCuxWcBlN0WFgh9QDd0PEPP0C7SaZu4OBpr\nGQ0aNyIao3yfrvkQNeIf/VCB0AB5EFfb+Xuak5WiVLuBeWD4BvJqU6T0Vsm9\nzYszaetHOHTCgxRFcHDXDj/hZNlD/8t+mnYMkXvXrc5X/fWHMxGjMvv5S/Pn\nEzc4uRC2Y6HLMZQ7uBlpLLdai+NuQQdIc9f1c9SSCPcwiBYgwtb5jS6B8ge6\nGCQhI0WKutdCtktIxKJyx7FcFxAoVEoz28lc8PYHvXRInlChZZOc6gI+sIZN\nUxkn\r\n=fIHH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/density":"12.0.0-canary.23b0c5e22.0","@material/checkbox":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/elevation":"12.0.0-canary.23b0c5e22.0","@material/typography":"12.0.0-canary.23b0c5e22.0","@material/touch-target":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.23b0c5e22.0_1623169368603_0.6136513936682269","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/chips","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"214824d62227e1a7a1e9b1782e1de21cc68cd25c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.2952c6a76.0.tgz","fileCount":160,"integrity":"sha512-S6X4GcrbvxrqJvVkq9XziPpktPJ6YqHJvii4CTE01urjWadaLB9Auq4v0yXGGZYli+Ny3hljN25JFUDdo+/RnQ==","signatures":[{"sig":"MEUCIEgNnNk4Syezs5MwcURM4RYXOytT6eao25en22L+6cwVAiEAs8sscgO5zACWe02e9bCBPOzFW5oTzBBlE5iXKkHlcko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6vFCRA9TVsSAnZWagAAY4YP/RoBieylEZhZcOUh87VX\nbS9B2bmWaRNdic0D5jT7kaxMNn3ceKRHHjercXlu9Nqnlm/aq+GqAQ/ou3XL\nvxNNk5n/WwlX/hOSFvi3VD1P10MxSMGgG0l5+qhuutFPzbsuJUDisV8kDdAX\nXW8u/NSg5wd3HCGD2/2rfIuhyZJ5tvAOpzKbvIj1lze0RkxcvrKT9xX7PyJH\nsB1gc0nrK9hXtuNrLI336JUIOGkiLMti3WSGfG57E0gMwpR5i5KjMSL2eeHq\n46XxCT7leCDbam8RbU8otjo7Xuxaus9VMh/vd9SaqbjkIZYD3MD1Vg2YVGD8\nCCUzgJdEK0VjkOu01O2GwnP6LHP6mjqrxetc/A4mgM2zdbhsWbTh27IztYwX\ncPyQnA8GYhJv4MQfVhKP7wAjczeD3hlKFVTbfI2/tzYRvjVe0bJp3EZtsnKP\n92nG9Lt665JNZAHSKojvzGj6eeMLUPghDtUJPS7nYnWRvPqni6MqNaFaCynF\nGfriFGrP07RoQ6LOKSBXChh8sasiKbjLDCJUIFx6wN+DHGaLzmF9yy91+kcT\nrSNmCEazsH0VkVChrl0GOVXLsjwfi8WsVfo1FD4ArkqOvnTWX/Ocw4v1D7ng\n0rZKChh5qhf3Utvj9q4cY/NR+Eyzd6Wi2rj3WOvlMyiVndyiZDdXrzdXAeoo\nyu4d\r\n=HKN1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/density":"12.0.0-canary.2952c6a76.0","@material/checkbox":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/elevation":"12.0.0-canary.2952c6a76.0","@material/typography":"12.0.0-canary.2952c6a76.0","@material/touch-target":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.2952c6a76.0_1623174085679_0.09021341500794677","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/chips","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.f12425f88.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b9ee849589ef0eaa044716dad85348a060574d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.f12425f88.0.tgz","fileCount":160,"integrity":"sha512-NgVXDqmNjKsJgowAiMXLSHqkoN56QM5+lKbY0mhcDmp+usMHkPPEwxWW4qYLm8hfjN3wAj9+1AQaBxWboVcIrA==","signatures":[{"sig":"MEYCIQDgPrdaGFFRVv/9Rqsr1VOI/FR/QiNqYeT9ASGxp9NEoQIhAOHaYVVLQeC05bWvqgc/G0WBbcCr0hvGhsLWyvSd+VZm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWqCRA9TVsSAnZWagAA41gP/2+GAcWYeMTnwVj7RJP+\ndB87eyNfc+iUXzLC1MZPKYB3j3snxqEUp2oIDOATcjWJ9Z+WHT/E+BbAP4Iq\ngeunSVBPXWZ8wiRwjqw9Z2NLzvx9faLj6T0CZzS7j5CBd1dYtK6gshRXgtZ7\n8zd/w1R+togIU/TqxicotzlHa+P6PRlaXQa2DMikYStPeGqcGqo2KOQtnv+n\nIPIq2uQ4249+aulsNkIw/2bmgB7auK36veFJ7vDAigj3ihJ2/cbLDjqTg6Mn\nHLjGl+CpHA9PdFbn2EgKXdGirpQx3gsM+5Enfh2SouweB3JYoZJMlvP/gG/u\nUuq25Uv52NKBreVrW6WT7sFc8R9hLIYq/jxg0buHnr56WYKI+ziHbNnQZGLU\nkruTu36DR/oKHKMxLp/oviNPI/0y7c8lwsE4M+dFb96svD9pS6u/VK+YzY5M\npiBRODlcXDnYPKK3O7PD9GYYaygzvc9mP8X9IV0iSZy9SnyDymD2F+2HukKq\nKETGt5tH13mC2+yTxYfLfWiRGM0boLjZrFjqg4gX19qZxq/kxSH4gNDMyP/X\n/SnGGrkxtS005Ne8HX2CAud2QxxXZNOMTGO6JhRa/fb03p/maxBMPchZDJqN\nQrMHlXx1MLdMMjJJ3BwRHqn8Uz11Zg3LIpTeN2C1zEtVuhrcWxvHYJD6syxH\npZ3c\r\n=R+OX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/density":"12.0.0-canary.f12425f88.0","@material/checkbox":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/elevation":"12.0.0-canary.f12425f88.0","@material/typography":"12.0.0-canary.f12425f88.0","@material/touch-target":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.f12425f88.0_1623287209933_0.5831679696632535","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/chips","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.e543628c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d84e71d34b389d238a4d96f0d92946448690067d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.e543628c3.0.tgz","fileCount":160,"integrity":"sha512-/PDn4+vKG9WHpEOd1MkrEvbITBAzFBvn5FfjE6jc8IGh8JQouS3OFGRu/CBXKwYwh35mPTt6hhr2xIeGE50UOg==","signatures":[{"sig":"MEYCIQCqAyiEXaiSlHLKoHYAIvFJhi8fEJz0UvEbl5i1ZXIIcAIhAIqSZWEI3/0smQDvcu3kIXBaMlqJufrOC1JM0y6r41tC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXnCRA9TVsSAnZWagAAztAQAJFCPsdsQg5mteL+YuAD\nrCKxFXbV+x+d5gft0nxMNNJUFAT4FgaRfjkmztyMFluTFWHCvKkazB8T07vn\ngXwl7T8dBxE/mB8JYa8kopsddrr/aAVJIeiOruPcqoDOUhVS2PYxaXQ9Ien/\n8tfpMdjbFIuFvqH4i6IkDhib4MURoZBiz14gDo4NtqGgWyp+U5FKqwvF75gi\nX5chX7gOVAxKSkgvUhp3fKgvYNGr8JXF8gbeMkQlQ2KmZssfRmpg97hPy08t\ndXD5l4aObWNTUBb+W5UHc86p36twwaQQ46sVYtcKM8AbHonIrLOm547beblE\nSUYqoYayBVx5oVXcq90VB8qz/p7CeRRPDtp3cg8k8+sgGBKU7XnQCDoVtaf6\n3OevPEiTu5tvnm8eR4gqyhllgsvdq/E0eh3xdwq0Iamb/FpJyzUdVRl0mXX8\n2XxuvJlHoAh2bD7e7f6LWrHw6B+ONt5RJIarQomyswFSfMcJQCog9kgpyJl4\nP/jTjaLdgl4rEuncrJsgcfJwcS86qXl52yt8YRz+JVCGururjiB9a1PmqHXo\n8SQoJX1zm7+agSyMhDLhRSbZYL0BIDqiXRCFmV7wZbj5+ozWilK5/hn0an31\nYDBVYMSIAuRAOMkAQxn5v1Y/TVGE34ZWK+lD8RILnpA9cVLv2VFVG/bBuX+m\nPRJh\r\n=CLKc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/density":"12.0.0-canary.e543628c3.0","@material/checkbox":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/elevation":"12.0.0-canary.e543628c3.0","@material/typography":"12.0.0-canary.e543628c3.0","@material/touch-target":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.e543628c3.0_1623287271724_0.4459673774059698","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/chips","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.e0c346286.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb157bad579463b5ce16e3da8cbeac7fc806b339","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.e0c346286.0.tgz","fileCount":160,"integrity":"sha512-LV3fmZhz5CJr08+Nzv5l+PsHcv3YmIcMKyLrpkNYeuO6vv2gSz6cxhamJtJ71Py7CnLrwL9WpHLeJ4Gr3qUJ+g==","signatures":[{"sig":"MEUCIFcQXwndwO6kBhceEFXLLebhJFy5ylbT8HX5S9gqKFLJAiEA82k8KJt3ayWk174vm+NAkJcM+v76gwRuYptzGRAfirw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+kCRA9TVsSAnZWagAAQ7wP/0DmVtwAawhKUQlKhYlV\nTpsrTqF3r5qfaG9NO84/HM/BypwCWYvTWvoX61SG5CEMNUIAC2I8VomBqK8v\nn44Ri4qXm+jWU/9QHCOWvJLcSQkvsEcuXIwWX3P6PDg9uDOKAnnylHLHI3lo\n5IIUlwJ3DLA1pDEDtapvdCXl2EFmKLU+0HfytRONm70LVyV0sJqpPemtjWT7\ntvTq5MSrszJ7C49ntBxVm0gpfRFhFMEqRmghe5MJregOztZKFgvvyRgkhpo/\nZEMlTGIiBjlIQT8MN/V7isAk343Qs9/XlzLyopuveLIZLYyzs+zZecPNq88s\nUXjejCxVsmfxjZYvLEFltNcylFz3Mj/1uegDCn9zjkl9U2XSKKFkmGJnZ0tX\nHB5rsaRxKJHdfn7kbDxY7KJoJuDJ5Sd0hAR1Tb2AJh3L+0D6TkauAA/fexqV\nnsPcvTSLVBvLzbSa/EwkOuG6N1L9iE4M3J7hTff1NvKjK0I+Mz694HamGGxF\n9JsNyHuFxrIo8Q+gB/MWmh3mgmZx1TpQTSnLkbNrk+Y7f4DKJrmknEqgsnQj\nvp2PwRhU8f55PgHHtYCqjc/eyP937fzD67WkPZSpYjFKRgOaA4WvXn5PDgcD\ngBJTdxOVXoDsPPm7dI/qkQmNp+klqVnUZcpnPkqqE9rMyVzNIe+KWaJgW5CI\nb+Sf\r\n=Pmke\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/density":"12.0.0-canary.e0c346286.0","@material/checkbox":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/elevation":"12.0.0-canary.e0c346286.0","@material/typography":"12.0.0-canary.e0c346286.0","@material/touch-target":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.e0c346286.0_1623343012211_0.9163926193488892","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/chips","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.f43af5633.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1abbbd032a7d13903d0551816f2d06e32252711b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.f43af5633.0.tgz","fileCount":160,"integrity":"sha512-MNWEt5Vxwx5OaycVhMDKaCcXOybBEa74DGroYl7nubtl57Olqn4hOBCuCwvmxlx1NvLVfj59A1EYAs2O1VP4YQ==","signatures":[{"sig":"MEUCIQCR60NfaVmH1OXklYZFceG0Cq7X2+HF+cjzikuwlAi09wIgOZxZtVbLzm3vZ/ehg78gg+M/jG3xIw7oBhQnKi+b4ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnfDCRA9TVsSAnZWagAAAmUQAJyKNKW0ksT6HCZEt8Gj\nK42fDZojU88CEtxjgVPFsdtZp3Z19sayuyaKkLWogJNSQ8F7d5Vr44/GQUBT\nrKJTQCh8LobV0DDguvIwJdYbXp0ch3Bfrl+WYjosQpTNVoR+KM5EuPJUsc7H\nMfbCNbJ5bQTugdKt4jMp73wMzUFC473XHSqyF21Tk/j6kEdmR5nxL0N474pG\nniTBmR8wtdS6XGwG004nfdf3VSzj5W25Z+FIXY3xfPWLMAYKf7Lw8dYwD9VY\n3bfLbBZdZpGgQMp8agqaK3+Ie4JHUkuNXDg73B6c9+4Zn7zm2WcRQ6StbTyU\nZwSFY7n/V5GiQ+XNPFJHRJeFhCv05WiU7Pi7jPYzIH9dqsyN0Wv5AlzfsIsh\nWigsXV/1AuPdT6KW3hmI4yXu5FVN2ruZqtIqcpuzwjL3mOME7yI0gxbnQcn6\n2mWOSIzumfOTbz4Ga1yUhkeTr4rMwHWjmTN4WPtsk0fAegOMBFdQ8jjWiMiv\njRLeqYuiFhYj0JLMcFHvQzQvLgN+6X2AdJVoticQ3yfuAJGD0oD7r5QCjdqb\n6YnjDD5PANuiAWb2t/m33lMopqWQExFZz+Y+VdnsNHeQ6IFXWO56oWyBMiy/\nzOBRUD9Pd30KxLeQ6L2XPmlIUUwaEYOtzUBWGz40n3SHoWVDXNmydf9a97rP\nnYMc\r\n=SjhC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/density":"12.0.0-canary.f43af5633.0","@material/checkbox":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/elevation":"12.0.0-canary.f43af5633.0","@material/typography":"12.0.0-canary.f43af5633.0","@material/touch-target":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.f43af5633.0_1623357379169_0.4439332782907268","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/chips","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8415ae585.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fff85e98b1f117959ced379574e01395a66a16b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8415ae585.0.tgz","fileCount":160,"integrity":"sha512-0WDRySLaMQuX3jWg0HcRlJCW4N2DqAELIGMFslVLr0N8tuRxjf5hR2WyoJHwM4Qgfh7h1gqGwQZT1stskgUwEg==","signatures":[{"sig":"MEQCIE0KVxzHWn47dljncnSbu7nymE2mPiYrmS7rT6gqucj/AiBC+iiHNm9h7FVdGIBGRZiLb89YHDgk6aRFw8sgxpt45g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4oCCRA9TVsSAnZWagAA6nQP/jEaU3S6OWEGvCnm8OXK\naiyGWIfOGlqplzp6MFq7+JsrdS9CnVlVXC7mmxkWk0GCBM9n/La9jsc6GBqP\ny7pF2/pcI3AXHBEqjtPkgg6g/QLxCWuYY18zSYkmA5wD6A2CU4cyeiptYpGR\nCJ5vSC0K3seYi4hCylHA8o72bvQz2gVeh4p0YdJi3K5zGhL68CCs67JJhIdA\n2AqaMkCq0gsCC7vl4/WMAkzrlJi/CBURXh8pGNfDUxLM0kcLL+34tsDqOSKL\n3VOW+4tbeZvK1iHHjR3+63EZF9WPNj4sSwlqTqhl/wRruIMlQN99Ban2W97B\nRBs2hDiRxv+vjGlFUKL1FY5GRl9Qgkb7iSN8ZmR/9w0rkMj1sbyCVV/ywEuW\n0PuECZycyaP3Dr2mALbUIhzN+7Hd6YqZCFBdSBTjhcwMZPduguXF0nMQym5f\niQ3hvMIuVRv3ad3HbfI4ZXmybRNdi1gcctuJBTDJmhNqa6Z7cN8CvQamTdf0\nKw2zStuKU9hDrmTam+AXXJOie0WGDycpuWIMQxUlHOPId407iAhQcBBhWNrz\nKtQBLZSDTzAFsmA4kJDO6Puuq7hGoYREC5bt7XMLJCb+CB+LXXlWanEKnI6s\nzpExu3wlLGo1qFTLBuKib8ZRWLp3kwRNGpxwwLfdZqQiFLA351CbHCJRxcCZ\nkBSn\r\n=ahnm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/shape":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/density":"12.0.0-canary.8415ae585.0","@material/checkbox":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/elevation":"12.0.0-canary.8415ae585.0","@material/typography":"12.0.0-canary.8415ae585.0","@material/touch-target":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8415ae585.0_1623427585960_0.04603566451044916","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/chips","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5384987c72cae0873c6a33f78ee2fa1ed9a68d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.598fcccc8.0.tgz","fileCount":160,"integrity":"sha512-pOE1/acYXZY5s0Q3eP1DoGTzz2pK2ZZtoXaovti+01fmpXUFfLakZJMoLaVK4uKDp2QShgltOvQefZbtgIy3Ug==","signatures":[{"sig":"MEYCIQCH2qLF83dV7df4TIaqLerhSM7GxMiuOFIMhLe5Z0sqJwIhAOE+A0dNs99JZj+gl3g1pGa/xllKYxhvas3ULl+Ygg2u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9nqCRA9TVsSAnZWagAAy18P/21LovLexm5sdlHe5Ov3\neiNJZK7C4VnRLgyyn0Lo/5aSS5Bl0WIRGhg4FDsrH/yF476wG1gAnpQdZJxy\ncaeUw9qvks9bBK4jdVyfDGouRvqGzQB8hR7RvhebA05uMDv0YGAIzrFgUf1z\nd0dmK41Wln/LG5quFD9/pWtjaX9Ly5kEIO3lcJxfgtReckdYpqUOKo3wJGqf\nR9legmRQn9vnm6yj29mRaczFzGAWSK3nMxsTzKKQ1P18fSp4ke+OKHJJdq+H\nC48xTQINR3B1zFyLl+2ftmxJGy4/HSeTMp3d5ZRSgjqzBxKaACWFcvc9iNk1\nsBPzPo4fhBSNe3GMm7tvmu6RfxVMJrt773pCQXti7nnpLdJ1D2kdQmrChbya\nGSLnuRm8Boha4ojGXWiACnDUr8tToac0h+SPYDp9RAioCM8eG9EAs2ShvHEz\nJ98sQk4bDktDYuYugQaIXKSizjmVFT2etSEAxpiCccFToFzLfG5DvC3SEn0X\n6A2NmAD3ceNmoWVk4g6Ag4QprO9t0YIZ3kP0wmlDS+vlgA3fpBomB8+/G29c\nwzJSmMk8FlWshRF2JTKwSgrfMuZn8zvXwvHpGrJc6HYM60xaI0h/JaHbJ07p\nPPNqeWzR+Pp3RDRyyupx8QerrTsyYYQMnHqeX0QoiNbgYA71gXrCOnDsCWcJ\nT+fv\r\n=rJz5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/density":"12.0.0-canary.598fcccc8.0","@material/checkbox":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/elevation":"12.0.0-canary.598fcccc8.0","@material/typography":"12.0.0-canary.598fcccc8.0","@material/touch-target":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.598fcccc8.0_1623448042510_0.8672732056033674","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/chips","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.5d0605188.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9299eee03a55027729a673afb19472cd8441e1b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.5d0605188.0.tgz","fileCount":160,"integrity":"sha512-S/QhSoToOFHBlL1WdBrsLmIwEpFTUX8t0y0X18hnRUlM+LcfJoA+BGsg0icW/j4Q919vh0cmUdz6DvIQEB+YRA==","signatures":[{"sig":"MEUCIQDUw9irH1A8OfStYDVGDReXdL97U5bPXuN+Oq1YXxtR8gIgJ0jrK6twfZSas0EUUH1qn8SOfs238Y4k9/J07GtU6IY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5RgCRA9TVsSAnZWagAAv44P/RAWFAfZIEcZr6Y5vVqD\nCGlBijZHCNg70UnvWXoXMDF7N2N0dvQSleN2wEjO0urtGlLcd9LWRBD84fz7\nmkuwpsfoak8o676BjogIjOUXbYK8BnG5owoLsrFvCdxc5Yh7Rjm/MwCjHAXh\nTsT88iW2QEf3WPSfWWGQMKOJEFjMtfYsLjqhtY1QjdtMGmYaKO96CcrMnTJr\nv3IMo78qFEjMck6KveJ82BV904qd7GdpuFD9fgPAt8N7gs9MaOeScZd2h/lY\nW1BIx8jgwNFsWlTRifaSivvUPoOmI+KmVhmGHLPlKJi37nJL53pOJCfxYogm\nAwBo36WbBfyYnmqX3yjXlBqPV9ZN7ET8rGTuWbhYiXf4kW2RPG68obR2vWo7\nRS/kjjoIsgdqN5B6KS5KDhFFpSBc/shQVmz2DxN9wfInZdx3rs7sNRbUUb5b\nzsoWCey8OlMfAUprZJO3NuvBRrdCq7484ThFISn6HoX3U3b6wP4IsJ65600C\nHW7xorRRKdkmL6UGZBh1Ms6MsGioEZdyRiJ2AS46kr5q4XqPNkIQ6cGuMdb4\nB8SdgBm36GaROSEZxp65ajUVJtRbCrr5CNUaN7YD6brAq60mFyJMMBf4EC7t\nMgTEy7JuRBoB2SwcbdxWET4e8o1wmRLqYWOi7dAI2igciQ5KGby8XThY2eAl\nRzWR\r\n=CGOV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/density":"12.0.0-canary.5d0605188.0","@material/checkbox":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/elevation":"12.0.0-canary.5d0605188.0","@material/typography":"12.0.0-canary.5d0605188.0","@material/touch-target":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.5d0605188.0_1623692383949_0.42887642940311554","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/chips","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.f147a2271.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ada6127352dc6ae453b7db0db648e510e811934a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.f147a2271.0.tgz","fileCount":160,"integrity":"sha512-HK42yvLjXMz/T/o/09b/e5+bAJFlxR5UxO1Bp6Dkq6RrQEXPM3f3rCXxyK1TAGMDV222EcMEljvwGFyPCQfn3A==","signatures":[{"sig":"MEQCIDIi8Ztm5zijauU4IIQcC4yUqAogXLetGrHRbvmOQnlsAiAybKXow09RWVQygzY2VGJ2jn3oS318+YYa0yAt8onKAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6uQCRA9TVsSAnZWagAAuFcQAJgTjifnJ1aTV45MKIwR\naZ8GIszianF1czoqCyC+2r+wfKp2D1r9Qk8heY/9AQuMdZUXBXIb5PNSXuH6\nSGmVZG3egGhQbFpfEEZGRDwES5O7kSXVi3WW0OUqBnVavy7XBOwuqJBmQKU4\nTISR4aNEthFYyAlfRavHU4K2bwz1D7WttY9VURJnG/ZSpQ7easQv74g0iPtL\nVnoV+9jaEoH7ppiB6UyOGJA8c9wQNqVsV9Lqv8vcG5vhV5LT8KidKQKJ4u60\ngOUVmcDwCCESCDMZEkr3nK3p/MBz1r8XoKDgooSydWzOCM3sOMhfXMA2DCC3\nexoDA+k2Uhe3FxjVP86XtC9rAKnSiKSV38brVwS7lZcLfasv6+kV0hJoi5DY\npw1vqvsCEulTjUzwzjSlkGFZ70osVMFvJF92sOz2lRCxcq1e5TzaUVR43Oan\n5a4evuSMLHrFBijycnSwbpgSzXIudv6BlcjOeGldA5yckRI3XcESgmPLYzm6\n4mNs/k3cF1OlDtVbMpsamL2nkvsulvYn3pptfO6FjjwoHody9t7bJJwwM8fe\nBaox3pYKOJulmv7OSJzddF9GwG4eg+G8rP2eiOwvLq/a4rTxFju9Dgx092Wk\noZUnVMLvb4IyQi1YlIoWpfmXsEfvUzk+P1RwDOO0XTRb5CEgG3naTrcJJ+KB\nnaoo\r\n=0t/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/density":"12.0.0-canary.f147a2271.0","@material/checkbox":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/elevation":"12.0.0-canary.f147a2271.0","@material/typography":"12.0.0-canary.f147a2271.0","@material/touch-target":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.f147a2271.0_1623698320436_0.5740839087962011","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/chips","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.33579e00b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd3d846d03a0bbd0e0dcaacc867cfb31563f87c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.33579e00b.0.tgz","fileCount":160,"integrity":"sha512-/6YUCLjbgNDuadK1kMF5Z/u2wxmUpwQnE8aVWABt39q4w0SozmifJF0uxO2Do1QZdFVbO4IfHtB/DbkojjE/Qg==","signatures":[{"sig":"MEYCIQCzInF0Fm4dDLLnc59MHTdXEHwP5CxYYvErvk6z6pUuuQIhAN2lVzx53v+obtX5frhqcAQLQQD4l/53yZQKh1GmsY3f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/LKCRA9TVsSAnZWagAAuAwQAICcTn//tadVibPPW8qa\n2SiPq/mlU4wJeH6es8JlQpLQoQT5YJgGvMtyKZ7Ut8W4uERQNKUGCaDdgI7k\nNO4RkzoMelZ5rm/+VJISR0P03uaSV1PPw4dWkw7naTgAJvLvg62zY8l2hKtk\nDkDT5wFcX3GmDbZb5CkQXlHs4vGzHabhvuyNoKJ3YFyjBs8nHpy0T7uhMalJ\nBCvCEdsX2HHiwZ8NtsG83pyzZPA3Bb8PWzBLj0zvZ/nS4Uyy3/UjnteCKoTK\ngwUqjBB6KsQk+l2rObLllPxZpNjgqGM8BrVXoQn8iQ6CI6scPAaE+ldZleM+\nGpiL5VM7igdbls9IfqDH5vY08RR8EYt5ORRC+ihYH3qgXch81E13tKYRl6tD\nca3LqIESmNUeGwsYiSfD09pbW1oRSjf3PoEzYBLqd3OEpe1z3W0978pHAxCy\nvXvK3GwEihtBVSyLVYy+YIlO0KuQicxJyhyrIv5koCm/oqvLufz/acmqx9jq\nbAtC8x8hICsteARXP0lRCHBKaPiB9hTDwwi/whSBbPKefN7dd/ULxIsrMWEp\nmXTxhg2j7L8NOBEfbmJMDpWZZVGOZ3/hDEv8zTPin0Ww+R3+upbBFX44jOpb\ne/o4a9k8VnwHpqepOt5xqajXt47D6yHliUPxPM1d6MCWjkGS5c0sBtPiYup/\nA6kw\r\n=KHTe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/density":"12.0.0-canary.33579e00b.0","@material/checkbox":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/elevation":"12.0.0-canary.33579e00b.0","@material/typography":"12.0.0-canary.33579e00b.0","@material/touch-target":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.33579e00b.0_1623716554051_0.2829510385783689","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/chips","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b90fe2e7a9255498678d08956d5fbb3393017841","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.a6909c0e6.0.tgz","fileCount":160,"integrity":"sha512-xPXtU2xJUc5320wvFcKxcNw/ztUY47ORpSXyliLN8RtsONhz5y/ntsRzoYVM/YDMWBQtXtpupraMgfPvjad6kg==","signatures":[{"sig":"MEQCIFesPzLlC+updu/2LwQFMoMPvVIv/ewrss4ReW88M6pkAiAZrqRZy8haXIquFVuShftmeWTfnESHpCYF4IhWZmDTEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1581303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPHwCRA9TVsSAnZWagAAMBIP/ijXuhBW89pHtKtFWWeP\n1UNNfkEiq7MHNLXO1Z1tT+KPe43BO3ajL4HcV2Q3EAs+i3kZZ6q6qsNLv4XO\nnGg4JJcX1zGqUDm0OsV1IN+RAglGWpPNfnTqh+pe8JkMOuGWOOUzI20L9edW\nCCGFnPAz4GWWqLo1xmhngd2W5h2zUUJnBEIccizDBt+p7mKbXfZ7ohMMON5V\nz3/Dtpx1OzXcxZKv4X9fT9WK9r6IgPlGuhAfj3Xshiurr7YpV5Q9RqKlR1rp\nV2cXfi5w292t9lzwaGDRDzny404XvOY4QIFEb3nHvAZ2DgzNHfpm5b9+JqYB\n9gq0ObgBOP+9HwtiqzMBt8V7abor8vQIK8rsEX5uoDRPV2TS30t6zDp1cdN2\nyEOlS3NekCR83XlM9YpqOlyTBLOyXCQl51PBU326uG4pdBsZSKHc8IPQzFxI\nY7mMtPMHAU4bRdKPamKgOnRkaJoUdfnYwB+KqPwLZIh2BHwVMzkCzTpkeeqU\njk9jJJOmu/rkK1rA4Aapne529dIcagnsTXQcSA8ETG7qdfhz1NghqUQi0oA4\n0IL1+P9vAKI3IZuRSjmU9SRKm2/a2pEA5OjKenWTNUa+f1586BOxrOgXosx6\ns9Nuqn3r/uPEgG3arQ63Mn9pXSt+NWCTM7QsLuJDadeZfJMJ5i0APYUu3x55\nyGUd\r\n=DrNh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/density":"12.0.0-canary.a6909c0e6.0","@material/checkbox":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/elevation":"12.0.0-canary.a6909c0e6.0","@material/typography":"12.0.0-canary.a6909c0e6.0","@material/touch-target":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.a6909c0e6.0_1623781872197_0.45483493237956885","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/chips","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b84d3e0883f34fa6d78593c51209485d2d705f0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.c18b5925b.0.tgz","fileCount":160,"integrity":"sha512-ynhqKGuVJJe/V+2K4GiXdVXeFNinSm0akt5PqMWo5oDQMyBkSq2XZFakZbpt3TH3qAqkbF6F5u5EwCiu7pxqqg==","signatures":[{"sig":"MEUCIDw6EAfIqZMUNj7GOb4CAhV89pKS+5o9tmtBOaIpX7OrAiEApodeYsk2/l03XNs6jwxR8c2zzd6jwDlO7iUTY+7bbWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1586715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRXJCRA9TVsSAnZWagAA6NQQAJJjINX9qQfP08+sYgqs\nOlrHLFW79oq9nlwlYFciiLIlsNJDlAIkHQ9eucSekVOEWln0YDfeMPV8ZPOU\nZnuefGOfxECFXf2V8t9PKf3FyOa0aO2b4nTjz4d6xnZ0Y6uPNeLZKOZGQwrm\nZ81SeqLSTLWosl+hS5Tg2FIKQGLRRPwFx2zHrSOAMMuV3O8DYIluKGap1TdZ\nimIzfLldOryh2pWh5WKeYYEPcmQl314XFyUJxtipoIOAYh4WHGr1XZ/R3EOY\nq4FrKHYg5mmRTdEGgzp+fJkqRFiGH+jHk7n0RSnNkzIGs/7BAJZrqItt53Kp\n4aZXNwlIUdfyQ6VhOyrmAxA967ZeuoyxGXnURqiDT1ef8JSUSrnDuLc2wP9w\n0a1N0+13qUz/lUHTiO7WHjGHSAA90Qe4D4m1fUi4R3dT/YRBc/x0ukAzTiFv\nEBKZLI4TtSgSNf784hmtKFXizaUl7z7xQ1xAuYuCRWcg0qK8OgfzZZvoSJPD\nFwEdUKCUOCsy2ETvDz7lKPAmisQ4RbQffFbhDavNRVelEwt6btxOaPiuAW6u\nGrBivMGp8rl3YwDs7rsgtGF/H8HQZTxhvPv7yUUYpiW6nYcuJWfyix/pmTYy\nNYAijBQZlgMgZQf1wBBKKqOyqffDLjYAbtkMWHvG9m3uSFXt1DQQQn3oxYUi\nO4cW\r\n=9Al5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/density":"12.0.0-canary.c18b5925b.0","@material/checkbox":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/elevation":"12.0.0-canary.c18b5925b.0","@material/typography":"12.0.0-canary.c18b5925b.0","@material/touch-target":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.c18b5925b.0_1623791049428_0.2831595164999581","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/chips","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.271fff902.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"145e3aef3ae26eef8eba9bb6eb5249397ae705d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.271fff902.0.tgz","fileCount":160,"integrity":"sha512-ucEnKu0PuKyzvHYq9fqdB7XV/1bPV4gQ0wan113vax7r9FEGvKX6WHxVfuwIhvuhLse7CaX7X+XMKu0So3GjyQ==","signatures":[{"sig":"MEUCIAVbcRbPbdOgnVoEU9HLUddX2Wi8vDjYYj7kzJSFPm5hAiEArulE9UwkXT5u/rNiaBweXeruPQ0KDGhDQfkT/VLIoJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS76CRA9TVsSAnZWagAAg6wQAId1dBrJTh7r0kCo1/+x\nh8ii6g7ac++e1nqa3iCY7JTxfb0QLRHgh8XRS7EVo5UUQT/3TM59IvnkV7UG\nfT4yEWCbNZwgGESyFYi1Md3cLJws4P1yeolO437iW1T5BAVNBmXpr9aRYPoL\nMXTKKkz4KfL2gjHnYWLcAaPLasppjLZKyy/GyuTvoppDKvyXr9fT3bnRVCUp\n6FEyEPk/hs4LaYQnxbRIq8J4x2qvlMFqiOHWT+FQ43tJb6o+1Prui4TzMlbd\n5+0x2ErjgBsqDOxv9OpASCcLit1qLrpCVSUHFzO+rFPL5cKs4UsVl7AF+NHV\npB/KF+uRo9XGKlJcEBtvx341V8nLKBJ0+eGfc3JX+DESO/56rtwWDVUwvU7j\niD4Tq1E/6zgKPFBLyRcg9EMx1DC3WWHddlFCXfHOZe0hQXr8oDlF+YXWbggK\nBX3zWqbvJrcEAjf60lvAclg6erzyhTx90Ah4I2KrzR7ZHle3+IIOHqxCZcVM\nO0m1bzV0t2PouZx3EwHc+Bh+iiCMl/wpgNJtV1GZxJIgTnXDSecCtGDqCNxl\nlaCdRIRPOlTGnWidjlVDTZtsukRmUbDOIIFSCJ+HkoP7mY0zXKipvW7duQvs\nJvTax1LfHM/Bdo9hevNBtNUFk2nei7SGBABINSkxtH0OLWB7j3oqxw3ONRlJ\nv7su\r\n=BQA+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/density":"12.0.0-canary.271fff902.0","@material/checkbox":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/elevation":"12.0.0-canary.271fff902.0","@material/typography":"12.0.0-canary.271fff902.0","@material/touch-target":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.271fff902.0_1623797498578_0.520089389648146","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/chips","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6bf5f6f7c0fd7906912b31bd2046e523db19e48","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.7ea2e830d.0.tgz","fileCount":160,"integrity":"sha512-yt53yqPvCcABOaHvY4lG2qcgxqMO5wJFCzhwCTcZ++g5Ul4bzBeDWhX5Z6ftsI0d0h3ixAJZsqIWyJJtRsSKiQ==","signatures":[{"sig":"MEQCIBSYZKCw5TE5mITJ4FtJGek3PnjVJd9rnA8kVA3RaK/jAiAOd0NfHaSmcxcox0wqNMzXrey4sfDiTpjm1/434P38Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8oCRA9TVsSAnZWagAANjkP/1bcmqrjJHsFyW79cyd6\nWl6MsqJiL2Ji6ovsjlVt3aYJ0TuJeA7/Lnj3fK3PkbXOjn7vnOikTFEKXD/c\nEdmULtCb7uhnKFM8C9zezNrRkOYAg9jRS835ZgLnmAYQ0YogTnDDGGE9FIcq\nKYjg9OCyW1XTPLdfrVAb3yWtRwboIzZ0AByZvq06BAxt4ai8GFfEisGJQXXl\nfc7lrGKRRhF8xr03DEgaxnobCKPlh9ldydBlhaXyjQ/9NhraDTpi0tykVvId\nwuqx4hQU3OWvknHij54O1lf4nCFBzD56Vlc7x9Vhv1IAbVLNy/87QjjSd7Kg\n3MTT+jJ5LuGRoYpvdFfg9Dp0Dp09oqjyUrHnqI7wM46rR/ieD4E4DK0w1iWT\nCBhKrQcJCiol5WwBmy5ZhzvguMAI7jWeYWzBKWPyKtNvwJq4WX3eZrZSG9tk\neoHtTYgwfviVbd2ai5KwvI6N+49aT7FjGr4eC/BWPbpIW70zZlcDZBoJZtO8\nc/sa388s1Bwcx/7XKj28gGwDz9LaT6UCqb2zzpvgbUY/kAaahScIR1wX6nMp\n2+WlWb9PDVF3ZZBoo5/WOl+FlbEWBVyGlk23DNkKd+mSzvxjvGm6NWfqTwHs\nqBzG//80PQQaKHicyh4AC+PAX0ifbKrcOjWQPV359p7dXRenfNEtmoEBmuZy\ny9CB\r\n=/Lc1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/density":"12.0.0-canary.7ea2e830d.0","@material/checkbox":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/elevation":"12.0.0-canary.7ea2e830d.0","@material/typography":"12.0.0-canary.7ea2e830d.0","@material/touch-target":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.7ea2e830d.0_1623797543998_0.5491978865141418","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/chips","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03bce6ac0421295bbc35344bc07ff069e7bd8083","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":160,"integrity":"sha512-qMNTgndPuAev9nNzmbEcfA10if0zfJaYYmAZSZNUNlgHFch7JTfgzQsCaFw73jFwfxPk/clBFZtR2j634TZd2A==","signatures":[{"sig":"MEQCIBx/b7qLW0HfqXdLZ9I4yC4IjxAaIC57eRJzshcNMHTFAiBmfnK/DKu8xb+vNMJoN9bbApspkf6DqxQEjWXx3X9JfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymfvCRA9TVsSAnZWagAAT+MP/RebJEXanRKfsdBW1YuX\no0BWotUnZk2Frl+5bmVbCy7JzVgNMptj37tNaMT8g9NDI7MskNNLg27nsTjG\nck5ELhdMwBGo0KM47nHMxDKJhfP1FDpIVf4IPHF4acNk79sDQfUUoBQe82Ep\nGQABWwfMcXfQ9urPb2ZhlUaEuKauF61Q5w56ocAJW2rBl9hkLBpk+kQMsslE\nP+MvSzureo8nvlLcYXewkDFrk7M6YY6Fgo3rEx9oJF4a02Unvne6/Tga/B+f\nREcvdbsNRHjBINJVhFRR7HNcsgUUKsPnRe6PS022o7/xH1+0DpaJSN7PTVjl\nqJ2l2XK3Kq87BvLK+rkxaLkTPTq7vGEH33O8RrOL7hJvp6I8pUo6d+N0CCm/\ndPDMnmegExKzacFj4K+QJMZvkdqE5ZRJtRJiiVPAaFTSK3oTUnQh7QyXhgwQ\nmuVqNuc0A31x1EJlrNjD7iDq8qdk9SN3fwSQw6p+3ir8nG9TPQNv/ltzJITl\nWmEE8CVdFZAflblDAPAoKdGOSzw/z7iaqFxn2fBoHrWvUvNeinnQbdXIbTY6\nGC7NdDUGpt07x+zAAlqlqUjKrewzKZC5cBNP+HDzv9VfxlXFfhdeOr8Rtrxw\n2SxwneEjg2mtFPMUMOhy0ndTfxo0ED3VSL1jtQoQSMxSahEiCujWtrZlB2pF\n56ZS\r\n=e/3A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/density":"12.0.0-canary.d96f0a1e0.0","@material/checkbox":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"12.0.0-canary.d96f0a1e0.0","@material/typography":"12.0.0-canary.d96f0a1e0.0","@material/touch-target":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.d96f0a1e0.0_1623877614659_0.39497100333951085","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/chips","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.a6183801a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2aca933e2f6056a80561baedf2c7407aa4f959a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.a6183801a.0.tgz","fileCount":160,"integrity":"sha512-HfNnCfKIiVD+J8P+MaQzkWvrV+kumFpy3YxzH3vdRiM+XUaRKv3fO8zA4YI2o46Ol9RKpY2fHUFHu/GW4f/2yg==","signatures":[{"sig":"MEUCIQCyz3d14X2cdbVYBRduqZrIwX9Ao310Kk1mhFwf0NkjdQIgTc4MpHPmZtXOf9RmsXXrOv37ArgykjRwwhGc1+beu2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXLCRA9TVsSAnZWagAA1WMP/jRwgiTpR0PdUBFM0GoF\n19x65XFdjPrXEwrknAQV5Lmu4ULh/hVT7hRSMLPRhmZuLg1Dot/Ne+NuuuJ0\neQAk6+JE0bcmpjjRdOfGXLHwxICaYCjCn9ROmBlIjJeQQY7hO7EoRiBYZd0o\n83jT/HRm6JXjHs3lJzX0lg4eKzYlTw/vOjffTq8f5ft2qT0nkxX0kqKTYNIP\nKXc3CUqjK7B8uSxFEVNGvRnV2rfWKe/zIn/JBBQlu8rcTTxuHQK7tq9edYrd\nDo+1ZiQhzyi4yVCbhl4z0Lp73cA05xXhBBpfe1SKzMNWOJaGDB8KtzaKGcV0\nqZ6jc0QS0q2H3kywTXhwdkgtmPyRaG/rC3gtqZsf0oqIrXHiYZ4uDD14G36a\nb4rtLwEjg7TDjoNkuprRBrBBxqrSBuWx4xz25RpO5raVlZadLFdUd0+9NQJ1\nnUXDQCpOlSbXUbV7eSgs2wl+7U+2K+F1pGbWDeoDmwa2GQ8kUxriOoGFeCd/\nmDyXi1g/5Hyc6s6N4E2eQS+3inQGQw65Tjckyn8Wj8RUUyANy8NoKKrYy94e\nKWDrGXhK2kTr8V+f07pXtyVfp2Pfd/lsqEuYjgbgbwEBuF1tD/QSb7iusoxO\n8RkXu15swnmfT+LdlvnkfE5s0k4G8bFW92ge2bnXqT+XjwodLVlrkLjTGjzJ\nwBqy\r\n=waAe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/density":"12.0.0-canary.a6183801a.0","@material/checkbox":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/elevation":"12.0.0-canary.a6183801a.0","@material/typography":"12.0.0-canary.a6183801a.0","@material/touch-target":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.a6183801a.0_1623881162829_0.19989849480726618","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/chips","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.940550232.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a7740adc7fb181fc8f174619be88b818e527141","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.940550232.0.tgz","fileCount":160,"integrity":"sha512-/cq4HTzRTkrUcxt2CWfaa3B2My/1Fw8B9tj8dgHkULfN1L/DiunPOb4/db9sTZZ6JcqQKdWEHSaQDCGnwA9mZg==","signatures":[{"sig":"MEUCICrA01LnyITZqY8hGD5+UVLDZ3R1DsFRuSBMnJ4B9mq+AiEAmNNx/MUv7qzEsU064plSIKrNLdM7779Wh9+NM3RbUQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6VCCRA9TVsSAnZWagAAuRgP/iiAU0+ACqBMj7CrtD4t\nIBqmQX3MP7MclXvhZnY24thpl2H4AlIhjL0FBNy9AsOIdmHnCCb558gvZbZU\nON8psP/xiNDXrWmgqeg+MKNTnPJRWJTPONL77r2LD5hZeKrQyIoDvQaKgL+W\nmNi7w4ZZCw6YQeck/2puaqBKH1huWx8s5ESZBEBVm798/sln61V3+3nKSTCK\nhlKMR2GUh0q+/UQH7aM73zxPtWNjVFt/GSP6IWyeu0o3QeB+YvSRYnPvUOAc\nU6YiRmF2Jz+EwPp77N2WBDu9O/XbeRus/4NIih+PNb835LVxkEUAgPDZmaQ5\nqxVIKdWDb8BpLPeINyXpomnDhEh+gXRDJ/0+y6tFCA9xMyHwPOtMYGb/lh9n\n1MzcgX1x36ilWvXg34DSmt9Pi6hs7pWjhO5mxny+5L5q4Bn9mI/NIUe1OKZU\n08fOTBJN8JnBz7MAxKUE11J6kkOm+Lcu/hU1sPNvknMbM59GrHQATzToJOIJ\nxEWIUYNIGmhhkRuAYxCnll8taRue8yKB1uZ0PDE0+BWg5HcpXjQn3ZddUooO\nCVjVFR7bGCcHS+i6POVkgRNjBG9mPSqsbiB+9LbnH8Le94E76wtkVSe8o0PW\nFO1qteGGex6v5inh8wOq2hdLWQvdTt4rf8M1eqbSv+RQ9uTbDkCpsrUY1TEg\nJqrD\r\n=kxU4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/density":"12.0.0-canary.940550232.0","@material/checkbox":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/elevation":"12.0.0-canary.940550232.0","@material/typography":"12.0.0-canary.940550232.0","@material/touch-target":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.940550232.0_1623958850257_0.00832359186568854","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/chips","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.f705e8048.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6874b2da0029f99316ac27df0d02cb467dd318cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.f705e8048.0.tgz","fileCount":160,"integrity":"sha512-aW5YfKAKf7e6r9/qVdNvcY6NXykxt2w9LbCZx8tlA/oiR85Ng2RP4sMvuTaeJbbevD5u5Iafqs3esFgD2FR/lg==","signatures":[{"sig":"MEUCIQD2T79hKexDOf1t8uOnKrvwVn2oxtyazcHATAX+c4XEbAIgd4Of4cnlUTImqYecr9TnuFCLSPIb60rHkCTfK4zhG3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLrTCRA9TVsSAnZWagAAcsMP+wRvV83P7p43sYDOM59z\nq92atR6S11cxvGgDblBS8qrc8hqXqVuJAZB7NBJ/VhqrCtxmetewJwwyZLdH\nDUkt+s2g8sIQ0Rz7oUEG7n0LRNbP9vmJmv+A3EUJw6XAQ+OjKrqRDDkCBUZb\n/K2tBno59Ppv7pC8vXUJWJzLc07SvGH22Voih3JQY509vvMGUNi328C1g4Pp\nTpLZ8L5ahF+Z6Qc8iurY1rw/RSL33IOvuB4xQNR7ZmShlMZMnWENPqX1QrHi\nsyS0w2brARp3FPhrHVbn/qe5hsBSagya1VTX3Hr7PJJdKgDQhyAze471EK6w\nPbZnzX++ApJ5kDgkqOIUZ5mPkfT3ENjmJrOnMKqacOulfoiTnzHjGnUT3xSU\nUxKw4aFWH1Mq7ASaBC2XgxB11oOeUaM0dcH+eKNfXKJ4IeQZznY3aMNGkExK\nDCKnGl+7M9tP21aWlqhlbacwXDDgQgm+1wCcAdMObfmYOfyWGr9r8KyttbJf\nKTpQrUxjhkQjfUmPu1ZIoUw358nZOODR9GaOwL/gMjtIfxyCW9b00qe+6DBn\nkKdlrpaFoVj8jPkhCBzLPjsiAqL/w5p7+sEHYBnBQI9N1Zqo1rM5FDQeZrCj\nhFqjAshEuYEe0V/rhZBW8RcHJn9Ij5dEm6crXH3bJ7vdp/S/6/0kJCbE+aNW\nOHJq\r\n=m7xC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/shape":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/density":"12.0.0-canary.f705e8048.0","@material/checkbox":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/elevation":"12.0.0-canary.f705e8048.0","@material/typography":"12.0.0-canary.f705e8048.0","@material/touch-target":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.f705e8048.0_1624029906726_0.7572070299425699","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/chips","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.08d791f37.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96ba6e137a6c60b40206a4c657afb10703980b13","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.08d791f37.0.tgz","fileCount":160,"integrity":"sha512-YphCA8Qt6S9wf83wPRqpQj4jHt7JWt98FkR7N7er+y/KlnHxF1gP7FKewzwjtKzEkModxZjzChPxa0e0tblkUA==","signatures":[{"sig":"MEQCIANckC6wKs37aKRLAzV6XIcKTN2RFu1VTZRScw2570kCAiBNsEFYay+NXN6dlZQH/CbS60tMwtg2TIGOYkJLw3XW2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwxCRA9TVsSAnZWagAAdhIQAIyAP9otlteA7U8n4pBB\nsfNQ1Tlafc1nZ11LRgIgyszc7a0XYFQUf2XyFaPnZurphVbcOfmLJtIg1axZ\ndWbDN4Lw6VLEzU9JqWrkw69+kq9Xa+BqA6D/X2Q525FyEkFYRV9CSz/QMmm0\n39EO8Gmd3goQUB87+/iseKybif6mFTsXZhF1gE8mwNgHIW8S1T5ke64TnHd5\n8DJtcJjshp8AfneM+sUqXvHJVgV1da+cVaMhWQYB5QoxMECFYo4y8M4emOcY\nF7Vju1sIqM0JMQY6qOD5vaRlzjzWwFmNJSdbh32L+lppLZqioBoWqlPd/UlL\nxjeDML2dyqPfh72BtB5QgQ7itXLEeS/qjv/S40Q/QC8DzPeC7P2QsXkxXwaN\nz97Im2RR2Pvb7NldpBwqHA7vZgd/Dto7aDc00BwYDMDmFuZhSEbf5zvQk+q0\nOqHArii3/DGhwxdgUmkFi47s/5yGBWsCkxAB4CGP524ZmeBiELha3sC+MEAO\nzRLBhCKxVxVglNdPVDL+jausR+NArSBxLHoNhPLYrj+NmJmtVhGXxykeAShJ\nN68OSOlK2a6DWSbyikI2sQRBZGOhkzJ7RYUkcY3+uhyJjpBPDSU2kIcmYzyu\nhDMdGp0aLgLLhwQ5EZztH57xGse35n730CoyGz09sCZXYYF9A+etiMTupIPB\nlW7/\r\n=cXy8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/density":"12.0.0-canary.08d791f37.0","@material/checkbox":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/elevation":"12.0.0-canary.08d791f37.0","@material/typography":"12.0.0-canary.08d791f37.0","@material/touch-target":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.08d791f37.0_1624050736807_0.2778551396397353","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/chips","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f175ab0212068628d0a2585a56609aacdbbc318f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.e38d7440f.0.tgz","fileCount":160,"integrity":"sha512-ngu3agBXyE0W0+mzuWxAO5VSf1M2KXk9bWaRgWvwRCOk43PuJST2Da/gS2Ge3k6WqoijasOA9Heab7FyYWNbog==","signatures":[{"sig":"MEUCIF7ofPkUm2Q3xDP5QHLJCOVKdiLXPGT3m+dTXMe0aF2bAiEAh+At3nplNsx4SCMwx/JKTW9GJ6pMUI0Ef1nT3QGBP9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M81CRA9TVsSAnZWagAAzTkP/jFz8hAmMEJWMWIMZ7kC\ntgtkmNnW8JMUKpiBWS7sMASTOTyNckvbbASHIK9QZiIO4H+t8HxgIeF5o6pP\nMJnmsWUZsN8m7goKnZB4ZD1ZyDPTjkqGNIv6H/OoPDw311pNdJsMzxN43o28\nwEQeXMjjFYJ3oqZ2/V7XyMEUAMTDIx5YOlMWZCAtu7iQGdtOXJRCMQRRwA7t\nnGSXVz8DTOCvInatTP8BTbJ824cqIGPzROliB0bHvn+18t2jXWwA9xHTrauC\n2ctgWv8qOnNazGQjLLQJI0PDp6Tp8psYp68VOG3zral8WXBbtsFydRbMK/bx\naZNWN1OQzS5qZJ1Mqhc1OnPkGeAsWRwU5vXDtUpwZ8XWpC+2vyKt+V1b5jnr\nzgQJUOQ2w8l2ZD2kGZyZJCYHQ+qD0xGDDT/fR9HFPMSM5OvvuRwJhoAcx+lG\nluCS2rrD8MmFxDCmO0bvnqIWhvXtAZUff/+kMmv4bcaRvrxaMzh8l3n8heyY\nWvLMY5U8nZLkI1+nEerYhuLWj7K1D5PgYnhsjrx/6fhBZEG2haAYPKoSzLda\nYDmIVG29VNiZd+MNkSUCgev4dkaIa/5JfqMjJKRT9kZWfCk5FfKElfIjPsct\nTUhcRCvNn55JmHQkezz9Gv+WxDjOz1OJQUJP+EY0sEw0Ei4o8RnAj8A8yHoh\nGX41\r\n=EmtV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/density":"12.0.0-canary.e38d7440f.0","@material/checkbox":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/typography":"12.0.0-canary.e38d7440f.0","@material/touch-target":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.e38d7440f.0_1624297268859_0.4269827844772933","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/chips","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3866a9e97e7d30451726d91ab4dca723bc950cb9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.75900a5a9.0.tgz","fileCount":160,"integrity":"sha512-OF0wUk01Dfak13pYlJ6d5aFTmPavZC3DXJhroUrVlJCF41vnWG9NKU+SKkZ4Gxt6PvBbB8l0DR/LZnxuCk7SvQ==","signatures":[{"sig":"MEUCIQCXhyrMHGDFfu7WrqZbVAorHEQ1eo2HkM8K2AnF43428wIgbbrQzZG5DYlsnNPNB+CMHL6zojxCwo70ViMzKg11y74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NxyCRA9TVsSAnZWagAADc0QAIhCH5741/WR9yNWNmXj\nFeraR/UhftYpB3mKcGOXUwg2R28cbp7zi+eObaYQWGrDCkOX//y9BjNJ0w79\ndBKyl5+t7aewMRqJCdfJdvsdINKG1H4jYf1EdUw9xktCZ2jfpJ26SYVTYxd0\nSaR1fxECEJvEsbwvND5iiusDI6u2eWVGtOJtqlalEW4MU8StIvJig2AMbioP\nbJ4j07/t6+bYJBjmLlC7yWMtCtgddPbI6qjR2QVEo/5tax/sSh+x9xFGxUAD\nzpnDjkiJlnc5IcgOfDQ2hflQwcJnezhNti8+JyiDMYD0sa9s0e9FfNYo+d/O\nhIzm3XjxTRl3hTTtFdEC22iUWzM5qwombq+KweekA0VS4SGudEydDvq4UIq6\nm9iAtX3QtNd3N6GNN9uyq4oDlyWp3M/6LJbiMLqnTozGg8hlZ35bb/oJxce8\nNNq4ZjfFAh5AGYWKwD40+4K0zcPXMAjZTLx2RjtcUEJcxbPM7SGp2lIAe/ek\nVkL+bwNIbZ2Xr1hX1B4aYUmcEtffWalYiyhG+S6mbcczC32ImuwJjhWd72Sm\nigEC8mLuqg0N6f+WeY3J6cfDPbLINyeS+L3L7eTeaeVPZ6J05oFMfkQotgJV\niujIjIgLN4hV/pJaQf5npH++SGAzJycLPpb8+iXppzCc+TaxmC0P/BX7V/mR\n8YYi\r\n=rCR4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/density":"12.0.0-canary.75900a5a9.0","@material/checkbox":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/typography":"12.0.0-canary.75900a5a9.0","@material/touch-target":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.75900a5a9.0_1624300657439_0.3365149676901964","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/chips","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f8ac1fbc6a45ce20105bafb83a1c6940c116d75","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.33e6f50e9.0.tgz","fileCount":160,"integrity":"sha512-Pfp6t67ko/FvHtQT3fUmIatWZNupStiZY/oaMnJo8M51OIs60HruUndJ7xA97pr13loLuNUDPdJed96FNp2D0w==","signatures":[{"sig":"MEUCIC9/YzStCcD3B034eWmHuDaK3MPSq+K9Ha4j9jbFXnqQAiEA657HIroPppGlU5tyYR/cdjfW3ERaRo8lH5qUDK+5KXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nx2CRA9TVsSAnZWagAAtu4P/2RD+7nkESjiAA7SzZm7\nwz+kAt9Ck7u8XYWf+hfUrxUQWu2RcnXLvIpqxDRfFkkpxa+0+IRWiPLxOyhK\n+bRiKTPsq9TNwJwihpYaR6wzGQf8cupV8VY5wvX3l+hcCQbI1txjUXhOQzOi\nGNtpRCfD6q4D41P5AqaR7wny67TZwco41BRCUltktvF2koPLjwP68vaPNMT/\nhdjE6S5q6zqot0PP++07RGIkdjOCE30wFnG60A37P9qo3pLfo1u7/KK70qvB\n5FoRiVyKyN25+W4KeyLfbgWYms5BcEgUH21dXocfcmbsm6doAfIoengVVpbA\n9dVKt2Q6bVJQSt5/4vEl/aJAuh+UKFML2H1H8IxtiGdUzW/qwhdCff+eQkB5\n6pRcdMmeYCSy5Lg9rJf/hXw4fHIRQqD2eyNbLpvMGIyEL/yM+YD8dGzvbZw7\nos7hrH6p74g2MQHm2YlOLYZjqhuL/y5uRz+07gpZdMGV72MUCDLzlMnRLL5A\neUozf56UYNlfh12TSq8ZSn5EqScnbITa7bkZewbMOSAvKP8sFdhHapyo8csH\nZqoAK9whBGxHMQJwDKpOWPtGVyTkKDfE7UmUzj8eYf4Heoi/EU+EcGFOimFg\nYbjjwyS/9v+f1UUR6dDp3gAy3uxveYWjpUfqh0wW7PvznaCISflrD5LItRax\nRaIj\r\n=WMcl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/density":"12.0.0-canary.33e6f50e9.0","@material/checkbox":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/typography":"12.0.0-canary.33e6f50e9.0","@material/touch-target":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.33e6f50e9.0_1624407158224_0.4306910990274313","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/chips","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8c685301d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd817126ac573231d6ab408875456389cc53f1fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8c685301d.0.tgz","fileCount":160,"integrity":"sha512-2ZzI1Z2nz1TLIRMKGHste0MzHBd7os9pPTNZ+XMl9BChe52tmI6ISIDgOl7mKOfPYD68E1ElEIS6QhmpIx6X5Q==","signatures":[{"sig":"MEUCIDXP+Cpm2C5/BQy+60yi4K9sjtnsFFcyFgGUV9N6iGg7AiEAxBxU7cwfAUI4k50sNjVgVVuuD6AYCP6tirQCTdIXzBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1608705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03yHCRA9TVsSAnZWagAAh18P/i3QQP6kYTZeTB1k9Lsm\nYsPipmvLtARFMBi0iCQG7LY/CtwkD3B8pczJ7PDVgkTYClE2QVKVriAJ7OkL\nVcjdjfUy7BQb/FEr+A7uPvbQas39olLr9tSEHYfmW/xPDF4/6ALvq4GS4ekR\nTrmZ+0tCryibZGWEgysQ4TvkFiWvdTegXEsyWIJ7PRsxFQ8kiDXfm0U0hZpo\nOXtm4QrO3zwBUNc5KDkohi6RjZlijj3E4XNz86yrxpJ0X03KDDz2rDeuRreO\n/bwFcV/MeB8NN8UF/zPjdv1inFOEplKz0ypWwoTpRcx8mDa6BayrhM3WAj3x\ng/8py/DK8NzNrq6GaFZQKP1CRnm4Gp5fh6r1itDlQ8mdeM8G9GKGj5VndIrP\npNN/qwyN+Ad3wCMTDuK7zK0hfSukL9N5TD+5bumrdZ844zXVPA5/ZBl1/jUf\ncsOwMOr1cX5a8/ph2owP6z8jYH4J5TCJZQBjeAKmQ4oKVM1hJsrVQIEiWLIZ\n83Q5VSxRuHyyFyHFRG5F4nMena5bGzfCH175dz91CAxiI2TgY3J/4tQK2hE9\nURaUARsrhSzx8F+OWD3CLG6dijHJFY+cpqvYGij06hR6nSh7R1Wrkxqatwyi\nvaOlx2x2Svx3H/v5yTO5oghNTrdAyFA8nagWLqKGqlKpCyXMLwSaA7JrfI+I\ntJx1\r\n=Wj5d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/density":"12.0.0-canary.8c685301d.0","@material/checkbox":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/typography":"12.0.0-canary.8c685301d.0","@material/touch-target":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8c685301d.0_1624472711036_0.5021749056676041","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/chips","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38582675d64102cfd3171029a372e33c966ecfd4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.8c7d994ae.0.tgz","fileCount":160,"integrity":"sha512-oHS8yIQ/QFKSAVe/sPrCzF2PjENdy4i7Ge/JfY0/4c10PX1SKerV+YI/csnchDHj5MfDYjQIYgxs/imAge6dkg==","signatures":[{"sig":"MEQCIHy/LUkTMlPDQZO3my6zdeuVlSMNUcL8ieAe3IRrAy9HAiAfnT0eW24djnXOLP2ONYu0Ds4CiSP4rc8uuK0hvTnyKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1608943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04s/CRA9TVsSAnZWagAAxvsP/3GPHQL7p7PjzFVJAbI3\nxW83k+jyBsb5ENaYcvBfmbS+uhyFT3VdS7pzkN/o+WvGj5AYqQVKjNwOcz22\niIpjJX+X2APG0f2tWJx8zq4NJsZBBoWzMS1R+dhco8oN43i1tDrkG+WvM4Y+\n+Hm7gYgcS6sSob/O7L01VMAiugQjTEJTUqvi7fhxpB4TrNZOrPNwhC50N4Fh\n4029NeQ0+8hYDbcRSas+WZKgBsbV+XS7R++Asc9jTuElG7EaFoHodOZQj7/t\njvmXU98EShZHBc5De0xHelfT3VCaabsUuby44aNRYsqFHFCpqEDs6KJ1TO9Z\nKJSa4ch6pR2eeM6wyiq1C+GFf1F3FUSHDs8Syk21am4mNHvDfYuZS88sGWcC\nkre+PBzlRV0/xwsjiMJNJ6sOLVVW68ZEN6hqxIQbA/vHT4XQFol2HVa8dEb6\nsx7azp8Sa+Mj2G8dMcPzHlnHU8AbJOqPyTbS/xUxzTAeQ07o5NBgVPggzCMm\nMG1I9SCAkiGcJl+b+u5QN87A41JImL37dBP5M6HyCzTltck8lVuQCrVo/+sB\nEbzOs88QulqGTNgYXdSr/kpo8aFuSEZgaS95oVuSHdq2obQl1LeJnWJhQPib\n4IJWOk4qI91WnPXSkVVQZchL3zf7QpiGdSid2KdbdIUIvEnbAymosna7gwnw\nbVYT\r\n=n1ug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/density":"12.0.0-canary.8c7d994ae.0","@material/checkbox":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/typography":"12.0.0-canary.8c7d994ae.0","@material/touch-target":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.8c7d994ae.0_1624476479387_0.3818331937071924","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/chips","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edda063439563f97b5431f7f6ec6af749b26b2f8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":160,"integrity":"sha512-/I+1I1CdUnzS4amRk65RfBLinKFYFvH//ZVqO7eL72+QxWxYf97ImxOR3fA7i5kbWThfEa2nkhjNgLz6xZMRVw==","signatures":[{"sig":"MEUCIFL+67iAMDv12qZnGBW/gQ6pAe28q/4JQqHF0CVgmacXAiEAvbhTD1aZ68yJ6lMoZ0OrU4VdJwuWbpFeY7f55B8bYAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1608943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+iCRA9TVsSAnZWagAAZB0P/ip6ImqpJt2xtMllUqeN\nP8+CFxUKpf5zY/TAWyYiduScDQhUVpw+G1GNZX3iMwW+2RPK++UFSo31ZwKi\nqRxT5PsY+J/ELbUgl0OhNoxqtz9PjJWnRYtDZk+OJ0dx3POJIcJGBTVXJNfD\nSV+LG47q9SMqZsiM9ymfT/HNdeX9Wd6AaPz3I11WsFGP93/tWokbUNPEH6RV\nl8A5gO00UKfvRqsjLbtsDacyoI8+Vwp7O6PEedXos1vYGe5+mssEKDdK5jg0\ntkguMJldTAXKmlCvKXKcBkZ2/pQwylw+ySggwQnPSQAT53M/P/I8HUlmOs6k\nKFNVX0J2QxUzOWU3jClU4SbOeBZVJ3RceJ+8MHp3MylvoDy15K2GxeETwwDF\nhEe607XX9L9j5+dtzMIWoOOEmN2K8dyPsVT9XmIQzYklY/WX7JdS7v5yaBDh\nopS7H7WKa3mvEpvvr5PW2JAd7L66l2Yvv8SW8DKkPI4PEXO5JJIDJF+aUKX2\n2o+6iRMZJemYls+CamhVjy+J1PyXAumfxEVVnZKqa/3r+FZwYij4NQL348gv\nJgaUBmd9VOqASb6cwtiTVdFvf271y+IFECTA10cLX4Hi5FrNlLazqivKrpgn\nW5sz3swLmI1r7z71sGKRlURjqMcwh7PMp4X7F6ETzcGK5pjvgr2JLVajNzq3\nxYr2\r\n=vmdp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/shape":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/density":"12.0.0-canary.4ccd39bdd.0","@material/checkbox":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/typography":"12.0.0-canary.4ccd39bdd.0","@material/touch-target":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.4ccd39bdd.0_1624551330191_0.6025407899217108","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/chips","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994009cb035a73c960b2de6acb5331f33825c9fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.17553e9f8.0.tgz","fileCount":160,"integrity":"sha512-TIZYKpxz7Xje1HBJ5K2lCFhEACt72Eh/PhclO6/h9gCQSFlr4tXILpUUdT8+71JZQCUL4hGLSEpzDmtakZ/bWg==","signatures":[{"sig":"MEQCICUA37L26dWanPeaT1hgWS/bvUCSyJexOtCuvNC1XPEHAiB+UHqWw8n67tnIz/kWK31lTZaLUZ1uKwTBmeAs1nRyLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1608943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lLUCRA9TVsSAnZWagAA+VoQAIhAX+89eRRZFHyOM/Pu\nn33qJYNhMawMrpSoYRzn/N1S12tqrINhgUCNvwaBRppOM6SCujzCTF2VcyTp\nK7D1ttS7Nmp/bkPJs8y5THvDvJbGo+w5NqxQKylgDtcMhp/5kxlwJqNKTazZ\nv8BzqnVwWA2iHa1/Ox/DhS4YPU9E1N+8RVJMYcNtpg93e0aWIUjUPfSkct/P\nyNL2oOXtI9hTYGqZi9kqRJcFny+fvS/Lox8jl8rNHikscxpB4hXoZk5I2JdX\ncaiZtx9XM+EcvFQ1iG6moRfFbh2p/Mu7Z7xpkzpxx81RNWD05ejNjbakpTMj\n6cqoWStIPl7NCCC+WIOWX7V/BOE0SdYAaNjlSaWA3QIqK7PyfB0zz44WghB6\nQQYnhAkxL+B/hR4tRQEmgm6/BhIqnsPk7RRUz9ZllO0HkXcoybWRPOymMIZZ\nx7mJ9zV5RK72OKhEQTDkTA/VjGIC11UFRYFTICoO/HU7xDWPlr7n3JwwJB1h\ny1+nT11tdSZLjXOhmZ5nCDgsGzybmN7AbqOa7WINBJynW4ftMNeTGudP3z2u\nE/s9RfcP4uqREELL4f/333QFeAi2897rc2n4E8U9hc0IWKNR9IKOf9LBWgff\n03w1APe1dwZFyNlYDICsmR8D4dJmBzk/n31JynfGRta7i8brYCCL4jB+gIU9\n5JLy\r\n=90BM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/density":"12.0.0-canary.17553e9f8.0","@material/checkbox":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/typography":"12.0.0-canary.17553e9f8.0","@material/touch-target":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.17553e9f8.0_1624920787842_0.5816016306528102","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/chips","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbf6ced20132ff8560984e5f8c8f6d27cd640ddc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.4c80072fd.0.tgz","fileCount":160,"integrity":"sha512-6dIQZgMfbG5m6wCPH26ixxX3TlRmyOzKlh0kI1XE/ieb1TTKNpqvq1Lvl6uPLwebYrMs4JDPv3EatV1wc7dYRA==","signatures":[{"sig":"MEUCIQCxQqnudqjESc5n7vOUQzFUm8QTuPmH7sDNTwWq5fIkKAIgMa49lDcXMcjf1h7n7vqp2uK/oEcMCEonJ0aRB/MaYLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1608943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22lVCRA9TVsSAnZWagAA4j8QAKR73/aepqPsUW9OzNg4\n5IQiSRh9adT7byw+hH2cAm8OHC+S9zGSrxv1FaslnPAEWma9GuLboophNQeD\n1xx6QyvCRIZ8s2mHgZA5BrjysFYMoYIP9/7xQqE6yKydagj4qvsPr+lIiOal\nEHu7WS+t0pdFoLycmL5HzkZm9Ay0Y+G5FLCvmrbxtytTDN0jB8NWxMF0mDqH\nWfp34UlvtO5JfMinrtmIGCWKv6DE0cZN3jZLuYr6bKJmK0VKd/6/bhfkKxE0\nDSkczV//LEZClUJlfK0YppQio9CADir/OwNNeUkTLDJFJ6nNRrzapBKQKei4\nY7HVg/VwZrQqfTKbvd+YEZNPHWgzRbjI5N4kXFfdhKQeZPQriFEjf1jtNPvP\n6QrtkSJ4WmCqsxUXaq46Q0gEcGu7+3z91vLbGTpMQ5adgPgeeDMTcs9CWByc\n/4B5E5K1T7VPWkvbQRAx4214cuD53/dGkCXhcBc3gX2gEcGF8FfF4FeqjJJm\n8AP4q9EnyWpEfMJUDz3ZcS+kP79T7rx1usYvMG5CiLf8WxNo8QDxFwsNZlU4\nF0d0xr1f98sFHCddmLiS1FS+0y6r4uu/pdDJQrQ1LMuJ4q+PMTjfXO+9Ar61\nA2rcuIox2AagVzZu1oYKA5EvKMPRjfFoTXOc3gideZ26AQq8jQbCvhZtVHkh\npTtN\r\n=aLV7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/shape":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/density":"12.0.0-canary.4c80072fd.0","@material/checkbox":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/typography":"12.0.0-canary.4c80072fd.0","@material/touch-target":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.4c80072fd.0_1624992085311_0.26750450077964705","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/chips","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.796811db7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98675cac0590d4da0004d0f054183cfdb5eef8d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.796811db7.0.tgz","fileCount":160,"integrity":"sha512-AqGF4MHrxI81/4Jxq0F+2J9X5K31UcplGQy55FoOe5aIpVglLYpLFK9JsY6nxxVoneJMU1ZzSP2wIdg0B4O2WQ==","signatures":[{"sig":"MEUCIAMSt9u+XsI8SrCpOWfQtUj+BW1ety+EK7AHjAwcY/A8AiEA0ykLmEqC9PAyobAjjTq4pVAFfVh3ZJjnaSfKfEk18qI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1608943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QaMCRA9TVsSAnZWagAA000P/RYOuhq8FR4Gm3jChCCd\noE1t3m7zdWEs5TYE050NNSOgzoN1ULKMVQdsMQY3y2+twGJKL+ZB0oAGrTQG\nlSXMLiCmIaw+h6WNq9uES7pr+Jtq+01fVtzgPmaXr97Z3+mlGKUNI5l4850L\njME36X7jwvc2m616g3Asf3yHswFSeQBOcUgD9tzTC2475DKvW1BaCoTKPmLK\nci4iGY8swBXlKcZuX/MZdTAfhT/Kaem+SBNAIMYh166K9tBQzCw1no+mOf4w\nZMXbDLwVh+J7lfe4qWqp1YAvGZncbFcxfTvAlnhI5dg8Kn8WrROPMXRq3lY/\nCbM33+ocBY4+Il5kDymUp73EbkyAaEkdLAoS/KSozpzv+Ox5zUU58gajwiyS\n7ghRcdq921W4js8ADlnQkA6T0Gw+qV178N283MmVvsXhht3RD1KUT1vxqcU6\n2Ma8BOXyBtSTnGcpP6OQkzXK7g+gMi1/HQGmA8ehzFgqniqpRjSluC3sRdLq\nUefEFsIjq3FkF3lNUdmxQW70CE51YUf9PcuWgJnQsvxNLVp68YaYbpkUsSti\n7b5Wen2UuEM3qO/pcU+l2lWXBrM8CpmCSHvTJaIw7n/5yVfSIw4CTOENKz3H\nY6OLzsQ9ikcVxgQsdtyK/Pk1wP22GldK4MNRNTaIonwW0TOIVD+YBsH/Vt6v\nG5it\r\n=M+ib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/density":"12.0.0-canary.796811db7.0","@material/checkbox":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/typography":"12.0.0-canary.796811db7.0","@material/touch-target":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.796811db7.0_1625097867423_0.6630746658018141","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/chips","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69bdf3809504ed681c7f693d9509aaba6ec05d59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.70e1efdca.0.tgz","fileCount":160,"integrity":"sha512-9CDKJHGuSjxwdm7ueoqmqbHJZmLuEYKIqMqh/KS8jAmHtZUucF0QBgZEIZuUh99Bapfl743dpmRRt8q6OZVlMA==","signatures":[{"sig":"MEQCIA4t3yuoMZRIyS0Ywh85gyWNvVoBjk7G9Be892+HCrF3AiASGccL5sB9CH4qPvCzwXvEPH7fIw0t/NHPGJISa07aXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1608943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fY+CRA9TVsSAnZWagAAnrUP/jbibmF6UnEY2AIei3wf\n7RHOSwa4wNcRtKMdktHIAMpK267IM1W+fgwbi4fIT7MYS191oiiC7uti63mK\nByGpBewV4y+KRZOg/LxcwN7SgPRfhUTy3tAKMTBehQx6ADRUjjcfFUSDXJBf\nue76avcaxVNERSerSPo9mSvu7nzVXOMNcQttDz2zaJa9aihCrTSok5yzeo5R\now8oxfmCa222NSBDU5SlDYLPhANPq//RinuSI2L+Gi8GRStOGWjXnngHBWtY\ntqpRnFok5UHXs5CJ9jLhBDrRX+4PcSGrWgK4wu/HATHTjMO4ngKLuDAK1zfY\n14/decHpWDtqui5ZI61GXF4GJ1V8RdhCMrsPHg/Ab3KW1Yr3zi8Z2GYpNKuP\n5yyqUf3fOKi0B4sfZt881tw6V2zG+0sE3AQQrF/aQtIOhzWj2dGzNsyIoJWP\nX8JrF32E1EJ6J2qBEbdZMVa6pe7GapGDdT3ZUmGs4GTUdPsAO/zk3je9ywTL\n1TbwqRz18g0PVg6PJZBO3h1aTS0k+t52wbw+2dwBOP4xRObk0jPgoYclaSc6\nFPxATv29eeOeTTGoboihUMj/Zs3h6xZ3qvzexUpvAd789nYHqx01MjKO87Iy\nJ7ccVXMRVSJVjCEUPGtUgEgWd+/hORxXwq2MsfO24u3cRKQlJFScNcUgXzWk\nP3Yn\r\n=MrN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/density":"12.0.0-canary.70e1efdca.0","@material/checkbox":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/typography":"12.0.0-canary.70e1efdca.0","@material/touch-target":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.70e1efdca.0_1625159230223_0.9984960208257911","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/chips","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.435866d32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daf31215345b8c859836ae2c4bfe4ba54e4a5205","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.435866d32.0.tgz","fileCount":160,"integrity":"sha512-pJpiJN/6Msbs1VSo53QQrA9UPjXI630nuNFtz4ynEp6B4tqMKwlSY+RTtXZM/fxW8X/hEvkfBqe8vDJ1pkqtQg==","signatures":[{"sig":"MEUCICWSel7x7dGWtId20wCXGqo5zz+qusYc3QB7vWnwoKOHAiEAjzn5QPE0HiElcqGXxGsfluPH8ExpCnBUjUVitGmD3ow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1608943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31k8CRA9TVsSAnZWagAApfIQAInjiXVS8/WfBqKJvjXX\nc/hbbRj/qZhp8zWyxBCOcMHMKkGDBm6gtGmV29HHNi6TjeW93zzYhWTeVIgZ\nuY2et1juN4KHAf6KMAUkdtjwbiKGS5JZ4k/ZRwAVQV5JdN1qBVvC1aNqVKE5\nqZf7fcGjAr8ixwVrUEeJMq/EiZ7K5VrbRjuL8rikg0bMn+qXuGGvjLijY6F8\n9+/B2CpsnXTh+sK9FaKkABYkRopmAqogNfLDyVenNkMxVqorx6tZ++gcrXoD\nUzgY/gKbiYn5aXoINNr9QIU9SpFu2zX5qkyrkhee/atKhrANuY4P6iJF4d8/\nsgSKb8ndyifuYIhR7O4C4pQPzsr0hIhZYUWJRTfhQfar4ozOfHFD9I+LRGUe\nCkavpXpFXCsQOih7HuTH+ktwAxdc/X2sykt78k/1S0Kuw+SSYEteBEq+fzg/\nWy9ZzB5xni8CceMGXks3/3KrDpSEoedA7xfUhWG49vBTyy5lwAOxG/wPmpaI\nKjNgXcKv8mUM5ZgQ3ILiYOLri2rybkQotlgPdF1uHH4KMFFdFZNafYksBXMq\nYe02kT9dkTwlTiWe6So2QPNzAOCnpx1M9oSluH+TDY560stXaVKIrSSG6nLr\n99BeZcKePZHV8JslNET4uMuRaIWOQ4M5n7OQpEMeh5a11tYRbCsbEjxvzj3s\nsGRQ\r\n=J3MN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/density":"12.0.0-canary.435866d32.0","@material/checkbox":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/typography":"12.0.0-canary.435866d32.0","@material/touch-target":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.435866d32.0_1625250107548_0.24204928233426037","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/chips","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6de8994811916782dc73f07ac40324297bc1445","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":160,"integrity":"sha512-tHgD4d+aGSfuuq57F9llM8oasIzbF+/8AwA+c1Ibh4fRH25J55piLI0Rkn4L74oDxEFCT1D11GD0MJzJwaShhw==","signatures":[{"sig":"MEUCIFgfflAIChVAMsGkovHysQrlHGhVdFhCKApL5Vu4tpmQAiEAmmfZ9NoV3qBwoXmCaymSLgjpv/0Hugo/aiWh6/WqZsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1609028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36inCRA9TVsSAnZWagAAhw4QAIwgn882gsv/Ct64ZwM+\npsrpVR822ZMF69GQVv3cX6gvFNmjw8b0lXVWiEsqNWJejUlz1Y+/Lzk5WxEM\nMjBZrtTFJZw8d8jsMXXtbAxGkoi8c5vj8Wy8yvy4UeJC/rf/ZNLY0EvMj4Gk\nkr//veUqxgvHgt+03v1rBIPUYaI6DFrl9Kyg8AJRAXBlRwc5yMPxDW8Qjl1W\nDFzSLSzstHYPWg5FLE5vxmMvft/xAGr0igq0b4Oi+oA52HCAkL83dIupB+Mh\nnIsa6azieqpqqwXE08ioBavFDmbQ5tRPHEG/j1T+EHl7SG8zAl27zsUEiXRn\nrQh3CdOdLdnOS27V+Ldg2vU51NodmhAutVzyX4BRm4oDfm91CfhbHM8GrPiu\ndTYPBKO+3ovQ8aioxQ5HlUQ6TxihVub5HO8E8FjeKEP6JHufk1Fq9lyLjJAk\n6wtvWnGphe4k6/jqT8oEVlu5JSpPIMph0K35rg5k+oe9QU245VmWyGwPg16T\nHE7RKs1x4W+ZG2vgDvdCAeJMD4ukuwNwbnV9RTZqRG/SkT1bLf1RY8EcR3+w\ndepKNK8WqIlwApH0bRCybi7/7tmicHwqsB7BAXB7Kg9gRr5TxzVa90ngD4hH\nDomaUco8J5t2arLWAz75cPINNrKEVAoQX5why/cdUxYAjOVocK6dawr+apOF\nPixd\r\n=aqtN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/shape":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/density":"12.0.0-canary.d0f9f3f2e.0","@material/checkbox":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/typography":"12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.d0f9f3f2e.0_1625270438518_0.15892860966366307","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/chips","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.adeac0549.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"705375944c4132fe5fb6a5c064a4b7a648a0eab2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.adeac0549.0.tgz","fileCount":160,"integrity":"sha512-46iYuMcd7HNjw806aD1H7bkT5KMrRX+3i9XqApXB032svm4/bK742i5rjyHAmFXUoRLY7uh2bAhC8jEVVMg/pw==","signatures":[{"sig":"MEUCIGv4q5Ufy2zfd6t4N2SQdngXsm6h30mv6luIXjVeFAkyAiEAvqwrAPk+G9CB4PwJ8V9qYGzAmtR+VIMhKA/c1TP7ZLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1609028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xU/CRA9TVsSAnZWagAAankQAIFQelddQc1K9sEZp7Uu\nMO0TZNHp6YZW0Fu2KmyuzIy8XAAZAaG7OOM7Cl5uwHHSGefT0awQb2g9Un/w\nAsrR+xkG/SgPr9Q3sxyt8sjFjDyRcd4K7VZ17Ma8PPotbrzcNyR2VWO4WXVf\nnNQUuYXKoKM50MzeM0nLEKqnWe6WjFp3pbiObM8avpbaUzpvnTJiK/l91ctD\nXS+mXiihGz5PAKpBj/dNFxe86RzqCOKJvl+vdBJrYAY74B175B7L/RzgqrrR\nMYo218CCiLl3uOjsisub0uHxQRWb/PYAf0Epeg8pP82QslJCEAsaMfTtDp88\nQYoWpoMuW7ifYtdDH/DDyon73pog4aJ77hFgyWs7NRx5wWKjH+80EfEzgW0j\nsNtUJcBpPAv0dcivXXMV8+nvot6BvX+og/9F5zHMjzgcV1ff5GyCFKebQcVe\nHnSEew82JKFmsmH22EwyylhbKBNBwF0Es8MZVwRd4/AxBgFskJMCvgaf0750\n/L1iPOraI2EliLMy4k2x7gOKdyS+JLUKm2vFfyU6oWIZXdUFfCoK1LFrzK8u\ngWjnLxkzUCwyf1jPo/q3Lr7IiSGPMShAV1u69ngLLrf1XMz35V6I9mGLmnhk\nQUZB1f9sfguKMoFML3+6M6rq9FqgyK4FbEo18/YOZnl+XvBmZc/43RkTgm2e\n4tJn\r\n=nPg9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/shape":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/density":"12.0.0-canary.adeac0549.0","@material/checkbox":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/typography":"12.0.0-canary.adeac0549.0","@material/touch-target":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.adeac0549.0_1625756990659_0.40666120557569485","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/chips","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.068fd5028.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92f1f6fa3aef8906a34b3fe9e3f351861d0ab6df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.068fd5028.0.tgz","fileCount":160,"integrity":"sha512-eRx+eHiND3CLYe+kAyY08sLk4MYO3DU8ACxzkwwl3LUmRdp57PR98qWn2mzLpoHGyyDfDlU1Yh3HKDeZwAaxHg==","signatures":[{"sig":"MEYCIQDylUjtwScjsVoLAAX0REXWsAEV6LEDfuYUm6Ox6A/6vgIhALww0BH74Gzu1RR1kgQvWuLYDXVO33EZw0Unr/UPDHsi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1609028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50wyCRA9TVsSAnZWagAAm5AP/jlwYjE3DuwdGJ0TYz87\nzvCWEjQW0fs86+/4FrJT/Zvq7u+nM0RCaK83kMWXD7/bXTNcOntTZZsT6KQK\nuvGuKlVx+mb+v5iJMZWo6xe4bOjvTLrbuRj1J7U82flG/TWKQl/+WIa6RKv5\ns6mF5bSPXy18XehLZ9iLpb8FWGlrJ9u0S6w+mT5sDNjdkZGZbWzcqqOC0bJ/\nYoFP6a5KatlbqVyEwQMqX5l7OQnlH8EH4tvR7doDNN6F/3ITVRm14Ok7z3WY\nTep8FSrHW/qorC9+9OFrktzxdM1ZIRZq35/y5B23YSujkovlb74DpkstEGgz\nuf/QDXWap7bLhLLnhSdB/4uN8Ga4FnHaZXtAKsUdzXfDbT3VyQmxjjRkPfHo\nOF5/CMeY2yPzRjWF4fNmPKI4ZXHwEEe1HCg/HsgaUpzeiEbK3P7QL+kXPCZC\nbjHzx9CqusQ4UBw6apE5tMFz3hWTUoaqq2k0VNLrwL0ZxP9F95+IhU71MlgV\nk7/EwGzPDD5DyECzHaOELeHJgTd1SzTsL8+I2sLCUJ55xePwSfFyiSecquTo\nhHeoZF4YX9in+8eDLokDSQuVoDV/u4gC8xqH6S6LisIMtnQcMksCymL/ZQx8\ngTtd0pMmric2HNQJPifnnbeaYSDbjdqPOhitvpF4Xi6UI35kdlGEnHv1mtzr\nGj1w\r\n=5pfr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/shape":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/density":"12.0.0-canary.068fd5028.0","@material/checkbox":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/typography":"12.0.0-canary.068fd5028.0","@material/touch-target":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.068fd5028.0_1625771057594_0.032176003530355546","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/chips","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf9cc9febfe7a2c4fc47b6cda7736fea905dd4f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.5dfec7a14.0.tgz","fileCount":160,"integrity":"sha512-RH/rLWJ630I6EFXI5PFDxbWZrifcfPGasUGzGTIci3iZzGuONn7cjrQiOaY001d2JA3h360oTlz0S5XBJ8Ljew==","signatures":[{"sig":"MEUCIG96e+NmdPzOB/drXr8VPNH9yDeoEk+E3bk/wSNPbFSnAiEAu9axvDt0qJH1tqaJ6hc4yzoR4lRaQOvOb28JN/JjWgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KB6CRA9TVsSAnZWagAAyUgP/0TzVenxCd+IW4V2AKC5\n7BUcl9pcwmzNvi29lWtOT/3rq7Eo8yqRx2cCnUscEUXz9yP2FkFjBXVQu3aT\no6VjR0zV1/pQwh+nnRoQHuMpM/uQP7bND+qco9Ijk1XHeTgvnRIeBPAXtqFG\nTFrk0yJEUm7lIXIDuYom7OdqqD9VIZOB/qu0mavH5JZdBrEP6UIq4o84aylL\nyXtSIQKtsVmT6mhv8caBlhrxTgaM25QXrgCk0UrDZUpqmXsdtwv6niw4j8Lu\nsTnaM8yiSO92/+vh9qDkfR928QOQURiupIIRb6LY6sqsAHPZ6VXzVGTavMNt\nUNI2GST178b7OpBfWT7XVVNE/8DbcmPQUCHIeI+EXc4J0lJOLI5JrDMDfaiY\nMYXgZmcwOOAHMFIQauIhjtFao4VYk44jaUaLx/tTlp0ZroqwuickRCDNnIaS\nEusLcWms9TzL/hDmJPF7on5UW4MO97J9+6dc8zDJfpRC/XB5iKXA5R+E/ly1\nDP9l+xuW9iUMkkuyBNXpBPkEJn1XhKuSQTS3bu1gVRJpRu++HAV5IDrR2uRx\n/c8yjYULK/gSn250SAKh+3+M0GVgfxrO2rdsdGi6sY6Q2XFoe6Q0nCM+sGzu\ngbzAJDfWhcggHo3riMMkvSBq3QKbXQHVgTagOlvDNZ5NkW6nBMoXU7Y5hKu5\nZs1M\r\n=1mYv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/density":"12.0.0-canary.5dfec7a14.0","@material/checkbox":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/typography":"12.0.0-canary.5dfec7a14.0","@material/touch-target":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.5dfec7a14.0_1626120314373_0.4651333508693909","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/chips","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.07a73750c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecd1f4bd9070da3f8a17304fa5b547f194424be2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.07a73750c.0.tgz","fileCount":160,"integrity":"sha512-E+xJ1DQEyAVdmWaKiU5DWfcR4LIYRoSlnSV9UXOzpkv9Sh1fsiPzeE9D6tDoGMqYDq/aQTEmVcpnyCglhEJuTQ==","signatures":[{"sig":"MEQCIEncJOPrplfgqkOLAyJiuV4xc28AWqrwhKdIIOfEHdJ+AiBx6z/q9SpV8Ny7ulTdZ9k/SrgJF7ydb74kMQIUYu/YyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KVeCRA9TVsSAnZWagAAFnIP/ROnruyTAsGlbP+gfghS\nlu2bYd9Y7JYDjxUqMbjl+w4CXlbGEAckbqCY8Bk4WBVJ4uPiKz0DYTI+785G\npy+NAPh9oKKSoaUPLEHQvCb9elP41C1NqMJ0R42TeZS/0utKwYLuhwRxP0ZR\nE+gRAoAyTwujx4JRodhIc2l2FgPFUrCie04zIJx/Eq5DSJDM4VdHVIIvnW6P\n2oTDnJ4nW7ythM1EdyMLvu+foF/pHYkAp1XSSU0JkslJcPqW17QCE4A/KLo1\ngUVZPd3lw59XSCyQqdBouCei1XIi2rEVQqYyNrBXSSLy5xR3Ct/xPGA3sBp3\npm3haExdVCKUfpHqixtYHQMA3d1syEeCU8vpHhiey4qIk2NgFvnNcSmeVBUA\n7DFQLN+B3IeeP1vFn4PtKw6PwmovZp9vw/5108gCn2cy/4xSNlRku+ftfkpJ\n44KEToRxHGZNfl6rjXaj6qbhFHk2JfULsod7HCNt2d5qTcMJF90xBJnl0Ux9\nBvPMcvHtlGNPX1Qzc5ZD+Wdr+1gO3ALM70Ond0KGWGO1+f6x6DjND+x2CJSP\nkS4zhWvl5/Fvys9co1sjqB87HMYCrk4j4Iy8Sn94IRh9S66XLD7fgkjF3UUe\nJHBJOfuqqaVKMKpWiRil7vdfknZyacaVCoFhkYV1yyyQz6HV/wXmiUmmM2Pj\nhmZE\r\n=lTQJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/density":"12.0.0-canary.07a73750c.0","@material/checkbox":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/typography":"12.0.0-canary.07a73750c.0","@material/touch-target":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.07a73750c.0_1626121566325_0.27402227352514674","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/chips","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6211e7b8abe75326c02e4fc8aec4574fa57749d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":160,"integrity":"sha512-+D9QThU6p37RDxwxOt84cd4S0lZOL8qMFmMA+mm4L0JPlqqQwQQol5zrwpG8wwVR0YHdWToASCB+UGJF3Ainrw==","signatures":[{"sig":"MEQCIChECYBeUDTpo/7THzaMPmXs5bJv+psh5NEO96TgDu3rAiBskYPugJrfvQxXnpxJm96iOFR/7RbEtOsXkIwK5sgysg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PG/CRA9TVsSAnZWagAAKbwP/RCmqwXUErg/uMIomVFD\n4sfM45IMjE9Km1SLrm/B7i8eFezTU+TgytYMrvurYCc/C37+UVgPHqIBX3HY\n8ClG8DfP+47JATWbGTlyXIKBsGRLJ3XfAbb3zPlTe/ZHKIxO9+tkNpiz31wE\nP0St3b5902Yu3uF49sO4NdaIxJeJoukJ0yk37UsB0/oUziQ4SZKbqixtD8c9\nJya0rspfcRA9m4ReURi9IMEAN+oguUO/+rQZ3dCvFTni1vJ4/Q53o0cE9Pcv\n1pIeUQJ8UZV7WRAOmJ4NfpIRhezpthEbKBNqgzUs5iwRpdHRrAn33DD+zlSF\nIhKn60vYwOlyFWa0gNoNsKT7yaMtqJrT0aoy8SwHODbQ8Y0asCLn4AdAuA8p\n42naaAYNCS6gyLFFil/nUaeZIt8w/bQBRd4tmXORsceQxYVjcjUBneSGSOhN\nDvhd+L6dpqubIsen6iKv1GzAJtU0hVQYCrxg0iYGxPQYW3tgisBFYNgsvMse\nUq41lQIVQjE+tKsjNkVuA83Q+HFqpqGzaKrJxGOLuVqf428AXMR+Lb/ljuRc\nUglXMeZLAxxgtbdA0YJcxSskBhFJoc5CV4jkbup8RrCx1BolVwKhfFHVQJHC\nKXSlfz+/fstJzqFqnYtkoXtQQDwMlxPO8Kp5exVANrL9n3g3Glk88dVYi0sk\n9Sz9\r\n=3pbn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/density":"12.0.0-canary.3e4c6dca1.0","@material/checkbox":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/typography":"12.0.0-canary.3e4c6dca1.0","@material/touch-target":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.3e4c6dca1.0_1626141118953_0.23716740294120298","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/chips","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c28bbb252eb1c5425322da96e5b3bbc4fcbb8e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.ea77795b1.0.tgz","fileCount":160,"integrity":"sha512-1zhjBurzivJzOqYN66fPcAuV7m0JlKoDcmHxVRXCqCpOEq60+mZedU0mWeXNXA7V9/g4a85DEY5uy+c/qu7fxg==","signatures":[{"sig":"MEUCIQDycEYX5+Ifo44hBSvPMkztoYBEtVUXMW5gU249l6Dg9gIgL+R9LFadm3x/DCXQKOPfUw+igNrxlTp4Wkj1UvpUnEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bYmCRA9TVsSAnZWagAAR2UP/1OobgfCeS+f9FDcd6IL\nCRZ4nX0ySv3BZVlziZ5eVPkTVVb4DO5f2Q/fhxEjcxswWvykBh5nSMRvLOn4\nbr66aqG3lBGtgIFBFyYcKN+GnXGGfb1UYn1PF/5SfUGOh4n4mi4OQlk1jntv\nZABpmp+gB2Nwt/QJfkk8hWhTNpVBSpCfyQok9/Gl82gZSVPLYoSRdiPax5qt\nd+n0yHM9QTP1eTmFqcC8/lMcAMjjy9KAZUDh5Rk+e2KyGmHBDY1hXqTJFuv8\n5ahcklbI9eStfm3P1GzBaTZEl7YVJwQEwsFEHHxma/Db0CgVkV07QiAEw1M5\nXkKufq8tufDTES9S6zbo9ytTnSOoCWIFxpKazWErL2pYU244P0wjSqi5z9SF\nUyoqYeI2YJZcuTUMNpZ/UHC0CllovLUgAXvTameulit1tYg/XzGHoB6As3A4\n7EbGkr6O5eFVl4fPsOVUCpBYmY4WbG+m5TQ/cbi8NTXFURuBWe4Zu8cCcUk0\n8HUddELMmaQMXgwlITFSd+SroOw7PYKR908T4pA+6V5ofAZh4Bh45s3FZHpG\n8UfTNsERUny/GdlcmJMJmmvLlPKvciQysXVXHhtB3w+DXCCjL1ESyK0r9NL1\nUDwl9JTSY09HKg3/m1FjXnbYy9+eJccQGCjodQQfQc/sJb6yxVsNzCH8SXjc\nI/F7\r\n=sY6F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/shape":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/density":"12.0.0-canary.ea77795b1.0","@material/checkbox":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/typography":"12.0.0-canary.ea77795b1.0","@material/touch-target":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.ea77795b1.0_1626191397988_0.7182528882870902","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/chips","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.15a179fad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5f0dd2ee045fa032fd40565e54afbb404d93c8f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.15a179fad.0.tgz","fileCount":160,"integrity":"sha512-8XCEf1pTzppOHMFrLkZ6eEX0JW0DnJLG7WISODu1viRM4Bc99DSDYhxnvgBgmJcqcraqe3LzaxXp6mU1SXGp7g==","signatures":[{"sig":"MEQCIDy5HoU+bN4xspzKYnPuvYpQ+5LIQ33GX+vbLA5KzxQhAiBYf2ON0x4pe0sVRmVDrwyj8fijxVj0do4LymGeX9BNmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7db9CRA9TVsSAnZWagAAdT8P+QA0heAY+H3ePV0XmHG2\nqPIE85XbL2gknOj5bH+eJQvD34nfZMIH0G6W2HNNkv9PZCWPfwN62Y7IB4TQ\nvFpdbaTGBovgYcbqfvmvMEtSOUWGuMp1WQ44LXPPIMfQ7a1IpuQPvHxqhdkj\neN2k6zG3S0qSo2kkBBlni4NGGgpIcwZ9FjgwCo0m5/V+Lo8F8CQqgPCEd8Qg\ndCPwzw2mokx/AKG5sf7c9931WKHo6kA9L6jkgdN6vDqXx9jMY/gbTKS89KqW\nICQN8ZteKZOyVnmzKlQb7Bjm6JOTkPykhqbmg9SKOhzUlHApsKI8/ZMyWMwR\nF5trI2yX/bC8GW8OYNdSCmZ06El+b4HhK4dNmXa9tSEhk0iw99dw7kgkZCEV\nC0V0Zx8O81mw/hemovEnhOrGqYQuXdYn4ecQa+im79hnusEAYVsRw9wdWufu\nuNKL4jJRdpdeF+qM9cM2gkLqkLwhxSJt5qcekxxr8hggN0622mNkX49Cl78M\nNFgaOpO3CEYzK5xoYZnBpkAvqGaI3WMttkDzcFa4BWK27Jdd5hrUkl12P1bJ\ntcgfD35j+3ukaTstqerjHzebiZKJYf6ZV3J6UuSAzvh3ga+0gyz0gjIz1vzF\nM9mTcWkTm6yOlRKsK6L5DViQ+DqEzaobsST2sHHgReGQ1NVIgJKVCjKGPOyQ\nBrkw\r\n=YVNE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/density":"12.0.0-canary.15a179fad.0","@material/checkbox":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/typography":"12.0.0-canary.15a179fad.0","@material/touch-target":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.15a179fad.0_1626199805106_0.7095802695670173","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/chips","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d418857c5f7a8439648a2362dba316c98864ef2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.c73142a1b.0.tgz","fileCount":160,"integrity":"sha512-Nm2SxImNWXXy61bcnaZ+iD/9Y6Qw37oAyP1wXMUaR4xiVtvjgLP6BU6VYA9ybJE1UVBZnYGcc/q1H7Jk5EiqPg==","signatures":[{"sig":"MEYCIQDaIo8Xivp0x/Vj1Xo593/gasGpGPFIvRFNy7BRCvrogQIhAI+fvyFra83u0HdQj6UbW1kxkgoqfr446Bbs8g8FDWMK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8lCRA9TVsSAnZWagAAdIgQAIJePjmwBhknOOPR+m53\n599BM0SZFawHQKNlqnUMxYu23yuYQdlkKdVhnUUn74p86eFgCtjCBqB35DCd\n7cvxBTxRFM01S/64fJCCnbAMjbOnFbDYPFJNxSc0LESxgbHW2uhVMhEfo71+\nRMzGLEDrA/TZcNIwEZ/L3weWxgFe3WF3M44PeLQSzwipFe/DXN+dbaFJSVeU\nrQ95vYWSAk4auMDbs1nfVTSJXu+p0slFFhVPP2QH1uAZxRtdXIk59J17icWn\nWc8zVv0u06woik2dWw97vPWL6uE1qcHbIQcc18f+3OMmckBTXaxUqz+HW+OK\nxc+oJ1bqP7kxToBNDlFoY4jlwZOWDNIRdUTFhHHod0MvkFUQbxs90ZU6/J1v\nIMOr5nuAJFrM9sYqqYQtBQlsexiJgTsLHSuIPwAvbnL6EMQBZl9YSP+u7vde\nnUUCERArPpOnywVHJjrx7oVMbSkc7lqIJlXrDNqc8jbh1Hkm0L3etx/trD97\n68xepO5AMvlr+2PB+U4NIizgY2w4OfiBQ+2HwmyM9Gk4wgRdkjg0PFRAEcHj\ndaoykics4V49xa5KTAror72dzU7aCf6ZiZ7U/UplKyUd2o/8e6ZaSahNv1Y0\nWfz5/n8hmaPfZgp5uXC5MDB6agGghh0jhObiojvJYumJjlX8QprFA7O4L3wk\nq3GI\r\n=Tvjp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/density":"12.0.0-canary.c73142a1b.0","@material/checkbox":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/typography":"12.0.0-canary.c73142a1b.0","@material/touch-target":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.c73142a1b.0_1626201892577_0.37104629066872286","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/chips","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.d923db73a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b75c11f6a0a04fd8e69f1757ad1e9159c4015bc6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.d923db73a.0.tgz","fileCount":160,"integrity":"sha512-dd6ehcKQ7lluG+E8lf0j77fhg2x5buwip1mMAqSrwJ6Gw18TWstlFCYqqHXb2mw+qq1sZsLpMSM/HPgZZRQfPw==","signatures":[{"sig":"MEUCIQCl6vEa3fC2+zGF/XpfAyKGxRY8YyoIHxVdiQ8rU2bh5gIgeMeKbU/qyCHHGX+MI4bv638852kDJQ6PTl0JT6CCgTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2HCRA9TVsSAnZWagAAI+cQAJbfM2UxDt+/H51Pidov\n4F9FiORFq1TM899HRpqEfozc26lfsyfvLzEzQpYr+xG1AefLM9jJP0JqvStS\nEW5hPoZyfMD5ftXVHV+LBm4oiB+I6x1IKkbYyEV2/LhucdyM2tTfNePDbZ/+\nO3wFAurGRRmZ0coEkGCgrtNRenMxW5dj0xAhmYgsZhQv7qJluXEXYbTW34f9\nCmmw34BZWfcZ1gJTO6JBv7bktAnjM/LIwoS5dcMuAJCk036eg1KQTfZ85jRf\n17F47aNRZChLZlFV//Z1bwFevurdRD2PQ4IP9z/6u+2oNt0a7Bpy8mFXlv4g\n9XfCW9kbXJ1DGBXjcJ5LOZXk59c/ll/6DpnXE23RJEbUXrmeZAYRqDLe0TH1\nmExu3aKhHaBesjmcdWdYOoK2nOtVCZiUWU7xkArEdvVK+vgD9XAo48vWIsOU\njiGmYATCQGznrcXWRqy41x9CQNsvaeP2Av8KxBe0nMljJw50n+kqII5Sr7nu\nk8d1ZSkDKwOLFCZ73Y8gJPisxsckA+soyNUdHb6vI2WAcBL2UYUFZmPiBUdu\n54Y+ShCgtWDLKEcs41KbBVdaQy3SPh/DdsFfE0VqJonF97i2pgcA8ZEtsd3Z\n6YPk+jB3bxUQ41gMVw651/8XG3+pwHdbsk/8Dj3oEGEXoOTh5CRcVY/HRh0w\ntWfb\r\n=vyJu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/density":"12.0.0-canary.d923db73a.0","@material/checkbox":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/typography":"12.0.0-canary.d923db73a.0","@material/touch-target":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.d923db73a.0_1626209671386_0.2806456596301734","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/chips","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41bb5d5ead379b659ab70836578c155719461d10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.22d29cbb4.0.tgz","fileCount":160,"integrity":"sha512-mk4c7PbLCLF+RUw35PbQmr9JWd/Bc/4XrEOfhsF1ojQwEsoTvwyTT6XAJe/wTZh6laQCQJuHaKXjlJLjG413Wg==","signatures":[{"sig":"MEUCIQD5aPEubTsWAZOQcKHqw2hT2iiWhMKfN1/Gg3CUadeqnwIgboAraWECZSPpzUisWGy/p5S/1Tvt6EVn75lLLGUhKnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hjfCRA9TVsSAnZWagAAXEwP/0ELG73JNY39d509klPm\noLAjjJrcKyPmoYbEEPwcKOvqxlVoon517b0KevhywqlJZCMZwdiMbYYCR98U\nOieaYNG9NBKhP//DDiiNaYGhid5kAwKoXy6BJC2kCaqqG+JFsWePbWhuei+K\nbMqqeWXV+klcnO1AWmvWrLCCrD2nw3gTcQeB76Cg2MgLczrMH1oNPxH4VhCK\n+13WTnd2hYonSUXlt9zTqfdDEiIAkUIHJ1WH0g0AvwnKBd8n2/RHaodw+bHC\nEgM/5JClJCayyyvWT26KVb3MJ6oZdBTScfvBiwd2Wr2zLhVtsgTr3nUKM8c5\nl1wvtXnFGc7rPLG7YL7CU7NCb46fOhuva8RK2G/wcbnBmp7dqh/T/kf3v9+g\nQr0ryI0W1cyy/v705OKDqlsiNrWTHyXFdUk3v19VSQGItyrornxte3rQav9Y\n8HQ2dotluvgt9nLaAladotLdLqIxDwd07+7VPyN2FBr5MmWgr3OKHMrEVEvI\nxcpZHP5EApZK8FJA1Pm4kPTEk93sdGqjeHNHe2JpfJSaswBc62ge7T38Tbrx\nBGm5qUilNGygSvRdW+610cHZlpB7ygjU29mifZFPEhNFrBPFprZhDzH6V1NE\nwRDI0BxXqARpq+WZuLK/gF9anxGtJ+5af/8ugK4x86kaEqxduSOmd02GAPt9\nrQYx\r\n=cne7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/shape":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/density":"12.0.0-canary.22d29cbb4.0","@material/checkbox":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/typography":"12.0.0-canary.22d29cbb4.0","@material/touch-target":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.22d29cbb4.0_1626216671088_0.375364521443031","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/chips","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.2749604bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95de58fa958ab132b3bc38bf6e0551b566ad511f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.2749604bc.0.tgz","fileCount":160,"integrity":"sha512-YETo+EKnQtFUMROCV1tVtsHSTOCANs1EVjIVXdwmqOTVZph68QuKJQC+eGP/Mz61xGnQ067SYJSBcXm0RwXjGg==","signatures":[{"sig":"MEUCIFyFSlFKzTpWrPFEVvp+tTgzpdQLVPlo6HCI0N2mxsgCAiEArN6UDRJcxWEmFtYtGEI616nODiQ1Nl+y46xDIdbCvYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w9nCRA9TVsSAnZWagAAYdkP/2tZ4BlkPgENpIfqWqvf\nNW1UiLXOFrzMBkm2zsZD/PoiAWF3OMqRIScggfjkHYrUaTjeREurI89bzkk5\n6UyPIQUK2EBh7k/Kai4AoKf/ddlonipkty2ux8hjIGmlXsq1iXHs/LuUmD2Q\n+hjwmi5YYX4e8f4o7a6IjpSjhFxeZFFTHWT9HM5N6juELGZeudI3ndgf13hC\nm/IWhnZG7d/IKi/zXb7RYsr5jfZO0iYGjFcgfvm1nWkNqibsvI3xVSp/Kmp+\nvEzU191suPXwTViiFHAAWOjRLSa1yh9Mn0NB19BPWYSNdHW1FyvkPwtCD7Hz\n4fT6RzqytJ0WU+TJw18RrWT0metkFaSXusLazFCfbtV5+2ilBXpUMs2FR3vm\nmJl6nRF2cIdWjApw3zynCDkRb2G6hu9h0CQrMvVgIXfQim4vefCW3VDtvg/6\nmiJ/xrZIXJlD9l3xCb0XWZb6/lxdMFJaRq1ch19qjExYFBnBOOnvfbh+kb1j\nRd+p8IlVluaDPGnZakUuV45J155hhNdoolW2vkXQXnC5+6GFcXNofB20Inpd\nr12fBnKGiW/GVyId2MvYIJxdeyKu2jtLU/AyEX4PWMIvp1Bp7hewHPIm+B5X\nKpGL44qQRNVtd0lCxcqzYqX0iaeVhSfQ4Ls8DvMwQGmPdHCCKKopVde1DoNZ\nP79M\r\n=yw4/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/density":"12.0.0-canary.2749604bc.0","@material/checkbox":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/typography":"12.0.0-canary.2749604bc.0","@material/touch-target":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.2749604bc.0_1626279782922_0.4903765139693903","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/chips","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b61983c25ec1e4b599fddba98bfafce61c30df81","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.e1703bed9.0.tgz","fileCount":160,"integrity":"sha512-u2+w/lhUs3ubi7riZx06nE0aeOwe1sbcL9naEsDzrlP993DlbBkjM4bj8KL+u6YZwA1kOhzzY2gJ53pFKH/o7Q==","signatures":[{"sig":"MEUCIDw/7smOWqqd4bMOHEHbVj4Ba5eQA3g7DEYhfr1d5SjgAiEAyCiL2BfonwDRu9XOThFbpmyNaOfkxOlLlsRGSiHte9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1614363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71u8CRA9TVsSAnZWagAAQk8QAIGiYfC7wKl8vYQdIrwJ\nILPcKQqmWJWm4DCPXox9iJ33nlz6VIMKGmM3IlHIrbRQJjrVvZhIz+lRNPdG\nFpcBgyzZkXM3nE1dv2ybRyCI4rU//22sGsKyO+b9CjXBSE7Ys18Zfw1st8gw\nSFjWQd5pTnZ3nzjgpJckDDPerYQ0xy1plZxR3kWMTLVB29dY+G4v6yKc+vWj\nUErjev2dw8zt2kHjeVtNC1oKafX/Q+XyKOHi5cEUbBG3yxSRvkSi+duFhKSN\nbQLW5OFxtMBkf4qKEot3Z1Ue4x0tSGnop8miocqdNlFM2lT0HBZfsa1lSA8Q\nakYNv7lN55Ra/3JCJ80s/PotSwJp9uq0UVBjW56etT6KDOldPBqwj8XZwS+s\n2AB0XTQG+I48Nw9rbNoLv2/8+CF5/qNjxyJuKXR6outosHUqhtSokukOBg5Z\nlFWtQWmNNU7ZNk4ezp+0cgabJpawGR4Wo28KltYPdLKZkdFAFILxGmROpnfN\nS4NphdybFeAI+0HpPPmJfQlKGDiKlmitAX+sxTe5v0Yk8qfgx/DmALH9+qsK\nt14kW41xy0l694B1RWoCH7bpQQGy8akLV1EnpJEZk+QqKKu1TI2ISWAPKPLo\n+96k7FUQzPdSi2dtPxGVeN+glsIuofRTYX9kpfTTRKnnBiR5l6JS/GfTvHQN\nqp+L\r\n=Qb10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/density":"12.0.0-canary.e1703bed9.0","@material/checkbox":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/typography":"12.0.0-canary.e1703bed9.0","@material/touch-target":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.e1703bed9.0_1626299323520_0.04894959196093529","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/chips","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b6a99ed57869ebfd8c1d999927ce25a3114c618","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.de48eff0d.0.tgz","fileCount":160,"integrity":"sha512-89Ij7nhnVZmNfI5OdUmiaIt93pTVsj7x32diEq1x66Yp0zTuycTNYEl6/ZsQjhdO/fOt63Cf2eCBoJMVKKth6A==","signatures":[{"sig":"MEUCIFkndpYuR+fkceatMbItAd+Ona8vys/JcxP4myxVvk+mAiEA5bx8McR0+tDxijHZVlJbtvo1d8Hs4Ed7IwBoUzhdfSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GueCRA9TVsSAnZWagAAxRoP/RBifA8rUMDWQ2J69AgA\ngG/yJdGl0Ub6E6o9o4uuowfODFdGWwHKLZ1/Vnzjvmy1JzKK+S49qFXd8bzF\nsOWpD6Ct7e7sq1W9HE5BQi7nqdKCgCP9hx7Jd3lOUX64Z0IR88ecr1z72j92\n0/T9A4PhLxjWsqwTjAwfgcxj133f+xfzzGsdfjp4UmYldi4/0CVtFLPFfYCf\nCT7x8i02CvM0QGTuhCYfV6NbDT8swxtYfRqWLaaMcfHkIWkyOsPRAQMRMg+Z\njhPZZSZ7OuxOTJ0H1iUjTAKvg2zVJm+MCtJ4LC6niqiy8WGatg0+BzZ80+r/\n0ML53xp7T1axKTTvrRTPS4s6WwyXQGBL1SjO8PDGcrVzbHZ5pq/S/dsEIz51\nIWLNlkws52jKgKi0VXtttIxeq2WxUVcuZiMItlfvvE+VAzWWEupUhnvtkvpc\nPXmdyjg6AMzd8D+rCe+wR4A9oDkfTrUEcaAxcL1kV2saLQcexh+70YzRPoQR\nQMqVv+B8IkE7nQEuJQeXFui8sgGULGEjAMbeIoxYv/SjEmB0yNJ332hzo5PR\nPp19tyNVYB5HqFB66l+yx2Jog1qBAV/fuQn/1kyjq8zvllMqByWymwcx4VwV\nGI8uNXxorn+o7auexqgZn9ZFxEd/OrOkG/x4UPO1rkUaNEiQnuf7jNSRuea+\nfChv\r\n=Q9Bs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/density":"12.0.0-canary.de48eff0d.0","@material/checkbox":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/typography":"12.0.0-canary.de48eff0d.0","@material/touch-target":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.de48eff0d.0_1626368925787_0.8112707313682128","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/chips","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51cbda8010ec87c0da96ea0f20f94436fac73225","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.4f060adc5.0.tgz","fileCount":160,"integrity":"sha512-8XyQr0oD6+LGJZIpG+cfUegPCnkjdqva6wZzEkuYoNIhG+MfG3aigFqLDOSijqkjCCzqWbp9muuITn3DMmobFg==","signatures":[{"sig":"MEUCIQCwoywPzHBpDnWpumUuPmpilKa/OADLvuVrnKZV2C+VIgIgPTHJliK+jwK0QNSoAXumWYbsOE6uDrQ3lZxUJIJDoY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Ir3CRA9TVsSAnZWagAABUAP+wabwghoU+KyiBO5mVU7\nShJdRB/bq032dlo4GQSRaeOg88LwPxnqj4Tjz+5CcWal395ZI0H5lYTB3Z/Y\nAlNDtTxzNoInFUfFR/3JLs6mQXac0RmOWDXquUN1RAn+66GKh3+w+kkUaYbS\nIPSBJIIcE2IHK3oylR9wIXq9O6V+woPZMQ/PAQGBM6rFk0wYAGa1KX2zLyHE\nv1og6DnDcZ4EupVp69F8lN83YJeil0gdL+z9lnWqGEAl8ZxZXAR5BoKn9+X6\nUn5XkZFe3Zc5aZM1f9DYwksGYnggOsuRmVCbfhs1ZL5MsANBIoO0GkRRK2zg\nzxQaAMVsZ9R5MZGGiBlQHIWMoSaaYdfpe1xc+wmPuX2e9VAVNeRScaewc5Tb\nYDvBBJos7VKoH6FjNtsiN47nzWvDkUd9uzeKRIJhSMhhKLCtJ0fXEa2YDBuM\na1TPAt1po3ctyxHysHc45aqJfaof6qNQrKjCAy8TbqWCu3Pu0IP8j3P/BDB5\n5rkI63ZAbPnGi1PGbvRKLFxFyUg62mTIwLg+OB8+8/ccRXW/EG5mGDqbw0vY\nkHiJcRjRIArrwwdT7dPPmBcT4L5Q0zF/oZId2qqOdizOKXEWZaLo0ViJBzuB\ndNdlJldma2eSb++MYbE/5YcHGqyPXzFXTsk07Ri9g8CQyzCVaJqt3jj31fTZ\nWlXt\r\n=bgAM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/density":"12.0.0-canary.4f060adc5.0","@material/checkbox":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/typography":"12.0.0-canary.4f060adc5.0","@material/touch-target":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.4f060adc5.0_1626376951062_0.4492520887178826","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/chips","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f477a01f4859a8455f9b65fcd7c2c9e62363cba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.bd25779b2.0.tgz","fileCount":160,"integrity":"sha512-ZJzNzPMIzJdEYnonic373E4IQ3lQRPIowRbS6S7gTNWjt0MJzJVs9NxrMDBSlJTrg2bW9vYe+F46Je8F72fXdA==","signatures":[{"sig":"MEUCIF6ftHshjgCWmcZeobI87dSUxw9jUGX+U5slFwoOMv9dAiEAoKe4FvMV/Sa3WwJIy32auphYbUoZ7Q4odBiTsJz1Mlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J3QCRA9TVsSAnZWagAAExsP/RN6eCwLvPDDr0n0u/Tn\ni6acOYZfo2PI5qZkcdbDSxbibTlXJ21PqoJZOCMYxAVESn5SPIkIPbOTsSgC\nlrkklm5RA6sZqxLas1fIZYNyVkL2iHIn4CxfLGpmvWpUl/aTIVw7ewX9HqPs\nk5IBBxSbiyb5RqR+eXpxnAWwLMHt2Zm5qRWmtYzQ6LkuVgXfy6kk0zmI37vu\nZlQ0lhxJFvZJEALVRel+RDNc35rqBD7t9VWVwEUS0vDERh/WWje2I9hgKH0h\n5lXAX3bsXWpnvqSCtTslrC7REBgO7MFtUDKnzA6nQ7KTLt6su5Hn5lf/LOWe\nRcoVnMGIcN5cRxReQfEhd8yljTCHS1KU33LA10NPLs8cYs2L06z7TqMxYKqt\ncTXpWo9/9xplm1GPCYzCH0H4CrPXvT4GTB+u4bwuxkURFz8Hte4t9BWD6W8t\nNN8X4hZ8i1O5gOAatGhE5vKsdiug84EdSbYR0i2Fw/bGWAi5BP60WM/SwOAW\nAkVWci0VZy1qqBr6QAdHGQDe0lJFKrsJcSg6SFv9dlk6s6IYw02Bot7GLOWT\nA3CzcK9jFJtBe/+KQe7NGbp3ydx0+h/YnLYGdfU+A4y8LbYKoYc3ZZbGOLOL\nbrqh5svBYLglrUePvns1ynwzQeW7Ii3mN4BoiG6LAUjjovlGBb9gWkVfaoOZ\nxPyV\r\n=eylI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/density":"12.0.0-canary.bd25779b2.0","@material/checkbox":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/typography":"12.0.0-canary.bd25779b2.0","@material/touch-target":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.bd25779b2.0_1626381776240_0.18618402402672096","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/chips","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b3347d0e29f07f68bbaad3bedcbc74c26e7940c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.9f68a932e.0.tgz","fileCount":160,"integrity":"sha512-Pevtx0J5L0bcXD/y3uNtp2NGrcno+wTuocXyWSOdpZeJJsDhjZROFbjbVFWLIa509zI8lWuUa0F7F/udYWkRNg==","signatures":[{"sig":"MEQCIEiNyolgbsk6pwUOk5c8El3uwRTvIaNPWeojDfXYC/6yAiB96ktYxHwSIPNXJsn6dbIiyZpLmjrr4EDysZ5iCKFazw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LHNCRA9TVsSAnZWagAAU3IQAJvBTgmOdDru3qUnLrq3\n58QraFX0cnJYwUm/08V6e37w2Muu6p3QLGkSIXPSwtsCsgsjLN0yeZDkiVjV\nzVADHh7QzbfjJsOcEWhSNosCKd5CtxuIvDfy87kK30pbiP/wjvX5+rcixVOx\n0x/gxTosFL49GEVZGrw5os5Db2WQ04zU7GyHXcohBdknoHhAjt+SgUF73O90\nz0Roqp6lQtjwtLrumlsrkVxq0gipW9opKPHGUh3r9rnCKuw4TGu7it4EtSeX\n8AQ4F3KIB84mDXCVRnBEe/GpMwvHNixN1/y3BPCwK6FqtHRHyVRrttmI9S+A\nNwagizUzNBqaPhd7ip2odTy6OD+e3gVtoLqiPrtsY0lWUZdfFpe0EkKmVTbZ\nwjjIFEUuU8IXW9livUyTIXDNoWKWsex3kKLMjlokGY5A13+p4QAHzM9BEcQU\nncgUA278Q3oGGmaGmDG+6xIahkJvu7y58qnkhwG1VW7EDiIpjtZOuACElLRn\ngkRcj7uM6p9Q1E+WUkm+NmuspWO8hmHJDY8V3gIy2v1ilWd8oemlPHX8yesc\nIkdvr0phStCdrXVZtrdEC2kb51uFhcU64b3cXhM8NsiKBmojXCNNwQORv+Ff\n0YHYq1GXs0fXrTyEGdmb1SsHGHnhICVYcixpiV1t5pWWQPT9ZnQly1Eej0rI\nJX+b\r\n=DbOB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/shape":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/density":"12.0.0-canary.9f68a932e.0","@material/checkbox":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/typography":"12.0.0-canary.9f68a932e.0","@material/touch-target":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.9f68a932e.0_1626386893069_0.44756672380323104","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/chips","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b847173fc1168cf20ab471c50bb9ff0c86651113","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":160,"integrity":"sha512-aS1dVO6YmZLiuwuYVwka/yNiObKDSPu9dEeDH8pIkit5b0hgVtW80Y5GFjYPtmbaL5TipHVCQ+bziYYjfxA4nA==","signatures":[{"sig":"MEUCIQCCv/UEUgayHLbveO+TpWgX3e/OiMiirBOGpmN+S77uggIgcCJcEyH7WbMyrDFPoG5W70SzBFInNUpiGsw6MJJU1b8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6bCRA9TVsSAnZWagAASPAP/RAX1/qmTV7bSdMBnJcc\nffddh5sH6+zXc7GAqmvFNFw6PXS44473aCt4enLO0Wd4WvNZx97dilJ0SisP\ns4FMJCCOB/DaNCWFrP+vsTymFycEpRfYNexOzlT+uPuH69ASl3Js/+DJwIOH\nhxdt8P5o8tLxCNahYMQtPK1J8rTR0DThCPmDvGdc5UK5uW9SLbrZzQyGSxxN\nP6XbNMA3YFntlXyJXJv1YhXSHL9xt+TaUla07jxcr8t9mSqnMUEo8iA8eBzH\nMJoXu3DRfGyL+4cYhQm0GS9RTk1NC/6ONtgdA379UdEbbGI3jptLyLxMCi3d\npRmEzJkbx5g6TFL9sE2sbIqZeAIBD3uZSEr4CM0qN1KwjjneGEutR6b6UoFX\npt87+DQcsDI9h4GgyOv1v0tWy7BXjR5wCwa7hTrRlo6NvUmbSU7LDuYwOWbN\nB4kn33ZRSbxP7i9wLfbYkRRzRBNaenZpm7QhAUSBtcDgMC7u3F1PXEh1CzOg\nYww8nkoCggqc2YGuHaQZOl+zdhY1u3aDeZ/XB9DzfDiff3kE9fFr6LiKDZqK\nIyHILncku6Zmh1kTO9xBWDSaH1K4zLWkarkzzbyztRWNfd1Yvqaw+mk20Qn/\nnBxbv8xwPjn82FW3gKzES6sakVm7bKNf3uLLwxIcBK0J1fQekoosqYfzMEfO\nGipB\r\n=6wgR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/density":"12.0.0-canary.4eecdeaf0.0","@material/checkbox":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/typography":"12.0.0-canary.4eecdeaf0.0","@material/touch-target":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.4eecdeaf0.0_1626447515640_0.11170422183274598","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/chips","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.7239684d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6660782d245ae47491153b51307ec3f0dad7a068","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.7239684d4.0.tgz","fileCount":160,"integrity":"sha512-fy66/+rxlVnDgbGoF0WS/NT4T7U5/wAOkuQzcRR6usQ4C5MCYK4U2p246UcCGMnQUSSi1uLU4jVg3zq+h0rWlg==","signatures":[{"sig":"MEYCIQCLbMqtc6Ybi9qp/bbA1B7xSv1ApWQ3OQH1cqYNX/KB4AIhAPSs3kBHRL7LsmIAUZlpLNvm2Z4VWyODPmTsZbcwZzvm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azwCRA9TVsSAnZWagAAxp4P/j5s3+ZNspcZmPnxA2BL\n+l7il2ZDLUvEDC2ZQV0BKBoeMBLkEMHEQQtISre9IH0dUSTxRwHaJz3JryV5\njLqjeC9fe+K4Upoz5rqg9C/hOjeW+Y3C/+X8lixBXKfneaPK/o9pdtlfSgQN\nBFdOFe8U11vc+sqZK/pUy/yOzx9N0pqYn6CSOzIicfVbB9bcR+kGJejcqwz6\nFRr2dPsCdAb3AOJgAoqPqsKE0h4BBELImpN9R7QFKBxYAJRXKlT8JnlEQJpi\nk0/aMh1UziyrrWqJC4AaJpRoux0kQjB2ah/UFowBG7ia1PWAiJfgIVyj2lwg\nKQOUxlG++Ir7VMmtzIyJGBTGgzRt4kcw9UZCLtexNxGrWIDhuaeE7aC9zqi3\n/AJvlUNolTWKLH+Zm1j8ehWqzWhbTr6tUlu9T+8FUPtJc0Zx7/Nctb8UjDHT\nDEOneNCK3stzViqsW2xok96j7r0QGc7biUuYbnDXQYj/HGFY8hDoYvS70tMq\nhdLtFYpFfR54d+0lmOcR08IbmIID+/CNYNhcdbqemoVKaxQJzZZjHb7Hq7f1\nw9g2m6HScyCmk9h1EgoTbJnZzde69f4dGJ11RnOPADXNHR50jyW/eJgIuUlV\nPdenp9rkXhlsbvm8UNArkIKNX0yEDXOivt8ow/hz+mLldImJDZaQI3vZO99g\nY+7C\r\n=kOvH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/density":"12.0.0-canary.7239684d4.0","@material/checkbox":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/typography":"12.0.0-canary.7239684d4.0","@material/touch-target":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.7239684d4.0_1626451184227_0.1561712496229526","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/chips","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"440e28db9bc57fcd14c6733dbff04f544cef77e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":160,"integrity":"sha512-iQfVhAwWtP+ehrABE4ajnMQD2dcSGSbcqJ+ciPY76l00jTRHJgDSg27M24ibQ8s80s434TXPyrAFZ35ETTGoAQ==","signatures":[{"sig":"MEYCIQD3v1bmKRpDPVZG7JHiFBRBPbfF9pic0fABQ7H3Bu1eBwIhAK3+xccHJEqX34m02iuQ6wkrjS5ISU4hp8DSwL53GDnN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bCHCRA9TVsSAnZWagAACQwP/2985kBhwA4OSsBBeU8+\n8Jtbp7JC0zfiMWmsAUCpiyTqs7bxXeQOzOExtnQN8Km0tBNdGDd9ZNbI9AOE\nTVeSeeby4XNJ/0CL5FKCyTd0L4MfgP8h2EFNADl7Pi7/CSVfqtscM2Gg949w\nhM41+D9cRo2PPUa/EyceB0M22+gPKFZzYfltiJi+zwbrTN650EM+AWBGrbkw\noJhao1ETn8oAfkjoIIByNh7FdxIsP2n72QrMro5K17LmrG3pnn+y2gOe9KQN\nIBBZ2ad0JbI+bSftIEjIj7hy6z0okV0qT9zScuZl3ZL3J9Kc5AQz4PcSbjeV\nInAHBD1MMpNJ+5OJHBqeYaUiP4QCQ13vMUCdopl2ItWUIPnFARg3Pz4YllCf\nAXKtOhqLZGvePxtzawbCYOIRlaT5LptKTeoKspVVW2GP3wK5jUlP0db64IEJ\nUeFfpziU4XXJCUrusUDCt+GWCSr2oc8oJx90pjDJ9I2fy+CvFgwqmsNIkR+c\nIgfOIxcQ0wtRL110Wlrhw4eTvW9rf8XVTLIkyrOcsn/LFH0HAHZogoUDr40k\nACla1ZybQG2FkQMOKTOGsJTyjc7Td0uJdrQ8WdqMDDrpSwQtoKHNmFhjudnU\n541YaRVz1yDMVwT5X2QE0/xkVO1lt0k7ceHyLXy80V7OH7onfI4m5TRDajeN\nPCfI\r\n=iJJq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/density":"12.0.0-canary.d5f1f7c72.0","@material/checkbox":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/typography":"12.0.0-canary.d5f1f7c72.0","@material/touch-target":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.d5f1f7c72.0_1626452102742_0.6582702013393857","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/chips","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd451fb05d2fbbf6244dea45144d60b9b0ff64fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.4d95812f9.0.tgz","fileCount":160,"integrity":"sha512-/V7c74bNW+EJZASsTbxEGS4MS17krXI9lPAwICZ4YAjV9LYUUC9tkWF9zcQmHBm3SFT0ADTG+aPmVBUANi6r8Q==","signatures":[{"sig":"MEQCIAjZXzpiDFJut6ZdarxLFPt8pu+/kzRU/SRkYjQcE+7yAiAKqr4iP2k6WraD2+Apw9hPJVb94QCwAgaotrJIh3T2xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eGOCRA9TVsSAnZWagAAY+gQAIYawbJCfnCAfWtT/Lle\nISk5ifs7gYIqlTgh5ngii0xdquxQw2ylXzoT+ZrPd2f4VUyxsjcFTrIWpqCI\n5zuRCMb8iZRcmCs5MYjE001mNA6xs6fw3B+5ICNr9vgXxsxF6ZRxCyPCInEV\nVB3W6TWtokOpKeL1I2wD4W1WwHjWvWEBzC5vpDwcN4WxXKVg14F3XwOiokKL\nKgCWAaQYBOxnnrXk6iq1KheZoVKO7rsUmdatTj1jTT+RhbIMF9ug4yDtALgq\nQWskDX1s7G1q1KTCaRs/6+XBHLyGfXlRRm8Y/nfZrimhA+HlPNMMMHUzcJvh\n85Q8Hi0SGgDdzD08x+yRvUItk9oiSPiRqxNFHh+MFFZvTXwCG5nD7gs+TrDB\n11EtCROxoDSJQ5pUgmThERlM/3Dkiq9CPLekNB5pHTS6Mgh4vIwd6bVFAcX0\n3oXRRNpI7KNw+ICMZF4gfpOefLkU/B1FJmpJFAIhJea5D2GP11F25IGdyEJs\n83A2Z6qmAdhs/FO98E95fSxm7yvXd95JyD0nOlGb6B6K4qk4wZcTUCM8uWSh\nJ4hS4kVd5ONQewYcf5t1X1to0JEa8BFV/FH6alEOTbhM3L7flee833f1Z7Ng\nsV2aiu+D2rDUXy4h+FCqYW3ityFw9a5wp4x8s2H5o4A6AGO8heoW/0aM4tAA\nJ4DY\r\n=qYFC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/shape":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/density":"12.0.0-canary.4d95812f9.0","@material/checkbox":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/typography":"12.0.0-canary.4d95812f9.0","@material/touch-target":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.4d95812f9.0_1626464654556_0.35085275428002216","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/chips","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09bf18b13f461d46c55167e78bb160841d368e94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.38d1846cc.0.tgz","fileCount":160,"integrity":"sha512-QPeKnprvbVBNl908WcepT/PCGlowAaa6mh+dnZcZx6cuqg+hUqX8EISVrsy/tmY/xcGw6iNLGOJv5i7NtfQ5NA==","signatures":[{"sig":"MEUCIQCdiwcJnvdffR1tZBNp17i8Jsek/1lNwdu6B5aXkS/kawIgCG45Li684dKB3eBSsAEj3zNhyvVJ6aevfs+aFi3JwGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cefCRA9TVsSAnZWagAAqdUP/A1aVHnFVv09gayKz7SR\npKQZ/0qtZ2JwiQ6NrijYJKtIsDINQMrd08kNsDJquKWkjTO+zDzjaEvLlOg9\nemi78aCmECw8uwPauQpvwxl4zMk1XXaQ+BG8YuNkyoBKgYnBgveOaX5BGp3S\nylZwrWLaaXsY09YTPfELLZ7HzI76ldPrpyOdRrmLf5cLqsBB1IeuQhDaCyAu\nx1WcgC2BYZVe2PmXxNAl3+TMgUTnhQBVeffA3HFcPnxR5IMhko9FlZ3iIKxh\nplKBlQBfnNlZbAxQjVIFpf5WmxY7Mh14rIceAnOUBgKYroLyyrmLrv6/LLTT\nhqucBBcCe19WhJVLQ3h9iPi2cI0EQ+kmQZWt/YQX2jRZnun4VqxgSmrf/SyP\nZbz72Aml0OpQUWEsK+YjGuP+7E9r4n8Vbp8EljQCEthLZv+7BUugS/E/jcxN\nFWQ9GGLObIB1q3U8o9wXjp8UsdPIP8+DNnp1BUs9iaydmdW/xj5UECsLfQEV\ndYP3Ep5dBIvq+40jjrs877NGZHuHNiTuLth/gfAtZvAaHhzGHdJ5dNp0B823\n6HKMkqLhSjt8KZ6bwzrrspVy6WxkiynmkijYm4oK7VQlKoffneXE7iZn0DRj\n/lsOZ7MqbeFm3piMdH2KTSfpfwBr9nKIuK6Q4gR8S1/R8lnuTOAOpTNbvwZd\nwAe9\r\n=DiuZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/shape":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/density":"12.0.0-canary.38d1846cc.0","@material/checkbox":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/typography":"12.0.0-canary.38d1846cc.0","@material/touch-target":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.38d1846cc.0_1626720159286_0.20546948684973176","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/chips","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d4f1ee7fe00eee146734805fee16c492000fc3f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.3f691eccf.0.tgz","fileCount":160,"integrity":"sha512-KZdyR8j7nh3mcQy0ZxF3AwqY8NDkAsap50+vexvCVPrBZZkcf0QLG346fCh6qWAIwcBGVn+AgJrV/EaBrjsLXw==","signatures":[{"sig":"MEUCIQDGSsHbtt1HYLiT1ORyNKuoZzscHb04wz5obgsNojg0zwIgbrtCo02ITBlTVn0bodeZ+TbTKxV7wqiU9iZWrKvbVs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vU8CRA9TVsSAnZWagAAYFsQAKAxkC+FJgba/Dz4wulM\nWaFN8O7fSNu09mod7ksYo25r1DxDr+TgN0cv/h49VqUL1nWfpuHqrPCYuOB8\nYRd2mnLedN4G0QRHgdy6B63pu6Jr9RUs8paWUdVIb02UcCa4auo9TpELh/H9\noMZWK4HVS/+wwJVGGcqfLUXp8gn7TuqZRwyuX3cY/oYNVdwj3QD5stBDDqTG\nimSoNiUOA7A+TX73j+fInyGCRITU1MO7UEPGOvLLDoXZe39AgSVBDvPmkwCS\n5kGf+DJVbHMkjhE7xO7qMz6OKqFT+vWoEupJszklMTIyzip1adDm6eZ63MJN\nnscx7u08bht2AfNSpuir0FKYArWivK59+hTX1hCMacCkxbhFzsdQvm7U3p4A\no36Gfi79lQYz4NB/nAyLfLlHabUxOVu/Y4Km8JC7afBT+i1g3+yYeDAwjr5w\nIREKTOxlVK1DYZGMuUgRBNPm2qWwJLyNG2i/pv7RHt2H+UJ0ZfMhukUCC0RZ\nbnBDLesgFFW5sWwsUGl9XDYisk7+GCBR1+1P1Uyj9xMVnxE0SXIaUp21Z95/\n/+5Cw0MFZCKSec0rFI0+rrwvT7y8lnQvCxvn2/lSKVBjaBYcjJuUoLfs2fJw\nswXmSAxswpqkVggq7TaCDBYdanglq4uYDjqCeDg7xAVpjW5usJv7XhykOiHJ\njdsI\r\n=HHH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/density":"12.0.0-canary.3f691eccf.0","@material/checkbox":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/typography":"12.0.0-canary.3f691eccf.0","@material/touch-target":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.3f691eccf.0_1626797372348_0.28048991497852604","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/chips","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec20faaa063e2ad54d05c6890391cb1b3a7433cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":160,"integrity":"sha512-2WN4qccNEtEGwAnkzptRUaadW10mCY65iIXd2sjGmZzGTilSDgTOLByuXlXsCXwQdGB5ea7n8TAChv/O+rOL1Q==","signatures":[{"sig":"MEUCID/eCJsH5RpQA/RTin/ueDE3ZMq9ILzRWGDCTDNdwBMrAiEA2JOwcVlyzsHrFLN5bN2zij2A/bgBsxb9bXUJVleYmVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wB2CRA9TVsSAnZWagAAv/sP/3T7pfI6WJYw+wI+lCzB\nLO5c+onTjHFa70Nrzh4dIOKtjzdK1yQs+z6b/2oIcG5oX/Th3rlXUxozxO0f\nKool1Sj6BjaUDaFqMzAvP6N6APpyneek3W6nu0FRFKRWZ9Deao3YbqLRFnps\n2lweioZgPt137OWz3jdDKb1z9iIwxzM7OsgpcoKevJIS5d3RP1GaOtE1Xh/y\njTZCBcEOWDWWVlpRiqBd8l5RRPmFerJZ7NBlVyWsqw1h+Y3ha6aWKyHai9g/\nr/D7ETVFVPe+89iVwkpIVC93MeQbuMb8Ykj92htczeeKy4fpGmaN8do5QZpA\n+tUkQSDsw5gTzrlTzO5lZWKVMzovE26zwlQRaVYIY0TSvkt3Y5u0C2Ht9Qfe\nIO5u0UN//NvxTNsety7jPg0aV24e/o23V3ru5atSdd0Yq0qpnN3eHuJjhoS3\nuBVR+WksSwKN4UlwMofvmgSC/Ad7Dl/68NUsqf8/f6rnSid+ES+KGJoWXbWh\nppkTxlNUQPrUtBJPYys24yPpq6QfRjFrIdlixeYbdAkZYeR7m7IRkB2nnUrq\nSk3hNcCF10iQIwhpN3bX1AAKL2ibOYo86b52x67/FwOXb6iRrg7Uh29eARpl\nRVBqIcCNX+ZXZT24cYdc29QE6ZOtjIYCgEwRHMLCpVawekD1vufbb4aDsl4v\nAWnA\r\n=YLW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/density":"12.0.0-canary.ebb5c73bb.0","@material/checkbox":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/typography":"12.0.0-canary.ebb5c73bb.0","@material/touch-target":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.ebb5c73bb.0_1626800246493_0.7054463990731028","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/chips","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d2c9961e349eb250d77ca6915dae8e94f18d9d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-nightly.778a0e8a.0.tgz","fileCount":160,"integrity":"sha512-7UWL0vSJqxuz9QDxDzYktvNC9bxb0VKPIrXP3oPL3wi7nze/oXoSaY3RuRXRM4kBtBHK2KtZSeH5aAQfZoCPFw==","signatures":[{"sig":"MEUCIQDNW8cuyREi7sYe4vUoeQtl9mEi95oSoYsl6Gk8FblBzgIgJbQ9WKwTSkFQj940+3cVXdmZsFfdyxAd6+2Gbq+m+UY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zq8CRA9TVsSAnZWagAAezYQAJKUjKbqsoYAbSLSC4TZ\nhbeEPaX/InevdTUWS3niQ/svGj78Y907ryPKFMenf59xshP9ZQexXl6u0x6B\no27G1v1FKzUtF7QgvrrC6vhyl3aQ62H4xQ+7u9POKv+T4GPugzniRyz2DMIR\n0Q6xvoZWBZRbfNtPbrhGt+iJbcZBmpCmXk56hYYLbtOWc0JTYlYhd3OpXbDV\n49SeAU0IRU1XJHTA7GaYDLLcHRyXm8scG2OLm2IVWFzQ8+cvbB78oGQjm8a5\nDFwrixrPEjVqGw88HCXdF1MZKz64TZmtdp12aA8GDTEUwQzznDubSUNq33ul\nQuuOUtcBKdNjmuHmQ7huRoURK6l/VdYZLaFtAPEuArP/UaxJZM+rin89dLQM\n9e471TSiFGIaOQ67q/nsrboFY/tK0PLxTTMw2mZl+41TsFQaSiKjv8Wjij66\nzQjcB28dVIqVDJzzQIZWMqLEbwT+vV1Xryx0B/X4FRaJrhH/YcoYYhfCGYN6\nSbEGSprtwyi7eDIcX7E6WlUwS2bm6xfPBspE8koW2GT+b5YBtk0DMp+XdkOD\nO3iq9sZ8DspJpDEyfdtTqo6PxbSE6+HvFNmc3DgIQoXFR0+5lK7L/ff35qkt\nzzMADQxRFOvpn8ImQ+MHMtTVkgPWz2MnLhkAtfWvMZG61fQD0RlFTy1YUx80\n8P4i\r\n=O+kp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/density":"12.0.0-nightly.778a0e8a.0","@material/checkbox":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/typography":"12.0.0-nightly.778a0e8a.0","@material/touch-target":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-nightly.778a0e8a.0_1626815164191_0.2813162726456504","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/chips","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.791311bba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0da31109f679829c6c6fdacd997eebbd067bc05","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.791311bba.0.tgz","fileCount":160,"integrity":"sha512-AVq2Kg7rP3n/uGMHMALYTV6p20usj5AgiOgxcwQsp7ukyX22xJ/HxpkHLZ8tXWVxMOX3qI5URk4wTLXomJMmJA==","signatures":[{"sig":"MEQCIHZTu9qQExRw1PxTCoRH2r9vsJ10eKZSV4LwzwlwhjATAiAH29InvB83aZJ8MgfgX5/riYRvGIARiQRxoblMa7fJBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lKCRA9TVsSAnZWagAAmVIP/Rf5HHXoBQiAWA2n1aqG\nfTsdWtmIjBQPjmVZWqZp/ywfQkDm0JkypsuMovxCE96zejnoHYpWgy27afOE\n7weKrXnn+ppHmHWi6FvQvdXQgccv8UKrrsYcdXrfM9y3JrCG+m9gsM3Qhlqr\nDGRurB9inpxj5ZiMSMHXxg8rn7S1Q7uqwaeGnspw7lwUPouUL805kndge7uv\nCWZW90CwzWRXmHLEnOUnv5kFqa3UxoPpAyNWYhOVhAGcnK86ysY/1mR/0+O5\nu093hH/29xeMdkV6r0DdECK9L+8FcjinYxNb4jtcXcXm9C7fdNHS7Amt+Icl\nGbM4bvrzIkkOCiVgAD5Do9K8trzgVP9jB+hadGLVIacCTBwc/+mRvaJ6C3rh\no4EyD3x/C+aXYSNhXhhBG7cqwWz+dOwVHsalaKAoaxS1PoMvMFzKXQpUJpR2\nNhVf20qCZdnUsLQJsXADD6DW8QSNH17A3I+Cuwya/KK5atM2GRZezYN1pFx1\nC2MZ0PIM5QYIjHP3kO+kNcODIOx0FN/JYzmCX/vrh1kf8irNVaWjKxRpRWnD\nXezVFW/hITnG6jOSh0BN01VJp32K+cEI/PFfZAVu39UDEqeJfpWaBsumuj9m\nlEiNgbgHUKz1VM4/gXhbxNC7HL0qc1BzMLAG+atxHMYGxSWkV1Hc7c5PiiS4\nNCI/\r\n=gCqo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/density":"12.0.0-canary.791311bba.0","@material/checkbox":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/typography":"12.0.0-canary.791311bba.0","@material/touch-target":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.791311bba.0_1626818889894_0.9411792050292718","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/chips","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9f8e4ec7d8e6fbb98fe6d9bc0762071fafc7aec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":160,"integrity":"sha512-iMvv4df+yoKiDZMpOr5CBKF/6feHA7btVvK1quic7txfwJIvfP0gOJ4qd/IPopwfQYxILOeRfyYnqzAIOATuMQ==","signatures":[{"sig":"MEQCIAyhvwk5IASyZzYPbSaTBUoEk8phe191R0R+HtlhG3WtAiAewhjCzFChMulQK7ATsxeoUKEVwTH+A/cFK4BKk6IW9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D8DCRA9TVsSAnZWagAAp4gP/3m6POLZ43uPPF65uU0N\nSNIrz8/exKiL1Vnhmef1I+oTQG3WfhNs8di0e0c8j4gUROee3YpY83GqhDwk\nuwQGcqRN2m7ufct0G2y9Xchf6HUvjOgMids2g15O6TKP83Jc9drL/MTVORVr\nlJNthgi/cMXF1lx3YvKEZtZlHldFtczbxK+6Qnb/m2umck3bh/ZtdJMoh3k7\n37hh7yzmYY1qxf9duUn8qbFh+5bmYxFCzNex5JIhtrm3XVmcmCpnxb35Flhe\n3h8D/UTq5FodNostVCLWI8nAlywY1mieho2kKBrkV3wk9z5PPTScSUvJW8ST\nZDx8JdRCVOFX8munGG478YyDX6zdvomYht131Y1T8t9WlGnOW8Eh09OqGAej\nEhXuuEG5edZuEGt3PQNY9VhkXgXaSZ92Qi/VVEv48/dHTDvrD/mKul6tScSo\no5vO+nPsUnSKeh27+430XjbSSiFZbZsx+muFeo/Gg5HWtniGx7r9aORAINaA\nlDS26XXrefwGtsuozB5snD5UU6zwIUjDRLmQRLvx7GEWc9TXbvpSWnBFxlNQ\nIkUSjucxmXGfKW7Vxd9yOlvMoY/JUBUIpOXTdO3YRP+I+jketCJAJaHmerKM\nwuyDbzlFga8piUOETBCEjvLhUtZRSh9niWOnK6TjzL7CyuiXWhUKXkFxyjAj\nLMR4\r\n=Y547\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/density":"12.0.0-canary.85e9a6ac3.0","@material/checkbox":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/typography":"12.0.0-canary.85e9a6ac3.0","@material/touch-target":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.85e9a6ac3.0_1626881795397_0.7967803956655632","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/chips","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.6b0442278.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d39ed08e8d82eb3329356b1d41e4b6b5fd4b8b6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.6b0442278.0.tgz","fileCount":160,"integrity":"sha512-62xQgtZfph1xKXgqmGvdKYVgmsTxX3LqOb4/iOU2xF+nSxmhxBTd9VPkyBjLInmPtliltJtMKj8Ze1POA8uh7g==","signatures":[{"sig":"MEQCIH0xEXubZo9k77pYpOa2/mSB/0F28Hbp0Yqz1A4Dk85oAiBZr3CXLZyb+IA5u6g5pWhrVtVtn2EJGp0JsnnYj7WWGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1613022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+Gx3CRA9TVsSAnZWagAAnXEQAJZpN5MK4aQzasXtEmEv\n+KoUQApV0cT4rRooa2QzRrMNaEv/C0z75atswnkagigx5mgIwZE4FLDls+cf\nuHBYtbu7Y4oKhe3kcvjAw1PND0cjDQiIRN1axz0rKifcbq9eJ9KGbiEE1rXM\n6kYkLUP4Me0ZRPJ7uBFDUDonYUmR7JoCkZPITvEBehVeOIj+syw7CI1ms/QJ\nGONIIl5zNRFskxdoLuzo6cdoaTPT2FiYumi3oEtkdsuaFCAuPRwTmoIGxUMI\nCmSge6IxqgujCaRkPvQZELMREayQoblOnSPtrCroOITGLV1qeqtHgCtAiH6e\nSVsXTgrL72sjZ0TfMoJJNjZCBPXYu0+Qc3MGzazedIHi045gs0O0IwoRvB64\n91L5BSlf3LdUPTOtwPwNsbHtfu6d5RZaUa+JFxT/3/lRS53CSWUsS9iLF/gc\nbVK0YsgX85laOjS8p6EtNoYdLvVlkRd+e49EQfem0iunhM6AQaE5iCdIuhny\nbHlpIxaJxW7jUMvx7vNnKvyqsJCLAiZdQtK1atMZjSD6udeIPANxyIwSobbr\npnlXw6y+0RN43hmKErGrBQn207WU84Kj6dlYCtYI/CJHHSuf/gHKNZqp1jpH\nnI451m06R3ilGAjiy1t7LBlifZTsrBXZm5O71bN4rEC2TN/xyu6KkWyq3xM1\nyPAq\r\n=Ldf7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/shape":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/density":"12.0.0-canary.6b0442278.0","@material/checkbox":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/typography":"12.0.0-canary.6b0442278.0","@material/touch-target":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.6b0442278.0_1626893431435_0.18544037513395328","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/chips","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d90a1f6e49d387e18963229e5fb47f375da38113","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.5f00e454a.0.tgz","fileCount":160,"integrity":"sha512-BNngGmnJc4t0zgGGBEXl2FD687r2ZsH4DGc4iNFnVQFec28gDHAATqWRX1Jh9WPy1Q0P8vCZRqIp/DrkizFyUg==","signatures":[{"sig":"MEUCIQDBDFcOLLMyaNAzmgvD3HAkQygHs7Myg3ojBK4itdeB3AIge365Nb6atKxQGYh1YU96p5gSkKnx7euoiVx6hy+CFMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1613080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aW2CRA9TVsSAnZWagAAhr4QAIXqFgkYfEa0qMj2sbJ6\ntqdKDTA8KZxksuyzh4NSQvh//nvi7lB9/rPp1QeQKGlA3AUbGP67cj7LOs4z\nd450776eJf5laN9Wk284n6VPBLQa85XDuKBjVfPON8A6ggoRBVT7xadgJ5bl\ncnFtF+7ZongBTGatDJcD3JIG3Va3CCtPQAFKMd9aLNzYdKjz/GN48iVykv2A\n6VfKOepNNvtbgBmxTFfinZ73rI7n+Wtqor5NuI+mq4yV49fzX/ysA6UdwA5P\nK6C9eubgXCTTxAdPwiAgiGD+weqSTuJiOEEWFoVAVSZIRF4gMkkartuQgVxN\nwWtIPvnHTeA2HXUH+dytyv7d4IQ+1i7dMlhfolFfufh6lvz5SJWm45+GjRNB\n6NgYaCny6vL7NWHRK4QZXUZkB8KgjwceLsh27SUzG3gqkswdb9jghGtLa+e3\nU/YLwqVtzal2lfOoxgozP3QWX6klYRxVMwFyvTC9VrRnoySFdbJmKQGHwHHd\ntnHi6OplsI/Kp2TediPGwqYR3bbBucNDDxx3bJiVDNVGZWnlTs6k3ECGDE4+\n63Gnrzp4Lz3DEGntjBc0xFqP3CqS32gUs9ZssNGai/5z/19YAAlLAQfQwgJu\ntx4I7LM8BLYIEVbx1w1/tNIjEUQeGHpAJHGlfQVn37TdKwqbM2x1n8sVM3jY\nY5x4\r\n=pm9y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/shape":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/density":"12.0.0-canary.5f00e454a.0","@material/checkbox":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/typography":"12.0.0-canary.5f00e454a.0","@material/touch-target":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.5f00e454a.0_1626973621702_0.2246233891976881","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/chips","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b492edfd8606dc2586b04829a6582aa0e31048c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.90e08fc6b.0.tgz","fileCount":160,"integrity":"sha512-p9xvjmg7l3i7hqlSpB76xNltXzR6eTC/7ctAGbtMYA47+ETZwAlyramLCQj67Ctq/qRgFs4jqxKKc9zJi9kgyQ==","signatures":[{"sig":"MEQCIBVnhMJDcY60ODzZdcM6o3F8wit/+P4TpMKFHdN8mZsOAiBjzn0wqC/Tq0e4cwR846xHpdZlZzwimKOTBoTgyekkIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1613080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gGqCRA9TVsSAnZWagAAikkP/0c3ERK92w1Pu+4NAdom\nce0nWgNSG4LL1oqRlYQ0UyRfnr43O/BcVIgbjk5ZYu7YaAACmXFkJDXsAdwJ\nK1hum1lLBL7WPWJNLB0Fbl801fWcnw3n1b6jpfq0598L+R6Le1zSfXM1zRcA\n6kn1H6S6GF1WRM05bVYfTcuzOknoF3jLKVUpyNnQ92ErW7Lct5ziSMNhUG0J\nnIvLRZLkVM9JUZYzkcQMTYStCwz5vwcP2F5JNfl1JLiUxcqSJl5Ll/QYlFpP\nuXgAvWNn8OUANRf5ND/ZbJv+DML1vfbJKwDFBVtBP1NDeTGx1nQ5iiRC3u0C\n0FyDtykzSdjIJbZvhAvTVdyJgBHgxAJ0zIH8jHwAMPkX514q3WDNb3RsotKJ\no3YLSrCPLYqtBdXyqPvmvaww4sKkEuDPFE2T7P7J77sBQMZpbQZUDTMXo1C6\nmjDi36FtLetfNjxsOoSrfujwZDpTcOVVRw1CRt4eNGjX4/AWbuURGr+XSTyH\nNlFXTLJCmTMuWnYjodvikdDKS1BoEOlp1fVN576iBonaa5KxeUSvLtMbLwON\nKbkUJ7Gv4Uon4/JJCROCsVIe66VrcuC08ZM1AOITfhL4Kwijh1r79DVHQXKv\nIvy+NQAsDGXN1whde3vI6UZbMGnRUU1LLCj0CeAh5WsO1rUM+hPkG+hdawNG\nSpax\r\n=jsue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/shape":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/density":"12.0.0-canary.90e08fc6b.0","@material/checkbox":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/typography":"12.0.0-canary.90e08fc6b.0","@material/touch-target":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.90e08fc6b.0_1626997162572_0.8679372688556466","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/chips","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ca96d0c45e459d8e636fa8e7dd3b26e5426848","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":160,"integrity":"sha512-TsTO0TzbfqZM3xPn2QXmRsSlVuLtVNxjaVZxMqYmAkifAHRmfaahRuYOeHi4IWBbxSq/c1mbY9SBWtdMvnmyIA==","signatures":[{"sig":"MEUCIQDKDu6fwrjmy0smjlt1TH/s2Eqtpt1LGiKB3kxdBxRHJAIgBH6PG5zB9IQjWW8yBEa/b+FXq6jLKsSa8UZzN+malL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1613080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wbCCRA9TVsSAnZWagAAUvoP/2x5UY3MzOPGslwRtDpv\nL76kfiCgZDQNkQo253TJ+bprN+5FrzVxGhjKFSFqDssKuwmJ7GJxmOteKQUA\np1IMBin5wTYbn5kDrbys3sHRlX7i9rcbMzDZqu89RjYhBVxHI2+g6eOPdAUY\nFQbepL3qCleuHuyxEgLsQqnm+z7BenSwWAiN6sbo+ZB5enWg4sQM0noFA0DP\nLufkPoMZTrUPZHRcg5A/SsFo9rbxbnfCNBZiijGYokRVtlRKsKMpb9mNazA1\nVnnLQ/Uf6Xoe6NINWxMBEu24CXXiIcwhxVLb70oaLDKTeG+IonILN3275fNZ\nLGH1zBnDsj1Qy3gtVPj+hDVCVi3VRM5Ym2a5cO6KDVW0jSdZoWeT68nlEf/f\n1oKtClb+67jwvnjg1XYOg2qipJu1EsBbU5JHqR9YA2qn7bq79t2vCjWZ3Dn9\n4abwp1Khyaqjh1/jU3q+okdM6DOvZmbOEV3tMHN84rZ+lHw8Rm7wO9HxqvFF\nIbdFSCgjPMochTLRG96zQYUnzD7tfzZhFtq759wtMkHb+Y/LVQM1BJipHwRQ\nz/7DGKAm8y0HOWJ5Vw9+GOBx7Q+8bRm1nFQJKulnQwJmT4joG2HBr+FRUYwW\nQQcjbyfo8gHJ7FIqQJxlTr9E0JGh6DqmPlrxwsL7N9agXdZ0ckYzJblbLEEr\nQ/zT\r\n=rC6a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/density":"12.0.0-canary.cf5b9eb86.0","@material/checkbox":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/typography":"12.0.0-canary.cf5b9eb86.0","@material/touch-target":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.cf5b9eb86.0_1627064002655_0.6790844781739034","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/chips","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e0bb2bbfbabdb60942112c86937dcb4f97a03ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.3f36ac75c.0.tgz","fileCount":160,"integrity":"sha512-xI8lE2b/JbDUE1v5BFJA/qFBrUjG6ML7AtiuTk2cW91QEbLCM67Rmx+4maufSCMlB8rF+z7nVRQZ2zq2CR0w4A==","signatures":[{"sig":"MEYCIQCHf2tDG5IBCCTQIsDGHEEFuV46lJ/6Y6QsjDvo6SstLwIhAOKhasR6Y+AZh5j/65fRcKYHOujBHxFiotflp496iYeJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1613080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wtQCRA9TVsSAnZWagAApEsP/2cdGT62E+qHpBpXpcjH\noHYhtvtPoqIicZoHc03O8k+opaq2gc8d2Rg/GrdBHckT28IPDxYX8lXpLPXY\nwwU6pMlibd0GYXkuLyZ5Wwn19XzIWUWenG8d/cbt5jMC03BSgO/ryLz99XFM\ndFYdf6oC9kd4Fxbea/NlTC8Y3dKN0VgUC3Gpeug6Cf+r7HeHj5GGdCBwtaYR\n+tF51EQoTo/jPHEyVkbW+Yb8iHkTCydWgdK8zAbfkoEQzHhtbEecN26FSEek\nxHHhp3PpPh9QNFKuCqrQMjOivSeiooAVEFVZbitG9xJeSyB80BL3HtBgKe7x\nH2FoWmZ1fW+SoYEk6P8L79Eo/Jsynknz8/YkLHbLgnFG8PkXnw4oChyEJXdj\nTbx4HI+ZPC+TK63w8/ViDj89erW9mfTgLSbLLl17khRZZzeHzVjbIwlTIrlD\n4oXnzJlfXz6sgOwanZni9DQYdTMwT/W3b+Xg7b+jc75InhC/+U5M1dLgFvVB\np4m5iU40x2Tg7WRxZ2YnKKMpRP7/PfEQ1ERB6Mp/SeWmTAPoe2aOtmVCwDnA\nXHz6Soeh168GTOJiWx70ZXaEk1+vWATO4JYXWOAYpTFRq5cLg1WHPX9+spah\nTdqeyizlk8ogFYIqQkQ6L74D87uaqOw1JWHApf/8ZrRiw2bkTHztGUmFdrcE\nuGEE\r\n=qlvo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/shape":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/density":"12.0.0-canary.3f36ac75c.0","@material/checkbox":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/typography":"12.0.0-canary.3f36ac75c.0","@material/touch-target":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.3f36ac75c.0_1627065167932_0.47164601347517077","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/chips","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"177e2b9f835020e690da71caf00a6f249235b3df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.ea1e1b850.0.tgz","fileCount":160,"integrity":"sha512-r5joeHk3aIYyhQgs/xOeKePAZ/OOIKEKagANc9ZTquVBoY3qyzorlRRgmFCoy+ZD6F4GPnFmbbSsjessHbgidQ==","signatures":[{"sig":"MEQCIAcDIXndJyzGoylBnoFzzv1ZGdqqE67FEbhBacDSuoPuAiAkUCvpb5qFtMhcz3qZlCDLbCNQ8C4D5bxUealrMmkxug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1613080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H53CRA9TVsSAnZWagAAdvEP/jWJ/4JfVWzxsHy77J5W\nS7Gw93F8S7uaGnQx3i5Rm2tHYeiYe82GX/Lz6HOiEWqCcxPeM1bVES3Mpy8n\njCdNUx4vctYP+JhQZMsK7ALP4D2Qo9TCqdTcT8P79N+/Vo6yqqH5in070T74\nQQR97EVp8+dXZ7GpoChxownebODs0IQy0/HRJG359ySEhHpL7k3CLikx5e7R\nGODK4oRl88VDBkzTxQjpjxml+XenLrjXggx0WoLrPUPz6qF0yXLglyICzz52\nnEAKsL4j38A4xqKJXsN0yslBKK9wK4AoERO4RIlb5qSzcPp2JGxO3giCPZnr\nGYjUtsvHdgPvXAusl6RtBY75OB5YFhqvLB28c4vEqfoCbqTBoz+2f5uY521C\n4xlPUY9J+pumfwjcStDBMwDvgHYyrESu5rCzclf50Fli/j7YWift8nfRtaLm\n4iD7Mor25cr14NBC8/NI+pTa873LECx+u3br2ttaJf5JHwXvesJyhEFYsR57\nhabz6+/0RwCNNYZmpv/cqYphVe8BPmvZkxCDyvyrX2W4A1WYqIhFGWt/o+3O\nKuH/sMLycLUcQzc0P3hYg361jsOntyJM+MjB/dospZW0lOv6XnlN5q7V+L49\nJl8RqB7WhNxQC/DP8+xAws5PJTJ7X0gNUlKA82GGXVZTsrb2/oQZ4IIxM+GP\npt5u\r\n=v6Ef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/density":"12.0.0-canary.ea1e1b850.0","@material/checkbox":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/typography":"12.0.0-canary.ea1e1b850.0","@material/touch-target":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.ea1e1b850.0_1627160183408_0.2362976111488495","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/chips","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0-canary.22f390c43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abf42f83453e07a31961d58ba4d3818992c258c3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0-canary.22f390c43.0.tgz","fileCount":160,"integrity":"sha512-AvvE5BSreO0tiVIEa5mg5+NuyQL2YP1g4RcFsvXvL8lYj/zQSIIIr0AzFuKOFQ6VrzlAMDcObpZipKBp9QchXg==","signatures":[{"sig":"MEYCIQCClGtu9fmSxZ2VWvjSvwaoWeXe3yAr4fGWSguVvv7pRgIhAP0o2NEOZs5QNxJk2ikdwGTdc5nDIIvdZm7OuwhldZgf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1613080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFfPCRA9TVsSAnZWagAA8+UP/RdnZA0spotvV13D5LSa\npzHCMDeiD6EGCv+nPnBZwYiGJkp5wNq+kI2w73NnPdi24sEgmqFwt9tqCG9G\nXU17QsudHDUBErhoozvVdu7WS0sbZwTLUwrrCWyOZy1ieImcfCgD3iMQ8YY+\nNVN5lVOnteodrpO5s1yEWZ/WufgZaajc/KJiiV8ZqWDkNyD7sIOmI9dsjbCN\nANUqd6BD4MEBWr45TYq/Kt8ZjsKI8MRU15g6O0efCsNPleO6j7vMP3FTSNMi\nPdfhbwflsWzDxLbiBQpEWsaS58uRJ8LN7aaSaHoQMVaK2wpMf3EG39RTNglQ\n2wKrlc2dL39ewjgDrQFaSVqUVuSI2tq9G8mubu/qNfDFhydXiTNB0y5LWmlB\nI+uHvzu2pdNNrSqcusX9gr8+pXm3KQwI42kbcFubdE0fALy3aqnE79aTba9z\nXe/R4RQwG3Y1CTK/lI+WgvrFQhGneyPoggHJkbqxPxIBsboEFyQdOnDyr9TY\nArZ3jJxrPFnIXi8DYzz1S1cSo61//2fWCyIa7hsovE0KGAeaEesoyTCD1ADw\nyqamohYEzaWBkZBCmyhtP8aY9FKfvxMQQ/hk17jQK8NWtiy+5snW0tYeg1/m\nLlffeUcp4i8rxN3sY4UcH3tpxEWo7FLB7p7AcY4NtIgZUIPozHuAn288xOM1\ny7GG\r\n=1AVB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/density":"12.0.0-canary.22f390c43.0","@material/checkbox":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/typography":"12.0.0-canary.22f390c43.0","@material/touch-target":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0-canary.22f390c43.0_1627412430978_0.2985865559434364","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/chips","version":"12.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@12.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f92f650c52d09e069446711aca1ec5fdb257dcd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-12.0.0.tgz","fileCount":159,"integrity":"sha512-I+OustjFSkJDq2AXg909UXcf4SGCRItmE4s742gKIjDFxzpTKk1ualbWAh/S3n7Q3JzCVD5P34tuJnOB+OddfA==","signatures":[{"sig":"MEQCIDb4FbT6p1OIny5pZerddlAwFcc2QJ/gu8BWfZQ6XDtRAiBnRB4orlismf3goOsP7rpT2y+BYVWZfSJT2ul1ow2/og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOJCRA9TVsSAnZWagAApMwP/1wymb3s/5I+HE7MY4Ju\nzYlnMSl4EokOd7/WKKvptPM9kxmbiAvtlEV01q3fsyBkM2m2duKmWCgZ2dT3\nt1Ppjw+Iux3YLkDJGx55xodpKyFwG0rt5UO82H8NXZcbbiY7kqtIRiytA7ci\nFGpekq2sOkjqzCPG3yWqJSWSmyzy1kNxlbuitDpJX0iUp2tVGAHu6oLknMPF\nT47TOL5b3jnJvOBtr1TqCl0Msk40he3aBskKbM0mvtS3PsIInxKLesODiqWF\nYQT0IJHMrfbaAfbXfT7a0COUp5VucfiYqg3XtJKlg2p/X/vXggvoOn91bJB+\nx474rR+/Tg418XRbB880TnIDXYbH4FM/7BloSbsVlR1DcbRO5agFDQsj5eFd\nAxLMyYPJJ4HLDEQ7vP/J/OsK2fhq9PdqMw3guvIv4gbvDkslNRPq06GCwaeg\nhY5jsy/Q96AnOG1eQwXr8ZiL3vqPGy5HyDWXyJCAUvXgzRpKeFxS9rn0fJz0\n4E4/RGfM4DVjiWV/z03P61rhmTFyVRw7BemBqN1hF7wFidMWJ8Gy0AsVqvKx\nb23hvG4cdZvjCRFIRMotK5qk4LRxtIebDJqcONwMs4xUlWN/gPVLHHBfIedJ\nv4tdoru9qIs9zVxmMoAJ4Sc+tg287jM/I0v50TBdbuQimF/dgT/a/c9wUJLl\nCprp\r\n=fFLM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","types":"dist/mdc.chips.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/density":"^12.0.0","@material/checkbox":"^12.0.0","@material/animation":"^12.0.0","@material/elevation":"^12.0.0","@material/typography":"^12.0.0","@material/touch-target":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_12.0.0_1627415433636_0.6312788997054242","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/chips","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8af8c4c2343e29fcb8634fbf2c357483c136547","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.ae85f7eba.0.tgz","fileCount":160,"integrity":"sha512-5HGcHjn8dlB56UDZZYHhXeu71wiLOMFUwMhZPHvv+uEuQADbLmukPQmQAS7QPsVhp4ZmlSHF4enoFtxDfDpxqw==","signatures":[{"sig":"MEQCIHY71Ooyo4rnV+T2IdFKXNZPPaeqk82NfIUaxQEIIAqnAiBHHkouXYIjHH7sDauccCVfI7H3J0LdelUmBmSlGPwArw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1613080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPoCRA9TVsSAnZWagAAIBsQAJHVhVf5NAbqL0xDTEOD\nnwbUAzhftm+qzvgK/KlGufYU/9EwTGNEnFk0MUAi4NV+RHKxx+DW1aHKVzHD\nFnHnagjwyrYWfEdnHdqiTw1ZDSMpnxFkG1J81aYQp0hvhEeRY+Un085Rn/49\nctoogenno+pP0MFFTWtQCx6aLkDKBsJnBfcStZOt6qgArjpxCg5x6prPSb9X\naQDqnIYoQh75tZxKN7TRz4ay+BBebFi86+IPPRkKCuoBUdg78+68RZF3pwge\nKCXDV3cQMW1jkX05k4GdGxmljU6GzAtfuBka/KSXPfrinj4WrNncwYwKc2iK\n6PZNU1ywLBEF92uYPO642xdg4ACnXPqYi9MNq4ayftaSqxuQJgpAdBbeCUPf\n8KqcngX1QfPemdUEsG2dyftcfa70Hhg7Weylp5lg23bAWvfa19uW76CYkNUM\nkkKYnBMxOH+7OyEk05biyDiegFyQplAmQLUlmBBGsrsco7Zq3o+okcSPYdiC\n9H3YgMrVdcAq6b0VvG9MTfpYFWUx4UkzvoWtRCYW7iQVAzg+3s4/M/b5pK6v\nLPzf68HtFzLZ31UV0xqhlQEO0yYUV3ciIJzhlg4h9gcWUQ2pqsUwBbP8uQlh\n2MbCESbBFacc/AjEyg3Uem0umqDzbxzVT9AhHdMVgv5xfZZPeWMJ/rXAh6Ib\nulI9\r\n=/qHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/shape":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/density":"13.0.0-canary.ae85f7eba.0","@material/checkbox":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/typography":"13.0.0-canary.ae85f7eba.0","@material/touch-target":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.ae85f7eba.0_1627415528203_0.028819795757638378","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/chips","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.5981207f7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51d3002ed6d2e7be77104f42a61cc49708e704e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.5981207f7.0.tgz","fileCount":160,"integrity":"sha512-FtXCja0QEhaO6et2TkHQapzIJ6ee1eNM616dSU50bcAOOVfigit7yaeVe4H2CexF/eUre71dhRQcsxvgtYjEWQ==","signatures":[{"sig":"MEQCICMhMMjbV0n7K5gPlxVzuiaFC64gf73NFOpd+ub8IjeDAiBiFWO5srVuMeB8LGhhYm39Qb5Ok4Vpl5pxActjXMcLVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJRYCRA9TVsSAnZWagAAkJ0P/1wa3AEyC2jAAlivoU0G\na64e1xSs3MGOX3VWKH5Rbo2/a/rEIRxIflOHjgvuv6tn0JjWdzxRbgEWVqMO\nbXnGjExsujwudhvlpI5FB445k8BeBmj96d06aE6n3Y7QA4b+7LZ3d6OUGHKB\nit+aUH/zmgxYTMrZ0aC8EeSoDYRAeuSNepHnH0O4bSWNtrL22BilfFRqNcgG\nB3jcFN458VxB58WIVOT9IPGGu+J8XYTZx2lidCQZ5zXPEC/O1qnNS2EgCfbK\ntEpK0IzomIA4+sTYMP4W4z76jAqWtrzviMD07/fHM+l7q3e69Zmcb7ofE5y8\n4wek5TakODoNxdlXmgw0C5AShurvAe0vYnoR4n3hLG7W1Xv/9Ha8toCuHAuI\nsMVnr85rG/R/blSKpMsip8B5UfeFJR5dAf+ybY1XWDesJd2oAwp+TgEnFalq\ndGIpnS//BYy98Z1OkZeouxpmfb1Prrxk0KIIRw6YJLIu6h+xu01/qvQDkIVE\nW6jkiJDN6a8GWeMtugTh82awcRJDDqKlchXtByoNeqHf6ZbXcUNqOBEkyHSk\nPm1K9NEoMqLiSkMTWnyW7iTn/nVy7brghQERKE8ggoQ1VByec8Ckqllmhi6b\neVL25+TbfBhBAE/N8jnHwdHPIfG3QYv9ZB5MJ2oWhHN5pXuG65a+WV8RjeQy\nyi74\r\n=2wSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/density":"13.0.0-canary.5981207f7.0","@material/checkbox":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/typography":"13.0.0-canary.5981207f7.0","@material/touch-target":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.5981207f7.0_1627427927949_0.5802880836611974","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/chips","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef5a623eaad3290c000f103be8f3af3cfc87781","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.83bdd0222.0.tgz","fileCount":160,"integrity":"sha512-SBs0UPI4QmUmE7Cl30J7N15ns7ebHP8VWA5z+aXvDFmHkStzg0P7utZ0INit4FPlshK1TlRE+mKwgrNKqhFTzg==","signatures":[{"sig":"MEUCICB1WGT3gglxhoqgG7tsLQCkq2y3mx4RlnWeTrx+CFk8AiEA3EepCGiJrnL5tiZ0R1f/Ly8mAroHsXVL8jtuDP5v1e0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZNnCRA9TVsSAnZWagAA29wQAKHFaSwinBYGganVjfmp\nojngw5G/d7/aaS61ECG9kEOaodH8uzsU+QlNwIKipgIsy2LRbl6XuNgZDhUO\nf+TivcJvH4eh4CNVNeE52qbx6vguuj4pPuv5oU0VdV0s9M5mHV4JT5YBS1V2\nomJ8ExcE1GAnOApxBzLQdR79S2/KbEj5i650Ml1pk4iXfWz6EIgLWXfEsAkb\nl0/+oadk9Q7zk2kH5Zk+jb+wDzCjYGCgZnaoXRHGSQbM7MaHuZmHInM1biAt\neJAe/0aQVYi1qIxgThyybCLMTR4e4j/k6rEO1dfagiK1NT0pd4AUvgKntdA1\nUYB+WlhODf8IDeuh/Rpzp8b3eViV9fbyCNIjuZzaw367BVNqcrqEwZiy1ten\nv86/O/Rpv22UzO1r/aNuI7N6MWfrePoE9Bj7bPjsLoBs5aXswzFVbzznp2Uk\noml+YZqMMf7Jazvw3GdD7+H0kcDy04nv5svOVu8CtksWsz4qW94wir04kpxH\nBRp/Iq8Gy3kcBCIDqT4PZEmBxo9ydckt0DFWNLuDWsjduFfhaWOdenv308st\n8hHmPTwXmT7akdVa5Azaty5mLBzfiqS7VUAXqYWf4jRWDBUwUTRWZWMAREKR\nQv0AKgmeNIRzl9NUVwuiX5e4ujt5pZBjzYL4nu1ugS+o5AtR7KITC7/AbtcP\ndD1A\r\n=PLsW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/density":"13.0.0-canary.83bdd0222.0","@material/checkbox":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/typography":"13.0.0-canary.83bdd0222.0","@material/touch-target":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.83bdd0222.0_1627493223499_0.3460819445264869","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/chips","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.28656298a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1476de8b98e53333559130417bcbedbdfb8f371","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.28656298a.0.tgz","fileCount":160,"integrity":"sha512-5bAyKDpdDHkhKGeYFGu2ev2ha/nHNJo0oVkhIBsK02WAj6AYqPGoY+HeZEGNPLmjP0N4aPOVMl6OOfsN0TrYUA==","signatures":[{"sig":"MEUCIQDhNI9G3W2whh53lrpHN6pV0ZN1BMEjjYOmOuTg+4kOSgIgLoZDCxbO0XYjWbB/MyRvbsTyDSNdA+XWqjNJaqUfIuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/xCRA9TVsSAnZWagAA+4gP+gOQBpQlVAiM99Ml3R5a\nB4ampWzWXUcSfU34H/+aLwmNs+ezkphTZ2TJM3vGdS5MEj6pTwwylqVUSCGH\nFWPx8WBoLAGdDJmLaZG1gaZypWuQmzJxUf3puoXGm7NsEWug4HXCFBKHpHSp\nAq3RYd7MAjvmcA95GbyfN5rJ5AwyPXFlegkNcwqcZnkolZlD7gmQk0gVu/nB\nua+YuR62RSIoyVnIbiw0eqzmNtLUUlZJNkiojMSwikbzDrhWwoG1Ytf2gZBr\nnZcW3xKCVKoSKLYhM+7btLD0T94O+NO/oLPTYymMeNaVNqKiJiXpQW6Gygmp\nvWaYVztz9qyYqP7w5PAXbpO5WC8eS00S4TGhoegQBNmlLzLkGJVLnyde29B+\nMNeLK2DBcl6UTVd7nHSYu4bToJsID7e65Tl7SamHq/8Chd2aR1gRnYGOo+sY\n+Ns8Dv7zXStKH0uw2g56oKnOTNTO26bCUTBH0BHnVfK0EXgocw6JhA78UXGo\nZSNhyRXcwlA8qaC7IpP/feOT47XwJLhUrb+39AcKFrhqEMUBJATIqA/AJ6ud\nSKd0BRqSFOfQ/aH7hnJv/KH3RT7I3wwe0jZ5xliyx2eoa9Q8RnIAMQs9dYGV\n4pSfkyA1WEK9FtMEpvCj9kSgQz0HszqTyx/UBKH8KE1sG9Uz6ESpvGdi3jSm\nksCK\r\n=dAMw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/density":"13.0.0-canary.28656298a.0","@material/checkbox":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/typography":"13.0.0-canary.28656298a.0","@material/touch-target":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.28656298a.0_1627582448755_0.5925786689885859","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/chips","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b247f45e741c26198e60d7406eea5f7ac8d3c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.9e797daaf.0.tgz","fileCount":160,"integrity":"sha512-BZrnq5YA6gQqNViEdgPWAL/wYI7kCP3Blki4obZVQfsDw7z0ezdyVhPyUeRNrQlJM1XIuF8JYayA7eoL6cWaTA==","signatures":[{"sig":"MEYCIQC+v16b6v/Ig7sIuCTVAg+o9F88zIt7jl7Yu2rYhS03GAIhAOMDuy70piaZh17QsiaaNXV/gSJcvhrEA7kLp+bWujcr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1611718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvUoCRA9TVsSAnZWagAApq0QAIGg4goBPg5yrqJNa7sk\n9FA2ZS/py6j0MIvSfK8VW0fjf9ADSOTmioZMaG/c1JfpIIOHZ5OaZKbUf2bO\nXwBie5CTaoZNnmtbekhrru5spuo+yPCfjm04BF+TOyAk81v8cpSkwxxk2NUy\nGQnXjxmqj5lp6P42avln6ekpbHjIA8f4g+H5rTu+DpI8xv8qr5DS22qTTKTq\nd6ruB0qzDEhfYusao81bWMXRlL5Hfth1OphuAETnb2zzqrJBQH+8NVuiTEQS\nDSkAtz++xUaCV7NkOYQ9pJXN2OjwoimM/qmGYG3es4G6OVg0JrPkbReBffjp\nn/MlWiNXbvog7nrI7DxV74WSW6bxsTYXu0+fVXcKeXg1pB9kzalrWQ3oWcpG\nGNoHOVni/G1A361pYw9L3gbUv47ArIVstFJgDBsb1QCFa2jB83sr7Vxlxs7P\naOAPgXkyEjkY+U8VoJAaOc4/rj+6ebqAL6tB8G2kVhqhERZSwJrHpSXQGKNp\n2zpv9lBjq1a2NQQm1ug0YXQ+rP9SpYsHPS+l5p5AeyXKZ+NDO6YzUEw8Q0yJ\npUp/KEn5tr9PtZjjDNPLsPU3WtNZTCTr3EfTLy0mKL//KOdqj9hXCUZz6TcN\nMONIMoiBLTYPH6igVYrYGw15EnpbI/x9WpJR2HeCUQhHKCOc0KOkJbCSuusf\nzxzY\r\n=AiAe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/density":"13.0.0-canary.9e797daaf.0","@material/checkbox":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/typography":"13.0.0-canary.9e797daaf.0","@material/touch-target":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.9e797daaf.0_1627583783981_0.08986451909978532","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/chips","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2326fdc841c7c7a227ca01800960658779786690","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":160,"integrity":"sha512-dZzdqPxk7yAoQWmTo5g1ofCb5EP1pjvU6t4mf124XVqkVYVy6F6H6QaeL0+GHM+MzJ12bsZMfRfw19Ybxv28xQ==","signatures":[{"sig":"MEUCIBmeeeQCZmCHntkO/0Dsxt7cTBXDXB8zQ8IWeZR/QY+aAiEA8h/NO0w3rFmXgnD9VVRadV8+ujq7JyD5k138OIrcBmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE2lCRA9TVsSAnZWagAAPDAP/j06EFd/YrXS1f1CRw5Z\n4Grdt6BgFYIhUUtHxMs2PXGLVViI68kr8RwJcxRN/hm50v0QDxo1VsLS8uoO\n2XhG/jm1i1VQM04/5qndsZHphoNE9LeTyyWnEZpAXGCRpEzsRbCi9mCZ2hac\nBecxAuS2BBCb+GQ3sSMHpt3h7VBW8hkpW9LVmaGp54p/nqvOH9kpLCh35oph\nbUNqBgyT+8KcOMXfnP3kfVM0Fe1MuGTwq+EFl2RBl9uFqXNPCHnxCdmmAM/K\nP4FR7dq8DIdlo7dsd+fX9/eprrrnRDf9rZsDn4N+D2A5o72uNod8wCgAv63X\nlYe4t91dcGoq2qbJhyGlk603gLx5HFJ0tZNwvd8B/wJ0SxhFPy9B6GRl02Xl\n7llHBVxqYNv3o1VBjVLfhnGzo9P6OwHmjEvqEGBMpCKwxyfiP2S/QO0V4/+n\n9MTXiP35Fbki2vNmIptq7Tq5UUp/Fo5n9QNl5tULyaRCfcybmd7avuhxM3fH\nupO3Sxu4xk40RmZH+4uqw5QeGrXOXZmzgh1gh2KhNSP8f+TO+RI9W6zxAuJS\n9wJFR1Gp4tNEu1xYKJmqXftuXoUfoGhp2LQEbwXJQM7cNFu7IOMHQqEjEAeD\n8F1arxGJNS3qHZfIMYGgyQPaIj+NGOd72fsnajZncVjg9yaO5ENY36XGjC7k\nJ7md\r\n=9OgU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/density":"13.0.0-canary.adb9f1ad8.0","@material/checkbox":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/typography":"13.0.0-canary.adb9f1ad8.0","@material/touch-target":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.adb9f1ad8.0_1627671973631_0.09050719583207067","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/chips","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.cc5377458.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"355064b8adb831de2ad0824bf33236a3327bb9c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.cc5377458.0.tgz","fileCount":160,"integrity":"sha512-3oQfTflXpBH2l3/7taAx8kR9d8AuoOFrXr0FgF+5uPUnmPNgnzu341l6D5QW+8pRomp1HbSXuiTGYxN69rPcUw==","signatures":[{"sig":"MEQCICYo+KxTkE8Dw0kLuJyc7qhpiZ3nRr8ie732M5zTLT+qAiBUoqBwSqjsQaPVT+RnCvx3cJeTydILDwvCYBwlzdU/oA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHBICRA9TVsSAnZWagAAGLYQAJ3NwFEHY619Vx+CNMrg\nmyiTo7sQL3ZT2lKVdBpp04Wo3veohb9E5nW3jquB5owTBIpaoZTElZ9cgz35\nRO7/NTPOE1kBGj+fY+Hi52+9P6Zi7lAElVDHph1c4Q60pltBrjEKg53Aimab\nXcDUn9B1jh8tG8RZXeJ5MyEmuR4L6sRINsWBgysCMlYUIDQGReQ4prr6Jse2\nYWuidZ1PytRVrC54ntbsUPSxhb9czmduJfkkTeXL/sBMVjpKOObaQLv+37/j\n/bDbUHzjOdu8U06WRN7Bw2tZKTe+ph0ri0n6/KuckxlgD5Ye585kU0lNEjZ+\nE1TRDCWQr1eckq4TX8ZNQBgoJhty3jpiYZ7cyOFOOWh3amjl5Kn69lET39AG\nt3CKTZN3LIjKJ1SZna5mxjsfLExIsteeRssHcw/ECYEEfi5t6TMayqf6Qu6a\nauY0Je1d3+UDTKqFlx7FO3z2nSx8jF5hu4ez/lgtU9NZ9GqJdeD3HL60bhAA\nPhANGGZKbsekg5UeTpNep47+QywgaV3/CQhFoINEkoowfbEx4EhTJtpfY5fM\nBfWwoqbJB/tGcyokbVqxJvzodwuKFN2DNCh6mETcfe35nzuWpA/TQwH8DU9r\nZCLiTUaItjwZ9hPc1yLatABDqvrqzKMQ9SUVvT1SUcmX9tf+4tPc+XjKscMm\nUsm8\r\n=Wbvz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/shape":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/density":"13.0.0-canary.cc5377458.0","@material/checkbox":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/typography":"13.0.0-canary.cc5377458.0","@material/touch-target":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.cc5377458.0_1627680840099_0.12611386752810305","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/chips","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.a395972cf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbcb996aff2c93654762df615d94cba7f7d16a84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.a395972cf.0.tgz","fileCount":160,"integrity":"sha512-Bg4qmk8h+f3YiueAb9waJ2KMbcpXIKnMR5iIF/DB6XVp/QReXXyjBY1+8ZsKUbSl9gqHRgwmA9kvnudRn5FH4A==","signatures":[{"sig":"MEUCIQDMt1rWFFXtfD+0nryyQ+gK7p2WiTNmSneJdit9mYkxQAIgbdrDSFItSN7k7tqhMooOEnFamQAUqmQpOm9hNW/8Fxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPtCRA9TVsSAnZWagAAF/wP/30CLCQcjaLYBzQhqiSy\naMg87tikbyxlHRA3VdHvYCE5Ff1tVtRJKDdjhovitVjl9z8pu+mmm9lS9iCD\nUqjK2ngAm/t+6PyRZmU6YBS2dYXtatStRBl9VuA0xOE1iC2hBS2PxKnx7t1d\no+u0fwgFoepXQMgF1Pb6/XCc9WJAj4sHCbtilLZZGPpxMziR6/5qU/CWzrnq\n77BoW5YSW4ipQo4gZ6H6uz2dZvUftiSb/9+oOd8CXPs/WA4ViafgY6xK5aFe\nqeLoECGT5bNIQxaUe6lk4FsowcHuYgvddhIn3fjvwJ0PhzTWI4d62fL0A8Bp\nX4ZA44hl+hkisgl0k7QA7tJcqzRutTX2wP0E42nQ440KvykemrH4cg/S9FXJ\nBngErDqydTxDamOd33NGbpt9Cq5Za8D0LggBAD74PNupecDhn4yueaLbIn8q\n6CGfZlefEzjfUtewiczOtH4lLRPS4q7WLsgl2a7/Xmb63qRiHrgQ6YV+rfvT\n19OMk6oJa2S/yewzOUrMDLbscwBh4ELtcJkM54fyroeDvR5W7JjQ84UsBDWC\nlslJgGcinRfp6gKdDgDj0r3Kyj98A0Rh61sas/HhjaNmbo7scimIFHDDVvvB\nNdWZWRVnQS3LJb5ynnEelxb3dUt1WIgrxxRkfCMnKqf/NkmpxtaqjPZ+II3N\nkMLv\r\n=O6fS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/density":"13.0.0-canary.a395972cf.0","@material/checkbox":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/typography":"13.0.0-canary.a395972cf.0","@material/touch-target":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.a395972cf.0_1628025836968_0.056130054562730125","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/chips","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a40ec221250ab4534b76473ce20bcd74932f0db3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.7c96e6b98.0.tgz","fileCount":160,"integrity":"sha512-lAfl5JuT9sT1LWM2aGN8qBKtcjyegcPpcT8ydjva+O1dg70WeQIjVWsEeoOqencZcGwH0ObwPWUKcGw6QUFO2g==","signatures":[{"sig":"MEYCIQC2MsPsqHhjbSISWF8tDW2J4yLn4+Bl5AwBNQc4MK2w1gIhAJ+zc75raIT7S0WTtU67NDpXk9RbIZVYprBMPZic3vOx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb/kCRA9TVsSAnZWagAA1IMP/0PdbsneACp9B8ZcMiPa\nc4QCd2r3DgcufHvtNfCIwkopFVEqZ3vDyD9JP4+uatDPPEPA9Aoi7M2b9sak\nkigEX/4O5jcBGpZJTxSBIw4wS8vwfF3fSB/Uyn/WyFyAh8iQyNKf6z7Byn0z\nECEDww6V6/fcBxwumjTMCwTFxf7zwQ1kfs0OqXDI+o5HJRcrbPiBMvY/D8+l\nen4ugf0o1dmwAOfTsNlhPATiEirEgrSC2l+cjs+lz05ZbTvXtksx0sp/UZ22\nCU2FrI9oeiWuRN/BEOotvYFhsZMpBZ+G2cPQPdAyAKnML/hVmRkHJsa8GiBW\n3lzHr8Idp9JE6tNoVAfIW9NZn1jfyWCoF/AOyidgcUZWAYYbR75XhTO31EJY\nbUsnZv4Gwg5fPJ0p5Zi5/GVrktrd4GdIKhxjq7ZUFPWXurUe+yLTppmJtCdV\nQyWrrTZnIdhqHNhZ1kKNeY8KNubUaS4BEP2fAqa10eEbSCwFFFnFcHoUliMm\nzgMSOcHOjdAQauZzsiZFzAe8dQT3Sp3vrwaF/y0gaGyumiYi488JOeVA48lH\nAp54nn6V7aIkydDewVfFRHF5o8xwm32pJGZeAhshOk5OoDfZYy8J+Q5UtYKx\nhqXs5dxd6OKcKYZ7qubNiJ18jLxL2II0CW0tm9SeOTZM9q81K3GPYtHmODZ6\n3mSv\r\n=+2Zq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/shape":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/density":"13.0.0-canary.7c96e6b98.0","@material/checkbox":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/typography":"13.0.0-canary.7c96e6b98.0","@material/touch-target":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.7c96e6b98.0_1628028899790_0.8004694462677191","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/chips","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa53632c39372c66390e872236047ba383b0704d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":160,"integrity":"sha512-kK2uAQtTGnDlpIa/gfNJfUDb+lR+N4iiMxV8wqRtj3NG3wbOKPcJlGwCVmHyNkUvASoXjQAlOX+jGJq+8YVSmQ==","signatures":[{"sig":"MEQCIH9M5023HOjM0f8BMGXU8qC6DPTgy7GPlSWNpEDcYp6AAiAEgThElg47cxcHr7AkO/XEt1oUqZ+Xne5cYWwByLnZvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyoYCRA9TVsSAnZWagAAyGwQAIGkY2eSx9xDo/7UGoVN\nKPewW38k5AudKz6CrrZIMha9e1lVafj/6sWYfPZHX3WSEjCHaY1fXtn3+PQ6\n+MSpv6tbpC30TUur0UyR4sxeofwrh9Wx/n5Hv6g7nZj+ieUy4nabQaWStpab\njdIKKyeixDQPsAY77Up6MI09S/fZOIb7fGSxjL+cEJ8idqmEwXfNPaQcAxYN\nTV6gL1zgGR8wxbOpcNCTpmWLl1OcsePiaUApIi3HeWNNDE1tTWfVT6+7p3hp\nwsyOftlHSgZLX4bzTwb3jhWZBoDzPtJdeveKhUsNGSv6+QmCdjAI4g44K6rg\nsX8ddAVDZekFPYEGpJFuIuY1x0ZkU9/yPk11XunKEK22MRrLjQNyhzs+lx8o\nNos6fkZ5Xgep3dkC8QChB4iiseu7LPUwcLbUCjib+/zGhU6E1bNShv2tp49z\nHnEXJDp9KyP7ITjrCMqhQYOJrJDcM9w7UhHLevVtamgxnpL6Nwjg/QYnF9PU\nFf3w1Awtarv0bg6GGKVC/8OM+0BXZCn8gRxTE6JhBgFFIXiZhgymE16wJ/nR\n1vRlaWHrX1HKUGW2oZhkaZxBXLT4n96IjrR+VaD6j1brePZo4HRzkWfJTkMA\nSyLQQ+oP+g2Q9t3Y6yLcBPvmPnZWARDgnHpAxuzQQ8zqzSiBbMz7MpJ4MT6d\n7GOq\r\n=qCLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/density":"13.0.0-canary.a80c8b2c2.0","@material/checkbox":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/typography":"13.0.0-canary.a80c8b2c2.0","@material/touch-target":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.a80c8b2c2.0_1628121624564_0.07947901130710089","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/chips","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.3dd611091.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32da7bde27f5a051c16c3a8fa00c4f97ed0515a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.3dd611091.0.tgz","fileCount":160,"integrity":"sha512-dMyFUY+Kn3yIR1Fd/GeOyqae67FlgeaIxhUguQsMf8PzOp33uu1oLngqZ6/Ayv85+6Oi+A6jneCN/41lUIrgig==","signatures":[{"sig":"MEUCIQDnglCfTyd+yuaaGwN71LfAXstnh7TZJ1QZ/z0AOpD1zgIgBTC8NEsB8ZSINzknqAgvHPxwc6M6aUgi1dPa7sAe5Ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2GSCRA9TVsSAnZWagAAVrYQAIl/vYDJQ8xFWB5F+U2B\nfNwGMmoChGjgjVHdZtR4EZFyFeGt2geEwZ65EbAlyrzUFsVxk+URwlZV2g6A\n8q2QjYc3mK3rnEJ0i0swhB5va2ZWlTFznI19C8aLn/5AuPy3zauwtD1qzh7Y\nBRcS5reJSUvoo6DKZ1+0sMjHma/PzjT4mpWUCx2tAL5F83ATvvLzGkM/0gyL\nbMVLeDXaQBEvzh41rjaZppY9Pvm/ccUKm/12FTgAWLXCpepaXYdNJ/9VbwKL\nDpA0Chd+ye5QWwafvmvoA9doNl3CjPzvtJgJjvCcBuCBtnsPLWzf26n134rj\nhUMsjynp6+wkdGJz1zyS9o7NjolsixFV7jsiD9avawmyXnolfilIEiAlFT4d\nr3dj8OhvpH/Ccp6b9AmlW8W8NhwwEDlHTF5j8XUeT3LSHJP/x77GhbwOhAuw\n0j5kpHy4aoLqaXbRE6qs/d/76CMPUc1KLl3fWKUtVxan3WTB/d5si006iH2X\n5+5GlDKyeGhPvSwp41ch7WzPXHd9K6pOVtOSZarNcSDPGgAeVAAjTHjzkmUM\nXQKuzeA8lpfc5sG+wwj327g5Z9+3vAmkk4wb5/kvOHNxwQ3JzJ1el8yCnlLc\n813fs/e03EiOeqnw0ZeixT+v7AiwJAu2HbzL8Nl2ofvVHhqBDMvJSSv9PuyH\nN/Ha\r\n=4ZPg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/shape":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/density":"13.0.0-canary.3dd611091.0","@material/checkbox":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/typography":"13.0.0-canary.3dd611091.0","@material/touch-target":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.3dd611091.0_1628135825927_0.9570048676537066","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/chips","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ddc5bc6e2e918ffc977ad1cfa3bd6a5b6f70753","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.5dee37ff6.0.tgz","fileCount":160,"integrity":"sha512-XLeIMaXXkTijYzy6hoIDJglSwTKqHuCREztOuTAevOwM1bE/tO5yJ6ouq66/rrJq1ug+xFovehK7dkXivX6gRw==","signatures":[{"sig":"MEUCIQD9fMReI1Iu5ZLb+J3PKztfASnDa7aAB40WJRPI6Upn+wIgWtu1kWrGT3pknFXqv76BcqfA8LkC/Og75HSo55oJ0ks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCMgCRA9TVsSAnZWagAACPoP/0aeSMuIXIDKlM6D3/gK\nFFI9M9FLK9WLCNEVq646hTXqmXdo2E9nwd+T2fFSjMyyM4Zm+5RAP9gmDrIn\nRIS0qXsxZqUDnjTSnRIF3vBg1oF8TKmsxeZ1hTFqW29ClS4yncWd66iIpnCc\nNRVAcw7TjG6x774KHQGjZ7ypTRD6QkComWPK0dqTNugxV5hUbTd8iEmw677G\nW5lqDnPZ6CaEVQfHYHa6U3ZydiChzYDHkLkmmvbCxZ4NYV2+5B479k+TwQJk\nKgAnovOyGAAw35YXtShynhOBYkvaC1WeAYU/EdFqoG9nDiUZTsus2geBNy3D\n0OtCzEiwMB1Tdol7o4/lbNYjQZvBhMzLWuJV1glx9eeANqIlFQaUILlf66wb\nL8kb3uRYz/POMgnQbG561c7PUVp2J5Lexj8AaY4N6QiHks/R2pXO46QzYV7v\nNDorem+/BPqrDS4Yn5kfEL85cxBY2/+ysr9aBnun1AeFF+qtovNS+Lb5I8Qd\nFtFLHsXjpkfl1UmsiX4NGWnxy4yRvtBroUjIIWz5s9UiDrroMvyY9I1rv5/g\nMyjusyVOymkFRkEfbEBpm1ZQ/M91BeOUdUKnFToXJ0G8fLGbWvhpw1VhPh3t\nekouCHsE7F2zt5MUgkc/5OR0es+lLe/8FdPaCqR/KEGOQtB0zSZqm5x95QZV\n4OgQ\r\n=f4x9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/density":"13.0.0-canary.5dee37ff6.0","@material/checkbox":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/typography":"13.0.0-canary.5dee37ff6.0","@material/touch-target":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.5dee37ff6.0_1628185375817_0.39246480179591603","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/chips","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c8a05dcbc7c1887c971e35d7f0982cbb5f752f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.bf405d22a.0.tgz","fileCount":160,"integrity":"sha512-Shx5d+JkqMnZ++U2PvIsTXWPr5p5gDZoEhEdKDm9xQjFoj1WnayUjFMibcEKakokZ3hbEag02/ttxtQXBBhCWA==","signatures":[{"sig":"MEYCIQDNtWUyMAwQtS+dqaCwZpFVAKkKGpmOW4tjAMu+WCp2PAIhAJAZCXsHEofDGvsZxbjhYmLvPqDxLaaKHZkSWHtY4ife","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1612816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEelCRA9TVsSAnZWagAAn9MP/0rA55u9lITV5xW6BCly\nZgdpI9gSmKY2fmJymLc7bgKetlxYIE1dBo+nGUpe0n0ftnZ33oyGA4MRluCK\nJiGo6eTKcrddznmUauQGAGPOBaypl0Cg916y0dS++6TSqLS1MzKYQ8HuPgsl\nFzkEqTq8mvp1LOFnBoiq7/ZRNPFciEtMBECetkFGFGUcGVtHTVsQTeMx6/C9\nMsSoAH6tWZy9n554tMb/Xj6toJvjHrWWl+UWTicD/alyuOGXfA9QrLwdt/T0\n2MjFbqsR2J1axO6x1AJhVzaRJB19mtN0r21gB50QNcuxzh1euN65aIcxVgst\nHu7O6jOGMO6Sejnuvp8Zin6oKMpFK4ziIgnOMmVbbiq7olQ2feCFM6LB4kcQ\nY19oSELeIrl6thB1Q1CyXTXrKV6WOJOOZly6mioaHR+5g5sKsXfKqhiZFzuy\nSuCsL5D/YSQRtlus7wwM8p3syQsHAwHc4tk+6HMgxaGwM/oiV9Er7zHVVtc0\nrs+lG5YHWyDA+vIh0JS0JkMQ9f57sm6y3sXQrZs7u5Wk4V9Q+tGve8n7ATDr\nA319Iw/LsKDtVdQFVOfnB41xMDSnaxcZhvh7L/h4oH+3GdMiqXe6Hgos9XnT\nPyL8ekOZGdypdQdoMhUY36MfHIBKZhpAyhOyhBMhCNWDTE7s8tD2+2mQNAyJ\nc0+K\r\n=v4AO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/density":"13.0.0-canary.bf405d22a.0","@material/checkbox":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/typography":"13.0.0-canary.bf405d22a.0","@material/touch-target":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.bf405d22a.0_1628194724995_0.9731115976769156","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/chips","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20f1cf7f74fa24dfdf2f8105106af622e48dca32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.b47dd37a6.0.tgz","fileCount":159,"integrity":"sha512-5bV09YiazDkFjm6dGedZo1nczcTd+ba/4wV0XW91xH2d1SDi6sp6IL/Qzsvm8hQZSrCK9tVsN/8OwMKGJro56w==","signatures":[{"sig":"MEUCIQC2VhiURfDTKyR+PV8vXK2BAUmco74v+Y3ciInEbpQgGQIgNNndAhyvjf37NZaYRJpwp+se4spAKQoaKB8ql+NHf90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE8ZCRA9TVsSAnZWagAAEL0QAJURjFBxRv/n6lrIWSxf\nD0K6iMq3zSi2asQU1Rio05jfgqTKZD373pZKOI3D/Z+3R7uWkQtPc9MQa1tF\ngWdFKpyBJ8rQhi6U+P/qI9dblLsRR9rTWRyyGvLt+56ByQOKhKZnUFTukYJp\n5CG8Ge/LpKE619JbwlSOptuIRj01iDQevj18jP1pWKF2jwcJz7n261eVP4o9\nfJPUnc3/2c8LCa2a2jFDq4yHtpdXIlRwJ+A7HsCaDj7w1BGEkZT39bE7YHTc\nCktOHrG7w5TsaOM0+Gztd2db8Zm7ez/hDqw0L3PcvTwPlTO2RQB3DS+oAhK6\n8CyKym1nYa+V60qz07iZBzrnQUldT9gghOiXrgfO8UoNhl0hwqnQvVpVmLFG\np5nlpLqeyCBvLL5MKW0sRJYOZukQQUJXz6DqeUWyKH5VeJSJgBPs/eIk4jZm\nTU3MtkpY8iajkDSc85eZvTWLFLxt4z14sGEQp0MtFIv15zoATuhTyYl81AAx\nB6qAEVZfYKeZvzR5FxqmmH5HtNrHM34XKOdEFPt3R61wVMsXJM9+1iDzGX0Z\nnJp9dvcHSQHemnL/tlcGRXhzZ+JHPEToxTFGOjE7u2Uy5fXajSrMEgph+VWK\nzoF6ZweWxfz73OaMvkZtQdGoCA0Tby5s8eboMJlxza0du4YRadWrpGk0urlR\nGmWH\r\n=1+WB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/shape":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/density":"13.0.0-canary.b47dd37a6.0","@material/checkbox":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/typography":"13.0.0-canary.b47dd37a6.0","@material/touch-target":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.b47dd37a6.0_1628196633729_0.6621425338295093","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/chips","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeb474e1ebb12be88cda6750198036e5bc3a6178","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.6c82b965b.0.tgz","fileCount":159,"integrity":"sha512-zUMLihFolZnFv41bp3TrJnpBw8uCrnM7gvi2SvXBRmVe4cLHbcLexZfY5R83ii6zLm7usHfy3qxxMZ3BC3YyJA==","signatures":[{"sig":"MEQCIEVOcwzcLjlVKLYg2YqCUCINPOdpMpOAgUMfDyHreSoeAiAiCEdWxM2DWssRtXQhZ2AD5iOljN/yidxhOVLp8/vn7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWAhCRA9TVsSAnZWagAAmhYP/1GpD4ObNG2Ff9hyMPei\nmLGb4UJRIa8P2ZD+whMkPYLbW3Mqp/+rILcOksQsY178jzu309RRDimUIrPF\nCxePFlql2cbZnrGz9BKwWzkYNZemdUQ+eW7PCV7suq4I4Pluk5s+pgHfSX14\n8zUq+gPy/xTBoscyRkScg6dlNLGfbrwUnUxBiWRwznJwigF80lCzyfWYQj66\n4kF1BR9R5lHn8eQarPL6NFghwksuucK8ePSvdGGINQ3e4rmj/gjFp9lLYfxd\nkjjRU+q/YMv6O6wDc4KDt0V5EoH8+6WoBoJyVQv16OAyHnHiItXhpHXIu4iV\nj/twqSahvGWaBslzfvWd9WL1VIyDc6x0LEiv30saY3stt+yUMWH/X4EREGAr\nFK8WJgPp2GkrdTGL5UcwiYKwgNB0xqnknCElG3OKfbD2gCcS4czfl3vzOLMS\nvVh98kKdVDpvsSfbIDXhOfonqfUMrdU9guEhfqq7Zg7Q3VIrT+XHp1ZegEAd\n/7x6Ow30cBFfAvaU10Sf4STctfq1l4O175jTL+8pbBdatl5CUtX416ljcxbc\nF3KLkQTP51QFJAHgXw54ITIz2YQfTQZU/bJ/Ap3/gi90SC1DrTxddGTJxTV8\nL+r/LpFFIF+SQv6YQeIe206hLoYhfsNLc6a8/2xzmBk1uHaoT+IqBTuG5uLs\nDdmP\r\n=03e6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/density":"13.0.0-canary.6c82b965b.0","@material/checkbox":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/typography":"13.0.0-canary.6c82b965b.0","@material/touch-target":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.6c82b965b.0_1628266529524_0.08968933743707974","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/chips","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcec299f1828ca8641ed48aa544aac2cbd567142","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.4ca11fe76.0.tgz","fileCount":159,"integrity":"sha512-cf1txj66DTiKwIK2102bX8Jc8pL3bnfKitsbuh/3JL+8ZVRCEeBTj3bUiy3+Zz239EOJlrv8OLySxC03gYLWWQ==","signatures":[{"sig":"MEYCIQD9KeqJ9Wq/n8sqHHQAkrGefY1OS+rlQWZwPXfmm658rAIhAPCJPZezwLWx6eJpVNtapwOccCXgvwSRI7VRFIRxHyQo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWyVCRA9TVsSAnZWagAAfHIP/2WvaTf+wSywarHARqmy\n8Eb41xkn3LxMxSQGKLoGjxm7v3nuL368sF6bttwOCJXS4/GFrKyDr1F8Rqk6\nYQKQKU1/8lv2jPbBKebaZXoJyoOSlm3ie60wqnTZuAeslsNHwrJbHMmjvb3l\njihvbmI3n342849MLJW4ZcgYo6puY9mFMu1Ay3Ixw58S+xWc57bXJt/WmKY2\naNaWCty8KSQ+mFhBWd+p8I75Ltp+cKe1OzTx8UVFStvDTJA/xzPAr12nQHbd\nxv/BzJH/giFgIHW6kjrNXcipC04H33NKfMjNVNtDIKn6yKDwNCXO2hlqfCir\nNITWGEJJ449YZ8gcK/exwWhiFfdKM0+XboIGuvC5tPUTfou0JfOheWrM8zQ6\nSwCHKk+kZ18cErX2Pe6OynpzeLlpde3l6NJ3VJNRveZYBJ3meJEt0qeQezXM\nvzsV2E1PtDveKoUOhJIvvFOzS9dkI+zb8xAwjv3iDMf2YoiFCPN76xxzQz3d\nIJ6SLgXdxWIDYZ5dAJL1Y/BshzmRtM1ZKeYlIY6ynqFrSmkd/tFhjRx89xx/\nYckZA4FNa+b3LQzHAJ+vektjtDIKXT1AbYpXq+bXTj2JS8Tcnguy0HMoJI4g\nwZE947CRlvcLjBXBQESBHvUXd15TnNYXJMATFE0S3yU0xiHmfhJYR7J0PPhm\nJMk2\r\n=8874\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/density":"13.0.0-canary.4ca11fe76.0","@material/checkbox":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/typography":"13.0.0-canary.4ca11fe76.0","@material/touch-target":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.4ca11fe76.0_1628269717689_0.3955176792601711","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/chips","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5c7fec6edfb21fc47af5faf66fcb52030e5d724","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.510cf90f2.0.tgz","fileCount":159,"integrity":"sha512-QEf/C3AqP23YrPMUNVZJWsI2nQw1GmJMEpAjYTfcUKlEG3am1Auks4m45XZF56kf2ze+38gNeHpcQFGODFr93A==","signatures":[{"sig":"MEQCIEYh80xFf3/D3lMrzmdQkW4otTw38QkT/dKUfT/KCbG3AiAZ9O2bptEaQyOHKw0KPCb9fKyJmL1vSt3L5s6iczMf/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWNECRA9TVsSAnZWagAA/7gP/iL2PVgtzq1UbtET5HND\nWt36Tm5HLMq4Q9yUq83OJg4ZriptdMVb8ZVfV7BKtNvHYUHb+CNBeqlrP7dX\nZhMeHVjWmeDafcLcGcgbDOucZ/hiKdte/7JfkFr/hSHO6i2mEtjbyE4mU39y\n0ODWGuch0XNTOdRaofzLarNbQuvwRAVab1qBaPjJZs2OwrgbAAg82+eFDr2H\ng1molw7cWyyn6CLvBusJiw/8Annw9r4Ela9arVXqMl/f+h/f5h8HRtSqkoK0\nQvaXy9fHkqEM9kcZqunxO3cetSvQ4E5ceNl69VZRy1D/biNlFd3NPZjjSvfs\nK8kPo1VfNhN2j0bCWMgLYd7mO8GQZEkL+T6gVq/FfuvB6Kfn7XlZce4tkzIw\no9h9jkf8JO3C8QRFg7UXWahqIsdUzpbbFAXF6R89D5WoSBZYZnrniKFbJV8R\nJqwqOq7NiUNN1i2Vrlwr/Hbj2wv4JDzB5yk73/qnhaLs5y+qtgZ/SuH5LckY\nBtCXWwI4gSIciMSrye0Byb4AEfMXuyOFnZXIWCl0b6oaQGzM/hQm5XIOQ+qE\njX/5IMquyXPisMr0YoZooc8GFOCRus/p5cQSSXiUNQhprVDQPbvz9nxTLlBK\ncczER7zYQW5q7KXwXhTWgCfk3ePZhxkMwEuPgomW1qhyx93ndK6RD1BnF++M\nk4fJ\r\n=Gw28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/density":"13.0.0-canary.510cf90f2.0","@material/checkbox":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/typography":"13.0.0-canary.510cf90f2.0","@material/touch-target":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.510cf90f2.0_1628529476539_0.7477445137283303","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/chips","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7f27c95d2295dc62108cb15534b5deba9de83ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.17580ebf7.0.tgz","fileCount":159,"integrity":"sha512-BIIDtmgRxHhrF6e8upuXPWtMrW+UEL+p65/3eAwkuDEtD7xJzEEa7vSPzqU5MYWC6IIm1YhhfqbQ9/x1hlBwuQ==","signatures":[{"sig":"MEUCIQCoROIlhhG8C799yRhP5KactD4iDoJnQi4BVMoJREbg6gIgGgnsVIkHIBCZTfaLF6MvrjbWgCfayhV0BoHr+4hVH0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXFmCRA9TVsSAnZWagAAmxIP/2UdJyWM06yjc+UM7bGv\n38852SPU7IEEZRWJvBSfcZjotZCA20bj2OGVdyg7JvAxYckiSmvCKRiMy4ov\nzlwWXmGgXE2sWw8lYOaJVcriZioEDG7ldhLEkPXv6SOskHGT5eP1pfLvNaWy\nN7hjw0cxgMMx8Y/SwRHwZ8z+KbFIQzdwTzkjyaJxC6ixi58IwWpza+DFUQHJ\nRDLK+iUWP9MtFxB2j1lc1eHueyG3PRQ7VTeOlhsJxU+rP6SjBD8yetRVYpie\ngjjqTBZaLtyt2V33jtxjWelaRsoAuyEdJSzdo0CGOAJdYrdwu+RXhEA9RORf\nW2BWP2Ab/Z+fByNsWRNzxfn5TO3C9tUdokGe22iqFrQUqi+bpb5SgFq7gWGN\n6WCSNf5d6x3xrC7JRNRAnwTm1kKSWDzjQcRCwvZKTrKMKVedR7gs0M5rh0vy\npwzUfxI9IIluh/0LX8ACaG3ziPGCXr0JSRtyWmKKSNv1WtNLv4qd53c0Eezl\noeKrjhXLfrlFZfkFNOSeAR8wpmKfASSzfF2tCGDJrRdHDiMcGDjr8dr7OV0h\naJDPpcm+epa/J6AoU39J/9OpQyV7DmzZz3J40M38vadfOPEiNOyqRXPe+598\nW0zsBahE++AvDvTl7RnVQfl93iYrxDSvVdtCzFI1vsKnI0gdi4hlD+N2nDyt\nf/8h\r\n=ZSpF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/density":"13.0.0-canary.17580ebf7.0","@material/checkbox":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/typography":"13.0.0-canary.17580ebf7.0","@material/touch-target":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.17580ebf7.0_1628533093951_0.7023445816320399","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/chips","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.7249a3060.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d51aa10c7b725eb3da2646fde051df56640a38d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.7249a3060.0.tgz","fileCount":159,"integrity":"sha512-kiI+atEJ51CQQAAlA+SsqpsjWlXUzp23trxG6i5R4hzK+ln4s9XDjTALFmqW+spNJydAyslu02KwT+J6kL9J3A==","signatures":[{"sig":"MEQCIAfklBttX0b4l9amREwe/c5T4om8v3ETmOuLB+fkAFHfAiB3CGw4XcKOVr5IuinWExwKEI6rSwUsbp5HqxTDrb1cOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJxCRA9TVsSAnZWagAAN2YP/2UhAwU1Mo2u/PvgN6xq\nOp1G6CHMIiKNj46jGbj9ViPTOc1/71ofMDcdszQeYsJkDaqu+2wbtznOEcGy\nwsW8mrrjEwjlhtbrwCZpdv0tO9BEZc68rWcfCJ8RFtbB3NCIbuTz9Mc+XHF1\nRCIzV2WhH3SkXtgzJ3l7/j64XJz0knF/a2m1E3CCP2C881QmqoSvQtd/IA3n\n+v+zAv9eAFCPC63ap6Fyauff9QEgmtAIhPD1/DAyhe7fLEY/CG8sBrUfz2QS\nNAOPOdeaLoVg74Yo++Nd04gBl8XFrMFCEKcAckNyX9OLDRr+21nINMHQ6ahz\nNVNN7bR41hxEK9DmaNewCSAWzbE0sNlPBVhq/DFlYFj0anMqKIGhkvOc/1H3\nFYDtZlQ0/phvHjbEcoObZ5bFl4n8iLnZAILBgk6r9pEQckVEnb8zVQDxJ6eG\n3yvAj1w0QPExaYHrwxZaCfQyANJIDFp6gUdaSyRu112sIT0N29D+/OckLvpA\nGUlBlzrXcxKmdaZe1i5rNLeJHzd296zapCVmyTqHmH5jsIPIe/9cutoBxsWN\nBwe/Iyl9HeNVkD7uBHx3Lx3T4yAYix1n4QuvJMNmx2D/9D6xE//FC1FhjnS4\nfvv7Ty7ndnTHIt3OIWagR5nT7qsXBeSLh9RZrjsehoOscm4R68wtaMpItbRl\naRQS\r\n=ZMk4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/shape":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/density":"13.0.0-canary.7249a3060.0","@material/checkbox":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/typography":"13.0.0-canary.7249a3060.0","@material/touch-target":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.7249a3060.0_1628533361417_0.9244675369966049","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/chips","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.4c405863b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7511e976bfe2f92954461f53deb6d66f7095a85d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.4c405863b.0.tgz","fileCount":159,"integrity":"sha512-fJmiwodJbCjsXohxeq129VpbCzkYrhXO6jh//5YitZCs192/3OW/PNQ/c+JY6/vY6vKUgmmxsTEpZvNRMfKpjg==","signatures":[{"sig":"MEQCIBS3E3NBnFrW9e3fg969iVD4szqpHk/SeI8rlxmvaYVhAiBMK3uo0w3O86yMzcPGEM+NgUhtXYBBv1IRxd4CHkJELA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpNCRA9TVsSAnZWagAAtawP/jBs5SiPrFKT1fEqjizT\nC9MfCdy9/w+hQaar4umHV/WF1pImYpWBZJaUcQJ8WpQc0E81ehgRLz6NCKvC\ncpXbRV9IQnk/teOzbHNNjmSDTYM1SWy0bfAzi1lOalB6PzhWUDXiEvjyxMHr\neIHsyRXJYPoKGdymnZ2Y1MZO+A1BJcTm/xgIyxoxB6RXqd4rFurFDGp8B7Ac\nKsRfMlYeH7ryTSdzU2nJhWI85HogKxqcHncjscS4TkP3oWZ2V8nGTT/tszul\nUL+OEyduMrktqfX7sjHGZHmyYjrRcMyi/ode8eibryoY7bx+x5/6ivqPVDb9\n8ebonXx4JreKHIVxOjVEwV3h9C/Mrt1NR2/kkROFIdMHc/hQ3lDgjLncK2A0\nQE5Oas017IYjuTkqzGDw8QQbDJJyLnQN69PLji7hdzHRmlSpvKQH2u7Uk38i\nmIweJpsxWpMSqJm3LDYuVrU0mELeEB5aBaNLeUgCtbHNa1K/6lCmFVNoS2gn\nojt0SSOwNwOw3/wt0XcMhCcuzLYmLtFYerHOF4INI+KywF9diLe8muOk8SRy\nVQey+1CfztRAJlSZTAF9MbZyFBu7/ivvLkxuT78n4Uh9gwOK5lSNxbqOq93c\nF9t1xTd+w1t/6JzsFuKxp38CUViz5FYsnozUD31orGOwC4aAXHHOWY0OQMzS\noJIw\r\n=kTiq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/density":"13.0.0-canary.4c405863b.0","@material/checkbox":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/typography":"13.0.0-canary.4c405863b.0","@material/touch-target":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.4c405863b.0_1628617292801_0.03786647058200465","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/chips","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55aa93b26e1b7dcbccdad21310b5ea4ecadf1794","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.f4241a42a.0.tgz","fileCount":159,"integrity":"sha512-Y+Kk4TvU3OtdhO49reKcoeaXAlw/dbKfSktMAAQPR1DF2sKHGhchpmXKeIuaBEDmkL3uRRgZ7kYiP1QOyjntjQ==","signatures":[{"sig":"MEUCIHwytRGWQZF0kD51/lCeZLDBlzTuaU/RW+HAukXODoSnAiEAoI3ywB4YdeXRhNhC3mTTyc1cndPvYw0NszKGlHGCvFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAI9CRA9TVsSAnZWagAATG8P/2V88Xrpw8WqwOhRAhNa\nNAonkcH0TgQxkM3sf8qjwmegW7xOCC7nh2ZWx/sBFXm5QE8rF1100xf2eY84\nmCMwPTlOm/6yzZxorGhn6vteQn+u/Q4vQeRkv5VBDwkmGfqMf6UBQwI52qNm\n5bXMYT2wMTMobTJ7FycaDf4nx4M58FeSSPbmM0wQGuDnbP4Czhpdh8A15UkA\ndpntmE0ar1uFnihQOREttTRiyi61xb3LPnvbuP4TUDQLVA+ST2T6AYEs1fTi\njkkYHcqT1htsgeldlK8P5f+HlXZv0H9jOie9nJWnSqqzrMAWuUZ1H9neLX7m\nEVcjHwWfJsjAp37JODu3que8yyWsq5xWy+JUUOfU2oAk6+a773ykN3qZaNC7\n1ugUWqqttjT660IGU3tujdYRGw2gugXfjBpvGaXGCyFgaew5lYxM7ysGfpPN\n6o+8phFiDR05pxzle/di0BvaiYJonB7pP0tSJIKbLw2x8bYmH8Up6VMAGItd\nIzu8ez0BPVeoYdX+nm2D1APVVDi6flS4FbA2QtVm7wI9iBmoqCksNaslw3zI\nUSkpEaev8my/KIH45E3B+Jlr3k6/tIeZ3xe2Mx+YjbnyuFWIKPuh3bZyeDEJ\ntNNt1lAIY7v02YnQtjAanmVKHOmXashhptLTX0TTlDv2gXxLquNIXZev/1fo\nYZ+9\r\n=ZYiB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/shape":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/density":"13.0.0-canary.f4241a42a.0","@material/checkbox":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/typography":"13.0.0-canary.f4241a42a.0","@material/touch-target":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.f4241a42a.0_1628701245035_0.7835917502063428","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/chips","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cb9c66430e88bd1fb6360300d022b68cdb3e5c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":159,"integrity":"sha512-kMXlad292TId0WCAE2aCOTnzVsC3TZsWeeym300fIQLrhGTzol0MrOu+B7/9+VfyQn45dUyf2Czl5VOVNcFtdg==","signatures":[{"sig":"MEYCIQCmNTPFcOK9nwUlEW7UNn9nxyaywUKl9tODNXxwrxjkSgIhANi3/r9Njbx3R/2wIt7sZf3HH1Zg9mhBDoyDlKjVkNfh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEE1CRA9TVsSAnZWagAAh2IP/jCQtqPZbWNZa/BdPYqQ\nCgfieuKVYhwoNivEZEScJG3050Owh7T63S+Vzld76V7shq9qMZqfuZWR3JL5\nFytMoVCAV7qeX2HELV4R+8p+mR/yafHDmFXbwE9aIPnl/OM9dVG5XlOOAfOy\nb7B1daqmVaTNMvsCk6pQFM8OKVZiuWT+yBdIpAHCE+6rtLp+HO0QthFORd5t\njpVBXUX43HJpCgGlIvM4kcYB9ICKjqOf9y+VeDPJoFhr01uL49J6bhjbTyAT\nMm/8nB3OD6yhcR8KK1kvdlDAlW2dzFnyrT8lF9iSOj6xIUS35S0APbSw63S6\nvTY2zhzFkXYr/0g9SNm9besKjTzpk76X296PmVvSquHdEnJuUDHsMinpwMqp\nn0yLtucBJLg2DtwWCH93sEHikfe6VGHhGjWRjkmut/4uGRHAuwF8AZBriHmr\nXUR+JtG2sPwHqwBySIr53Ul/FlyyV6KssoI5ZypjhOe/eCfPtIFzIsDTENnv\nht0su9M8v2OZ9WqEPOuu9RD/AWBrTT6qDr2mj59A/iEQkG0poTaqKqQyqQHg\nRt0Sswg99O43Su7O14uhrsQYWJ2ONg1QQUA9pYpka0LTlix5lI8gGGHQyQWT\nqe5CuNQYZ8gRO42wp8opH6OP/c3nvkIL7vV1NOA7GoJ+7BLN2J9WlDWIXAD5\nKR4r\r\n=m4Hd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/shape":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/density":"13.0.0-canary.0ad12ed3c.0","@material/checkbox":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/typography":"13.0.0-canary.0ad12ed3c.0","@material/touch-target":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.0ad12ed3c.0_1628717365098_0.6754572021433796","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/chips","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7d1b31df35f7a6d26ab56b598c164f89b8f9c5b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.077dcfcfe.0.tgz","fileCount":159,"integrity":"sha512-pPj3xSXJM9R5JG4Nbws2zcBqcC+K+EIFOHVePEPlslCyWVj/QFkiqzPH7HtbxvlwarAhoNVUJLMrRppJMKEykw==","signatures":[{"sig":"MEQCIHfJeeeVRo0FQ/mYQ965QyNiiZOH8awHK/xC8igzYAEnAiB5TMx2cULG5JAxQ8qXR7HGZcOIbkYWQ9/6kmfrYsg9iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWDKCRA9TVsSAnZWagAAvmEP/0gHgWSwUSexB/7AEzq5\ng2ACiJVGpoHgL0ZGBkQMxmtm9jfEZlP80MvdWYQ3LJDw56rGr4gCCpPedV9D\naUq+o+OAOU8qJk+Te/6Y7PiuutrWVWIkt0V9H0G32WtUGEr5596uO/OH46K1\nWEWk1yM4KwsFlW3d4SYWdwnGECLeyaCumW5eIRd3KVPvsa1dSybiXnP+LSZt\nQnluvdoc97Ec7otZOr5+vUrTdForc7uH/G8qLUWDBX/oBbcVNWz1S4SUG5JK\nEtmuknXKT0B7rDo/kmcISom5NeZjCXU/8Hg+u7Hw66YGnoXjKSI4EZquzeO8\nnUvjzf72A6EcPhGvPnlhIXT5G3IVHLiPDguVMRrn8MgBo+bAf9rSZbZklWGn\n48DQwY6ZLNGN+GAONWvctK+WvQ5HfnUtUpWTzY9fojgt380Xh5Z2oafDcAcx\ngS66xng4dq7qxTQJJU+hkGgm10wL/8HJEZMaJN2xaFJivTI+1JTghRz8j7YA\nfBwlRSd6gzJxXLBB/7/MsKS7SMXPFcTgU9OhvsEwbBGpP+3wtXFEmqlPUnTW\nU5RLOKKMTTtTGG4AIPnafk4m4cKMlDTuNdtVp9R/TPFgQlWn0awUyr/ImnJj\nb9XD15RrPKDl6s9k+p0ZN5DR49PiDX1dXK4UaYqP8bilP05C2bSa+Vy+nivV\nEVQz\r\n=7ez1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/shape":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/density":"13.0.0-canary.077dcfcfe.0","@material/checkbox":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/typography":"13.0.0-canary.077dcfcfe.0","@material/touch-target":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.077dcfcfe.0_1628790985712_0.47832739633668386","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/chips","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.e3346766f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"613e1cf3ee458865ed912f3856b0f1e8c90f9630","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.e3346766f.0.tgz","fileCount":159,"integrity":"sha512-khMpzbyAi9pNq7g/tvWLvm4MQ6R9/YtWrGSPlKqcgvLdMjaPe1lD+E3kFCPPpXhTvsAuJWjlxLsM3v2txqNB+w==","signatures":[{"sig":"MEYCIQDrZOXAunCZ2rKvkPl+vcqQEg8QXcwT4Nj8jcPfbx3kzAIhAN0KYDejtbypJA9B03NBRv0hHQklj2wsUOiR3ss/KiWY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFswVCRA9TVsSAnZWagAAYYMP/3gL96kglJYJPGwsiff0\nsB4+HyUCRNCW9nKeXXJgW4AL3oYspY2okExCTe7uqoeNrbWqftG8hdCOUbJr\nt49yb7fSsj6bzpA8eKWnEoOHe0dvg0rCOnS89UUHkI8aPITXyfo0DQb5vkDc\nUMD54PqMC6aHIfIYyuQaHfH9F4VtvXYcIgRS5vQF62I1VvqoYB6mzFtr4byi\nivOZQTaciZwwojP3juhqvdXZaYxfdJnf7G98JB7rN/XCpAgfRibDd8povWqm\nFnLd94HXMkPvOm4kAcEISgaWd6wQKscuhEaU2RKE5qgzbgThouCgR0PQvrsP\n5lroTs2FxyYW5QR7EuwoXKn7wCOHFejRppglLSS10MuBZ77uSayiLfqAH2Be\nFBPGG9ilDllB7th0xDwksHMUscSCUH2dVsGWaXVMbcMCwNCVQ48i15p+ieXD\nrFZwlOInFjonm0ygxxPPxRab64TWmTLHCdMlT3GTgPMXlJtC0EyErUvc+bET\n5Sj1glDu4GeYN/JljHk1OBZUsBo1849gr1KbD+ICPtS1oZ2E9aig7ZkoZ+f/\nH1zHbqe7n11oHX/pVaF03CEUj8r+yOG79xsMbpMaiLUu8LZhaRs9mR7cigrr\nYLGTmJmTlE3Q6IybMg+royeOaKLnW53J8WRnZ9W69TSLmBUTo+usq47U5XZe\n87o4\r\n=YZH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/density":"13.0.0-canary.e3346766f.0","@material/checkbox":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/typography":"13.0.0-canary.e3346766f.0","@material/touch-target":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.e3346766f.0_1628883989003_0.6453979106009933","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/chips","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37094ccbe482b0eeea98598999287c5c0b5efbff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.2fb068fb0.0.tgz","fileCount":159,"integrity":"sha512-OJwkcVowBQFKHQAvfVtuuh+7sT3Q5jmKkmG7jmIcKqZqiVUtsG667Bu+DKlhZUeomO4xg5nUTVdyCta7h+vc/A==","signatures":[{"sig":"MEYCIQCYDcc5jx0OnAlZCsu1wE0aNwWs2fQdg3vvK1NUtbi0hQIhAOMuis4kg5y5cMui/+TUWdL7DUBnPHbR7ky1zYYoVMAt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsy0CRA9TVsSAnZWagAApZAP/3JNM/E2sc3AYOD0ueKS\nSJsMPKT4W5+TJmTgg6hHMzWfE0Aj4C3jY7Rs8cvq8fJPQ57/g1T8MKqDR0Gj\nXJgWGHMf+cLFF0GbOFqIo1dI783yxlyt6WxjVxp5onzsWtVi6GhkHcMG/CbU\nJzS1qislr/SRiI/WpY6+hh5gSGE3Hkp7q6T92mEpaLSVvsOsf8PM4w+1f2zy\nwVMtPpYeu5kE5ZXaixPv+FuxngZZ56W+SJheU82RSvQWQ9fGSjJvbXR8IDvH\npTFekSP5qiGPtChysm2+M2+7nU3gVBYlvLp0XMOfCbmrYC8xYAT0QGZ/AX+R\nKe2mm1+I2vfWlQx9+3/lBUgPF5suf0rxy+zjpSvlpTZSxbxQaVRMrbigDo30\nNRcQw8ZVuTYk+s9XcTuLdrMjht2yYfftZasBT12z7rg1Yau7E+TRdz+weMXu\nJGTxb+8cj+n7EFdQEgJICyH16hwr8wfWMOkP3UHKhASkocubcXRx1Yh7Khnu\nyv50IDnTsS21zwSN0HpJx1/FB6a3wJ+xdaxA/tMYLttEKY8Wim+RVVMBI0i5\nwHmyus3otJs2UPJeRQzTtt32hEpvzwCkH3bM0nPbnxJkP1+0auHHE28vougq\n9kycseFhwdZlkU+T2rk7UfWa2e5Pl5m4tuestaRrIq9y4SGRcyC+5afL52QM\n9EE/\r\n=WoZW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/shape":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/density":"13.0.0-canary.2fb068fb0.0","@material/checkbox":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/typography":"13.0.0-canary.2fb068fb0.0","@material/touch-target":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.2fb068fb0.0_1628884148403_0.4288050573411424","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/chips","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"998dfba895470eb4b617932559989cba244143f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.fb76c5069.0.tgz","fileCount":159,"integrity":"sha512-2t9Scuv3xuHQ+FIwBOiH8ei7U4DkDTSUPjbfZRP94NbUYOili1AmxlgQITOHQ1QnJ9t35Ybyo7ERjzWfwqlyug==","signatures":[{"sig":"MEUCIBhNa1DZL+zRHToqYPdRqbTJ+UFpsPST7tfUPhPh/V98AiEAiB64uhiuIhN7yKwj9cqtILKM2Czte4+tc6qNQW6GPL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsXOCRA9TVsSAnZWagAAyaIP/AqLY6qKaYNyT8cruqtd\nntLG/7kM1AUbOwWs/++/ZzOZ8bO0hxJd7SK9/8CC8JWF+WG2oK34pg7ObQv0\ndlzh/TTnU+8vhRwm+6c4Jh/c0ILlysEDdL/3caNO9lQG1a4oqDmtqBZN7UyW\naYK110xuT/kdNrnBTwRPeDWmIzxALXV2JKQcKvYavxeb1VyFpJT2RH6ow6d1\nwRmVUeMB2Vcyu/hdKSr6OsA5W319HsB+jg143ONTuZmfqU++1OmlViBaAH1F\nCaJXGdQeP9TkWOK/4ijDRIxx3a+1HeqIu5cn55dAsX+CrSw6PxClP27THOpr\nzSBVfhmGa1y5od/yP2omDMo7C0XtuAobt4pR7tjhzERhKHINnCqqdHSt6AX/\nZjI5433HaIDpGdP3FtXpwGKDkrIjWdtgbtBoE/6fKSqEB49Yn7l/GY6Sbsj1\nFtFg7HD5CZXopWFr7U2HMEfGIX6S187q9F20h/M64qdSPrWd6SLph2ndXmb7\nv5RAenz888s9cAkuVsscHSM3rBY5OnY/mPm9i1wghFBu+ycJs/9JwCB9+ytb\n5MADZLuhtHLRknCdNADTPLHsAKP8uVaL+l/Gxut8276i8y6iiJDZgGytoSjB\nUM1zwgwjo2CDgPfTa4hGItqEq+LJTc3tnDGXHhpZeSmNQ4N1pDzMgVxgRLhw\nf87c\r\n=uB3a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/density":"13.0.0-canary.fb76c5069.0","@material/checkbox":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/typography":"13.0.0-canary.fb76c5069.0","@material/touch-target":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.fb76c5069.0_1629144525904_0.11694137665891469","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/chips","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.457d89aad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8713b4561d0ff6eca8ea7b25e655be01a5ab799","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.457d89aad.0.tgz","fileCount":159,"integrity":"sha512-4jqwVchJNbViJYZrjfxQcdwT7oQiZcmToRCGN2pxYEF51Ot2LnDVE19hvtV1IdNXz1Y14pELycNbnWs4Cuhi/A==","signatures":[{"sig":"MEUCIQD9sgga4I3qtN0AguxX0CDhB+8+2i3d6OEnGAYEPdZN8wIgTnixQC+2HcY+chnCSWzA5bYZEiazwi/KNg0KyLMyhYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9Q2CRA9TVsSAnZWagAAUeIP/0tcYxrJUnu6klFZqozy\nTGuMs7QRQokEACjLXPc/h8owO9iaQ6TIZaEIMtD/up9WPTOsaNpXzKeFtngX\nUk08Hhy66xv1gFCcKR1q3pg5fENEHEb+eXtd29cs5qKC5KNJZLu/HF4GOdJL\nhdt4l24hRAMaHoxYQh44fnfLYIEvqumLzuSVBfMaRUIEyYjme5FGxA3vzLT+\n0nsAVi0YLbPNnfA3RQvTh9FmEL1plgSep5CoBq1E7JfZNIccCddIJWIBQrOU\nDCQ+MJOj1o5hGb5Xkv5fO5dzrc0qIOra+oJtfdadh24SctVUlovfEsTb31Ag\nzPw3BPvG+irAKPTr3F6JIWsQaWwWM0ZSsEmGa50C99aBkcEeaWQswF5+cJJk\nqBLSNZTjDM+Ydky3FZ2JCN2cx5mCCuIqyUdw5w46R0JuVvqHkJxpsLvtSGV5\nHAg4i/cDGz8oGhYJVp1d3UkEoJ7fEa1UbiJRV5wJ3u1sHnOkp9g0uX8vdAEQ\noUbZku8An3wFf1IyGw8FWUvvSMhMZsGiRvYcREB6k9ZmZyZLiJAJF6J+uo73\nz6hRBeS0Z0XkNbODov2krtasZMl/ecJuy8TXsk9ehZ2NSLWmqz8WMULPu3tv\nYrghJ0PD4s7o7YYxa0x0lXGz21wefmvhUDK/koBgSvEgGmnpq2OFwze1Lphm\nIblX\r\n=YHjK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/shape":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/density":"13.0.0-canary.457d89aad.0","@material/checkbox":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/typography":"13.0.0-canary.457d89aad.0","@material/touch-target":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.457d89aad.0_1629213750364_0.49043708091006244","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/chips","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdefe9241adad218f51309e648a02e08e579e2d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.0de2f2edc.0.tgz","fileCount":159,"integrity":"sha512-rAdl55vxvTBoMAm8Xv+QKaDPuacuX8nsMr11WvIC/5h/Uld09lg0uvffZNNMxjuvt5b/6XlaqYABK7HS+7ausQ==","signatures":[{"sig":"MEYCIQDyJNlG1CeOZxMce6rgXxXTzh3KAropyisd1/sh5o/9ZAIhAKGgsiUSjv7xiYAniiClSyHZUl2f57V6SQ68zgUHG6kE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCI5CRA9TVsSAnZWagAAge8P/jqBSlA+oaYSbtFrP1Aw\ntH4JmSjJAkaM1kunbNqtMT5UEGqd21srWnWqFjaExa6vMYacI3o6VU0PRBuO\nG1t108+RhCYo1VTXwTDEeGPYY4KkHqC0lDnjzy2lxR2qFN5bfvG3Ky+bIXkf\nHmQc6iWtFQw/FQ+shm/3CfYVSCHfAB1povtfLVWzRS7HBw6OWQFwhC+kf4wG\nDCagnHOqrG0O2r3ixaO2C23GMqPVsAW8kycko7NnOCt2nGwJDFjT+f2Dj2IZ\ncFS2xb7MWLgCNuqwJiPjul3XqSAq192Xk8FitkH8VW18JzTxk7VUesLGPv6C\nEvQioccSXCHmLV7J0JZRKkZtViTC10ZhlmoMrNmfTV+8DYONwXFJG7E63hd/\nmZGrJ3sEcW/gRWSslE1R01E3WF9MQexwHrH1AdqE4jbLMtaSjpayyzc/OJ09\nHt6wxVhgdvB/r9hg1eccT6rGOBl959Wr4YxdKWGVtDao7pcO0euoisl8f5bv\nf4qcmWrrYYRLSc2eH4O8Pk4OI+k8lfEWUNdFpiNKw0kITAeOLfc+MeuqF+Vs\nxwcaP35W/eGgOn3LQjqGDXaKDqyK+XlItUeRPOxVfcQBdRCFhWwsE8msZMQ8\n7EVukCOSaixWt/0LqfAd1ymBWFoU1qlQioaDqrr6EdGE0+5mirpclYQqlaig\noPCI\r\n=On/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/density":"13.0.0-canary.0de2f2edc.0","@material/checkbox":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/typography":"13.0.0-canary.0de2f2edc.0","@material/touch-target":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.0de2f2edc.0_1629233721422_0.9645848696109065","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/chips","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e49cf6a77bc160d1997412f9399e42f281ba0c72","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.1f9259b9d.0.tgz","fileCount":159,"integrity":"sha512-XO/oVyep3eJ/aJf3B9acGIUogYeT4WeSHoYn3eRPVeXzG+Ov6RelR/miKh6QSoPOl75XA4vdoe3U92fZh55wqw==","signatures":[{"sig":"MEUCIDxMcS4sgbm08lZdyOLTBM8h7/VNkuyBds2hAHrBmckWAiEApqAjzCgI8lX8FcAUGMudiVFzN1C68XaJdPEbXJmg41I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDT7CRA9TVsSAnZWagAATF0QAJ1+aVIbA1EIdlbfUnqT\nWWyhkuqcbugk3vGHVp7dOwfZZTRpNJZA+xVbHb74uL50HQP5nEVpY6OsAP05\nMUlmPaUhUe0CZQXwY4Ibae6rIwAQLJWgUejoDetju9x+FzP1NgZnwbvdiBFl\nsRCJzuO7uYu90o1t6/3lawYMDAavfFBubWOoQ90CAcsf9teqr9Q88tVMZIWj\nmbBmuFBTjR5afWYF42/ct0CcgiqHLhba14O+rmREQ+V0HKEN7UIs+csTIaHc\nSrqor48B4Mkq7OWxtY3hzSXcHJjVqJX8wgD+VTc+hxxIH2jGa36HOgpQC8KI\nZk0Xmqv5d63+RCWdi0E0vPuceA75khgaJCkO+t8rDlUsYWrDkyTueYBQZjlM\nnltR5/pwLOgYp0ypCn2Oieat5gu2dreXdautWa890QCUyqaFtaEftqSkiL2d\n2r9CcnBow+k2vzlk9M62RQ60iIS0q6EZIAQgcq4NP0nKZPw45n/gGYisPs20\n/9ZHygxVCbEkTbF4hhv9MyK2uoFStQe6zCw44uSylYvxmbboKt0CxFTpOgNU\n4v2hYsgRcoTDR/XsKbdd9SwpU7Ay8Xd5td9N1FLdPs/1SlaBq8SHvLcJ1Z75\nYGflXMc+9O01wQjzqZpFZ1lWCNGi2CNnl6n+omEsX4XrHG+39Dy5GuBAG8tw\n4Okr\r\n=7GI1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/density":"13.0.0-canary.1f9259b9d.0","@material/checkbox":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/typography":"13.0.0-canary.1f9259b9d.0","@material/touch-target":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.1f9259b9d.0_1629238522878_0.8514526522274779","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/chips","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.3b9290351.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"335f5e4d5f2d338c79b30271d5cf3af9468566d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.3b9290351.0.tgz","fileCount":159,"integrity":"sha512-zhiPya4QLjyRTt710DNqGNv8p7AOB2fGqOhJ/aSjSx4buwWbZ+IywleG79mcYLUrtA/YBsekOICO8zVbK4AoNA==","signatures":[{"sig":"MEYCIQCroVAbBGi3H7dPemxsMPxow/DpXc+OIRA2j9WdKRWCNwIhAOSZbtvfOyP6HWCrbZinS+AWZIuQyizryhYwQBl6xWon","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJmNCRA9TVsSAnZWagAAvc0P/ROba0O5yzGzTpjhTRAg\nDbCGrcS8zLanfhcKAaMg37iCujenCVc3XFyLbPB0/40EahOuLba2sEUmnfav\ngW3omLzq/9lnyFWCqAzd3YRkzz4efngrUhtsLYDRf5DOQtA9GjwxEPnYudBd\nv6qmMulX1f06iKjk9jBJ1uj+V6R6EWoFEZ7VxhVQ9ss3FrlMkCroyLZS7gml\nuD1NXzq+AX/rUCu2Ql7MdP31TVu8btElEyhZtD1KaBbSy/XbZoDDD3FsbJ0i\nDl/+Rms9VEaZmi15h5Or6WD+vUemFPusk+6zIebNuAK76ITgqW6xoBZsFISR\n/LUjW0NfwopyuCSqP0/FWjw2qSdyQmXECcvmhV5IlWPZxZQ3go7d4JQ+pUtX\n51Yvw9vVfmlNAkI7iAaSiCgyCmgyCDBbhqhQxMa9yJfrpGcI7NrxioNe6sdx\n7SRaDwVVAEB82ehZVvsF5IuLfNwvCp/BNV9+A/e+ODTK42/cbQJMOOv8h+6y\nHJ+ClDVP8Zc2qjJmTUe9Lavk1LUHCmj+nOxnQH43ecLnnjCbBBS1FYNiYzCy\nrAM2jcMwDTkgJqDdguGPUABrCjoM9ntMmezu0spJs88X2P7mKJqO3Bx0IMB+\nl1DhUha8P2y0iamY8jP6BMPLMycuU0iRVHd6QeSVNcLS2z+p//RWEmWVN0Dr\n7sYA\r\n=3BzF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/density":"13.0.0-canary.3b9290351.0","@material/checkbox":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/typography":"13.0.0-canary.3b9290351.0","@material/touch-target":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.3b9290351.0_1629264268950_0.8900188515920275","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/chips","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7283c69237029abb6badb501c9d8d146362e0dd5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.43d2eed2a.0.tgz","fileCount":159,"integrity":"sha512-qOPC1AycF9Pk2rqsCz7HaKTJR8cr6lvBuDq+bLS9AWTpTzBBg1AhjQhBN1WJZIodl43mT2YFsqRiK0u9N7AXPw==","signatures":[{"sig":"MEUCIQDZTBX1fbByp8rjq3lKANB8sXREBu5tDPv6txbttXwmTwIgJrZzZ7FS78rqDfpkVKEB97iuaO4NKex64t5lNl3xngk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS8sCRA9TVsSAnZWagAAGzkP/jPJtKI3MtWCYDW6MUOs\nwi1jyPYGbNBOMFDkhHmeKyq4aVjAqwkq9uc/OHlUFy4+Ai8PID6YPW0tCThP\nKivzB5k4BBEdKDxulga++HxuJ2yro3/SFynF1OwDEU5KrgA/y+KK1w1Cp8k7\nSfoL75f/3+9XyFpMVcE3vx61y6ItUxeTbv7fjC6b99IIygww3ArKBuNlgCxx\nlJ0fZ3y+7HuuXjRKJkkPJFbaQihlPi8Rb/KjDg3PrQW0z3EXHh5k+FnXts74\nzbmdNYCJOOkdSXLVD+XWE1scn7PpOaT4dOLhqVOr8aFXlSMLT4OCQF73VXXo\nWX4Ofe392N++BIzPw6WWDX+Qmcqd3lJioQJ4P/wuvz874ng5CtcGvTGhLWe7\n6GJMndkPvKD3DGYtOojljRx+OFrzRWQvS4HAfToe1ZmSf6g9/VAiceA57uoQ\njIjxOgpOiX/d1FjxK5DpAORAM2/q/HIJaGVAZGnM03MbXsCX3Z/xhSpJXcll\n/bdAc4bJbPUAeew9ap3Q33euuwvQLZ1/yw+RtE8KhOps3HPZpzgmhvvZHbhs\n8yC8eLceSB7+G0WaKt0j14/kdzeriE3N5RVDfIdpc1S3HRG22of6ZZJcFl4d\nvXM5iclWcBPxTPSg+NnCTEcAp8MC20CWVtuxxFCwv8VTYoxa5bSL1RybtZlg\ndd9j\r\n=FrPv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/shape":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/density":"13.0.0-canary.43d2eed2a.0","@material/checkbox":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/typography":"13.0.0-canary.43d2eed2a.0","@material/touch-target":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.43d2eed2a.0_1629302572084_0.6209823632481721","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/chips","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.0a9069300.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20331dd019819df7b2a04228e8f856480221a2d6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.0a9069300.0.tgz","fileCount":159,"integrity":"sha512-4EJ3OzqCuwUUcGgHAZvptW7Crce2SvuVaDyuHLYQWEtE8AO6KkwjWuu1SD3kgqJtV74pMaQ8FD+jf0x5yNdObg==","signatures":[{"sig":"MEQCIHzR/Ej9ZNnIQFdkR9mqcm8EYBGctV00d697ZQ9vIwrHAiBY5+t4cBmEQrz8Twwe2Y1I0zEPdBA7Bjd6l8up2N2tCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRKCRA9TVsSAnZWagAArCgP/RhCDqzZhymQhVdzQaGp\nH7XIeaONIDDZz0Yz2seGquRpJoURL5Q3GBiNIHdXekiEENYYKjH/RhHZDbhs\nD9/13e+loLoK9qxySJTQh73qfvvxlU4CViMsVyu9dQB2+0Oa+JjkoUwkxrD4\nL0daoqF7ma0zSitFiHPqbNGExC/tRqBL5B+0eA6+Xtaj50ALNn8JnXOc6qLA\nps3U1C+quVzgiJqRsSM5sB2hhYnqV05Mz8Wov+rP/rpB6AiNi9RX+8/oa4yU\ne7dAKJqNtVL4/xE+qWB+B53AQuwcK94JO5FMVmoO1lpj+//zE/NRkJMHeGPM\nCP1SCUEP3o4MdKBVo5jhPxYjR8KYgw5nCMC1m/yYtO7Yq0/clUNaiE8Lcy/w\n2RmRES48RQ8sJqF07rdIrDsbag+IPorT8t9Vh5yE6zYZD0y21RyB8ztnsJSG\n73EaoryD5VuE2lRZIyDcA3IoSno2R1EFYUCZ2cndtAklNLTLR1dttoJXujp0\nQqj80bR6JTYzJETq/dYOYsQtPo+C8xhbAX1KkeM9AW4WywukMto2bKctakNS\njRIPNBbd8PIKCRin/vZhFoqUJd0wXBvlOEmGUX7CSc/mexrm5xdRhFF32pZW\nOB4sIu6wm0uFv0pnfKMsCnHANkIsRO6Hqie3e5GSpt6h8rOnzoSL6FEmHBsc\nK9TN\r\n=5Ajp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/shape":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/density":"13.0.0-canary.0a9069300.0","@material/checkbox":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/typography":"13.0.0-canary.0a9069300.0","@material/touch-target":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.0a9069300.0_1629389897770_0.22755918932743358","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/chips","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e2fecdae1dcbb58a449e93fda4855c83dfe399a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.7da413ed8.0.tgz","fileCount":159,"integrity":"sha512-Lq5IEVHQtCFA4O7iHDSi6EBtM2mSSp1pDJkB1LIAE65LjIxI/8uvE0T1q24GCpTFhajYrjvdp9fZ/jH13iQbzQ==","signatures":[{"sig":"MEQCIC+eDmQ9BQsYSwtUwDHzDGiFR4qVZfEqZyw0X4rHJxExAiABQdlK6kzN9ut5HaAUy4rp69Hd6tIZYZzexGaNUXIslA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH88KCRA9TVsSAnZWagAAFqoP+gL6eY0WjFfuEElfWLJW\nwJXiLTIg4Wr9UlXgRegkzmJEuLTAYrRV5kLU5+vJhUl1+vzNu9Xc7h+mUs0L\n4WpozuTNmjuFUda6zzZVjzv63uDhJMeU8yR0u6w7s6zJt/zpy6u8NF4KkLZV\nJ7/olkLzUkJ3vAZe4eRE+/FxnXvvaYozmf6ObxgHlpENBRPNNus64zrd86fG\nvFwBEDxentBWXSoPcXsJD62lnXEBsBkD5TGbL9p3qChjaSdQ8p1kfpmbBSR5\nG7rWdCFJ/OVZwqQyKag1JvdKN45mtWMDZi4IXZpvv3AzxgbAdpKJt/FYp47+\n8cv6EpZo9KcgRfI54Gh88SIA53jGeTcx3GKcsApgTpmlR3gwSSn7Mtcr5e6b\n+KRLz2RnDELBLyNyY//+liF3R3nryqP9jDG+6Q0CaOrqHjzWeN1LhAtdTzM4\nhFpc/3j30i8EVlsn5h6DKmTgQjs7aJXRV81BEz6c+YfXkHhVMTdop9p4yjAI\nJkzkSb4Sr+3y+iH3aOI2SZ+L0jmjTEpo/A5JWG+gr90QLIKqDvcqXLxZmM5f\n/DhimQasd+9DATrcZWMxNGuX5wAvu/sXEv+jWOYTVsngJXiqPcAzNZyWtHN6\nf627o3OLfDw9U7GS/7qzXssOoqciZNNJYqNqmPbyq8UxHd/JR2QGFc49R4Pq\nZEsH\r\n=/DvB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/shape":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/density":"13.0.0-canary.7da413ed8.0","@material/checkbox":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/typography":"13.0.0-canary.7da413ed8.0","@material/touch-target":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.7da413ed8.0_1629474570293_0.8104434239562195","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/chips","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"651e582313e0005bf75d50ec8deff996f3a5cc58","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":159,"integrity":"sha512-g9TKNYdggkUEPiMxELJmOSijX+A4BNikSFzTN6cP4MZGypJ+6tjyJjI59XFQt30jKDpjjZu6oW3Dv+g4P9y7dA==","signatures":[{"sig":"MEUCIQC4ihZHAAdJT8Ut+cPN+gFlHBA9LR632WTRr1C7FvZqBQIgOXrwKC7xunzhhrEN2YhkOx4jV9YZmJsAcO/VJxuZxos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIANnCRA9TVsSAnZWagAA7CwP/2dMqTmCApx2D8Nu9xAj\nWuQJCTr7+wYJEb5BEBdlvZGAkladbNYIYPv9wOMosXPdm2O6ohX9v1aoy9t2\nITGXXFPxyBWSjfBDpD7s0l5UtWJRcZ4sA9b8JGQ0BXKROJsn+hwHQDWPlPTd\nwx7bJjdjun4hxGFCGR+VWbQCY6yDCaojibyvKWTIqLqjNd15XlfYJhMavdOj\ncvsTO8yVREy4Yrj2qJuwXZwD9Yi12NAsTzlNGmiu6FQihIfvRW1bhE0mN3yc\nvNPntRP+0w7Z0l3xC6exRKkD3LKaqhSn1AUwNdAJ1qdxDDu/KNDbLY6uSSIC\nvPbdxQ7chQnPpEqzfGGkdKVKLlJzj5biV/MJz06Y4SHD5om6GDPZg0uVRLsq\n/c9x8Eg82Pzu1Tu0be/s/4CtM4FfnjAjhNen8XkWkoI88raY1J7mT6lJbL+T\nikF6xLTPCFbHgPs4mXzg26B+dPELT8PG0JqcKFwvZ1Ojnr9Q2ckFU0fu+B3j\nP4UtHOTCKJL4mLFXIHSUwu2WzQEiBk5Bes8vvQr12WItc1Y+VBFQpRSVrXHQ\npE/WP1W9ZgS9z1fduA1+fAjTvLWfjQ+2JjzJPJ86dW9rZ2tVKrF/o5k0qjbf\nPpe/EXXn/hs9a2rfzEYr6uTesZUcsPWuzO+wWmYUvFSitmVuKWFoA1xM8t1M\nbNqT\r\n=Pu+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/density":"13.0.0-canary.e1e69fd8e.0","@material/checkbox":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/typography":"13.0.0-canary.e1e69fd8e.0","@material/touch-target":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.e1e69fd8e.0_1629487975018_0.03761331339382745","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/chips","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10ba3100817c01aa76bb136d307e89191499cc24","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.f5afc16df.0.tgz","fileCount":159,"integrity":"sha512-xOMhfx3HnbQqBLevh1c6ktfhRUwqJ6jwRBGiGHTCsaV3O5F2J2AvgMQIgBC9eugP2/Jlg+imYXjeONED/cY5xA==","signatures":[{"sig":"MEUCIQCv8arDbXv5R2PdpXin6lNUuMKDVkPPT6Ed3I0n0qKd7AIgWQYvfAHO+6VhhjvnW1qzoqHMV1zzfUbW8GWN6zpFNrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBBECRA9TVsSAnZWagAA/U0P/2BUwlk/zKuilU5Gwrje\nJfo8A90AGtRv6Ql+3AL8DOMULeL2bn0/DhKlYJzeKDbe+IPTrUF8ziIS0MdP\nj5q0uZCtBrLgW3my0npt6dXkTBhTl9jd+WXZKhg2IKBIOScxC1OPZHWEGoTC\nXPVS9lLgjOKPgAh/eOCKH6Ql1RsUQgGq1fkI9f15ylnNCdLW2lH3OPnmJ48r\n8NJII8zjT5Jh7nMgI36UHoJD/GjA8xtXBEOHwpoR2eeZ2rcoZfhbXryTaBl2\nUQJby0X83WLdFzocbAUzMAI3GyTpAFj7Cv+i5X6cXZR8MxqJoQDsimMMSbP4\njma+/xZJcG1gvzuA6/oZ7zmda7o0Ci6BknuH+WyfXoPrXRYFnKcZvpY56HqE\nZDteeFJ2t+DxjdencQzhm1OhKqf5By1PLFvqdFOL/XfvAhaQnISbNrwx7Tco\nTCCPcW6KATzHpobkM1M9RhFYo7pPv8tOe4hqsOMJOZOwJijQKIlz6qqTk2Gw\n4TGdmWIL3iew0FwEzumgySb98dXrmajR6SsoSXAe8CptVxzkhUVLTflFXw0f\niiZFMzD7jR0XFIJP+DZwMmzBZoppOw1NG7JtwbV9BNHwP2HUDLwhmNuswJ6b\nTzUuuH0AFwzrDQjKMYRtXlZTGQjjDs7ymFqm3+QX4kyTfCiuU3gylmNI4qd+\n9zVw\r\n=DdGf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/density":"13.0.0-canary.f5afc16df.0","@material/checkbox":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/typography":"13.0.0-canary.f5afc16df.0","@material/touch-target":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.f5afc16df.0_1629491268521_0.8084894715115156","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/chips","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"039d9ba9bbe9b3dc278e62568937ecd47132ff2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.28d0d75bb.0.tgz","fileCount":159,"integrity":"sha512-dmljfDTTSJf4Ty3Uq5Lrh8wPopPC9EcQRMK2uvPxJX8HUi9m8S1eqdvkDT1gA9iYJYzkr2gRk70H5w4fsry6ZQ==","signatures":[{"sig":"MEYCIQCZfurRYai2RocK6TYQe8nEMvSbf1U1Q0C9Kec1iSD9oQIhAOglHAkq3gmSQKN4Z0C1W8Ph+nj5V1ibkAw68wCdFza+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICroCRA9TVsSAnZWagAAVy4P/jMSKoB8hxK4VCOT3s0T\nfrGvWB4VbwK+FkCyQydUXGdN/O/516bUQjqMkoWnx1rrv7teP9rtP49D8ltx\n7pdZvcIouW+7e7hgVMZB/CMjxNxqVqgZ8GSMD19Gy21L+9oodh1egKWEMM9F\nmDmwTF98jx1+xDzMIqWPVMMxfNOepktdvUG7kqOtmPDBEahnTSmULT0DzgNe\n4LDbWFqU5OFOBnQxxC58SrKU5h9MOpvcZ2PlCgzfQ7jRjh6aQmVNZiIcx3XV\nydZ6/5PSvANpiE76URAGMm6z1z8ZWOqXYJfPfeXtBTRlLgThBux+eqbGUHXg\nm/EtsCv26bexNUb5PoDkAwL5aGFNR0iTmEg/vIlcrklm7NOLToT01Xk4YcY9\ntniKriLlZWSUPSh9oJT3HQhn7d5KHjdOT7KvuxzUNrm3lZ9P98+4GakREAKg\nHJkHNPmahV4G84kwPhIHzca1gW0lDVcbJGnKqrR18rxAZV7qhdPZBuEz8pCH\nu0Cseyl/4TrNHB5omTAajrSbMAETfiQtHVKJigjV9+p0dxOJX9CudRmFpgCn\ntPGoREHUOQkuMO1oHPVPP4OIHRcJWMNEClN8ncy0XF2TxGZvfxUmXfRadH7T\nlfLCFK7AQGiIxCpv8kgryYX8wu7H4471wW8WTBm49E3LIBTVeEq6YKQCMgQd\ngsXW\r\n=6ApW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/density":"13.0.0-canary.28d0d75bb.0","@material/checkbox":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/typography":"13.0.0-canary.28d0d75bb.0","@material/touch-target":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.28d0d75bb.0_1629498088344_0.08821789818177939","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/chips","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.21ece5360.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15feee97ab591aadaf45f1a394c7a5cf1f671926","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.21ece5360.0.tgz","fileCount":159,"integrity":"sha512-iKHI9agKrP1LVz002KFhDN1Lz7AZEoAbG9/s3fklzfBC6w8Y/bEth5fNodzrsQvrIOZ+jaMLM7IvbgzQRfskjw==","signatures":[{"sig":"MEUCIQC7FHyrlJSUMk/1vCsxxC8/m3vy2v+fZxyVwdOxMV8LKAIgXQo1k5xdEVFiOgkNfLDAY7FVn4EX+mc7MyDbvJPV17w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID54CRA9TVsSAnZWagAAQ6sQAIz56Pdgh/gsE07OLCiP\nGQME1NF4m+U1rqEruPknWFtni6fgBC8FQNqTqb/tWrWU4dnO0HjQ1qIizloj\nk7FEtf5dAkaWQjiBn5r8Die8GAvQgTvQ9q+3KCkj2IC3x/DBFNXvjUqty7y5\nKSCo6uzWAt1HAuOgQIvNHHBtuK4p91Hc93TJRLEI58GvQufBTdX74d4tc/Ns\npl0SHPURYXveA1JdYIqZ9VxOrHdpAthNxForLwz1F4xodHxMAYAzEk/fQB+R\nUuc4SMRtLpCJFa4cK1rKl2RzEZjqEH6GQqddFAICf17y1f7kM0sLSX+T0Khy\ngck+NXkDF5k/sRF7daXm3hWxeID76TjHaUkOKlXu6FWcdnX9QHPwwmZAWe0F\nnazIckJ+nYgk8vwgF0/BptMCknbu+BIk0daB9rxSlk+L7wa1sKQD1wIAbJxN\nQGHbJuMXDhiDQjt13SMFjJicfyixmeW/Crlt3fVrrzXsXsSqukqwU1crLVd8\nsPbWntW8cVws7ZnaF2qVGXt1IEMmCojw7KZlLzGW87NM/6zsLUeGuwZhV7Nv\np7LAypHDQIzyZuWz+r+aecRhZS2u8uIVbqc+K1KCQP/JM+F5VJVBMAZT67wk\nwYxtq8cmOuSVggy6g64elSyDn1HQUjNaIBseS5WlMHYOo0cJi+SSyBE6go6T\nesAG\r\n=UqGu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/density":"13.0.0-canary.21ece5360.0","@material/checkbox":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/typography":"13.0.0-canary.21ece5360.0","@material/touch-target":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.21ece5360.0_1629503095834_0.8612713352901542","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/chips","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"971eb1da3694f7228200a901eac7c07360878f87","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.8de07c02a.0.tgz","fileCount":159,"integrity":"sha512-x2ZbmCWsv+Ms5UVo3ePStto3iDV8bkYfTOPqqtDDnBUBvauxmWQVObHhnG422V/nu4R13h2jxo3eYGZqFNskwg==","signatures":[{"sig":"MEYCIQDweP27B6SQ/IPUfmcvkEkj6eDAa3bwtzPEKTy1TTA55QIhALuN9ljZ+XwtBU5ESalNsOncmXpEfELNMLHVVUgsZ16t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1518784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI750CRA9TVsSAnZWagAAm8QP/jWcIi6+28f5evFGNeOt\nVXr3olrkDjQ24gVBIwQzHx7lzyGWraYrjApt8ZUaWtgEIT4DdSp0YRXb3lE2\n1VjwcbWTwinHZJNcRV8PNQCAfL80K4Og8hdIacJ3NGQkMnD7t1VU3eqgmX6c\n1OzVoY5BssWvGAvcTp+shKBrrxNNULjLET59vwUFo3TpFeL624eVqkhjnE/6\njWbHkHHEGNQIWT4PFXQYHDPAwAT5vFsdRpn5rCJRxb5sOM/2VuSuwWeyMeSg\nKUdComx+1DfvpeLQFFKt+W96aZPMwgIh3SdINub1+jLwsexns7fNna46S31a\ne/Ldh9KALCPqsdvhwNuYBA63onMZ8x+49ENrLdNunzTT42elqWzuMzZlRnAJ\n8SUIBGp+j2/C7Acy2HGPuTuJWLMVA2jUVV+9cBiGAVRQsqSdg6s8tM+ISVGq\nMd2Zq9CUmiZZZbk2zZZXnIt57R4b02yFSdFYAQI4oXDYF83kC6IQp8lyZODX\noCQJI8v/4z3xqZjlYBF/X+xuWw8ktBlRo0rBRlZjEwzzVPpH0InHazNjdID+\nbiMSBQ8a+8/BBPVZ3hfQdP852dkV07/o6BLVs/aM4V7h8M5iPqjZoiOeJadn\nE8cwFugXAenecNL1bvDE3thTkE8Qdfsd8C/slfccmoaydO7FdDvgIXKbzmxs\n6UJC\r\n=/62r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/density":"13.0.0-canary.8de07c02a.0","@material/checkbox":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/typography":"13.0.0-canary.8de07c02a.0","@material/touch-target":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.8de07c02a.0_1629732468559_0.33108488586992335","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/chips","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48b6733241eda6017dab078cf775a833f92d9be0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.65aa63b0c.0.tgz","fileCount":159,"integrity":"sha512-QOfZYkMNo26nATkVnKOycnxEUP3K4gCSYAQMJ61LA+75ThIJG7yhaZ7qAJsTgklh+pWU9/d3aFDmvFPAHH98qw==","signatures":[{"sig":"MEQCIARnr3NTg999utctFyghgC6zQc6z10Uo+jQL8V4u5YNFAiAovKbLzFIND0C0QLkTtd5ERibu3hmPu1ljtuvc1Pnytw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRBQCRA9TVsSAnZWagAASVcQAJi+8sCZKGnVXHpGSGKs\nKmnoNvEifMbtb5V81KtflKa9cm/R+mPcqJMFnB7QB6eA/Ih/2BkZw2UdjRuX\nW6FRpEsevHGG0iiyA0pfnU8RAMFDXLL7xromTOPac/VmPxaArk6rNwcP+ZCw\nyD0KczEOImzdCBnqUzZQdmfnEg0nxn4LZxGgFKFQ3pcUWYmO6DC3eU1U7OpO\nlgukFW3QoamZ3PLnVuCD7CJERf+fnjZG1Rxc6vu1ZWXhIVGx1sJc+jswDeK+\nXlAjRGh+kwIdk3C6BbKkX059/3nEZqTOdFqW2apco4rbz5yxo8jIn4Aqkg27\n+R0X5CtYI+fdTukwf6xEMMLMGgn+BlxjTt4wqWOhFXbVTcpeCvzGxmDuyzh1\nSAicCDr+CuAm+gIEwFLEl3Ti3hCb+YosI8MPrxY17d6O38UM5tH/OaPxdvld\n4UTg+C/VEZcBgL8bb0JdwD6GInQWyhT6I7rf8glWPsNoLqI2ul0uhabRohA5\nAzLYXrgLLPd1IYOqe0Lf6eJikE15U/L9gsPNW5uy/cG3Fj+485uXWY9nNuvN\nEZqFluBinEmLI9UQsK4aFhcmilu8+F3ug/JgAqhFRoLCXvasNM6TeD40kHJM\nay9TIT/BKsu3Cyog721KvvqS2c0BLAZGnHsg+7+hh/QtKR+cV05UiWUOXUYQ\nvw3W\r\n=s13q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/density":"13.0.0-canary.65aa63b0c.0","@material/checkbox":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/typography":"13.0.0-canary.65aa63b0c.0","@material/touch-target":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.65aa63b0c.0_1629818960026_0.12732492197203094","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/chips","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c87dd62530a932cb4f359300c008c5a2ae13ecd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.15981e9d9.0.tgz","fileCount":159,"integrity":"sha512-MvtcMtMBDPuEdTVYbw7poKbydFJs75UrDA5V22sTAMp3NYgfUBR7ZTMT9LlHkLH/pf5vP75dHKiogdiG/m6JBg==","signatures":[{"sig":"MEQCICaWaNeVOxKXQ30zmt4+lgNNhrz9vRZ6loPNqV+Wx6bMAiBtwvnw7w9s3Uwz8keJMFb2t68Hii+tcfM8CtohVGWI8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRvJCRA9TVsSAnZWagAAyx8P/RYuES6hdP/WAk34sFBM\n15HUtDtcJNbDSe2DoznviwgUYmESc2vKvfODCzO8SR0UhectRyBgBIobZ9AY\nIibXGqJQMwZm765d7y+AK8ZrX+jkz16/CrZjFcRH5Xyfxts8wZo+6D/cFAO3\njZDml7p3ugh6CNzandlqXSMijv+1m+ulQJpTlpAESplE9ZzpnhyVXkxmy+CY\ntxUMN7ls4j5YbNLUJNX7EPYuTEtx6PExZHFZsdZjnSfocuRp51C1frThKmqh\nlLtdywql3j7sahL4Nnjfw9vawBJpgd6dhnC3wiOIspLbXr4u1GML/5L5/Jit\nTQyJPcLDdc2ViJ57/YH77SbmKG42iba64aIluEYDmsRhGJSFrp4sMvV679rg\nbbAECtnxewThBVxAN9Erkdjs5Wf6kbgkMB6U0j1NTGYsN1IJWlRcuDF/u65I\nXnJmaPfkua6DR/x9EeceAxxLiEJE6zIwwZRlDh+T9M7zlCEq0vlgqx5JuFjG\n073K/8gUZk9kYD13nM9oo9hT4X4Q0OSK7xkq3KU+xv/QugN40R2R1lgMs8Ie\nJm+QREO5uKgrrGKr1KA3h/5vVVkljk+YkGBwCZdOx9tJup/5kUqYM/hQKofi\nNfR46Sb3Z3fRY1X+18Fl4OXPZtw+IU7GpbiKl7KFBl2YS3Dw0ixSos1b+peI\nV4oX\r\n=qySR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/shape":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/density":"13.0.0-canary.15981e9d9.0","@material/checkbox":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/typography":"13.0.0-canary.15981e9d9.0","@material/touch-target":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.15981e9d9.0_1629821897240_0.7388992919581825","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/chips","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63aee8d95b8a8643a125f9332c2a345f52a0bbf8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.fa7520f62.0.tgz","fileCount":159,"integrity":"sha512-3v6IUwxFIMY//5HnXFMSqiYt3gA3EvTNDTI9KUTL9puFJA+D/g1aNfXd++mziWLRNDT27PNalOm4MHBcG1xGYw==","signatures":[{"sig":"MEUCIGsh0/N7vqSQy1gUT5y3NOR0J4ii8c8K41GFfA5z9h+1AiEAtJ/Fi8YG2cki90wpFEaPhr9h0kIOVo8Iql32dqzly9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXKRCRA9TVsSAnZWagAAoIwP/1B3P4ryGXAy4G0urvzi\n9/MsWCia8EqE2LlT1PljUzFCcXIUsuHoit1qlfxxSI5MyqbI2haQZx2P+hGg\nHECKiibHUUnh7CGNDoY8rzIOzSESKR+vQrlZe+Zed70K4VmUeJVXdK3DfAJi\nh6ev2K7QVc1OFNfgEq4IzyoL3W7Y4WafQK0pE1ameAuULPF0h2OxpapjWj3D\n4ZYVPyc9j8HHZo+aKoky/9vmmem0fQa9l62vDDiE6HhJvfPA4XSChwoMEcie\nsJ9HnWNpCi+UsV2JzG+/XcmFr3rZ0iYcB7LNRocajvquZVhMhkdarxMthx12\nyyNGhJGvKIoBgCmjd4LOsJ2YW3N0yVvZoEVI118ccfN9cxA4QGkW8iR1oqCz\nFnxwt+lCzBP2u9hB6uPS5jPVFuxXwicTWsAJiXHKZBDuHgeioxk0JVeiJ+IR\nW3cKoWBLTsnEKiJcHuoYa7OjEcnrrxNUhjx0EQalJC2jYLHsAvtWT8in7eIe\nSg7yUwnCCyXmLsOou52hDQkWyxHr+ERAZexI38IO+C2yYCarQwvnAFAY646z\ng/l9D3z5ed+8PpBg/SR8oWvlH3eCTU+f6xLAkkXy5PiQiVeCt0f1iw9V3UOc\nLuLY6//C2sHX2bkBCXc5uFhKb+MGFt0GlxnJUJeyBkObfW4Zs7/fyiehqdlk\nHalM\r\n=OZlf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/density":"13.0.0-canary.fa7520f62.0","@material/checkbox":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/typography":"13.0.0-canary.fa7520f62.0","@material/touch-target":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.fa7520f62.0_1629844113354_0.3693117510135637","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/chips","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4eec7e02716fad4471a9b0cb108b5452af691c80","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":159,"integrity":"sha512-rOE8w4Hy8ulAUy1tVszM5pAzCOf76/P0Nc4sLcvbeKbBUt83uwExqGXFJmDBLrXXwPdZWHHA437XyoLPy7v0Rw==","signatures":[{"sig":"MEYCIQDoOCFh+M23q0Pskmp6mV+/3W3Eyh2W+/586DN9eH/ReAIhAK9/Ywyquhe08zsWWPwtdj9bA07iMiTirtmlpHgzEX5S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXeCCRA9TVsSAnZWagAADCIP/R5uaQP5bbw1trIU2UDL\nteLaPp7B++TNPzC2GwSoibULVqQKs1qiPEUj3Hk2TDVsvzU+4IEW/aQRLEJs\n2lqss/LWtOvNWgReVbDTwYUK9ISztuX7gigjo2PLvtebSbFO9vADcoZhj2LD\nRnA/C3alF54wQ78KdqgFz8oYFWXPoX8AKucnUjlYQbHPXloxBqosNJmUfYFB\nluoa2TOpVbMFOHYNGoHDV2ATWyreMRuqRN9B/oF5/+5EyWcpK4AyDcQ8D3Uk\nj7ubh5cJx4511P3SmfzABRvcnXoDP7Cf2sv5fS/Q3YgABLHvIYlebf1zkpmP\neWUmuQF0y8j9u6ZkaacWZz8OqC+ps0wyEkAcpLZgcnOImA68Y+1ge9GNqOGA\n+V3ACp875jTwp+KuWt5Xb9igmCfZrGSn0u+Gxa3hkntwXl1jhoRg0LGl3jix\nRVAFlZ7t8ucxAiNwxqDWL6VdUKUSKJEg+uDQJP4la9PGrem5wrs35tgZGP+d\naXLimOBTwRN/+F14RhmlSV+peQxgl2usdb0HD16WeDQY91UGTnmzO8jyxd2d\nYzucj3e7/cNlvjwt+axAK/SXEUvDmYc8JtczndbR1NW+gwxoKq2g+rv8/j/R\n3saMfPpkXOX20tUkeMX/+WdtbzpXv+NzgltKi5xmSvU24WSNvvjmFitezFZe\nAs7z\r\n=MPjT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/density":"13.0.0-canary.ce25bc3ec.0","@material/checkbox":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/typography":"13.0.0-canary.ce25bc3ec.0","@material/touch-target":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.ce25bc3ec.0_1629845378203_0.3570690506674734","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/chips","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3090a5dd3aed9cc68012e1d243fab17fb19aaa7a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.12f5622e1.0.tgz","fileCount":159,"integrity":"sha512-5UpbFINw9B0Q8Q4WViuhY2Mpv2bX4LmERFMMeyraYq/gQphE6CMY1AIclRxGqVu1XxeSAu5MRakkim5rn6LuNg==","signatures":[{"sig":"MEYCIQDuaB7v3f76/w71R6zf6W1QYu/q6W8qnLNMA6bYrcmqoAIhAIRmEmlCqS4Wbr8vn4s15IIvWk4Pz2KJ4Sej3nnP2V5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX5YCRA9TVsSAnZWagAAdS0QAImMUygotTs5a/1jMGWe\nVicoNzNuk74S3lKKxKD/7kFFCgu9D5cGazBFBXS1LZmFXVAKYMEjU1EJJecN\n5wD64+SC7KppJpUwmKFO2Jd04XzDSc42iiJLmo1jFDlpUp/PqXkE29nHj3d2\nve3FdaMfKLJZXZx6lHqt8hP+1qWLzvQsPOuQf4j2ZcKo1MoG7OeXNeNyxXlj\ngtJX07X9jUUiHyLHGpSWq0z06yvNf90up3FB8wIKPtNolsdkdDgCPH0SIJ+D\nh4OZtKaedI/wdVFVVEiDmd4OJ1bpX4fI683Ad52Sg4AbCmzMfZwtTsHUOw5E\nKRDFIq25o53Tb61TAGC9BW75yqNyVmdTzXCWVpTXaOkj95T1YqICneqTq2HT\nKwYcS6O1/O18Xd9ItRPBvaWwXGkdA91er4iL1LA6c37Gsmysc9lPLg/oUDEE\n1EjmCQzPUJKYgWaSaq8eSscKP8R9m6RXV31ux8dGb1YP5d1M68VAIFs5OTWc\npIDH+3aJBwqi2RXXaBLUWnkDnXTVfHnosL3XyerC1wkU4q7FV5GJO2kr1AlU\nNhuhh6Rrc/VYo3xq9on0b+AOueQHcZn6WgqhIJPxVAsrWOzG8ax8DqRLQCDy\nUXOlf+PTo0rmh6EGGHMbYFkSKKmtvcYrDkiyfboTsgjTsVugioT9nJGbeOfB\nlUcl\r\n=CnNZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/density":"13.0.0-canary.12f5622e1.0","@material/checkbox":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/typography":"13.0.0-canary.12f5622e1.0","@material/touch-target":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.12f5622e1.0_1629847128064_0.7048730023800764","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/chips","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e3332b1f96b5e5c236ba747788fee96bc591d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.d97f8f133.0.tgz","fileCount":159,"integrity":"sha512-U+z0+jmpToc4dx8meC/QsQeY7vn+QDL/LJClffO4mz7bwkhIRn/SW0nfzpOr5V/k3HvTEG0KUwjjclvOATDRGw==","signatures":[{"sig":"MEYCIQDZuvEfHwIeY8O+XXOD2SHoqYGUvwuKGF0lPbG+9DAiiAIhAKPKVHrCSaah2p6KMQryYQ1LOYTTFPFOPQuNnoM5nSm6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo0tCRA9TVsSAnZWagAAeoYP/R5Anv5NPVmxBZfCgz3b\nWZPYgADLd7XTZlHOMnFaMh5NaYZ1OTIcsR/HfvHRkQyBeK4Ng9ulMlHv+OBQ\nhpPgGGvbBmZzIhKdeX5kYBCPfJxKdj9jmB0Oqur/rCU90tm/zJTIvg1zAAAs\nhonIofM+KXLyL4vfzqnWO6R8dA18weqhzp3tAQEJB1Uw22Jvs/O9PMUdxGI7\n28zKM9IbaFH3KExzNVJ8OjQYs4rOO8dlQK6Fln5xS9lNPk4d/BivJcUoOeZ8\nkw4ngGRxog5bvaZCDm9415UpvVY9NNatxUhKMmtpIVGPXMzDv/VtPorUCpl6\njyVpTP7nbTANc6j9Vb7w1SUfqUuZWkpTxPfsnAAvA9Yk8H3DHwYJCVpzxB2q\nv374bWcsVeWoU2VLk8R2rwosd2XDjwP71Rd1n2OAKf+3E54NTHI3b/g36aCW\nAFPPjJckZwgDqJRf8APX61LuUWp+iJzyVfJpep8CV+q74gTyWCWoECG0z8XU\n9R7eLUK99gkR6mxz3vMCukeW9wn2ttWZXf8W8bnuaqvQiFr37Qpoiq9pv0os\nJGoud0euOolANRd3uc2oU62+8aVS6gUVh42EIsAM8cGXH6Ah4ayB/eGTecF4\ntDKTdTE0DQ8s61vrP+k+5NYdSr2ClLNycqu287IJJCA3vOEsQNFHbm8Wv9Wj\nP1GG\r\n=vMaK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/density":"13.0.0-canary.d97f8f133.0","@material/checkbox":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/typography":"13.0.0-canary.d97f8f133.0","@material/touch-target":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.d97f8f133.0_1629916461509_0.9110757349611494","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/chips","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17af532372410e375321d92950e6d0be4e01997c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.d86fb6fac.0.tgz","fileCount":159,"integrity":"sha512-0OyReErKcP7bxzAiOUtrQogjzOHEaXtGPfDzgHeHD5XYDUeDeoa/vz5RKM/RSyV+c34yd804vRJ7vfkYoFY2lQ==","signatures":[{"sig":"MEUCIH4JfJEDKF0WKku9fjlUpGdKtvigRYFn+brTTDkYE/KwAiEAuu/ezkIN+NUxib9+r0fNB8RD6CqBwG1XHJuaUREh3kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpHiCRA9TVsSAnZWagAAajUP/jst04bug6svmqj07uDK\nSCMhrljTJMo1XlBLySxJSdvT55jE/PA+rLFpKOpsVMr2RRlXzaognbvqegpM\nsY68/g3pnTLJjTixlZOu+SmdV4PcNi77NVQtuPZuJnIIBUUQgluIM0nsZMCw\nX7QvpTutWCmyNzDzqQAmhKvlfO1+KZnQX6t9zymZ0ljhHeJJB/SAgofuuKLf\nEdgsKIfnWFLMW5+sCnpifhIdPu5JGkRc4jiKGWeG6zO7GOpGrnjzauaEwNg0\nI2iiKP8nIBis1DMb0bKl14KZAMeJvPMGe6W7T87oTCr8vG97PK/ZuTnPU6Lb\naTE0iZ5A9W6Zr9pQGOfXZVnjdM2owS8zflByDomVGJk3afJJZVpmSyxOiV3V\nbYfc+4GdIA6Jx9ixN/DetAKqqx4cQnC/OLwVJf6v33mizL2poEI/70QpI0CV\npmgp4NmuEiY1WDXOfr1saXuFfOOryJzF8CTlaRHX0aODObGD3zkERGAStNon\ndoWqjqU914HvGbwrb+wW+QNoTAQob8ugXbvZjg+H57ZsufvxBREMAcivcHhy\neP6m/KXJyoPMyw8xx0pZA5ooLlfWeXK5dKNQqUPy7eUFtXgJuspoV54jzAPM\n6IQMjnggrqYqhn4quUAsZEfTB8hGhn+y9QCw6/z49oHMzm9hdOhom22B9IsI\nlGKc\r\n=EkMS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/density":"13.0.0-canary.d86fb6fac.0","@material/checkbox":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/typography":"13.0.0-canary.d86fb6fac.0","@material/touch-target":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.d86fb6fac.0_1629917665900_0.8053310496023489","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/chips","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87247368213ee68280acc86b31690dadd5d6dea7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.e8554dbbf.0.tgz","fileCount":159,"integrity":"sha512-IVLiYk45Iq3TEeQEDRcsXVwfsjhsoFd2cq8JIp70b/CQWRg0NFf4vURhbyFlqj9d7ugZURmouqdmt2e2SkkZMg==","signatures":[{"sig":"MEUCIQDgL4uJ/2EVi9HHA5pRoV/dxIY7GM8chw5AVCFPzGLGuAIgb88hLpWJmZUC3bG2emlHbP/5jwk689WOenCz6wetnlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr2BCRA9TVsSAnZWagAAqq4P/0qtMlOvpTVFlDk29yEi\nusrgbD5q92Cn8yAPYgpKA5WLmL3SWKu5/+cvJi76wskLYWS3i69tHbTUn52v\nyg1PFMGvFoq0wMnJKcvZicugIp2yk/BRrL0eZnyoGg1av5qBj9pTwBf2eu9d\n4pEK2DHtzAVNZ4+wVLeuZFWiSVQMqypfKF5+C/vOC+QuroMyO+mKgdTt5W2S\nQi9xrZIkHqaeV2kazHrIihJ0gllQfqtgFd+N+6aMCKszL/T9CbcKR/othw2t\nogb7+4h7S9HoQcIrCtfm413SEJAqbJ8kuvxRCZE8uORVKF5v2yMhoHta/0/J\nkY4Z1/7NuiQPcW/tO82LtnQVUHRIHcrBR/iFlR3cjLyyxm0sXXbuDd9gE9BB\nf6qCbFHfcUqIFD/NfTVc+0fa44aFmmb9y5brW9FVammN33wDKsGHwm13fEO0\na60VHQ2SAoCcKX71hEB+oLHtxuiW30rsEQETsn6U6BD72+8uv+sy+aTJkQr9\npEe/ApsKnGlEO8Iev8FFk8IVYVsvHYVUtNQA9ix7v/CwItLCZ1AIvy1QYFfI\nDQnfWQB1LIysDdfYVN4E7Bbh6qwWv/RuGd2TVS4OgsRVQCrbMu1Iein4XEOE\nJVdJTONbhgm1IFT9MLjBhCnMLGEJBuCvMT+VcdebaoQtEPtvRJv8wiOxlNNw\ndXxj\r\n=DIoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/density":"13.0.0-canary.e8554dbbf.0","@material/checkbox":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/typography":"13.0.0-canary.e8554dbbf.0","@material/touch-target":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.e8554dbbf.0_1629928833346_0.6658200598494297","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/chips","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b839f92e6f1a6f5920fe173194e3b326b0e3c0c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.877e3fb0d.0.tgz","fileCount":159,"integrity":"sha512-bSDzg7/3JIbTxruXR7P0ewbxyWE9ONCGfK2KijiQnHJXroCxL9vqfCcJoW/Rx/bsTuQ5xLXLa1BLHqNLkC4Fhw==","signatures":[{"sig":"MEQCIBjYVPphXDr9SOAtol6u1kt98hjZ5i1CJzrJECzNidygAiBicPBcec/5hBQ+SwYnIoH59jHH/VqReK/YtfaWcZCNMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1519202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7WNCRA9TVsSAnZWagAAubwP/2/MS+zEsvvE9ydZcZq5\n+z2a7WjvGD/KMFY7WU0jnJtT+zfmm7t/b+joWdfswrS2xZFMyZl+CJDxx5Fm\nwP2kZyO3LbLX9SJf8IGH+qvBFSi0745LTHRDL/i5uvtvHewmCQuiKrVhOUYO\nFbZ0vanbf+DFieBZjY7evHA2HIxCgnaI1lljtztlB24VqojOCQ4xgrg8AiSy\nsWLt63S6VwQ1deKILnYQHdEuwfYOKMFlXoPF7a0NVi2UJ71UzZoX/kWWOnRr\nESpNXsMWupNIL68V8YZVNpBE81G98/ZLTn5vFAfHKWrWa8ynCQg71FUsSEg1\nOfmz4OF7kEl4XgHmw9nRkqy4ZvRy4l+j+DL6yYneg0eyIHat40VExtGevGnJ\nd1aRTcXVCaTDFKODAJtyvDkpXwmgwxVE5R6graaMGDGH+OA3d8Ol5g3VfC5l\n52lvXBbmRkttAqmgtcqvgkoJO8nPnjAoMxQWgAEe5yGQ7lpEEfiBNecSwevz\njzMI2VLlTKWvKYH2Uj/ArxgI/OsXKueoJRgMfJi2DNIqH2jUcwbxYw9MaMXQ\n+3mjPR9nu2E4RBBurj8raecDXLUjGXD+Ma7amKICaQ1JDDGz1H+QpzJOdqDJ\nwBS5fAkZfpwxHe/UJnwsKzgfec/t5BBLKZ4lM1sO6fdvMUH8U4zJQgxxgPH0\nYPxG\r\n=VGO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/density":"13.0.0-canary.877e3fb0d.0","@material/checkbox":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/typography":"13.0.0-canary.877e3fb0d.0","@material/touch-target":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.877e3fb0d.0_1629992333678_0.20436154720125943","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/chips","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.6236f3576.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d03c99aff3f0789dbd50baf5fc0713e19421310","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.6236f3576.0.tgz","fileCount":159,"integrity":"sha512-FhMayGOTO9l6hMqs+8Fw0q4YGxwEdF3wUsb0S/1tR0WV45LulE4X64Nkg+lSAbmHGK17aJ4icYhDn79kRLeVRw==","signatures":[{"sig":"MEUCIQDdyp07KKz99ZeIOv1TQHbIKjqIuGqFCUTnYCT1op95iwIgMuil7iUhdzKxMfM7ueEcMf1Te8IEXAaq8C7/uyavR3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7wuCRA9TVsSAnZWagAABI4QAIJI1HGCburBrMPyGJ1Q\nEPSbIcWOsZh2nRD5j8luDGohurQQ89EYUvRjbOhlTAjs8uXSdaEKN+QJUv1A\nJszUsD/Vf5VMJqKJiiOEg7N9RUN0JJRKaafseiXWuh2zGPGgAEWcAm2anxHY\nA0fRMZIJZoqJxzo0W6gPP0q8lILl9dR24zmy3NezriZQzAfCdNYPVQm+Awdb\nUJtMaOKPErKacL6UkcniImoQMxxFRAGIcgIah6bHHVw7IdlqSdHwDRuDB6pR\n2EjT9bWazfH+Y33WKNtKOEodJDJeqw44iUXwqKqfMWqa2lKroc1HIcaRLjWF\nwD4ZuW8Sm7BJwQgtde33kVAZCW78Kn29P7BvYCkthXBQqy0CxvRcfxwUJDEE\n+UGA2yg/Z3C3EQDfwsxRoUJEpXn8Ncd8JeGD7z1hQ/LiwkJJ7pd2/8E6VNe4\nRxeyHAg/fjF4jpREStvOHpFeyBpFCVf7H43mf+B56QdmAEUO94rcKjrxLHtu\nGZ3Vh5hzYluUNhzBICSl3BUli5Lln9jy/y+HWEmwWDqe74uJb9ICiKYFvJY5\nL4SyC3d7ub64EDJWH3xxJvwNNZls70cINIr1hwLHuGXnfVwT7jnlM+38Dj/6\nAGm6ekYnjaKeWoHsmGjjQrLd3sdo+aQth/pYhf1kD1hoR00MW/W0y4rMH8BF\n0LQ2\r\n=pZGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/density":"13.0.0-canary.6236f3576.0","@material/checkbox":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/typography":"13.0.0-canary.6236f3576.0","@material/touch-target":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.6236f3576.0_1629994030126_0.7917592672963796","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/chips","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8298efc72d4d32f4b478355cbde81f4b460a0816","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.1d19158a1.0.tgz","fileCount":159,"integrity":"sha512-od8x9t2KXkhlxf/uwAHF+4eB8Zm96VH53d/s1cQitPfrW4dY99Teg+3+KN3KtdJoKGLmEdiAbaHgHJx32ZzrNQ==","signatures":[{"sig":"MEYCIQDZ2u7Mcnb4wPkQm4x8O95zECH01HYZQVDXlwSbg+UZmAIhAJ9olu29/q/v3k68RtjP1a6dqnLOcZUznGrYIA6D0yd6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8rUCRA9TVsSAnZWagAABisP+wUlrEGBR/KlQZlRG2S4\nDOI6Nd35IBNj9sncWXIvFQl4jnce5o0xcks/ZKO8AATXabPEyc98E1bPsVyY\nyZxNLdQ4bBjInatsOTcR7yKJG85V70X9jIm7IgDz7kuAh3p1mrS+8v85QIvn\nwH7WkbRMx0ZxELgNLTPBpLI+6Hs8VqUrJlLd88gprdjFzLtyG5GmS28fFUWB\nNIFMNR8jYdR76LVNxlWq2eMoaNW2IE3awjdW5AvMSdJ8prG+k75LB2lW8/hy\nigDHvl5QjNID1f9WCwbV+cALvQ9p886lXYf1HQafMCe5fLUW+660Amzdl4qI\nZS/xErPHp1uRV3YpOxFIlkHcUh8UJVI2jgnmC94MRtmVks6+tXHbZ2dK/a2e\nvx3Hge9spVMRXGnoU30IxMGb29+CbMfbmPhjipwD0n5MPOsovzlY0VnF3N5v\n/dTaeqApqy65p3FWtiouj2VIulC467i0rlZt/dz1O5p2VSBcj6NOIdqzrLhf\njpA7ibvCkRjDg2CQTEfbPM68Svk80cFIIIV9LidsatIwogpycOO5etlsZNxl\nOYS+rBHY5hjpw/hi+lCbvgkqp+GTyjD+7hkFv+VyOzCKNLCVZ8JZcUMckoBQ\nULuCJjL9p777BhR5QH2WrOuf1h+aiWVG97RFGHEbWTFPq9aNMYl8c+Y4E/D2\nhxkC\r\n=NYdu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/density":"13.0.0-canary.1d19158a1.0","@material/checkbox":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/typography":"13.0.0-canary.1d19158a1.0","@material/touch-target":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.1d19158a1.0_1629997780355_0.5332707312518457","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/chips","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc5b5b8bf8e2e7350cc706924ea94d7a149c967","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.6adc9e83f.0.tgz","fileCount":159,"integrity":"sha512-AzBt4pC9qOIRtiJvI6dTNNp2q0cB1yCdoPYwx08pxWIVYSwWpfCMaS9yCQpleqRmMYJdDFL/j5KWk6i0dH7mww==","signatures":[{"sig":"MEQCIGCd48v46BdF6i3wOiJ+kd5Rk4lhdL95vBVJ6GFMmY6PAiBcdMZ2l3wDcjcHYEpyg4ELTjbxVXvD3TsZdZXmn5l1lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9sCRA9TVsSAnZWagAAXh8P/07XwB3EH/DKgJIPthir\nZZf4LlfFMTitKRI1hdHEEQVIP/xa44CPOU5eTGHECRh3+CwHYiWk51oFuyRo\nnPAWr4c+cgOPsMCiAGgQg1ziqFhZSyxm5nrA2OTmpV5vN+vMHg/zbQZ2JCiY\nJLlIYqME8pbIbExQtvVXMBVlg0PYty9Hd8OKGTR0HFBzrxsKjr5UoQEHjVWW\nsVf2WiFy4LouptFZlpESVn6mMkIfbM/Wq+i4kqjxjvw/mT2is+M8qH0qch/T\n2Wlzb1o1gyyPjCvaC7kjxj/C9+3ze8cAH4B1mNfQwa3RxaCptr8dpuIQB0pf\nwBWynKGqMg+ru9VbyjSNqmdYpuNwxeUW2b4gmcUOOZ9pNIc8bq2t+uY5saiq\ncITI0TnW4p64pzU86aL1yd8Ly3UGayFfN6xw5VJ+8tfx/wHurgc/ZtqezLDU\nBoHb1CnRSPK7whUWDKBl5/XvYWtd38E+S/+5VT1H6JGd5iN3ouNuO8zR0KFe\nam3Tocde3/qaHCf9Wg374lUImUyGq9PaF/BtnOWv+kpQUIAco5kytz1H5cQf\nPW5IqyOcxYahusXib8SrK4WM/kVC9P+/1ar21UJWuSY5p7w3LwtpwylIdziZ\n6YDrRAC6ib8WNn7rH6GCzUR39rC7SbQ2R/ffTMUJ14mp34nFKKWVQXB5gCmj\nag9F\r\n=BbtC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/density":"13.0.0-canary.6adc9e83f.0","@material/checkbox":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/typography":"13.0.0-canary.6adc9e83f.0","@material/touch-target":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.6adc9e83f.0_1630363499900_0.767918975954804","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/chips","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.d082790f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"783b63a1a6cfa9f198fcbd23e795aaeafc6c9f35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.d082790f0.0.tgz","fileCount":159,"integrity":"sha512-crPNRVUXgUU6LzBlX/Ad7rbk799QlYe8Dthh6m8tyktBSN3Bt9AtoIMi7o/nWnqEAZswIVHH32Tpzox+4okdZg==","signatures":[{"sig":"MEYCIQDlfm5DI4AqASmBV7pVjVXE09ZOkJysYDFRcwd5poqlPwIhAMbuPfYvZZHblDgEuMY7OvcAqmfqlN0PbqvILiwhr2U8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/bQCRA9TVsSAnZWagAAfwYQAImtVaoBzzUW3/XWM0gT\nXd56AnZSeRWiFDWOrPwhi8LZgj8Cj2cunS6ofhEZDNVwmuzt4V11I0BPd8cA\nxAz18roq9qjKf6jyKHG4Ljp6bwhWaSYFO34LGAVewu2j0EqepzjE/M6S91Ca\nSt4OcrutQdceXqGCykwz4j17auMIMWkwLJW85n/kMB4rfO2HeW0PBp/w2knk\nmPXjyL9kYueMULO93JLiQHz8p9LqhemzBjUT+OVm08QuzjitDKztBdPSnUVB\nytiGa4hFILQDYxOukNOrpuMvo+PTThZcVO1po0wUwgIKON0d35+c39fJmjYH\nIVVahIrJOICl3L9WbERmOGvPqLnV3UjCO/F1/VjTzPKt4XGpuSf9k0WC2H5/\n0dWwvHtDjG+XdP7EMPgtsetxcP6Bs9GWZ26VmaW23YilLjz27Atd4RzFchdh\nxLsMPyCzqtad37npKTsynezGOGrJT5gjyMMwAzGLzrnH1E+V48LS9DrMFql8\ntRHieJFx4HA8rFM3/luWbAxzQqfxqsJrCt5fB7/7O2xuTSZBbsyWdtaR5UA8\nEq+L39Ao8Uw0ctC1oIFvA/doOONkrYUQ0qgkUOMOqJCZ6UIFdgMbQxtucT1+\nM0B15L2cOgPkbn7MTGVGmZA0yZXDclI22lwVxkslt7QXTo2JKhY9k+QILYCb\nf02P\r\n=VVY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/density":"13.0.0-canary.d082790f0.0","@material/checkbox":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/typography":"13.0.0-canary.d082790f0.0","@material/touch-target":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.d082790f0.0_1630533328505_0.006974159266531332","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/chips","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6faeba6b0a7a915fb8387f5fd9293f89fc7e6ec0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.e2c4f0196.0.tgz","fileCount":159,"integrity":"sha512-2NBCLskqks1Fob1lwsuqTXKXFLIKZGFyP1D5BVWAf/iC889HqiqZTE9IRsAMo71j4gYvFXMlZThpFnjMVZNMFg==","signatures":[{"sig":"MEQCIG23WcU+uiYfaOB8TMEfTVpu/U9zxSy8QrOoDENz3nD9AiAsnxHHQubatoZqTLqmZ95G/biZ1vIXberC6RIIlrv06Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDMTCRA9TVsSAnZWagAAn4wP+wfFKgiUBIDUsbIM5aeG\nHaQ+9NQGBi84K01qbRlJ3bu41EAMOVy42vuQ0Wz97c5+YnILOiTTWagIBHkg\nZcAJhDRXOLPLqzQq1GhYqMbZ6mTyE2htEDPV4qYYEQK7tkJy9IcbtcHzB9kB\nx8lFsbcd2iHUkcuTGjrPhFsGEfHxWNiP3uOsSEaX937KS9ilNw3cZkdVWZBc\n+2pwR41I7ULe9lxi7M45BQQeOf+DV2lNAXIUpr6KYyWnfS6zGtkxRJ+f1sbq\n3Q97V9LgUbbFT9Tg8xNISZacM1CbVtyCynOpKW4mhrcdhm85dBJzEw4sQ81W\nK/m9Ou/XfYXQ/T51u/AbXq5jpTgN7OETYp05DCUoufvESIUxgf1FKCbv3SmK\nUTKLg6PpHUUx4iAAHlIQ2RVvrF/irWb/sPtynBAkCPwaWHg3o/2PDwAqXS9l\n79mceXAI/d+I1itA5sLS+fJi0A4ZNWDTFDr8Dx/36VbO8eA03VNnO8PW0eW1\npNbdvK3e21nlrB2/kHysXwRCLdtyf8b9Ybrzv8YaoCeDcb+irGm88zyw2qQF\nF33LjxtSCMe3qIit/nIc9MOCw1XEwELJGQ3uUjs4oXVQfvivhdw9cUCnFfmO\nROiHOwnGEB+QYnhTdpVZ1OxT6LXBmpWnsKZpSYj5XBfNYFtojvu6qlpufMa6\n1J5J\r\n=oE8h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/density":"13.0.0-canary.e2c4f0196.0","@material/checkbox":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/typography":"13.0.0-canary.e2c4f0196.0","@material/touch-target":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.e2c4f0196.0_1630548755041_0.332129460733277","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/chips","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.611db508e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98601f6edf301fad1d4ca216a46c6c625d69f00f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.611db508e.0.tgz","fileCount":159,"integrity":"sha512-TwrP8MmDgrmVfq4hRLNdRKmjniKIIWHkNMHEwqbg4fPMFTeSYM3n9P1vKVfAPN/PdwK4oK/p0eo8dIiRvJjvdA==","signatures":[{"sig":"MEUCIGBN+y7EFfmhIZMwPMfXIg9Z8Rhaft4G1PMLkuOUjOj6AiEAmop+/sKdEKn+LPt2o0ce/kk6fPQs6aw5BQ8UwbdSwPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEHoCRA9TVsSAnZWagAALFsP/2iWpGuisgCDj678il9s\nIOKDLgdPC9phIHKFrIcxt9W1WkYve4HshM2QQJUkbokkDgGA+Fa0HdUjn+St\nBJCa4IYf3S20vbdwHOsG1K4T5ZxMwqSbX8jL+woMocIlDdzMKRW5kwaaupuF\n7PcvNlnMUOKU1cx6jm5dC8UqnLEqH4J5+NQ0uCcGPr6YKWZZnhfYl57yna3N\nPOy9ea1pjrOQuIf5kFFVpCyNnfamhqD2v3kou6aOeNvKuoRRq1XRNLQvPkTd\niBCXqkzzjEpTRYI8YTwKNWd/6aOLqrtzMjP0FWO68pZCpqWlzZAA58SizDYO\nliJXkWXod5tg1QVWDvldtuVYoshdpzbQOFARlWFIolCX/PhM6XEq0zzqRokT\nFw6gr/BsO25qC8S0QmCXXLusWO+Rxxe1ZNODlTO2xr/ZXUDSKIdO2K3BvxTV\nQcMfo/c63gB1FtrgY3/ksx6Z31Az7iUZ0I4EWTe4UYMfsFh0ZwMmpg3nvBtl\nqy4awxuEZjpiCYD76QvF+aOYP+omzWrD41juiyfNbLmOL9I3EcOLDs7HVDKG\nNgYxvRPyFvYcC3MZpKRoV11eFuvJylJJA/vLPUvK4YRRQWS+9o42RBJPbV2f\n3l87g8kzQkR2Ak+yD2+7ytcY4BEiLh1RLw2W+tI13wa01V21F3x2A0c/qnRr\nJnJZ\r\n=HQwN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/density":"13.0.0-canary.611db508e.0","@material/checkbox":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/typography":"13.0.0-canary.611db508e.0","@material/touch-target":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.611db508e.0_1630552552462_0.04136811550988195","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/chips","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.d4706933f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f72771afea5b43e24fcd704311f5a5887603304","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.d4706933f.0.tgz","fileCount":159,"integrity":"sha512-jjv5nzKtaLdcSByCqwukU7LQ/Ob4tmS6LK+rfsfbYLgsj1QrBgQpVjGTGGe/135VwT0vReDBUgkKyPij4aKfUg==","signatures":[{"sig":"MEUCIBeHZy/dOK7cJHFblSsOAw5PjnXvg1TDMM/4iRi0i3egAiEAz+61gdZ6VU/QonpET+I56EOp1tlwLU16ruPTKVKmtlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPARCRA9TVsSAnZWagAAzDsP/j0jR3Bmkq+fKzdECIoJ\ntundjHtbPT6hJ5iWc7Fdx04KO9abnTimWlm6n/HeXgMfMIvJ+QK6xOXbXZDq\nsWU06HIx3x3kg8kszWuhaEdzvB5CInMLilfg5+0rhcu2lsrs9zRxxIEGfh9C\nhTm1g5dpdHbmYTzkb7ehiYLdsoMVFEIBguVJy2w3Mfq4qwPa/T68YsAixzXT\niE3kzX/qcs4PgGV5g084tBbawSyAJU9ZhLjtNpJJvXv2u2YCUaIYvKzjSJCb\nM3zLXy7cn3zDf4Mq4IxSv9YcGhX4Xg2Mn2zeMcEJBZo49qWhtOzlEKHs26ga\nV/N4kbfmBO+LrW8xH5C2WRgkxaCXEBnd4bK3mH85d2e6B+kIEGagGzv0FBf3\nPA6cEVTzI0KMXU7oz5m5YXx1Kv1PPOpL+M3NbAR+RTQXCRlj73IwD2YFHEIv\nBixr9CpP4Ht5IpHnLbVfmwzsEn77OijwKWpQSs4dD8RZe7NT5XEpgjqJVokv\nDTvKR+yqB7zW6bjqRDPFD0NL7Mj+eNS1VqJjR/T1C3rTzSm0w55cQUwu9i+n\nUTFUg4/S9neT3NB7jq3YzZpZYLqykESdrT4n9RKJ9eWwB4gU9hfxpZPoFnSH\nNmVWa6DvgckER6K6erd2K8YXN5/YKG1inqUXrytN29PkfCYGl8ZnMNByo+ry\nshR8\r\n=HVYE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/density":"13.0.0-canary.d4706933f.0","@material/checkbox":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/typography":"13.0.0-canary.d4706933f.0","@material/touch-target":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.d4706933f.0_1630597136928_0.5114148129634328","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/chips","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c92defc186e19df4cf3e5685ef8c8b189914c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.c16fe03ce.0.tgz","fileCount":159,"integrity":"sha512-lg+YUJrGJNFmSd3YQyk2pE1Aljj7hSPcoLCeY/NlZIY/Ai2fGeKYJBm5B70HnRoAqQpMy/atr961s/6thOfgig==","signatures":[{"sig":"MEQCIBkICp7Fthfif88UGW1qz8rHFdpf9jYSHVFwxGi7fRN/AiAYNU7lcHRP5NqmF289hY+BNjHsxGNezfSDlFFd5Jah9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ3UCRA9TVsSAnZWagAAe/8P/RQ+9D/Ko5iZowQoaAB3\nJxa5Sdr/ZfcjXnGyn2LlcLUesug3GEAvoKKw6gXLohb+vv3EH0GNHJC5QD6B\n226pdtSmdMhuBAdEwaS3ii/cyTZMc1xip12a0UNakZ26tYrSkBXRinAOsDb3\ntdqM2jDYNs+g35uH8Hmbhk4JbKpFbBX79FdxU8xQPZ7SjBsalThBsu2Xi2TZ\n8tWFCiw+VIS7s8+1rr2nMkTSJ/HydJc50ijY4XeeM/2UF/x8B01xlWSRbHu3\n8DGG8N7hjXuhPN6QJeyUOH3RWZwzTTo9nhF8Kjbcj64jkex9s6vhdsKhubVP\n9Zzsjr1Si6J+bZ2vB92G879RZgwfBuJIjsGjIxjyHdcKR6cxaYtiio9Py8LE\nOcU72+JKuvKO3GAdnFpxMBmDXG36FF81Jek2phBQhBTNZic+Bl5hi7Pen0eH\nCBMdEihFjlixwBabv/IjH2QOx0GoXKPcGjvh2NlXDGEf73V2Gu9FUjcaTGCk\nnYqtVl1tLS5okircvoqEKYrnY2+8dbPF2duI8HOYnflWjnKevfgMEjD5Yn2L\n5mTlPegCwUE6Ox5CXvSKVifkR8lbMSMl0/BIVBglRL4zL/lS4fKdtZysV6xc\n19h6YBotfcJXF+PW6Vss1sDPx6ByAifVcctRCkuL5fWfDxsvYP/3kMiqtDp4\naAt6\r\n=3v48\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/density":"13.0.0-canary.c16fe03ce.0","@material/checkbox":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/typography":"13.0.0-canary.c16fe03ce.0","@material/touch-target":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.c16fe03ce.0_1630604756797_0.16924423037715597","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/chips","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.9203a958a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96af26d12d3216c3283fcc8373d9ae1b3116bc8e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.9203a958a.0.tgz","fileCount":159,"integrity":"sha512-HxKRPw78fwgVwH89XFx5rw2y5JHt/bDg60FK0mcwyIorh8vLGf5SWC80RuYV6HeXxeY+BWt+I9Z1WcT++/90Iw==","signatures":[{"sig":"MEUCIQCMLwbbe2jplZILI31ETx33LZoxNxb4N0OoK+JqI7HJwwIgM85OIduCCtM/UKP7byshIYGFgCKh15Sh1X3HBoTXwlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1521364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKqCRA9TVsSAnZWagAA1foP/2C6nZZT+zGttznB+6DH\nJvQJrLsBaKvMSr9HfzPSm6F1tO7OTKOmN7FMermq4Y409w8R4DYtaAEf1IsI\nKfkdpGzZknQcM7aCS+xI8JYaFzugD/f6KuupPZxw2CIIt7Mj3YDTQQrUnqYp\nqu0RxGXeU//3NRaOWBKs2oTEi2Py8yJu3ePryMRQvAeECdhBmQQq+faK9Xg2\njguzhw0gcMBQ005XQimZR0l7yaBj5aKo1IDefabuKrqI2A/aM/R2rI+tfm+T\ntu0jzZt/TMe/xLu7mCGPxCwlFntavgLhivI8w2xRMQqG42BUyRvsSYK9QjY5\nFGCm7Z9Ck4UNAzX1gA/z+8jpEJHB8mWlXPmA86Ltldd6/BKEfLfvKAsem3Cz\nJhVsnemCZ06amvbTPobUjbAGDjM0JrAeqtZOoJUc84owbo6cwNsnUfs/cLbV\nfLWVLenlNkMZUBQDp13+uBUVt5VAD1QBhNaOrX+DjwW8XhsHm3V+QHSHZeHJ\nHSDc+UfJj73MOr4qMj905PtOQhLAH0fSaJsjWrEB0QkLkt7ga/5AFyCKH9O/\ng8bbqPcT2kCjYbabNJ7E5as3WaEyLnF3KdknykE+OFQ3OeMtUDrBhuZdNMqL\nEgq5f7XnXKwPr69JzWnhLLpe7QKkztev/C6NQZbTS4Ziq5sNdo0EYPey3gu3\n0VgX\r\n=NJqC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/density":"13.0.0-canary.9203a958a.0","@material/checkbox":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/typography":"13.0.0-canary.9203a958a.0","@material/touch-target":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.9203a958a.0_1630626473788_0.5254725812440961","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/chips","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7800e1ee708986fefe0e678caa08562b955316ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.fddd5ae93.0.tgz","fileCount":159,"integrity":"sha512-hxwp9PxtDhgxDGnP0uO7P0W3lOtQ5PwFPeH7MdGgbM3kC1GfQ/57g4musROv0YKlJe0tE3z5l4p5vSjzmV12UA==","signatures":[{"sig":"MEUCIFGWNH8YSmm5l/MRcaoPFMOs0hgDbksbc86zU/D2zMYNAiEAtzOQY6A7NlvOAdYzq3VMGDXavxdGoAm9lt0ZICQGx1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1521524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9dCRA9TVsSAnZWagAAiRsP/20BF7ACLSJpMGBRanOC\n8jAuLbFCOPcMbb8+CvfIm75ypc7jczXjRwceCzXlzJn4HBzoLRhZg2EVNVFm\n409jjeXvYyYqLSinymBucrjNu2thEWZ/EqxADhnrIC7Tf8FbmnxiFRSFuNHh\no147MBmQYKhY/seaDxBRN3Oe/v94vwhKbQ45XkHZdj9bQqWi/OKDtqlKOACb\naT46rDAM4Bt+sc+EnaEIQHFlhl7iHxBxGmlRjApCdpY4qIY+SzbJyRzD2wJf\nOmOB0pjAH6hzZGspOfQub1IO5H2LpsKcfBBig4HXcwk8GF4KlaZFkhuVtjCd\nFPkt1kE3qpl5cRCEFcbSLBTsHooCT/htjMz2vSjL9xZ05b9OaMv5rG0o/DbG\ntqaJEKHC8rTRD4273I5XoMFt0E3aIP6XhcGUiEX8dlXNYyMQGV9s3S7bHrzy\nzBjTbNwMm9NRuRw2FHCqMvZBBwKStvc6d9H84yTu4DClpAn/oY7An1GNip6e\nmxw5oJMAyC7YN+JAggTuv0vo0tFVkeRlfvWCx33k4JL/2WtNvAQZsnGLNkCj\n8Vu5nZVY5JLi/2oGooV524RWmnrm7xUUOS8sB59n7+AkdPcVzJzSG4jCS0dw\nL2+8KG+b5tWCnSe/+PPjtk2+HXQS7eD7YoQbVRbsR4UyKSyHSo/gVJhKgOpG\ntB/N\r\n=ENSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/density":"13.0.0-canary.fddd5ae93.0","@material/checkbox":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/typography":"13.0.0-canary.fddd5ae93.0","@material/touch-target":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.fddd5ae93.0_1630654300785_0.9660684485173741","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/chips","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.117599a8b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4efb01ec4635e3b83b25bdea8c92a4a0c1886c32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.117599a8b.0.tgz","fileCount":159,"integrity":"sha512-FqC38GlDVrED3uMHgBu/CufSV8kSwpQsSZfqBtaVAmH6MGZO6VP7jprniqFcfcE7Rjq3JeiC/aH/sn8M8Tv1dA==","signatures":[{"sig":"MEQCIEtlEmjURbALbO/plQUESYiqdrClZIN8gBjVXPmwNj5xAiAb3SZjUTcbnTo3N6japEXMmGNwYE6Yehh2e5uvSsxAag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1521524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+5CRA9TVsSAnZWagAAUw8P/i6Dr7FkKiynB4BTz5dA\nnIxx5oGfiKakuckeZ8NkkeWRj1ADbsIH/fydXDgghM1K4tGoOzCFPto2d3wB\n1sUPqKVp1+k8N/KTL967+xcSyuB+BtR7mvkFkNArIlPHJhllplmCHZg569nV\nHOnuRb38TGtayzYTIISR5H7e5bsW4I2RdVPh8/oaAvePEEdrT9bPeUYSlqUv\ngqf3OjXYYknlF4rEyIk39lIJVCYcfAPByiEwqNdR4tXnV66E+qm+AZvzMABn\nq0bNWi9Kk1n6BtsbD0IkEY+QhoK5huMqA5KSuVQ8RvBn0/I+EuzyiKI5mFKJ\nyPl+EU/oxRJfK1O2Csfocb3DeWC8SD4b9X4C2ipsMsvdU4t8fQG/Pb+P7pWz\nsc7hUQcjerFKn5YGjggAod++GhrcUm6s2PcY6jhFFJ3pLksmYPDssZ8Jybhg\nl3lRvVsqJhLJqXF5wANPEhFQwR32ZvdJL5zSpHr/IVKHw91F84tm9G1yuX3e\n1ctPSKc2/yHZWltRqHBxiJDNljX/SGkI9j2UjED4iC6tuYxRGm2yPO48lWs9\ns0mCnL3OgAE2yKXj2KZzqr5+ZLZZKVAWIiw16HEOqx691nY8eBrAobj+5r9f\ncM/T/FSDYwkgnnl1wKZCyaPBiQxTibwAMZXUxAB3cjS2RmuviFIY/gkiFF4V\nX2TB\r\n=wh2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/density":"13.0.0-canary.117599a8b.0","@material/checkbox":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/typography":"13.0.0-canary.117599a8b.0","@material/touch-target":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.117599a8b.0_1630654392867_0.9273466315145333","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/chips","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85b1546ec3d261fb96620a59580b24546dd01cb0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.e4180d07b.0.tgz","fileCount":159,"integrity":"sha512-2AF3fiTd/Q/UKDfqsLU1WIT1FoM/CIhllYWaqOxMtkpiSR546S5VnnI4NghI/KFpNo65zJ9kPA89cjuO/ld/Kw==","signatures":[{"sig":"MEQCIHOBjW9boz4JnapIO1Rf3qP6YOdPfA6G8k/zc1OgfVTvAiAttn6Jf9MBUTbBCe20urtn69ImRukLxPIvOd/q4kQKww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1521650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/TCRA9TVsSAnZWagAAhUkP/AjvAEUhEhrjRB8enp84\nuNXr5fiyC8blG95T1Fgyu2SLUv5uxn2ZNO/6Mog5MOgB+IbuW6yHimlhp7cm\n/8nFpiFwT2i1dBzA7MbeG3FGP3aYUEznjQarTs35UxsSZDMrhPF6HJQR76Lx\n6yZfz6jnZwXvlACXOd0pHg61GQP7BQkoGw5ypQE/7Mc61YzdCQDe0XIvzBjQ\nBkQJaWPs4iOyti7meOfXD0IwgXqXeKSWKXPFxmLnZ2U67imx4Td36pjlt8QG\nXu2XiUNluTp9gDIVBE+AcisUdQjifuxLbd+tWD7642o/euHHP4Cr/Sge0hUV\nejLr1BhdC1auiDDopBNRpVNeAArZpe7lIgcSz82elNYXbY6DbrRP9IEwXDBW\nW1Wm/k7D3mJF/8wOWMtA6COq/QVzqnpmAN+0eMrTowKEACDHKbxpBqseLR9Z\nGXhHiOJyw7sUvOTs/8tNURRRPCE63+tXDClwVuPP7WSTRQYVxoj1VvcHbhtJ\nykBykXtdAE6p0PTz9BVlPYws+awiOUerBOCHNMvVjAEXJpNrPrPSDxZDa4iA\nnqaAQgVuDQwXeAn9QixSjZomxX+oo5qhJvsHKB1d/J1Y7YcfzXCmQtHbCQb0\nXVcv3eoKE1JHe4u/p0vaKeJPcQvAuLvWtkRm3cFT2ftrOqB37WGI4LSX1ZuV\nDzcA\r\n=BvlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/density":"13.0.0-canary.e4180d07b.0","@material/checkbox":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/typography":"13.0.0-canary.e4180d07b.0","@material/touch-target":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.e4180d07b.0_1630654419033_0.09969611119923782","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/chips","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.42d175efc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"798e97686c093460c2931d04b5d703f35750d5cd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.42d175efc.0.tgz","fileCount":159,"integrity":"sha512-GxfA98OLvYFPFTRoKpPg4X/Dd8qW/bhAD5AlcdQ04QtC9ZydNibn3okP6JcWdNqglNsf2cHwwl+vs6O1GbjF7g==","signatures":[{"sig":"MEQCICM55/vIeEVVbrQKpgsRvzYpXDh8C6VakMhnBAZ88JrBAiBPi5CD5HUhsUovJGVnLOlAQanpk3ZB1/I+Bm9MhJjppA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1521945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLcCRA9TVsSAnZWagAANNMP/29gd0kj5dABs7I1eXXH\n5xME1PPdJbi5wHJr0LTmBZi300dHRVZgqOflkMChHVtA6ntI18V8JcppjlI9\nO4NYpfciqNQEnCVqLlWBuTym+0G4+/E8hmjE/f5zoFBh2z1WAo0HKdAMU+fd\nz7A7mWQ+ogg7l0zWPTVMFH+Vu59oZcRfTtrzB/R1i+6K4JdnioElEZq18NQv\nCbeYirVBTD9ZvJBr0gJojMeHJTD61zJWgRCVFKRoRQ856XhykHz2pJDZ9JcE\nHjG6vodDn+EXJS3Y4Mu7gS1xt1r6YszKCGsEpVmrCOxrbBGr00kxnQYdv0Sd\npGTeYZ90G4/7XtKYojbyxHxBiJAMPdDPuXuheI7lSlXRm1/3PCHlhrr8kllc\ndf0dI/vtNQco+GKqPaHAOIsgwLBkmhAziAkAw48djegNUlRGpVZ5SiAyczI5\n7iZZYtZLo76Dr4TVSJ7L3k7bxGX5ha0DF/DPTmGu8rfGYGEMivjUCYDyj1s9\njlUFSqM6EG5BgOBwyT3NcQBNPI+7BUMWo9Kn1ivlm5EWkvRp0yKaH/apP0mO\nEJE9Gyzhf28xf/+MkFan2O0t7+I2lv02z9lxh0XlXAZNk7ozfNUJ+fVEU3wV\n5Wljs/NQWbMh2uy0bSFx58bgwGq+oZGbQL55+FRG7cc/OBj6ZH05yE3qME0L\n9Xpe\r\n=cUGs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/density":"13.0.0-canary.42d175efc.0","@material/checkbox":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/typography":"13.0.0-canary.42d175efc.0","@material/touch-target":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.42d175efc.0_1630683868504_0.15135014285897452","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/chips","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.72464476c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ae9b7b3d5f7e91fb99a9f47b355e3e7f1a4697a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.72464476c.0.tgz","fileCount":159,"integrity":"sha512-2y30Zu7MdCUc0mpYNTQxCMBu7ksi9IuYpsfFqN1+e88tKOIednx9OwnYFhltW/HH/Aqi6QbG2IIOYG/ocJONXg==","signatures":[{"sig":"MEYCIQDQxMHmKzJHe7aB266AomjC9ndke9YTA/3wai0q1hxSJQIhAJoB+dKDrIiSAI6RFzaFeTh+6Mm4Uxg7gCDxBAZD+38a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1522110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4bQCRA9TVsSAnZWagAAuzwP/RqlBLnQhwbj0TTKYUmU\ndm9oEziXCUqQvZI0XTPkgdDpZVubR7NuVyNltmMvWhkzIyIyOAyXmfMaakz0\nKvFVaw6JyV1/xN6ui93kah/syHKlTBYGP0jItOQFhxpSiQ6RpWLXTo7jhKAo\noAt0ai9eEJJGp3YCfHRkVESMtP/CjD2IgQIDPxdEfGhI9DpisHf2ZBCo61Pw\nsYVsQ+WI30ncKF/jphsgkXZSyZjqDqLhXDqE2uRFnJ0uDesw3hLdCALSYZfa\nDLl2Er0ajZE3Ll/ZDM9YxhQD4IgDiclVUMHkNjisy+iKVgKNcIjzXygqN1gD\nNtHfUm3YrDs23A+DQT7exgxxENQXd4Hr8oJ1PPKhqhOpmaGYKVCW7g9DtYY9\nLv98DZ2zB77UEEmRkIhZmzj6BlzCBZgVFFihYpZUucdswFW70PSBrkdDkCvI\nvisooIGJynGuqb5l97JMujSwWEclJBbTZCLqLYcMJCuKFA7SjEyWe+uMT6Nq\ngBpISGfBUe1A2o5q5gUG++gcbMR25PvkJwisCYDIgc4ITIYdqy18jUXDgkzN\nZ6Akrd9G5tDFTlXXvY5Y1KF3qL1uGbqA4mPORusIKb7tHgytp+vPK6FR91oN\nxwCjNNeiejdmWzTluoODI7nqnUUA9d2Cv9407JbTtalO0KOuALjrcjFp8vKZ\nE4Ek\r\n=ndaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/shape":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/density":"13.0.0-canary.72464476c.0","@material/checkbox":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/typography":"13.0.0-canary.72464476c.0","@material/touch-target":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.72464476c.0_1631028944501_0.7950115535259206","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/chips","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.37d4db866.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30849ef2190c09f86e367e4d85abd3256b8013a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.37d4db866.0.tgz","fileCount":159,"integrity":"sha512-qhQymnC/S9PjrbqK7FjNvU4lqI4SIrptSCg/9/I1ztfKF791qB47QHvi9babWROIyGESlMwO/S3gQKcyJQTH2g==","signatures":[{"sig":"MEUCIQCJOW+qAvWEzBzd1yVobxPoRNNMHdQr3OTI8TEvq/iM8wIgEwb5bt+Xdb30Q6JQJ87NX+g2bactIfixxJcowpzwoiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1522110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhuWCRA9TVsSAnZWagAA31MP/jjCOTtrOwhN9X5FVaBt\njddQDKSuxmr++GtpkcDxeuj/a6gjAKnxh/rPwn29pEDa0pFuBA7tH1M4iqOj\nwdbAmNmy3MdWrNzgXbzFni7Zuv4US0IzfwVlRyMV4s9qr/DpSCLG/HmBUpbz\n0iN52anplWbsiY3pbHSHK2lCCNdPO6FcybwdWdkcnWAQVapU8AJLnmHV/y0y\n4kRMUMpoxdYwxC1y6Ml82wq+zWwOZMpXJz3Cua5gU5d6S5XoycCmPrBGFFq/\nPgwysm5vr0/vzjcSeUfilv1WeBWw4MaS7RdhvL7KYPtJQ4MOdFUyQypmugBw\nQzu9iieul4AqdEo5G4yrCl3+S6yjFjLFdOvCjJ8vMFA2LUrPPC2whG7O2lj9\nWT+Z6uMP76FfnABU//g0JA+3lf/AY0MnHsIsUsQq8QqOwX+TevGAyDqysKlM\neSyrheqh3l6IT13ps3bGgP3BbiZm1HAyI5qJdfHDqBOlaG8/nRS/Z0XMIkvX\nmzgXZtemY8w2xWpBzKqS+JJHbl0ZPMvX9Erbi4ugao8o/+Z6tsU6M4TU/MDR\nQe/IgdpaMYnA/kTBO9NWO+4vpg94FU66peX2U+8qfAc2xF8jagTS79IBLdSr\nyRJjYuIXeJXtrrugMf6BSpe2Chkf76kbRJSY5khJyq1FbLp9xuC8cNwNPyI0\nwlCP\r\n=ISdz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/density":"13.0.0-canary.37d4db866.0","@material/checkbox":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/typography":"13.0.0-canary.37d4db866.0","@material/touch-target":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.37d4db866.0_1631198101791_0.419812697218525","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/chips","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.6df682e74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b868317ae5bcd5b55c446987680f52ebd611c52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.6df682e74.0.tgz","fileCount":159,"integrity":"sha512-0dHDIkDw/hGWcshYrAAWNet+BZIJkJSWA8E2X6Cqij7AEc9R6yIC0IeGjyEWXJHngAVp9baEcFNhd74eiYTY+w==","signatures":[{"sig":"MEYCIQCihV6k4mAd0SHl+esgNJMnkQZKxwMW4IDKfGZ7RXTGMQIhALbccUX9fgIR8eepoPXcgFv5uNbmSj8yHL155L2r3fW3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1522110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivrCRA9TVsSAnZWagAAQzEP/3P3/74pV+A5vjq+y+7c\neL5vnA9tcmQsRg2faI6zzf612S9Rt84I3p3hmOJ2h3CTbQncYgS/r5FS/7AK\n9ae15QwX+yCz75CYGl1kHq9knPtBAF6A/2aNQ2u37ZjfM7mtjDTrKKxbk1Y6\nPYiTvgyoFfF/i+k37zHIP4E89CMhy3OI38XSex4JIY7hcDZumjPBN+cKFmH7\nHQbbdUq4sg7g+U9UHMvZb03Ccq+sm6e2Rh6jlm8+Uol8ZoY706pN80ndHweG\nbTjIKz54fW+jgTKzlhQokVzXf8MnZJAPuQaTSmYuduCAJp+Bzk1KsWRf0Sn5\nvy35lghzgE5l0O0iUtiUsLUDLketFoEpSC40Bku/ojlUvjaFhzlQDaMb3/+/\nZdc6yRDyuGlQMHthnadOrKyUlIwYu1XHKCFYq1evzLfSMUi9pBEN0Nlh2CXC\nBphHFAe1YNnuZeT3kOnLWdotEzByx26KvCGDoxyI2IXuw/dKErSwzqnKa0aI\nublVD8b0MnrHBNblnfCLcJMpITgm6dIjbejL9W/TgDPU0vjZqpWVyJAfpZy4\n91ULw24sYiwKaVTbP0jOifMjEuf0gR6dYfkGi9se0alRKQqArPKgKBl1/yr8\nVTl/WocCEsktWJlxPFcj0toPS1XdTCDhTwhi7Vvta9nPWQZua/fiwomsKmTP\n8T/r\r\n=poJa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/density":"13.0.0-canary.6df682e74.0","@material/checkbox":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/typography":"13.0.0-canary.6df682e74.0","@material/touch-target":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.6df682e74.0_1631202283444_0.6831929004944917","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/chips","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.b49359c35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4b5a80b53c192e5ef94c7931fe67b7fe101cbe1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.b49359c35.0.tgz","fileCount":159,"integrity":"sha512-NeTKmZNPHPwStEXg8hRr8ub1NISx20baYCwCxn0KH/0fGqRxbKqh0sk8B1coxgDittoRVNeTZIw6j22e56W2Qw==","signatures":[{"sig":"MEYCIQCL7So2B0oRXY3zYgGy2rxACe6aGjqfuYrh5xY9M5EeCAIhAIG87USHd5UD+gqFrqTzUmX6Rm6ebzvNpnwdiuN07QR6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1529336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkZGCRA9TVsSAnZWagAAPkYP/Ajd4WRn9lcuH1C6zp5D\nHR5M70irHJDucXjR+ZjgCIlMAzM6fIxEpP1Wdszepj8SsBZ5SvI4bFnSyTsA\nokWuCbx7CTk7nAvbo5KgVjrHZ1eEykfzDiQoLqoZx7vdJgzk7whCMZIBM7Nm\npZ2YjIYTl1uuFBoUhZJFVaO13sw2nrke4Em7/GyjfT972H40c5pjxPVHIwpS\nTdoGhEcUd3iwEyMvOs5DY0kOZELsywiGws8UuoNRBPpLqp3vsQXxQK328c9J\nwyJjD3iYkE8P+u0rchVDISe6OZyH/V6wW6Gsoaxo+uVQztPRYDZn4BULPm9K\neCXLJOfbrb/Au/T1TsJDPNShrA1Cb6j3GEUWc12MDSx0AhQlDJchDJIGpz8I\ncUK6rCBPH9plE3q142t5wQ1P6KhwoSpAnCHIxy0vICD9+f7qo/v2GVhtER6k\nxBAPoo8hRzyOWx3YwjDN7n7ovKhgHvf3AsvchM2HfvrwyNzu84TMfzKWN7eV\nKHWVG7hsJxCdot6BLmll38PWoX5QlSLmvNt8YySk0rhscmltDp06FUO56s6o\n5E7IegTAGJeumcpKlRMLeSAtMSwDTxmcKrs5URa9txeG8T8T9XnBI4USEKv4\naO/1Hdf1TKznf19pxkymR1nef0HnV2CXbJCoeiU8iJxR5+fXaXXhEECm1fgJ\nLQDk\r\n=XP2c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/density":"13.0.0-canary.b49359c35.0","@material/checkbox":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/typography":"13.0.0-canary.b49359c35.0","@material/touch-target":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.b49359c35.0_1631209030723_0.3870776794145032","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/chips","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79d776c33c1303c2f7bfcea07c13e43730934833","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.470bd34e8.0.tgz","fileCount":159,"integrity":"sha512-6/xGwcvIKSC852la6uSBXzjsTP8aL03t1ycz464czzch1ja6ZA8SEPGqSp8ZZYh/ez5HD0xxaWpo+So0vfj9eA==","signatures":[{"sig":"MEUCIHwXVHm02gnlxDxpD56BWU8/a8j3/N0TSZ7WKIIEx30ZAiEAkXuKV2lDoFY0tGSSKmrDpV2DsIduBk2zBaL0wIDcOpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1532213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkxECRA9TVsSAnZWagAA6u0P/AlAXfs+hcn+7RUPM7WL\njfSpWEMlNzXmjZ2FsE4Uc2HLP3jEPrjY06LBj92eWQQiuWqskleETpn5b0vF\ny57OmadggUZZuhv0MhA23SzrtmyXD2MasUq6yS9LDQdYa6IatwhHwHtnwaXb\nsF6TrXHZ+MlT9jH9ku66yTtuPvMXwgJ8FUrog9V+OR0Byb/N8BU4/Qgc4vlc\n7jky/mJZvCNeaJqJszMQcOi8VWtWsPQ73nOUM4vbKjPQBXer8P6JBOWz1dBT\nbMNjRlH7GK1vkwH//oIZ0TLoJFEskqPZuGVEI5Sp64FfDV5A74u0jOPT0dtv\nXzwrapqijqLWbG3NaiNxIeoW+itw2uDg4hc2jJmOgxXQQPF/vyRIjsmNXlY9\n1Gcl4L9IKO+8xUwWS8hUl9i5gd13/Z5roBVMhPKTiZLkpTtdBL3q6R8YXffD\nZ1qssBcKWcg5eN/JU0a6faCVIieOa9kz2ohejTDORof0agKiSqkcbcGZd0JJ\nFfl5/o1vG63+P1dHYa514bTNwIhf916WG21F0WPrhan2sftrTcqWG23iisp2\nxFc8zo9SHy86zByBLVDZXw2EP2Ft0geSJsnhE79iG3i4FybnPpWnijZ2iLfe\nrImNQF8KZMroI2Pnw+BCaCaH1ENEC1mP1/LJ1I9PnQ2qDT4uAOpzkt5BqiQ/\n3L9z\r\n=KObp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/density":"13.0.0-canary.470bd34e8.0","@material/checkbox":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/typography":"13.0.0-canary.470bd34e8.0","@material/touch-target":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.470bd34e8.0_1631210563756_0.28309964066578974","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/chips","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.d48a01771.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d3b8dd8a95a98c99df0edb43e15ca7a78be4af9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.d48a01771.0.tgz","fileCount":159,"integrity":"sha512-TIN7vgBvr7Wwyid6lCtMnRmezIxtjRXoa/VkUGFVzNGJ48mKOA+alJIYNOpISQyJoNWNOXlU9M0HTUwICDgnWg==","signatures":[{"sig":"MEUCIQCFKgYsuOAvnSzE5nFOEx/1rBxmvFe7aODtDDRXrvAK/wIgZt3iMo8JZ7rpH2uoWrCDFDTHuPgjyTf2ch/Hhj9mcdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1532213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5rCRA9TVsSAnZWagAABUsQAIuJLAi6/IhrUjbOr6mv\n/RToGgftEiQbRuRhEG4UshfvcVnzLM+Q2JJmg8vsilCEWHK+HkcZq1DPiNgo\nUZp6SZXYORoknN8M0RZnLemOe1jH61E7vNe3IggJ97QeCiFUFQIF1lbL6IT0\n4g7EwQ42p/wRxqxyVWQlcxuwjC0ZaN4MBRuCzCPdAKrRZvoNjRRRie+bR7Xl\n94jlBP8IBh7m5m+HNG+ZKkpn9rQewrhxg8hzPE3Of1F5hTcufJD5nEBASObF\nQAR6YiTUyq0SxjXwpEMQReAwpeWPCrUfqPGNEcGyzOax0upm89B7TLLZPPTz\nT5D9E2vqqXzLxpLoVEimP74x8aXmFzAheuw9bDyhWBgvbmKlUgJ0MmWHTY6D\n840n61NcIkRjA0XvLr+Yr184jm/O3dGPLANGcY7mtt37Xo4gF899X1n2H4mO\nMHsxGdPuEdOsKYmjnGPZXD7uu2nGobUjaDaWAcK327Z6rFSuuTXu5ChCXR6G\nSWag8F9fcCyeHTnmVCi/fujj9hxzuH68HbBjbN8/EUdq7TQIJSrl5tS6u9x5\nFKqOljgDPySsLSh4teSgOzJ0ZucJ6zwLnIbefMBkU/ao8c0NNk7/VNp/IssS\n0eLi76US4lLh6s3lWT9wRNvrotEfB9d1at6FV7lmRzvOO6t1Fs5YyC/EW6+e\n1ezY\r\n=CvOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/density":"13.0.0-canary.d48a01771.0","@material/checkbox":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/typography":"13.0.0-canary.d48a01771.0","@material/touch-target":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.d48a01771.0_1631211115215_0.8480330509226188","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/chips","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.13db34b34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18463c8b371f578cc59a90302ba6aa4e44531da5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.13db34b34.0.tgz","fileCount":159,"integrity":"sha512-VgNOcrD4vcYWBIs552gA1vYmAKJlJN0E50NeDbO5N6HXMw1l/kCZjzrSKsk57Pd84/X8a+bZ8xiPTTfSw9sjRg==","signatures":[{"sig":"MEUCIQC6FD5cISvJ9vD3I8uWDehJ/if0kTS+YnlbFgXq9QY3fgIgClhqmdJFWtFij9rwaA8lZWHTORrUJqzApJGyjtOUa1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1537961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHxCRA9TVsSAnZWagAAP/AP+wQ3Vsm6R+xz+nDvG5nE\nnQYSTehm/pF6hRS61UiKSHOiuztkCFHKnzbJKdVGmINVMf5idQDJ94vkUyy8\nMxyBu7+4h9KJXgeJMBI20UJQwNyU4FW7U1h/oP0es5V5SrEv1KZZ4umT0tFu\nMP9DadPm+jglj9ifsEacdglrmvMnHs0qDjjOrsm6RD1txXMUTmBjOJd9CSm4\nxZkQlviBC1u9CSQgzW37raVBbSCzLUGHyWWk1MHdBB5Iw573Fr9bNxFUCOBH\nFNIRBK/Mrv8pAHNvxzL4+15ihSvfXnyc+2NLutcjGYrA4huQv3wSaLIohEkv\nVSTdi6cF2GQy+6lChsHLizwVGVeKEJHJwrr7TIdTk97sTxR5u7+5PPybiAG2\nR+y6I4q4sW336k29ztuHzBKXM48GLsi0xjnXNMiqBHzmC79pThJgeKitYkJU\nw7u+KiLrKn6KEJaKo58XVR/+IUX9oR20/uaXRPOVnS44QwNDbKZT+LR6b8TO\nm9GB+ryWeskh6uhZw8CwyYQhwSPn2G+ycsRlgkZOsgydU1Xp5bIwxjBVtzAg\nt5iHZLtLVUfBGgeYvRwATgG+3hxpICqqFJnYVI44jWS/RusNXwu90cHzg7ot\nILzkveDxILnVoxPR6OqS1FKvpi+Ff9zywp4Gqug+YMYbkuSIgNp2Zi4iu0gn\n9WON\r\n=09qR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/density":"13.0.0-canary.13db34b34.0","@material/checkbox":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/typography":"13.0.0-canary.13db34b34.0","@material/touch-target":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.13db34b34.0_1631212016943_0.32665714369230336","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/chips","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.864798678.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88762bdec8af54e1c31ed72f81da4e9fcc84cfc8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.864798678.0.tgz","fileCount":159,"integrity":"sha512-hmIVv/cTqePxOo8JqmYr/IUd4rgWcc/ysDrvxW6mgp1hgCXra3hMID7ADeGIJ8wVqAsklwaTuUPHbJAoZX1vuw==","signatures":[{"sig":"MEYCIQCN2ZOpOGGN2EcNa+Adxr4o0J0c8BB8TDn0zMjuUnA6DQIhAJ5lxs9xxV905wrQbaOqH5JPl9QfM68OleRBEfNvkx09","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1564598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSgCRA9TVsSAnZWagAA8KYP/jaKtGWODBAnTQnw2dew\nJa47u9sOY73hYLk4voKpvrbmlP44SXG4pVZHDu6ZpZLFVMLeFu//h+zZAY8l\nXZmM0TRIEHMto8VyCUnhU10ltADvYnuiRwAaD0iDmauGFp94+Pz+o5dSudNH\nl4u+SEbPB2ypDteUEURkjLgTTPhr3Yl2iuGMX07GPWmNaQi+rf81xfmBJj6a\n6aX2f4HSVELZW0zR8yVR2iTKfUdIm7QqoEnILBSb34PET4lwIgvYPKvtQi7B\nOi6/UqJLKtt+jD0EMW4WO3K229p9qqgckUmB1B5yYWAALsUx0IgbIcmIBTPP\nlQ4IvoCWUDqwBp/uCNCN2ugDQeAgmDERJAR+7Ne8xOPeu7LW78cbMTOlGzLQ\nbFoo37LPVyejHTorpoCjobEG0Ubxk3AHd2QMuVDS4DYoIsbPheBdbYMHzGKN\nyLT1DNX89l4SvoLUcss9WL5T6IEfiJk1SHrFf8IhpFVLvLneXrR65VTHwolj\nLA87W43cN4cUqqzv5K6yGxr8CmEQZrAzSQn4pXCHsCWsM30FX58mckm8FVPc\ntYXWxjAEI2zMnZKKO7U+jwWOhQ2b8R3kykCxppyLtsv2knQGAOcDcxrRUv0C\nGoQ3b4F/R07LgkCFtd6A3KhWp65+NNg89008zjaBkRTNc5XyU1TldMjX6rXB\neNVE\r\n=jxx2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/shape":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/density":"13.0.0-canary.864798678.0","@material/checkbox":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/typography":"13.0.0-canary.864798678.0","@material/touch-target":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.864798678.0_1631212704439_0.29725465944337004","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/chips","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fec51c3972515d69cb51c7f4c390c12ca914f1cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.d04bda3fb.0.tgz","fileCount":159,"integrity":"sha512-YEvVg9ZLDOvj2NEI0MgsOO9RZ0c0c5bAJ/xOcKiJZabXtFwkJtj3eAQs6/S5njqvfh9lglMQ/cGpkI/GwxeLKA==","signatures":[{"sig":"MEUCIQDcxRw7P+hP7BLHtNU20msws8uoptO64QqbqY/481/XnwIgJAFQHX5kJTNHn7KDsHZ+0gjcbQrjRm5c10e1LP0AgN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1564598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hrCRA9TVsSAnZWagAAAlwP/Rz84GTIMicZxOFddCO/\nRP9iQkWvuJEaePpxnoGi4zfgaNIqUD3sD/5cyM/mGmfVDXeoTFp80kPpV6Av\n51z9v9QGdc+gjV6/pVFlxA/+YUT615jDKeQr+p9+fukVp/0QH1aVAjrQZI5n\nc6fX5j2fLLpJvruTMZMQ6iFS2c5D+H5Ibycb6ejkUsMsDeWpV49K8U3oMSfC\nmyhP2Cd9qDmNs+zJjC6V5R7witqiFiOz8y1KuIgj75NDg2aZCsjoSC8nrgFO\nT8Vk1q8DtBZXkZ3cqqj7YmBvkwbF3UAxp79ovE0RNx9aC7rctSXgSyY195t6\n9kgSQOVCYxNnN5tTO59gu+bmb6o/OkzSa0CoW2meZG/BcGWzowg+fzIF7nZb\nODlrza8gI5kV9tiXjGM9yCuwLbicJeRxK4SS3L30fpHDr2wEX+YkjttrYAaB\n8L09giSqWzncjGzzM0tqjkMU7prEAPvKShfY5r3BpehCXzwXdL1YN6bvDq4b\nS6lA1B86UlxIW8I4lsj7DhHQQJ9xKjMdkUfC9Uf5jDA2qBhXIHIX2yEjVksU\nw1+oJiS7zvfjZZxwpXzUnbKfhzrS4Ge3YG/0nzcxG0Fwn6ZzL2jXi7+Bf83x\nyUvmLUPpC5M/nTydNtj273Sg2cpaicJJrWjmfjA0R+L5tZM4Bf98sj78LWtw\nPZh6\r\n=MXk2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/density":"13.0.0-canary.d04bda3fb.0","@material/checkbox":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/typography":"13.0.0-canary.d04bda3fb.0","@material/touch-target":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.d04bda3fb.0_1631287403421_0.07594505994975265","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/chips","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8409f4c8d3c220140c54fd3658340aa932c62bf9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.5533f73d3.0.tgz","fileCount":159,"integrity":"sha512-o9er2qIOO3hUJsgp8Isi4L7FwHhM+C5VjmJanBlnpWuP7DX16ne8OuaZZunLbTZAyn+iEbaFowmSJfxJ34unJw==","signatures":[{"sig":"MEUCIQDINwfrHeXdsTBeR/GQG5g80/U5gA6RhXX5pC//gVXtwQIgRwmRVZ45OHGoE1WNg433XyaU2KZ/FZyDb7LPlO0ZQCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1565886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kmCRA9TVsSAnZWagAAhIYP/0bdQjacBofaSa7flsYZ\ncLkdc7PU/AkI+GGYdzq0Rs3EN/vJTaX9Y2/N0TNTJhrebx0708j74PnYzbUt\nIWSghrIq32nf/Z0TBquf+ByV6/5f23NPw4qEnnsj2Y4H+ScW7/8rHCFwP1XK\nRiR1UCNGVKHJQ8rQex+Swo/uYFgJf103CrrrIzy5axIcAtU9zXr6/eBTqZN7\noW/CkEtydl+n9ze/oAzkQdx6JH/AZK2DbyTBa4fqWfdl7VgDJGHB4eUeSxCw\nvfjQBx7vmwjtVQ+toJj295tAYmS0GFC9jtf3G2WtUAJO7W9/wdKLWormHbhv\nPL34eIrV9LCU7HfiO2IN3AzhWpaA6nX8v+43Jfeya6emqvQSrOOGJIg8gsOm\nPrPMuW/2voUnzTivM9QumDXJ1GjpbVNNYRQ9nlyRCT1OCz+ducMYgJPd0ZAj\nEw1CsAA2eeWj8DpKPYa3CSQ1CcmAi82s6j2PNPlVH0aBJCsypLqAmvI+8nzG\nOdUKjorQLywTLDP3rbgwY4eLdkQp/U4WuZQdr/H3IFr9mUYMUB4MTC7YHVqN\nR9gS0/50jnbmP+nWagO8efz4OplatkANMOsGu7EYKwa4RDt4ZpHn7AwZ4eV5\ndD2Y7AVbPSRKrNxO5sD7A5RcEPywvByirUWTmn7IdBJtbJXQXdZY0MP8E1eG\n0qNE\r\n=D17V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/density":"13.0.0-canary.5533f73d3.0","@material/checkbox":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/typography":"13.0.0-canary.5533f73d3.0","@material/touch-target":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.5533f73d3.0_1631574309824_0.14111238666697523","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/chips","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.08398f880.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e8b6bc46029147c51d4064fe952ef29a8684ba8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.08398f880.0.tgz","fileCount":159,"integrity":"sha512-55iuhRne7erdI70rlX9Z3LcdDSGP+XGzJpmT0n1+ZvA+UlvYLvbgUbris/E1DF5i/ghYtKkicOlskGOCxEqOFg==","signatures":[{"sig":"MEQCIAV183KCiN7Mm2m2qBvVGxrLSFujFd4b+bZx51EIKiZyAiBQOg6Irs0fZeHq2TvxfyEQwL5dCdJ9rimR/n/8V74Pjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1565886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+BUCRA9TVsSAnZWagAAfp4P/iYtEWP/v4LcOOf0KvNb\njIkGDfoBs1FwfOgQrr5mqCA67pq02kOJLOG3W+mLNNRrS3C2Yp7NinzhHFi3\nkvcRdmMpLuBa3Lc3Z7KmH9Zq3fGySCVWP73eeWwvxY93098fjpsA1r+Jz6o4\nF04cwuQ+4OgIG6Elq+2Bapr7RCKIqBBAEYZTHpcYMvvVrn2crfdGhiz+34r5\n+HPK9JLwQzmXa/+NxiFwcJT8juvlrvaoDInN9QhpHQugw/aNkN+MoeyGKMRr\nUclahZFA/ItiEQ5Uc7ccTgd3km6Zc2bkO9SdR6kMAqD/h2zdakeDbyMkiG4E\npkjb/XPZevkNHHbHKxPaYtySnDwTefPJOw9Cpf7Mu/Jw2ATrNPmNMxDaa+1z\nuMgCAsXwAchf3X+oGzaUWfkVZLw23kQl3Qw7tUleoRf0ZrfHOd+9uakHQkuJ\nUMKy2HJsJjHfXUQ4/g238udciQ/6B8hyRIk1gaTfq6Qe/BZZ2oPhvDPaZ+f9\nJeuE08E9zjIi60WHQ84wWsBtWT7oD7mpcC+ILw2Cpq3Qh6vhDanePyIRRivH\nAwge6Q8rlIdxrzzADgQ9UCO5a9b5a0Kob50allp4Ooel+3Z2gF1LR5T62kG3\nJIoRXSvrchg1vQNwV8vAlWiR3+s0/z0QjzAczXD6gOvUqZvJHsfLA9jaulXW\nWB4h\r\n=4mmt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/shape":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/density":"13.0.0-canary.08398f880.0","@material/checkbox":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/typography":"13.0.0-canary.08398f880.0","@material/touch-target":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.08398f880.0_1631576148004_0.7559816756547852","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/chips","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"694100ad2af152af43106c98272f23664083bd08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.818f4ee93.0.tgz","fileCount":159,"integrity":"sha512-nEFwTTtlV4Kj9u9Ao4NEee/KGrFibw5gSMTgNPMTbyVaF45ugU9yN3nnX5KIOiUPnpvcyhjtXvoDq9CX0CHhMQ==","signatures":[{"sig":"MEUCIQDJPqWoWOZNuEwSuYPsyEIqhfNrfgVABG6U6twcbGBNaAIgUe4U2EBnbymz7kiUneYkf/mMJVTlkFKKJ3ZiDGGN6Qk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1565886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjK1CRA9TVsSAnZWagAAGGUQAJAfQWBDQcwCecDttIMb\njReHjj6jpmEo31xhtEF5RTycxl3JQJ1OQbsNwCy9aCaXRmwdB7UpC2q8v8+Y\nuBcrb0h73AsDyv13TwDJ7obos5KRl2813e33drEN4hOakC6HNP7jIlCH8uja\n9fvjRELWd7PtwkzfweZ3lK3Lb6GOWaEIqCk3JUo1SOgXal+cWHyGbtwmIVb8\ncJf/5D3IT3SOhr9dPJpSExn1JNXw9nucsDhIGGbnQrIsMUxgWcDJYQZycAIh\n+aXno435D2pC98dMhjMBAXD9ufCcTEZdOwVqYTj55yAsmTyJ9CJZfm9F3DFb\nCbSedArspPsfHQtEWJu910xh1/5nonOufiJ6LX90a50CdJBwyKyyzfH5B+KU\nWTaCTUZM5rkKx/pq6fiVdiMFBp8R4KCx3RWSSl2/3aCli4wjTN+Z+gQyFY5H\nS4pkF5w8nJTQvLNUcYAfzw37Ta0464zeidpNuBWxra40cAFkYXyqdS6JxHa8\ntkdwQJhpHfbf/EGBR0AFjOFE+hcDBpBX6RIZhh3nxcKWYdapm/4745YOfxbH\nVbNAJXQ+Hr1vkuKvgKMTYeupBmBUOk591t521L8rISc+Nb4wR5+OKWPkZbrr\nyqqyfrVVC9z47nLmyzFkeDlPMVOhgiHcPUddX7s6Zd0foiC31eOnvbw5ve2n\noEsc\r\n=K0Re\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/shape":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/density":"13.0.0-canary.818f4ee93.0","@material/checkbox":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/typography":"13.0.0-canary.818f4ee93.0","@material/touch-target":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.818f4ee93.0_1631728309471_0.3325930282425471","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/chips","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2b7d4898c96e62a06749994565455fa152ab9b8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.8355e14dc.0.tgz","fileCount":159,"integrity":"sha512-kb0Z87npJy6iFulRhTsSFxSSoUBeDxwywLpEXIlrADR5yEIvFoLrpS0fEVTxzcYWVkEjjoanqgwxYIJIYey3/Q==","signatures":[{"sig":"MEUCIH1L8nJcBV+fAksri9Ml/L3d2VtTABpXQpiL13SCi51NAiEAubY3mFWMHcuEvSnD66Pd7LA0vG7pGDDhrDHQHmfPJVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1565886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXvCRA9TVsSAnZWagAAY98P/2xIBtWO+ohcxa9vjqH4\nV/eNWMnCDluObqe761FQd95WIC32YTdEMk6VYZ5GvgXGhpZl/g4o4Q6Djtd2\nXEnM9BIzBmfsjzxdjrOFfIhUwYN1hUZCoQ4mLekqm4Mx2UdpmxWS491yAFWY\nf0unOiaGKrzI6xSVH6DQBU5BXgw3BvsbU/YJ69I89yddwQuQSLsEtlwDba+P\nZZJIOTEx/6pttmFQQMx2dRDngDAW1LE2yWxU/1b1A2DRP+zZRxtZIZebRk2m\n6+n5eYdsl8YXNmbA01WHzGIATQCTfbXOcXLa6WqyWTmAcmN4YsuNS9DILl6A\n05gR5zoVFT6FX5pVUJk2rqVE2wPRU4pqPncUBbXwF+N+0VfNicI7tqjpWsi5\nQ6uFrpsSLHyXWbFGaI0jQ7DEdr+jAuXjoPPezG9N4nU9ud6WAFT3YxkRPhIg\n0O2bJvPQMQsKN6C8+ri+zE/+e+I1at6zy7KTug23PsB3Ob4MRbM5Ne3w7R49\nm6c23KOqxPRlrv8J0rAUQYOvJuwxJkRxTVumXzSfZ6dOA7i3RWRmb8vzF9S9\n8wul8SMYemAQ0F4FUv6eBuuio5K0TKMPbk9vLr+5FgIu4LQT6n5c5f2O8R/l\nYqJtblidAbSyH3c/J45WAsA8gPtmLxLhISwRNbt3qLGNVQ+eKJwF6i70CPAf\nAYVH\r\n=1g6l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/density":"13.0.0-canary.8355e14dc.0","@material/checkbox":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/typography":"13.0.0-canary.8355e14dc.0","@material/touch-target":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.8355e14dc.0_1631733231345_0.7675706254557781","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/chips","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e94f95ab3083d1d7597dae5ace4ca8c8418f679","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":160,"integrity":"sha512-JaVxl04NXrxJd15JiTgS3JWot93egR0YRifkNigXMbjiu4VjbnWxKwtfDuFeF86WBcV0COySk8NqZ9zOwkGPPg==","signatures":[{"sig":"MEYCIQDzUNzb0IGhZ+OV1VEBRXm6Lset9cEtOgLEB9IL3/ypDgIhAKub1HnEWJo9m5VbDJknqJ5Mv0kbE9E+SQcWDA/iN51Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1577558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQm0FCRA9TVsSAnZWagAAeTgP/iijQOfokqDkPCBlBEzP\n8wV8z2e7GGddPN3tB+jUGj9s/vWri2Qr9vlItcQU1aIbepI+Om/onQd+P6p0\nWwxkjOzvg/+g+5+yVh5meNaXM2d+s+3DLyFcXPBG9lUtWgH18QcfOafQ/QNR\nbdG1Cjhp3l0YrjVyhycHFlEPK1jx1jwGIlclyLS+UWET6xuW5v37QgrlsqcB\necUGJklQD0PJTfqhNsBFCIEpMynmw01HnrUjVvd+hxA7Wo3f0EOqiZwsMO3y\nC7dJ7BTFdMrOnuJfTbXs43jWt/5A47jfgzsUxDP2xMLdjIFWFpNYR7X95xqy\naDnuuaf9Eit1bckpOzchf8NTzC3o6M6z2yuBnkD20WvmWxz5Qj0o+bk3tc2x\nPe2d+LAM4yBp4MnDL4Pd9rVT6Pjnbjj0ixNgmAei8v5QIGUJ65lZv0YbfXLB\ndwMcFfNWd6AM+M5fgSuSbySEQn865iEXDeN0BsWvymAoHvRPwa38NPB2+B1+\nQt/awVbL/dF8hUWAHArDWJiTFBM3moV+Q21pW7Y1XGLrBsqcoX0EGaXZPyG0\n7aw5+5Kjt/eqn3UfvnGxTQ8xcKzIcwfUVuPGUiakHagYEoYRQyyLWWnWtBfh\nXUpJq5SG5f9UrPB8SbnyHhj9/IeRTLHQHk45fmj5Yz488waCxsriGrPg2SHP\n4j04\r\n=dfJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/shape":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/tokens":"13.0.0-canary.d4e16a6c4.0","@material/density":"13.0.0-canary.d4e16a6c4.0","@material/checkbox":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/typography":"13.0.0-canary.d4e16a6c4.0","@material/touch-target":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.d4e16a6c4.0_1631743237132_0.5183673524403913","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/chips","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68004e42116ab29885a147d3e4f95ceea697a7c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.65125b3a6.0.tgz","fileCount":160,"integrity":"sha512-HRFTC59tlHtiDMUaFGkVyfTZLAKlnCeDSqYJR9JymFSDla40FAg7IpsMK9JY7ySBzA82Q7tIWrWDm/wUbReFBQ==","signatures":[{"sig":"MEUCIEKDkxAzBz9RjfBktyAHcKrq23CLGmbZZVFpYfT1rRUIAiEA1gkwaRKpI6gYbwBY84MRNZsJdlxkP7ScNdxwPXDxMok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1577558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7S6CRA9TVsSAnZWagAA1AUP+gOUiZfr2NDwvrbuOHxE\nLbLP+WB3RDfYNLEzE70/7Mg5hs9PqNKpv368WeGnzGfT0IRtfdIuLsMt/l6a\nCDdjQPRApY5chNXad/l5yYU2SBVroAl07e8i0gflUEYNnH4IBvalSL7VYuwq\nWFycumxAsNaRQ2j8eQ+sHb30FsgwwxaPX/nIdD6Znz2W5b6FnkgsJVInkrU+\nCFeYMx+8TNF6yOVsGkOY/sMNtSK5InIRuzNW42EfE64hwYuexisV43uE9Ayk\nSIhV1SZEyA6ElF7ScE6nY5vzvGPisUS9qDb0dcc38j3v2zgEH2+5h2FaGKB0\nTwNndcJsBFWHKtzYC1QeVVKx+z/Xmqf8q0jBweH9LaNG+lAkPW1a+HIbzTUs\nlFUPourG6xlD1fyMJeLZHRpqgYHqdMd3ItsDTjosEcwuDexobH96lozGYKJy\nBQ75DLSKFw6mQ9EcQQbDtNKZH/gWU9PtPPJBn0z/mpA31dBYSTCf3cPjrcWa\nxSJauY9a7kAeMTQxdZj9cGDGjY3R9xrbHay8WUcXEJjht7q6evuZowNXA2Rv\nWvhrXODhFppLBKLMz5Tkl84fhKRV9a+4oT6DLAdEnSMCBzuObl6VFqyPUybM\npYLGdmfTgOFzEx0bEtIuFUBErw9IAFZCxWQH0FdJi9C5Tbaidp9TOaf2j3t+\nJP42\r\n=0LE8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/shape":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/tokens":"13.0.0-canary.65125b3a6.0","@material/density":"13.0.0-canary.65125b3a6.0","@material/checkbox":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/typography":"13.0.0-canary.65125b3a6.0","@material/touch-target":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.65125b3a6.0_1631827130436_0.429700940319784","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/chips","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.80a583365.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0b3f2cd57f40234fe6fbdbbfe17e3cc8ee79541","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.80a583365.0.tgz","fileCount":160,"integrity":"sha512-YvamY5+ySNApv9kqVu044ZRlrXCILjCLkoXUw/EctHxRU7f2hlwZdO1mG8pUK2qtaquAv0Unk7gEdQu79ZINqA==","signatures":[{"sig":"MEUCIQD3+23Lc/NsfdqlClOe4EENIq6hAlqO/wsqBd0DcAS4+QIgYgw2ES7XJPILi6ZYtSujw2l9RlBMf9VBi6yCAzntuFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1577558},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/tokens":"13.0.0-canary.80a583365.0","@material/density":"13.0.0-canary.80a583365.0","@material/checkbox":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/typography":"13.0.0-canary.80a583365.0","@material/touch-target":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.80a583365.0_1631911013035_0.8050340230826041","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/chips","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.83900936a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"211ffcf668794898d7974a914f8a5eee69fdfb7b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.83900936a.0.tgz","fileCount":161,"integrity":"sha512-RCgk006Rs0+d00SoYffTpH8Z2ElIBf6bCibDj8jJpjvC7zssZhoeUEX0gZnuqzcosZJel6+rCH9XR2ToB7SmgQ==","signatures":[{"sig":"MEYCIQCfngb+74PfTnYZnCkAU7yNqpcrhW9N6zEJ7ApL1HfhXQIhAN+b8GuiJSOY9F9pHYp/V6f2gYJy7bPhwdxcs+iHgmIS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1594026},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/tokens":"13.0.0-canary.83900936a.0","@material/density":"13.0.0-canary.83900936a.0","@material/checkbox":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/typography":"13.0.0-canary.83900936a.0","@material/touch-target":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.83900936a.0_1631921120456_0.44109963191457524","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/chips","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a0f6978f59543b2e1a899c8d7ee1ad91b2f6e16","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.860ad06a1.0.tgz","fileCount":163,"integrity":"sha512-YGWvokAwkQjRvlMs+KA5PLH7yZkoS71d1Esx79yUYWQ73OmEXJZQ4aHs2BrO5k1YYDdb/0UuPnn+J9OMEbDsug==","signatures":[{"sig":"MEQCIHVvD5DKD/gAi0hjY71b9hxMfZasu78kgP83s5UIvd1/AiAoe9BS5oPrXP9AT6JYPXsi3ZdVe+DuLeUyYvXXCbMq5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604715},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/tokens":"13.0.0-canary.860ad06a1.0","@material/density":"13.0.0-canary.860ad06a1.0","@material/checkbox":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/typography":"13.0.0-canary.860ad06a1.0","@material/touch-target":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.860ad06a1.0_1631921817959_0.9307717327951261","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/chips","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d555cabf4343bdd74de8709b46f4125ba95a56f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.3b8d4429e.0.tgz","fileCount":163,"integrity":"sha512-o92o6T0zzWd9gn4cO2qnZRvjzrmuh6NecLjPq/b/tJMxjYIiLoal3IVMlUE+sZYTlSwzmnN2M/eezBEwFmSrGA==","signatures":[{"sig":"MEUCIDgjoxxIS+LCo3W597+OVz7Dl+770lr2GdPlraaZhAi0AiEAgoEc4YQLqQqru0O4nsrQ4zzjFjkXWcO60drwdNsqUCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604715},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/tokens":"13.0.0-canary.3b8d4429e.0","@material/density":"13.0.0-canary.3b8d4429e.0","@material/checkbox":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/typography":"13.0.0-canary.3b8d4429e.0","@material/touch-target":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.3b8d4429e.0_1632160114573_0.6116130831485234","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/chips","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ab448b601e85dcd4b2277816cc85b8bcf03ef84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.2da3606b9.0.tgz","fileCount":163,"integrity":"sha512-KlPVs+D/Pb8bwAQBGTMt/cFs8565FFHTHpSrg0mhBmSV8Y70FMj6U6XXhvB2OgpPjyWv7/2RtSH6G1f64CmsIA==","signatures":[{"sig":"MEYCIQCkgg2dC0mpFRG7bSqE/pv9BKGTtc5xm9+Z5zVmiSYd7QIhAJLOre+QKU+X0Dbwo8hkxtvKiY9KpYpw/RKaiSFagJjB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604805},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/tokens":"13.0.0-canary.2da3606b9.0","@material/density":"13.0.0-canary.2da3606b9.0","@material/checkbox":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/typography":"13.0.0-canary.2da3606b9.0","@material/touch-target":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.2da3606b9.0_1632166721309_0.38178372435516716","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/chips","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1620d5e5858f1bd203cc21b4f8bf5cbbeafea5fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.e8c598d1e.0.tgz","fileCount":163,"integrity":"sha512-HYotWLaXGCl0k3NBuNKTXczUf5wg2/7kDKJPulHvnCI2vdM2odCtM7f6aWtnu73mjuXVB0TRLPDjXCLpbYrNBw==","signatures":[{"sig":"MEUCIQDVJApuxrlHTcxxTCh1ZzZyOD8CLqrPbd01LyD8nb8unwIgYU09zPXPWk2/EKekpQDHC33F3XCj+1d61EKgvIKL/jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605177},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/tokens":"13.0.0-canary.e8c598d1e.0","@material/density":"13.0.0-canary.e8c598d1e.0","@material/checkbox":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/typography":"13.0.0-canary.e8c598d1e.0","@material/touch-target":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.e8c598d1e.0_1632172380840_0.8396719187585038","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/chips","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bc0022605e22ba228efa1e88c42ae10a0b4f888","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.1340ee9f7.0.tgz","fileCount":163,"integrity":"sha512-vwTUBQ0h5uDYr2egvOFdINCSaQ2wrzy13jgQS2iQCztyY0qvPDaFX/TcElpQxg+W3QO0R3DsPI9noHclKXuXVw==","signatures":[{"sig":"MEUCIQCdkYST5UP9Hwn3P8MkbV1jAJaMwkzhshWBGeilKtFf4QIgeJomt5FDGfMQ9BOTKeJc/flf1ZoJouiPKtgOvTOZHLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605209},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/tokens":"13.0.0-canary.1340ee9f7.0","@material/density":"13.0.0-canary.1340ee9f7.0","@material/checkbox":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/typography":"13.0.0-canary.1340ee9f7.0","@material/touch-target":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.1340ee9f7.0_1632333532879_0.16078719848262213","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/chips","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.65084baff.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892a92656aff496d4849df3de9377726d8635c47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.65084baff.0.tgz","fileCount":163,"integrity":"sha512-VuOqW15jTbscMZITBhIdpfDffWr/kKWhSi837ZRlNVGBlzYOnqLZ0BY6uNurIkvJKxW6Pu5epupVZXqiaJLe5g==","signatures":[{"sig":"MEUCIGwvUUBs5TNqsQE0LJPM5kml1UUOxSAnYL6alRSySEoxAiEAlhXImHpumwo/Hax5omSRPwzNE0oCp6OfqwRY5yebafo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605209},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/tokens":"13.0.0-canary.65084baff.0","@material/density":"13.0.0-canary.65084baff.0","@material/checkbox":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/typography":"13.0.0-canary.65084baff.0","@material/touch-target":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.65084baff.0_1632432389072_0.6513064577585539","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/chips","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15d83f5d3de32b7a503769ea70a70e2ec4714a1c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":163,"integrity":"sha512-LcxhCiAPQpqzVTTLmHXeosXlUPUDUbdcTvXQenSnqpGp17nj+Qd5J4ArfSkI+PRu3lwI7K6a8dAf8yjSKCGBFg==","signatures":[{"sig":"MEUCIG6PS+/5O6ZeFREZHoTuclfgwmHoitA/minlMuPIVDP8AiEAgD+WEtcx0XD5L7ny0VlbSF98TMM9bx6FivR9LwcsrGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605209},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/shape":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/tokens":"13.0.0-canary.c79aa0cdd.0","@material/density":"13.0.0-canary.c79aa0cdd.0","@material/checkbox":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/typography":"13.0.0-canary.c79aa0cdd.0","@material/touch-target":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0-canary.c79aa0cdd.0_1632490976935_0.056012516712306226","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/chips","version":"13.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@13.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0681beaf61636805ddfd98b45bf7bf3b81dcb238","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-13.0.0.tgz","fileCount":162,"integrity":"sha512-Ov4runDbrROUpMqKyCi3lpknfrLzGwtV+/rfYIgTYUkEVpCHXHddxXxcjP4zqh3QLXnE6ma92PLGcxCb/zzogQ==","signatures":[{"sig":"MEUCIEz/xnp4KvrjxE3kcnql7hER6sPeBXHE8jjlCeD8DY2FAiEAvFy9YTPl96imyk5s7wJXcnlIMps4lzPaZIoYq/okoZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1603094},"main":"dist/mdc.chips.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/tokens":"^13.0.0","@material/density":"^13.0.0","@material/checkbox":"^13.0.0","@material/animation":"^13.0.0","@material/elevation":"^13.0.0","@material/typography":"^13.0.0","@material/touch-target":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_13.0.0_1632512813862_0.9032466651514419","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/chips","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.198431fcd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dead5443377a05ed3840b23524e2cde5cca0acd5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.198431fcd.0.tgz","fileCount":163,"integrity":"sha512-4F6mGexvLKsmFS2I17cwTXn4lsRY6V81y7xWgW4a3qrHCUF6YS23Jr1CxUSz2VeZiLGkEkTH9o1hrNuk3A/wLg==","signatures":[{"sig":"MEYCIQCDl863qt+yoV80vZu23Pezm08tM/Fh9E10O54ISy8tZQIhANxbjZnJzUemRqg9TrDCC0CrjRyX3qhsuO64R3I9kd3o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605209},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/tokens":"14.0.0-canary.198431fcd.0","@material/density":"14.0.0-canary.198431fcd.0","@material/checkbox":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/typography":"14.0.0-canary.198431fcd.0","@material/touch-target":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.198431fcd.0_1632512856748_0.43256547568726966","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/chips","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5257af73a43d3b41e6c45ce865d8aceb758d44a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":163,"integrity":"sha512-8MI2S/nTCnZCFn1YnbuF1Af7YYAtBkx/8vJMpXthZ4LRbbZhf0HM0lZ6zj7yaJiWjsl5ETKzvi16FScQwpv7DQ==","signatures":[{"sig":"MEUCICSDzWAHASD0knDe+7d5Kw7COYU9O4RoXDgL48p3R7obAiEAqBcP92SFOUkeneyWxzvg4qRJnt94/dK2zvF7+Xn1n90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604217},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/tokens":"14.0.0-canary.9a02b6ef8.0","@material/density":"14.0.0-canary.9a02b6ef8.0","@material/checkbox":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/typography":"14.0.0-canary.9a02b6ef8.0","@material/touch-target":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.9a02b6ef8.0_1632575521366_0.4413846061226243","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/chips","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15999c58b3cd5e9e656654f39cc3b607cecdd950","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.758ce31d9.0.tgz","fileCount":163,"integrity":"sha512-NjtoxEqFgUIOUCAXz9h7mopkpCqDRTD9QmQKEFcuqRNOZLtFcNehiknBdPSWw0G3DkvtEwvOjxYU/ahDwthpkw==","signatures":[{"sig":"MEQCIHupF5sLwVrt1klV0mjjR3kHEQFgdIGnM8aQDCXg32Y/AiA/4AYCwKylMOfdRIoXDU+Q90oNZ3nwfGphAZuAGsgwLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604217},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/tokens":"14.0.0-canary.758ce31d9.0","@material/density":"14.0.0-canary.758ce31d9.0","@material/checkbox":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/typography":"14.0.0-canary.758ce31d9.0","@material/touch-target":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.758ce31d9.0_1632763818675_0.2298977833231315","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/chips","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"606c303d003bd0497d08b87b61069cf1be7f9aac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.86b50ef74.0.tgz","fileCount":163,"integrity":"sha512-K91h0ZVgLzqn6UnM+cSBTWQK+FLcqJsILPTnHYMLpjhk/VI+hRtgkp11vlUru+E1fS+SD8LjqEgY6BCvm7eYcQ==","signatures":[{"sig":"MEUCIQDaE2171R9DJkzPdoLlegSt6phjLJh3lTU1XXPnqmYhnQIgBl8pltzmU3UXcN1wMRkXyRHsdEpgmEDXNdUmk7VypRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604281},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/shape":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/tokens":"14.0.0-canary.86b50ef74.0","@material/density":"14.0.0-canary.86b50ef74.0","@material/checkbox":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/typography":"14.0.0-canary.86b50ef74.0","@material/touch-target":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.86b50ef74.0_1632851043073_0.26815508443325786","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/chips","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d196ecf615b3771d8f394f93178164d6e826d3c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.b2fe3528b.0.tgz","fileCount":163,"integrity":"sha512-3PFNEqoERbQAjCVMtHc5+j6NL0QFANKX3dGlp3N49xeJQz2D6Te3xs9ome30dqoniYyOEZd17T7ywojZ1O3JSw==","signatures":[{"sig":"MEUCICYdR8iu+v7K5cVW7h4u+H5TeIxaS3cBBs3X6wsR95TyAiEA3YRsvkCgXCjTWPy1Fe18GaPEdWECeQXCePSp4a1mW+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604281},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/tokens":"14.0.0-canary.b2fe3528b.0","@material/density":"14.0.0-canary.b2fe3528b.0","@material/checkbox":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/typography":"14.0.0-canary.b2fe3528b.0","@material/touch-target":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.b2fe3528b.0_1632956275433_0.16061522136341244","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/chips","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.586e740dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9951daf6a7b364234665f4d29f6a208b502ae0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.586e740dd.0.tgz","fileCount":163,"integrity":"sha512-JgFQnsbsnyk4rFVx+ibMc4wmA9VowlLrF/4zuW2bHrr6vI3KsXtXjkQ7+iLuvRuaMp1EN97fs4O2eIAs9+tRTA==","signatures":[{"sig":"MEYCIQDSdgqOqkdngMtVVZrqIhSLYeU1y6wdw9xv2z6Myc2YuQIhAIxIe+XO8SGEjB+q3brtHzkFSB17SRjo8h1ESWhOAHal","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604281},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/shape":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/tokens":"14.0.0-canary.586e740dd.0","@material/density":"14.0.0-canary.586e740dd.0","@material/checkbox":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/typography":"14.0.0-canary.586e740dd.0","@material/touch-target":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.586e740dd.0_1633019540510_0.4947651567933977","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/chips","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8bc3b94cb86c8dbd4b1eec2e9c4d0707248262a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.2ac92d766.0.tgz","fileCount":163,"integrity":"sha512-dP6ovcVSxlrhrSa2/T2Lkz/3kGFw3mBKP+MWRZk0Clsx1WETAcM5XvzZBM66VKDQLce+SjS7EmF8DuxE6ahlDA==","signatures":[{"sig":"MEUCIQDcnd+BCxRev7MegnA12b/CELKTDjfI+o9cIujQA5jaJQIgSTa4TUVMPyIeiZOx7+oFpu0o5vzQBciC9WUyKS7LWV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604281},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/tokens":"14.0.0-canary.2ac92d766.0","@material/density":"14.0.0-canary.2ac92d766.0","@material/checkbox":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/typography":"14.0.0-canary.2ac92d766.0","@material/touch-target":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.2ac92d766.0_1633462173115_0.626288238417595","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/chips","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b9994dc07fb6b93a5e41c8d5e7a792586993c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.353ca7e9f.0.tgz","fileCount":163,"integrity":"sha512-+GSypsodpVR1l2AS9j+TsDu2u/FzZP5+Dj0Vq1tZxG+2ILSBKQtE1L624+7DqFzCFFxbBmGIa6J2avZLWqbfdQ==","signatures":[{"sig":"MEUCIQCMqmO3DtwnynJzt2dnZ97htppOywJGx94vOPR2NPFh6QIgcPKcsHOgHP/cY40gAq7PWd1UaL8PIORxmG9sbgB9hm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604281},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/shape":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/tokens":"14.0.0-canary.353ca7e9f.0","@material/density":"14.0.0-canary.353ca7e9f.0","@material/checkbox":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/typography":"14.0.0-canary.353ca7e9f.0","@material/touch-target":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.353ca7e9f.0_1633718877407_0.26384483440872764","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/chips","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2be34bd62a172c48ac88284d83114217c76dc79d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.c78ff0429.0.tgz","fileCount":163,"integrity":"sha512-IrsOkp+BPoByPp+fEYllRoOK4yUvZvHs0lLdQnURBhOESMuNFbaaEjAaHLtcRn0K4c5KaVgnmtRk516grp9/mg==","signatures":[{"sig":"MEQCIFgc1OHomoYboJEfHE7AL89fA6ftqA9PeeDKIOdR7+++AiBY5tRgEMDLebN6u2QrWk6ZgV/Y31xA1yGSPzWDiZCU0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/tokens":"14.0.0-canary.c78ff0429.0","@material/density":"14.0.0-canary.c78ff0429.0","@material/checkbox":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/typography":"14.0.0-canary.c78ff0429.0","@material/touch-target":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.c78ff0429.0_1633972990296_0.6561175152422916","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/chips","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.261f2db59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c7aaa18a35e68b6ba8390d7824942f565b8b58f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.261f2db59.0.tgz","fileCount":163,"integrity":"sha512-GInvpIqUi+AKIGFO81UVXfl1HysZHqi5/rMWNaTNdApiKawOQpTYknbFie1DJqy9hwyimtZyvtipI2qigSTqLA==","signatures":[{"sig":"MEUCICNjmmj5G8F/V9r3dI7xEMungTNuQPxaKcHqCK0RhFDnAiEAkbiJf9pHwOQdygDOzObsIZbT6AX18LQz9zWJLNNcY/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/shape":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/tokens":"14.0.0-canary.261f2db59.0","@material/density":"14.0.0-canary.261f2db59.0","@material/checkbox":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/typography":"14.0.0-canary.261f2db59.0","@material/touch-target":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.261f2db59.0_1634749240481_0.5094385378291728","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/chips","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18cdcd86ba2638cea74c26b19ea3dc9330791678","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.9803d2dc1.0.tgz","fileCount":163,"integrity":"sha512-97rjkIjBPGfE05IC8uxpXNWDYSnA0jO0wGa4Sprt/iHInebq8I/Py7b0M3j+PE4cFbpfIDvMyde1FiAYOe5D0w==","signatures":[{"sig":"MEQCIFNsUWm5XVuti33W+BOUAmT3oyV+qTjimPr+UGZq2oSXAiB3VKcrMym8dhwVDULBu8bpHp18bEWAH2vfDg2TPBdVGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/shape":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/tokens":"14.0.0-canary.9803d2dc1.0","@material/density":"14.0.0-canary.9803d2dc1.0","@material/checkbox":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/typography":"14.0.0-canary.9803d2dc1.0","@material/touch-target":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.9803d2dc1.0_1634757769521_0.08487491137455616","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/chips","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.348665978.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6333fb0e43136ddff4a5e20d775713a116bd155","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.348665978.0.tgz","fileCount":163,"integrity":"sha512-0wYhM1TxIsttPiPdZy6e07qp5RQT1PwK0OSGZ4h3351G64fq0mat20mDgxJCWiSKZmUV0iq23NYHcQPO7G9I7w==","signatures":[{"sig":"MEUCIQCEz3MRZU2XGlRuWUxmgXfzzsOLMe8H0uoipuZ6Mu0X8gIgGdZRk/bafK3uOYI8/yCWo/mpzfXY6uvMnzt4sCy1prY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/tokens":"14.0.0-canary.348665978.0","@material/density":"14.0.0-canary.348665978.0","@material/checkbox":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/typography":"14.0.0-canary.348665978.0","@material/touch-target":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.348665978.0_1634827906331_0.4057527535235286","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/chips","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df26c313f0bdcfdeaa15ae3ba2b94b54531a9013","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.b2b979a8a.0.tgz","fileCount":163,"integrity":"sha512-uQQKVYvOea0/uVe77cUV3MREcrqgpzj+2bkFgDomunvt7GEgOkOVmV6FqBRW3HSpOdG/iC5pB2hU1sGV34iSvw==","signatures":[{"sig":"MEYCIQDSQx1wVRdmoe+h6jZBHnf8oirsjn1GXEw2kNFzNY02rwIhAPGbM6yqRyt0r4nfykNr/spiE4wLalE6YjUyN4NGfxUd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/tokens":"14.0.0-canary.b2b979a8a.0","@material/density":"14.0.0-canary.b2b979a8a.0","@material/checkbox":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/typography":"14.0.0-canary.b2b979a8a.0","@material/touch-target":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.b2b979a8a.0_1635434010526_0.8638901102039462","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/chips","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"318c3489e09c5c14b6bb8a6d46ccb237de7fa723","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":163,"integrity":"sha512-pWL8CZnRnSQcwI/DySjiPW92r4eRVwV6DEdlDGVaRlu0LprI5+bjbmBjjq6amoEPk/tAivrakkY0y6hFpPuUvw==","signatures":[{"sig":"MEYCIQDZWPZS9q2z044HphaBT94E+f0DXw2YMDG+saSDK75vZAIhAOr6ZZO2dI9+H4aJphIMBlpmbjyGHYj66ckuzMVDJdm9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/tokens":"14.0.0-canary.1af7c1c4a.0","@material/density":"14.0.0-canary.1af7c1c4a.0","@material/checkbox":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/typography":"14.0.0-canary.1af7c1c4a.0","@material/touch-target":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.1af7c1c4a.0_1635443632793_0.045017918613697416","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/chips","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7a7b4331807014fb9289bca301f6328ced4c934","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.4afd353cd.0.tgz","fileCount":163,"integrity":"sha512-QN8aihIAKF8+5PjN+Xx+8sy0zvEQyCY9baSSCgQJNfMLxhfpyy9a7RWLeBsWX/FPl04/Zsbo5niMfUomsQUDPA==","signatures":[{"sig":"MEQCIFTvrm5svCYdZ5kQgCbvRFtB6+SEzygQ+Ge9vweDz1YnAiB5i/0gsNmHsyExO/1R6oOgB5T2siWdJURZ7l5X2VTumw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/tokens":"14.0.0-canary.4afd353cd.0","@material/density":"14.0.0-canary.4afd353cd.0","@material/checkbox":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/typography":"14.0.0-canary.4afd353cd.0","@material/touch-target":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.4afd353cd.0_1635519752668_0.4990063910916649","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/chips","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.a986df922.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8b2cdec82f3cd82d3c8a4cd4c9aac2ff38176d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.a986df922.0.tgz","fileCount":163,"integrity":"sha512-eS11+fZYQY2QEpumq//+lZxlfxYWEewYO2ibpDZbhG/ih+5Q1QRtDkL/Owmn4+xULap4QNdVudQa8+Ix8puZnA==","signatures":[{"sig":"MEUCIF1KhsmYbLAIqRqPc/iVcZm60fH7hiBni6qGfKTWQlGwAiEA/yDKpEnw4MR5Ymid9XquvYbspoHzU9dUTPp5xCnWBPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/shape":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/tokens":"14.0.0-canary.a986df922.0","@material/density":"14.0.0-canary.a986df922.0","@material/checkbox":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/typography":"14.0.0-canary.a986df922.0","@material/touch-target":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.a986df922.0_1635543361979_0.028311950510150785","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/chips","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6118b7c161222092f8ae699e8c4870293b6f367b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.c3cdff07b.0.tgz","fileCount":163,"integrity":"sha512-pG2sxlhzwrqgSMTuJ2d8/7SsWlJbg5rF5HiVJNn98WpeYffamt5Yn5WjzQT9YqKAZKw/AhzcKEwIa2ENl4ueaA==","signatures":[{"sig":"MEQCIE6HabbA0j/STnpZ9nVwRf50gMqtvuWvOZ76Crff46KzAiB8ZeXqU1kHdvAOaDrktLR70M7YcAkKu+SoBSYd4u1T9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/tokens":"14.0.0-canary.c3cdff07b.0","@material/density":"14.0.0-canary.c3cdff07b.0","@material/checkbox":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/typography":"14.0.0-canary.c3cdff07b.0","@material/touch-target":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.c3cdff07b.0_1636484814499_0.4298226535935006","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/chips","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.468392606.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5eab3f8d4a99ab5b9f8418563cb401f340856dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.468392606.0.tgz","fileCount":163,"integrity":"sha512-ZXVNsbXiLGrXBUj98fvdwPaejneZPg9iV5JqiNIKBcWZUdkiYvfkM66vTs3lK8b5G33AfTwndjKgCP/3wwDIAA==","signatures":[{"sig":"MEUCIQCCmOD8v1t8KIW3yQEI5ddDouBmB/XVvWI+KHBFL0eIPQIgHDh+8KxqciIpXpWIRPDeRvmVIHRM31Lgc2gEuYStgHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/tokens":"14.0.0-canary.468392606.0","@material/density":"14.0.0-canary.468392606.0","@material/checkbox":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/typography":"14.0.0-canary.468392606.0","@material/touch-target":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.468392606.0_1636659671702_0.6301628832111694","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/chips","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.828f9803b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fba0148a145e32edf2c61a18069515dae3ca44ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.828f9803b.0.tgz","fileCount":163,"integrity":"sha512-VYNktPVfrGBA80ozluF0FQ/raYKDErTSOdwIH/X+jkzRzDSaY2K47pY58oNYZlhBSYbylsX5lmluq1undeU/Pw==","signatures":[{"sig":"MEUCIFx8Q6rzUoNnrTmA3n3pPHto16Y34lxQ8s4bI0EZHcj4AiEA19ssmufvp1/wgZ14OZJu1S+YPAsXqUU+FV+9dj1QBg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/tokens":"14.0.0-canary.828f9803b.0","@material/density":"14.0.0-canary.828f9803b.0","@material/checkbox":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/typography":"14.0.0-canary.828f9803b.0","@material/touch-target":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.828f9803b.0_1636660308842_0.6249787667553408","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/chips","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.8795cba87.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a4afb7d7c7829a2b0c8a0c56440a29cffb1bbe9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.8795cba87.0.tgz","fileCount":163,"integrity":"sha512-hpl3heri4Z8222nwmPuZCXzSnh/sTBgFs1/67KQBqY8B28X10LT1fgVynXU9ermpwh0wE8BjgbEh7aRww1w4KQ==","signatures":[{"sig":"MEUCIF1pFTbqlCBv7KhYUPKGNCqhikUEYsH0jn6PxVjOzsy5AiEA+KeXUq4I8pcIsNKWEwEkTMGhaj+oO2C25SrIhXQftQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/tokens":"14.0.0-canary.8795cba87.0","@material/density":"14.0.0-canary.8795cba87.0","@material/checkbox":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/typography":"14.0.0-canary.8795cba87.0","@material/touch-target":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.8795cba87.0_1636660668553_0.18052182906838898","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/chips","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"673bc6d41ac1b7f846f2944dcc34730c1ca9cc2b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.cd7f8cace.0.tgz","fileCount":163,"integrity":"sha512-TzGTujryJfFnXQrJRerl+eFCzmpZPljdOjoNn840J1QKrwUdG4loTWAnabuE4zu3y2nYNjr6DTnGHmob0mnZng==","signatures":[{"sig":"MEUCIAyyx7LZ7HTUCrlIdUrGJLYDr3JYzcottWVOufn2mee0AiEAkEXKxp4YV3og8lsuY894N3xHgbVs+ExklTQdxNHEwcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/tokens":"14.0.0-canary.cd7f8cace.0","@material/density":"14.0.0-canary.cd7f8cace.0","@material/checkbox":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/typography":"14.0.0-canary.cd7f8cace.0","@material/touch-target":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.cd7f8cace.0_1636660772413_0.6523839814433561","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/chips","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.207230eb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f775f4f054f2bc34565aad5cde1a4628ba861980","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.207230eb8.0.tgz","fileCount":163,"integrity":"sha512-MeAk4IDeSLR65fr44csTLBc0bHPVwW1N8KJIvx4fJOmTqt5pxH9S2ohy+5jwzzL8R47kCMmXTkCTy79HeeRYFQ==","signatures":[{"sig":"MEUCIQDEDiOHDF/LIoyJMl5OGVX1DR76kmsdGXbGJ0npB/JsnAIgGD8eFbUhuda54FdmoqIrfWFi1kbofc+GGjdlhkEql9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/tokens":"14.0.0-canary.207230eb8.0","@material/density":"14.0.0-canary.207230eb8.0","@material/checkbox":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/typography":"14.0.0-canary.207230eb8.0","@material/touch-target":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.207230eb8.0_1636669535563_0.28244541816190316","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/chips","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3412172c99666e132eaec36a4d21f23d3f986530","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.991fb99f7.0.tgz","fileCount":163,"integrity":"sha512-9yCEZMRfSAi5wZL76HGom8m4Mtipt/j8+QQBtxY4f9LvXScYBu5AhBmPnxO1/hlX07qERPNisjWtKMIXnkkGVA==","signatures":[{"sig":"MEQCICPKIBXGkE8f7ASZGiErAhg7KSS+f2pPF5J1UC7BLbb1AiA0Z2n3XcgI5d0iBX57pnPKqLNQ6APWbNL24Q4JYs1R/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/tokens":"14.0.0-canary.991fb99f7.0","@material/density":"14.0.0-canary.991fb99f7.0","@material/checkbox":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/typography":"14.0.0-canary.991fb99f7.0","@material/touch-target":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.991fb99f7.0_1636670248698_0.9127603686011827","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/chips","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.15db4f164.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c57b044c422094057522357a1aada423911e71f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.15db4f164.0.tgz","fileCount":163,"integrity":"sha512-30aB9RDuJl2khtGMxl/p4HydAmBZ3a0VQpex3XVMpuV2IJsjf5evU8RgorYcitIdgdXiZyjymEg7YTb/Wj3yOQ==","signatures":[{"sig":"MEQCID/5nKrb5yxOgppewZrdVTHuidMlTz+Kh4WIc5IuiQqGAiAjKOUW6ug3DKxH2OwLJEwWzw7HaLGqV6bweYmFzbSqYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/tokens":"14.0.0-canary.15db4f164.0","@material/density":"14.0.0-canary.15db4f164.0","@material/checkbox":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/typography":"14.0.0-canary.15db4f164.0","@material/touch-target":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.15db4f164.0_1636738246971_0.9900127000999603","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/chips","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f390362ff7cdba19f4033a56650916db437b4621","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":163,"integrity":"sha512-tcpig/HiLKcXbxCKZYr1/9x1kXSc4n8qUv15K66lcRKe7VZ82sQ4ug96iJdxrjvguafWCnQejV62FJlQOK0gHg==","signatures":[{"sig":"MEUCID1xaYjluszPy48cUZV1D0GzZu3VjDTK9ifSNkIetbQmAiEA7wfi9rW/oy2at3vIEwOFUSDhf9eQKiGb3cyrGC2dh4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/tokens":"14.0.0-canary.8fcad5a3c.0","@material/density":"14.0.0-canary.8fcad5a3c.0","@material/checkbox":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/typography":"14.0.0-canary.8fcad5a3c.0","@material/touch-target":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.8fcad5a3c.0_1636744491068_0.5318310935588397","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/chips","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be1dd1d49f4983403502032d265d18847ffce62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.f81fb1d23.0.tgz","fileCount":163,"integrity":"sha512-POvXlLwlvTkCxBbguz6UitVA7UwnnDbf/3nvwNg5CnHzftBQm4DDzXIAEhguSHAjS6Z6u+6fAJ/EBmlil2oVnw==","signatures":[{"sig":"MEYCIQCpzivZp4wEtUoQsKtvjLuVGc06GTIzFHTp0XlFRLz4EAIhAKkfgzRllegu/VKOyNefg/I1HbnXE7E8wgpPVtIQ+W60","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605113},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/tokens":"14.0.0-canary.f81fb1d23.0","@material/density":"14.0.0-canary.f81fb1d23.0","@material/checkbox":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/typography":"14.0.0-canary.f81fb1d23.0","@material/touch-target":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.f81fb1d23.0_1636756881341_0.6098510359364422","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/chips","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd544da43b7815a65c5adcae58785ba226ea04f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.783f6fd5a.0.tgz","fileCount":163,"integrity":"sha512-mhFys8CkoT0d/gD/GQg+cC9WRpRpQ6+9wekHnwod9IdZ0P+aYZUME5RBVd7nVa1Ln3xHJx2r77g82DI5AnW6LA==","signatures":[{"sig":"MEQCICYMfY7R4wPCrJQrz9TZ6/wrO162PH5v3mr9+3Uzbga9AiABOaZI1QivjfCOrKeng7k4GMLbkb4o0F9/lvRou5lXEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0baCRA9TVsSAnZWagAAv9AP/R0/C4IJrpvxjf2kWNX2\nAwT/HlRtd5TtGbxExnFRRs7HJmWqJTL8AWr3whZd3AAuh0H98IPViYY1xWFW\nIQPbL3DKEHYPZctEMcQuycesVNPiHY0CGZW0RrfE0XWY40xflpkncJNZof47\nI7NdkROB7veb5A1DJO5qaRbSMqbIzNUPs/0ACr4jc+EJP/9PNNjNxcTdZVhv\nBMw/iKEohmVhU9rPE4M/rOQw8SxQA0KuyOWgDWDhAfRB1nLEXqjOGHSOSe8u\nAOVgMpSl6VUQGojdZm0pG99jAC0qKgAPNXAATyursN4cAg0TTmr1VTVrvsr2\nNwQDmtZCKe2xhuWgCShmxVPXRaWnkyXFP7nIMlQO/Rn6ucgqqnY8vvXP2nvN\nDoxH9z7DsgnwPatgR14RZI1/rdDJBWZsK3YjVwEYsxytigynvMdiqwzMsuoD\nqQkAd0yNxvBnOV4pcH9Gt9N568DmE7t+cRDcKm/bHBb0sgmcxEnb+q0AuqKS\nk69DZ+ZwUJcieIo5T+4HuIDgzGv4ks9mokAkKMxW2C1A8Vh3NwMktbpvEgrG\n0XZlOGSIamOhWl/1k2EM9sV/GDdp0blPakjEYKxDArjTyye71RjJhZSAXhiP\ngF0f0Yc81bOq5WM7q1M7rl7JfgWt/yZM4wIiaGsgdOgooK+o8k+rOZbdr8sq\nTpEn\r\n=qe5A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/tokens":"14.0.0-canary.783f6fd5a.0","@material/density":"14.0.0-canary.783f6fd5a.0","@material/checkbox":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/focus-ring":"14.0.0-canary.783f6fd5a.0","@material/typography":"14.0.0-canary.783f6fd5a.0","@material/touch-target":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.783f6fd5a.0_1637041882493_0.16298698067302464","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/chips","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5be215f11210c6b04bde77df84eb3ea1fc885525","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.d57ec74c7.0.tgz","fileCount":163,"integrity":"sha512-J6zC8KVQR3vhKrXvBaAGYk9dVudE7ClVqNA4vqKCZa0a7Qld71CTzIzrz+2PeuyVcf7y0GOvkxFORbz6rmrZrQ==","signatures":[{"sig":"MEUCIASVsDuQTs7fgUfh9wT8jQ+kTzF/3jAFELTnuFIKZ90QAiEAsQpFrmO9RPbS6z/1J7OCM+VGTC9meezjaslcYSUZrIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nVCRA9TVsSAnZWagAAfacP/AntgL/U8zT8mGgZuTgA\ngpmWrkvFd5Y9IZD8+UOweqV6RvuUcIjqIWVZ+zDt1TxxSehUeBYfiwSLMFWk\n2MX6FvGu4+k4/NFBpCX1g5ccnnuKGGjH3SKdCe/C6hkJrtcwjNAiI6loxoyL\nvNfDB3A9jfrI1Uk376OiLl889NZ4fjha8OgxYO977LibNRz6jlmb9JtKtGtb\nD9SdT2fUdDm9CV1l8OvJr7Hq4gHgDb3tUItzNP9gyrOVTxQ1uG8apPV0mZ22\n7dw7nEUbKZFBGqxfLIV5f9XB3TCGNmXgGGtcm6RJ2CIXZMs7MguGb7k20kIw\nfSVI13AHRJLZVtQt1pe+WW6noMn/Onb/pLoXXw7z9kBFg+WdmEKYDktr4Wqt\nQTWPdRjS38HSfCYQIYTEsexYhzI/41pUv0p0nwURAA2DBwTp8KZYO/KeB/8k\nvz3El8ZZGAlvcGy7YjhQ18j9JXah2IWANhUcm3M2+3AR9P2CJAF1yWCiYdxw\nMv3TtUxsYyyUtNhQ58yMEMu0/z/tI+Y73SG7o4F8+h4/ajV/rcI5MKS2JxzJ\non8pRBZ65FJ7eN5Z9pLaMOvbEuwlj8rTsWVXmQLweWggtJrxTeFhCXrUfHqf\nIgTFdmyJNijvXbZbN/miAgDyRTFYsCnUPflDoSS6NfGJSEGQKLzGCwKpsR7E\nkzzd\r\n=KuAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/tokens":"14.0.0-canary.d57ec74c7.0","@material/density":"14.0.0-canary.d57ec74c7.0","@material/checkbox":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/focus-ring":"14.0.0-canary.d57ec74c7.0","@material/typography":"14.0.0-canary.d57ec74c7.0","@material/touch-target":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.d57ec74c7.0_1637079508996_0.4563513254999334","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/chips","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.554c71829.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80e8edb93caf92659c2b94b5cab3d8baa7dbba33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.554c71829.0.tgz","fileCount":163,"integrity":"sha512-HdocZmrXSbwCsx0TSJ+xj0vMKEvrB0uLprEJWWB1ZgU///Esku8I3PiPjd++0Rb3cE0sGN+G2ho8MAr3xcqODw==","signatures":[{"sig":"MEUCIQDoD0IYYJvy8nPY5jT4oWHydzb4wvkrGAKeqqOYcja6aAIgWsmmcTIuFneC9k++y1ERmRK339xWu3QJ52WxPOBMehA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9pjCRA9TVsSAnZWagAA/D8QAKUeaZPZAP00wLUKKavw\nQe6CvVd62k2FSuvNj+6CGPeaSNODsAk2q75QVQQFwfB8xg1brqqQmknVrBYP\n7n+fEoZzBSu4F3QaxVO5uhVkzYtdda64HnjKCatX45cSPj2UKbi+y3jiwRnE\nq8rD2UBByd2KjH3oMueR2VH708gjOot7zTfcOUF/pLszx7vFrE0Sz9/LcL49\nDGDZtx5BCoVn9a3xaZqeJSDBioGxopX+TG02HbVFLWQNfa9LtEBxmSDcJ4bc\n45gPgl2cP5S6+whr89sbC9+bEUOETCkkAfXXKd06qy6OnUk+EctTi18byM5b\nI9v/bNSh5UngyDvDRTXyrUWSBgJXHsXd23XsFebzsDqcukHkUcj1hWRQeJbd\nFvULcNsM+QF/whISJrxsk4VBfbat3fPPpNmSQSQBU/QiRG2577Cwa64FP/5K\nyCvK93CF9zKcANH8L/woZK6+AH1gn/LUAIXe9tV4EgtmofFTJjANUl8czVC8\nxH1MEpfzyCEkXHYajyZXC+WYYCgnPsu0RUZePKJYmg2pW8DhG93spJnGl0jM\n/XRvtA62yeOYCPQ2ZxfSDNXqSWQWchpsRXu5f8uEnYuYN/sxTeC0ZrO9xYlf\nx6ZxPhq44XmTV4vILN8bU70tIqJjP7VAyYnPi5OdU3qu4u6Q/zojeKjN+TzL\nexQH\r\n=3neA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/tokens":"14.0.0-canary.554c71829.0","@material/density":"14.0.0-canary.554c71829.0","@material/checkbox":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/focus-ring":"14.0.0-canary.554c71829.0","@material/typography":"14.0.0-canary.554c71829.0","@material/touch-target":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.554c71829.0_1637079650784_0.9323837192466993","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/chips","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4a4b09dc65529dd06ac1625960c7ac3928caf2e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.3ef470efe.0.tgz","fileCount":163,"integrity":"sha512-/usL6aXT3pr9zrlu2ATOwnTse980cWnDf7COho8Kpn6F/P8XzkUVS1XBtqtI8N4DkzMQrFvMz17ZplgZyKOtDg==","signatures":[{"sig":"MEQCIALV4Cx8xegPKXPL+fwf3zDdaphZsXm2Fy+ayWk1PNcQAiAU0Ur/ou7nvWfEd7mMdQuABRxvZrGom34lZxG18Dgl5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9uCCRA9TVsSAnZWagAA6O0QAJ9LSK64WXpTf+mnRR48\narYIQeYlhkt45+GulxLvTcunyaGnw679xwpd584B74nmgaBQZ6SzwFP2o30k\nRojAcZ2oNC0FpJNF0IcbXuKvT15a/YU088Fx9KqZqUFlZc9k43MZBSVm4MTf\nOjcSodtFx8ttQTvFlPQ5KSnhsCQIa5DEGtI924MP0L9G/scDFuf9bgIvKT11\nHwht6gBh+hTnoEEqdW/STFRmbM7YTzmaWUOuXDLQ89n5UwBwIsYS02alDH85\nJVdceeN0wnZzICmw3fzqEC2kDA7lMGVI9lZtwa8E1gqN97xzV3KXucT28kXk\nqKJPaetOXq62cxTKIBpZ6v1NdmyY1d5wF+skia4KWkfRtV4tXhQ/RwxuGyqz\nOtAUMz+b6Chb0wqfZaQxoELRiikSuexhVgZQb0SUVZq2MKEnnK8wCs8q0A3P\nWPIcl2lMHb2eG7SEhxLGD/qQXTZ4eaxGQsImhV0RpTq9Xi2zYIS7hEBvszph\nL0exlg3o6uxW5wKC0zXgxl6MckqxxvXXtwwNf9lrAIbPCW6m8i8fqKxChvjG\noICPktUvMz6q/5oWAI6qn6s+pRaCOFkns2K6rcLUnWry6sE5hfj7qiworNBY\noBze0PUt+Wsf+ULFQ5qqXpg2G4TW3H7QXg65PmSeCCMqdxaGCcD+mO7Vj/MC\nRjHV\r\n=l4OK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/tokens":"14.0.0-canary.3ef470efe.0","@material/density":"14.0.0-canary.3ef470efe.0","@material/checkbox":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/focus-ring":"14.0.0-canary.3ef470efe.0","@material/typography":"14.0.0-canary.3ef470efe.0","@material/touch-target":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.3ef470efe.0_1637079938754_0.49734541249127173","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/chips","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6acee60cf4a6d2fb61150231eccd96b2f628f6d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.61a28b2b5.0.tgz","fileCount":163,"integrity":"sha512-GbqCXtqnf4K8u7lYx5zHu64apkHxqZzaejZgYw2+ScCQKcURkj4WHEIFQGVxtmOri0C8CZwJTN1pLJLlQu+Q5A==","signatures":[{"sig":"MEUCIH0vdYUTjvPhNsBnaWlKfS3fwS5HNgOk3UduJ0G9J8STAiEAspOyjz8N5ixl2hGkl7/ogcGIKzXMIkS0g5zx/rBEiKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFgCRA9TVsSAnZWagAAcB4P/i6D8Tq92uiNyJHmsHg7\nDoRBM16ctALOx8U2Q+N7pG+rXrKiReuBNrN/5hbuc63zcNvTFGiTMN4GZ0vB\n19HBJSpddKVqyT4vy7PSd80ox1g7I+gqtek6foIONeIioSOjYtfryuooQrYR\n3kU49MgT8WEThYdCKaoA9Giyl3yAiEeIX2h8ODU3ctvs8zXWnV0CtJeJnfz1\nWz88PYS4eIlPRpwQ8vZWwRsThxSGAjj5bl63EGyEPpSrgscQ6PkWRhIzDdQ3\noqlmfRAs20zX4/hJDarRG4nqPQ/d3JWQW1UHdvgcN1Pt3+Z8RvCsjK73ZOUI\niTQVtMLNhkuT14tILvJ6sgGbE6/oRcNN2FCqTQwhW0Amcof+9QM5mSFrvfaF\nnz+MEBqS0VFEMJS9MJs2PC94jY3/46VPT8pionZz4OgEdr4TQU1Nj764JpnT\ncQLAAZnIbK/rZVn7EajgFevF2RaOUpf4nZSR4U0mhgKMogZQ0EVwcOG6uwQp\nmjPW0wTF5GAkjHnewQiCFrMFRGUEZydW5w6NRp2bBAu7UcpnJnUaFx6hZPB7\nnTVhvQqNhzoebQMnXGf1EkJ3efu9gbhw5uIjZg2jyvTGzPcg8r9GOhsepq4+\nXJQI9n3/GmiRtoo17DEKo5LZ5LVFdE2pu13hhI1Qevigk7WmXg7WXFOzAswS\nGyOd\r\n=8fAv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/tokens":"14.0.0-canary.61a28b2b5.0","@material/density":"14.0.0-canary.61a28b2b5.0","@material/checkbox":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/focus-ring":"14.0.0-canary.61a28b2b5.0","@material/typography":"14.0.0-canary.61a28b2b5.0","@material/touch-target":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.61a28b2b5.0_1637175648437_0.856326892140121","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/chips","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd67d684fdc956fc10df38fba1a1cfd84c46ce82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.fae6c652d.0.tgz","fileCount":163,"integrity":"sha512-T8FBQtdhOxX8+H2v0Q/cO+q9DYgl6G0eLEoY+9gVvdd3qpUyHB0WbRhAsQfmqdD3UIxdSmcSi4yJ2ZAYFJDtbQ==","signatures":[{"sig":"MEUCIQDDnjiMsZk1JrCMWqRFfXyu9V6gr0NRu0RId+jwwu2AGgIgEsrLVAbYPaowDNYm54iW/umnxIDwUu022rkFZqGDFgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6wCRA9TVsSAnZWagAAYE8P/0zHaB69eAUMRGc2mpGI\nmbedpOOsZcp2IXocnHemJlAUcomIDwMY/rkkzJevi54OYtEk/iS5uRK5Vz4d\niUn/GHn3248yJINRpDMjIwET+O3QpYpjWf/tw0HK+rDcQtnfz4aU+wd9DwVg\nfdWLemFGzo6bCIs5mhcHgYsc02mv7/sCO68QJxI6KziLAIHqLhPcSnjKrrLk\nys+S9u8iRuuyfs1Pm5zkf4HBSzrcgYLTRsY5UtRUof7KjB5mxum9tt2G84Z9\nzoRZ98qmSMsmzUs7ghO1shHDLp5CZemEplNWlMygwn+UbtAeQ0cy3Gwm4zom\nXPHn0lj28oHTkFv3QTwIzv4OpvydWflQ3D5xdzYqxroRaV7U0utH5pEvQViJ\nowul52w0o5dTwGmXL/5DNUU6tgW9qiQ0eeLhDZthMmYDqbD2oGT34Xzwrito\nTNqqnNAmInbK8naZoi/g9+oGBXVl05do4fahBUVZyq2HgM6gpL4G7CUWTL3U\n8ko8ycNCIlFcO3g4Xt+xx/cvTLcG3lcZSaoJCAH6nj2o6UtSj5Pyd3eJiiAV\nu6rWjowQ16g5r3oNCs+TPAtiIjTFfYzyeIizyzowq9mvkJ0oVrcTwYw/stIU\n8x/gu65KiDflkFl182tVqc2f9qjq4SzW0WMW+rafKeqysjlHknPIQa4ArSWk\nfdNZ\r\n=aUZy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/tokens":"14.0.0-canary.fae6c652d.0","@material/density":"14.0.0-canary.fae6c652d.0","@material/checkbox":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/focus-ring":"14.0.0-canary.fae6c652d.0","@material/typography":"14.0.0-canary.fae6c652d.0","@material/touch-target":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.fae6c652d.0_1637252783910_0.5728865467317295","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/chips","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8395e1cc30ae19c245193a2914caa28333d868a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.978a3b5bb.0.tgz","fileCount":163,"integrity":"sha512-orWzw+RiyQjY+HQs9WkO64FtiH3rE3txsUWoj3g+iTow9kJEZ5MjMPB17UWT+5BqGxApf0DMj64f9tzFfEM3JQ==","signatures":[{"sig":"MEUCIDLGqGqx6oQRbMj/ceB7rl7wOqRGUV0GAXwVQKa9T5LcAiEAiZ6Dr2F632PVQQXKP28ILrElDDV04yPktbZtBgUCtMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2+CRA9TVsSAnZWagAAu7wQAIJBGVT9a5aH++082NtZ\nJsnvb3hc15ISbf27c8RLgr+sxUTxMFQd2PQg5nQKzGr56aSro8mqqB3/QRpn\nyFgzDZTAFaywOK3yPE/jygIq6WjInCvS3kyeAdwpRbvTZCWyKDz00T0IvA9P\n99gvw/7BO2bEDlPofTnk6Fa1EYDu4zI9aywzvdlNE0YTjpk792BxnwhBXbzj\nDj+haG5qaye5smjS/DofaZL6zImnI+IlShKOlvyYhEKUiz6vFmIRB3MGWn3j\nWv7VJL/a/jvPjEqM3KE6xSjk/fpmUFjRzeqoYiPu4qTtpp43WSn5+1W+3foT\n+4fpF+4rqHNSUVmHbz0KW4BH55/yxk+iHoa2K+dZyGbtaNZPU+fSw2TdI24o\nojypItYl5CnvFB0fdBfESFJzqo0jj0X8vZWY/AjN7Bn3OeMVf5Kzz0qpa5gg\nrWaMfLNZDyhvfuJYuegbqTFty7L1wmKo8zfzgIFrvC7QNDBVLd17MOFpW8QC\nGZs/OwifSN14cUsC/AfiUfIVpSnHV6+1S6Znk3zihNBWs6IHgccvq5mvvMVZ\nMBpUEVy8A+qMfry8mlmlQca8zM5GVehhY3EjEKXUKfFsuMnPx4sr9zAjf28q\nk2yLV6rK636pEM8/98Y6M7MJDjjFiDF9wuwuosfzvxdnPkJN9ZVCq5booWg0\nxoQG\r\n=22rr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/tokens":"14.0.0-canary.978a3b5bb.0","@material/density":"14.0.0-canary.978a3b5bb.0","@material/checkbox":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/focus-ring":"14.0.0-canary.978a3b5bb.0","@material/typography":"14.0.0-canary.978a3b5bb.0","@material/touch-target":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.978a3b5bb.0_1637350846468_0.6922271130627309","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/chips","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0f2fe73450c792e8ef216f5c8e77012ee32ba3f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.e6f43cf44.0.tgz","fileCount":163,"integrity":"sha512-i4aByc1YkFJ0MEU+ZW3ORAa05IenSlgHmukEAYpVWYCpr+RAea3d5HwmSAKLesb1qZb78uR6xH9M11bbhrVL+w==","signatures":[{"sig":"MEUCIEFdguOIudEqwDul6CuQuVpVIeFYABV1w5LrkvRgyVeRAiEAsourdcHEYO88808EbIOM3xuIPgDk38f+m313rejMx3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9UhCRA9TVsSAnZWagAASksQAJp/dgCVMYjYxNHTnuzb\nZqInCrNeh3ByFLVBmz8/Rx2omFloeDex9Nzs+EiD6BtsQRb67LkCRd9PUNGw\n0FMJwMcCzP+7Bflrz3O3paB+k+4bUHy/FITigkVIJ5JwetITPh6Ku6APtwAm\nsqkOEWPfytntd7rx0P3mJcIRNVWRGTXhafeEAqu2xVhYQdw9N4w9U2vNwJwO\nlZnLuQVS1woqxjWkV8uOc9zl/Jr5d4o+Zqjs953LRY/MAQEELxClGb38lRAc\n6Ueux65F0mZNRwA+YT5TMj+52rYV3Lsglkg06tO7m+a9u3fuZ6QO5yMOp5T7\nm8KJpKboCfOaZLAxZ97Tu6Ai/AhvgQiVCXXraA139HzutP1/f3ikEWae2kD3\nK/nztDx/QA/tXuBLc+e1Eq9SgdJiraUrrYa01fQUwvWVZXUmtCfBrr+6+QvZ\n3BxVUzvw+yUMk/9zmr4bOF8nEm73JpfYcm4wGiu2d1PMdZdLHhReiLA5uYUG\nERjc8XT1nLTwwAvWnxBJffvzL3Z4P6rK9Ld+G+IDBIvYqSeS3Asm+upVrqmM\n0qM/9BrYqq1R3vwu8MTm2OGGJaFFUbzXD/1rJFutU716jmWQxlvpjtMkan1w\nQGlC0gpb9PD7C9Y/QkSgLuuMTpdohZSZ9GF584/dTyDd8HSmtLqMCWNG2lzH\nCP02\r\n=0/C3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/tokens":"14.0.0-canary.e6f43cf44.0","@material/density":"14.0.0-canary.e6f43cf44.0","@material/checkbox":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/focus-ring":"14.0.0-canary.e6f43cf44.0","@material/typography":"14.0.0-canary.e6f43cf44.0","@material/touch-target":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.e6f43cf44.0_1637602593734_0.8730698891828996","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/chips","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d781d7c7859c7e95aa2fab2b2203c23a8887a01","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.39cf14bc3.0.tgz","fileCount":163,"integrity":"sha512-xDRsTLdxAs80IxdYZ5HrfAPSCnPqm4m5F0K2IloTEWLkr3wvlIjJki8xRlqcCYl6uqfdKGLlfk3JFRxgh1Z2oQ==","signatures":[{"sig":"MEUCIFVOZPmq34ezfg5tRJ1abU7KF5Qw0vBGNAq8MMoyfCm7AiEAt5vcOccR61FHvrjk4AFhO9bXZhbGoyGR1yCiLSFMhw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCJYCRA9TVsSAnZWagAAd90P/30+qTomgsoZTZ6SgLhy\nxI4658IWDkHKzgp3OC3zQSE+liUkpsOTwFUVuOyso2Yg6PoolBjIojm9N/u8\nbtlpbFoIV1XgfiUOQ5VBGF4N4Sp6Crv79B7VFb/EdNYgavnnkW/tePNA36Lj\nvFwCXGLokqBaZvMPn4h9TRmvNBmFK3f3ryv4Mlmu0uMOuCqUaU57SEh1JFni\nTbAHtp1jUeKE0aQmJIa2NNxqI5NCtpjLe39mgZ8ymGk7LcIursrto0MWgWMX\nqqoU8meWLDS3aFxJCoDBojfAjgsU4d5+EPe2pSsUQf24gbP25ly+vyU2iXBo\nPXtw4WfU0zD9lJly5gAh1BwgYbmwtlInGBXRXnoA7ry6E6c9kDGj2BX7Ys/2\nmbllanPLvGrszWgr75MH99kkNpTQsSB0qvvRJfE5mkQxbMi4Xsi0keoyOZSa\nfzbdQMv2mOwUtuEcuTR57hT9V1vQNDeipIog0+gbGqTdZXo9iqmNenb6xFqb\n+Pot+2g/1z9gXCCmaaa6lG22c7p18wpprYkd5Yov62RaDd21ZVIGqL1uYeK9\nKWITAbiSe8M69WWpLbkarCKHzS1s7n55XLsGNU0BIEvSwl2WilSbakbviSse\nE2VvVTxTy4NQprh7cGghasYiXz0ZrmqoZHPJp9THvOcwHbGvx3gJICNvT2b1\nWwqW\r\n=UrPq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/tokens":"14.0.0-canary.39cf14bc3.0","@material/density":"14.0.0-canary.39cf14bc3.0","@material/checkbox":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/focus-ring":"14.0.0-canary.39cf14bc3.0","@material/typography":"14.0.0-canary.39cf14bc3.0","@material/touch-target":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.39cf14bc3.0_1637622360018_0.7403827240031504","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/chips","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.93134d453.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"139b4972ee36d959fd5b3d31fee2243aa5364455","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.93134d453.0.tgz","fileCount":163,"integrity":"sha512-Hs8URKGoNjprknJwKWbSsGfHtj/bKz+n2ew/OhEeOuJzIgkP28PeFduKwj6IcRZ2hZMelIjwmZqG/AbojOgNvw==","signatures":[{"sig":"MEYCIQDh0Yo+gOyT3smtotjJN/pVxK6JTq1oZYVRuaNjHgSTLAIhAOjOihXZXcbrAYnNKMEv5fu2VTytX94TZACi7adJ/818","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQuBCRA9TVsSAnZWagAA9DQQAIbqZfHLdz8dvj5DU3fJ\nxQqDPEd7Mpxg7fz0cDLwrAH2upxVz1RFhD88kVmCvQw4VIi6sNyMdOfL1BP5\ngEnKjgljcCJ4WGAS2AQ+b/r+mUGPxUUJ6fsQsRsVf1v+cyp+YgXmc3S3MTE1\nFuwrhgn1W5CfM0Bu0FtfJIlOH85HZzPpBhxWn8jp8pVWnBGW8tqa2y+Xbr8t\nB1DHIGMPIsW5ITtJva7Eclp3LhmiS2HHdHuFjQC5o4sSb230ix185GDGj3gL\nw/3B2ifP6WjGdWLcPM90E06tyGG8/ehdEA2Yk5slqG9gOqcNg0iwaAaUMGxA\nhbEx1hGMWdcjDriLv4lzKaxXhDZnVtrB0kc9Hm9cCyPjr6jLn610fV7FTORh\nQ/YfcNmz4yUMxLTZzXHuTJh360P9deETk42pIB7lG0FAW92WbW7s72cNa7db\nYvP0jDHRBRVf9MqKDWQhy7kZsN1Nn+jWE62fW7TZmn244mWUfPiwYhNySNyW\nkou7gvphUmP5jUgMoqaokfsuBFYhAmqf+/M5iYfQYYPTL2sfu9cWej1w7v/d\nYDK/E/Xw3zlz/h2SVAEJY61JouKOan0N6ByNa9jwHg/UqSJP4D+xjAgV1ESe\nXaq3K0J7SdeRYZFPy3iRoe6f6KxfskqXjm1cAQAQw2C3KwesLYUEw5flJ77M\nhkSJ\r\n=yu4x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/tokens":"14.0.0-canary.93134d453.0","@material/density":"14.0.0-canary.93134d453.0","@material/checkbox":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/focus-ring":"14.0.0-canary.93134d453.0","@material/typography":"14.0.0-canary.93134d453.0","@material/touch-target":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.93134d453.0_1637682049411_0.2633568910002668","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/chips","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb51a7529248f7e5f7d1c6a5c70d043e361da614","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.bbd11268f.0.tgz","fileCount":163,"integrity":"sha512-9Dy2J9r+aBtS5zSd6EMrFUJ3QWoYE2Lgi/YIxm814EXWv2ZJwEFYiRukKm854U2bjusa9+3xcbMHbX5Jdw04Ww==","signatures":[{"sig":"MEYCIQDPV3vjMK4tU4Hl9WYq2U7AzNDciUp0GvmbN85SBrWH6QIhAP9nra38VzjsqfIXkjRZUgEQppuXt6EUHCoaZh1w9ujl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWxJCRA9TVsSAnZWagAAQpIQAJIXD7dG62EBLk5PjRJE\nlRWGvMXeqIcYwHv4k4jRKer0PlFCQTsKYCy4uyTCbVRHh1jnEgRSyig0DZ1u\nxio93FxspvaQUketwAjGCILEDskPWaQLwGhcFrIKOVPicQAjRONQ+001bfCZ\nwjvr9Ksnw1mIyJxvurYs7mGhfVsvE/zA7BVxlOkW5QWnsQ80nZ4iCLOxvKe4\n+PdenilPg0fyX7rQQUXCi5TkGsxiPP8z8KckbXNanhELsjmhAiao3CVDtpw3\nEQ5Ni/Be+NsiylsDxGOsXiFEEkjKc1qRMvothozUD1y16pbsQiQOtiYqbkhK\noVaIayfAr1a0k/kyH55b45jBXUBsS9Fd2/Q8GfdDRtLLk/RSB16Ogl1bmZem\n2d/aLU5ehBWRo7QjYbDmnDZaojEaLJI/rupxf0cErCfyW62S+0/jZbcsgMyi\nHecM3B8CFnV9ypvwJ/1L+7CN4ETuIy6dbkAxxeCBexTax21VDuDc9HrgQEek\ntzmHVVF/L2aphdb2C5zHaoDAIwVJa3wvMlOVInZ/zSrF+osMGXAbxrnQheMS\n77vL7e7bonWyNpIQXQXFqpLkKQvylmJTpEXwig0LuP+HWnKMk9tPiQqexyZx\nphX6KI7d+AZjxCtpuvxSpBm83jxf73rnfVk/hem8DMPrBWwpqhg691ldzuzU\ndjt0\r\n=puwH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/tokens":"14.0.0-canary.bbd11268f.0","@material/density":"14.0.0-canary.bbd11268f.0","@material/checkbox":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/focus-ring":"14.0.0-canary.bbd11268f.0","@material/typography":"14.0.0-canary.bbd11268f.0","@material/touch-target":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.bbd11268f.0_1637706824704_0.8241653018819439","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/chips","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5282cec785f9c232441c4afeca4c04f424fcbfc9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":163,"integrity":"sha512-yA2GUxlMyJ0doUmSV+HjOiT15XbtmS93tAkaNF6/y8xYD9BFUw4lHQQQM2FLsUBVQX5PjOt9rM6OAwzIV4vfIg==","signatures":[{"sig":"MEUCIQDdc4ErOvF5qlWKYUXk/YrJukrOllMPbwoYYEmOa7dIYQIgb/SWrXpyIPLpllPGiTRMNK1kDtAw2snFaNpozQvEAAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlyOCRA9TVsSAnZWagAAhD4P/R864cmW1shve6zqv8Ny\nhY5im0yymZCaNkkk4xQfhjnCxgUhedkeFTe3Sb3NMa0uukIAkE4T0TJR4AGC\nyejv16vMXKOyQmdK7FnrEV3vnuCfHtwGFN2BZVtuCzrSgaOo9wl3vTbmFt3d\nZnx9WcfH4MkBXjRHO8EVr68rR8/5WWOBnbvM2CGYGpv+VA87d36Q3XisF06r\nqQOSHSerHmyU7i4PnXZ/Jmf82SqngtPgabYTF5BtRuafjGCboH9h/m3rfuUP\nvlTLwmrrgNPo0i5mpBPY2smztKYUTTIUQ3gK/1kazttJzNeNHRdF9y0hQstV\nmRoL9eIsEYPk3gXSgMBcmXE8L3tHa8JVO5hIEADEfRnLa7ZCGddK6ZTmNG9f\nSflWxZy+7C/izRPr7AQcysXN3Xc7LwMoi2KDzVA0XvKV8vbxcmzUrTtKnH1w\nw+XDbTUMXVsuxUWw2gd7aIPTTKThzl20U2KmlQ+YzbQAO8gyNe1tygtmigmX\n37U3sjQuwcH7FaeCg38WigORKHdU+TOy8es78o/P1eUYtJNBLTwG99App3sf\nB0zCfF5ZuAa4joR2QCI2y1nMrb6lzm41micmBtRZne4RDoU42eFtGraxBCQj\nSBWEzq7zq+lwFM0BHrJXhSkGt4LwhrjIuZ/3w5qFPr0FjhKULIRESDgjg7kn\nbzmk\r\n=lMX4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/tokens":"14.0.0-canary.3db9c4d3d.0","@material/density":"14.0.0-canary.3db9c4d3d.0","@material/checkbox":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/focus-ring":"14.0.0-canary.3db9c4d3d.0","@material/typography":"14.0.0-canary.3db9c4d3d.0","@material/touch-target":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.3db9c4d3d.0_1637768333881_0.2057865112418722","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/chips","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8a20a20f89fe1b94756033488cdbd2497802781","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.78305b6d5.0.tgz","fileCount":163,"integrity":"sha512-zOvKrXMIwzZa9cSDKrMkceMAjSytz8nFsMeLdznEXHRoMPeVZXKJKI9kyZWaK2dZ7lNH6kGynEbRVfu/zOCoFg==","signatures":[{"sig":"MEUCIG5UYx5fRySxZgJ1WWVvWB+dZxna0rxYZqPPjgSfQqrwAiEA8jovsl0vHC4hRHgpsZWytZ7IXjE487bSDXyAvbLX+jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfoCRA9TVsSAnZWagAAayMP/jZcEWj+zzsDVkYN5JUl\nNqz+8PL0aSKKpeVdQ/BG8UTqp3CixKe7c+6jeHuRoyd8oK1RotX3hAUBIB5D\nWFVLVWvczjAb+0sE0uaHGYCi4Z02CWpfKgAc+GMuB1WMzz+qWdh5D6maEJ6W\neeIyXwwX+d6Cf3OBR+STRS7eZKLUfaloQCRhCJ3EnOO8msvb32j4vhaW53PE\n6r2h8pbGZdxLDjYHv3+0COpvth15tFWK5E19wEu4FtL3HvuR1IDGAbj9vRwq\nglxO0bQ1K0v4qLqVL/ptVWkz0KZ4bcnC0DjMjDUVsAjMCI6CF/ny2rl5kXLH\nF1mgzPrbzRHEfKhbDezX3mYcwU/eUbOFCQ67AhxygswzdD2U7A59i0OAMe3i\nwyPmw9F9op2pW6xk/dsB4hv5RKWLc066yR0FDwskR7sU5iLfEpY9eg7lIjYr\nKwk79CJUr3i4JjXlkYBovb8oZEd3JUqMuUIY5C83dJ3qZErE2GSiCto4lsC6\nnf+PJkwyR9ubf/S5kEE37qZu6REY8/UjqGRYw/VG4XsgL6WoNkm/i6b2dkMZ\n8ci8Ns6+yvqQheodbiDlrNkDYkQDzivz0gA3SH2Pj8J3Jd+z3D4CUbnmpXTW\n4ieuBIFqOHgdiXo0BVtRhOyFZy8vM3FcoMcFQxRqqmMxixBuRLBTk1WOYyrm\n5w2e\r\n=PrE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/tokens":"14.0.0-canary.78305b6d5.0","@material/density":"14.0.0-canary.78305b6d5.0","@material/checkbox":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/focus-ring":"14.0.0-canary.78305b6d5.0","@material/typography":"14.0.0-canary.78305b6d5.0","@material/touch-target":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.78305b6d5.0_1637783528208_0.7215279265305707","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/chips","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f14409d65b111ced151341d6ac2063f6aa0f57d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.43d08ba77.0.tgz","fileCount":163,"integrity":"sha512-rx5INe889bERoINgRIgUads7MBPYWQxZeCfN6PC7R20Z8X57FWQpiZk3wOritnfW1apt2atFSMVq3gAjK9guhQ==","signatures":[{"sig":"MEQCIGb0iId8AJ5pNzWjXQdKAcSBpNAv6nZdjsKj8MdNzgmPAiBkMJ2/1WmGrTHv1U1jh0PyIkMTemnWATr0Y9888MZi9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxbCRA9TVsSAnZWagAA0dAP/00ik4jicb3KgsF0vT9n\n5jaH6qQnYfLqAvavuBAOXkI4q4KT02p30XH+yrqRBJ0ddpHwKokNazuS4D+Z\nVuZaBemEMjJIXFITHqcV47/9EkAWJ8l4zQvSoKJhtspOdbCSQE3CrGX8JK6u\nQEpWutzFPIRmagmQjmdDhX3Za5h7JAZjI2jl/Uz9d61l52/YVAPuCqR3vpmx\nt8UWCUJv/dlSTYCmm1FyPZw+uZ8XY3sd9BWGV/3CnfleWwwWAMLjJqL3GIwj\n8lwnxSpvgfipD1e8LaFGpUpndAPp7mwBZ7pTMT0F1T9SqvBJt6sTpPGXCJ6P\n01NL6JHleG6fysRorhDV91iXZXtQYlew9B7Qorvt1DtP+f4a6abiisxpiggH\nvfyqhH3nYZvDerrovicoKmN+RHG9fW5Iz3ZOBF5i1cZIcZSPP0q6xHnyaxZg\n5Ct2Lh39jIIRM0T7U/+YLlRvCoj057iV/F2ulpgzEu7uTwPUsWrRGgGdyDhJ\njWCuGhpxz69eSQfDiDxbraFnpApSlbuOBKgy2OS4US2jFQZoSiRgHXPBo2it\nUQJsAUuhuB9Re6e4P7OLCw/mgUQ2vjtUFOj6bK0RKlTZZV2VrgVfH41laAXa\n494467VS5ZcEHRIy6KVIaepmIiL9ykDBc+VpEmljwrzZhuQaVP8JEdNu/KNl\ncRZq\r\n=Hh+f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/shape":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/tokens":"14.0.0-canary.43d08ba77.0","@material/density":"14.0.0-canary.43d08ba77.0","@material/checkbox":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/focus-ring":"14.0.0-canary.43d08ba77.0","@material/typography":"14.0.0-canary.43d08ba77.0","@material/touch-target":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.43d08ba77.0_1638313051697_0.02543005350682659","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/chips","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.17a072535.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"163da7ded1c6a63ae1023615a71e299190ba3ce6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.17a072535.0.tgz","fileCount":163,"integrity":"sha512-oXloIR/7zwu2w00ATtVFPeqCJExHWIjAxna7ZtUyvsX8+YGLb1+qZ+lw9X/nN9j7TfYx10HEhb+MzWgr5lyx8A==","signatures":[{"sig":"MEUCIQC51bAlFK1uynojGGDBIexU3bQ+kriQnfdGuBBRBr1LQgIgXhhOVKsLKZ/n1eZSE5QhzqubCKOFfcCH3dtZJhvXdS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQs0CRA9TVsSAnZWagAAvQ0P/Avc7nej35Z+cgwp02QU\nCjylIoyXeaEjnUVEYjUp3wBVKKke+gpiovpRbEQGUfsZYRlZnIluC2ksytNW\nZ2D9X/mvGvB6227bzDPRmSNXBmU1YIY1wRugDmweyUOgUM2gJjRA4Xa322Pu\n3OTgj1rfJ77l28ogvgnZWOT14TgVyCgCL5FW8Rc9owbs+Tn3JSnKKivviGhu\nu6bTAZe0YfU3SMpVD5bAiVuxn+tqxmghN9RynzH61dgUUiobhGEBzZROwYn0\n5/+TZIOO2/tREKCCbr19wgXctdoSeT9psL3Ueh/tKYq1CGvvCbyBmziZA0f1\nSaQaBawkcpMhxGBC+IU2l8Id03GqkN7S5bqfcJtJP6dI7OXcytwmJYRpHkun\nrRKT9yjLo34qyjyxIaZBLEK8E4cL/X1ero9rA7NDg6YKKELJLNak9rRush4E\nngduRZVJQQxNMySMLhHKh7kCdOCt1BxS7tiTnOkZwHE8RtVsWLlTmYuXpGMd\nh/v8V31VMuhXt65JvVJsgxTSLR1mxnRDmp7fI4OtOSFJM3yoPZdufH/4QJ2z\nT3z3i3Une40Rw6qfDMOIyCpBVQL494u7pt7XdXfvXwuez0q9yB0lfOl2mbS1\nuEYrcgF8KfJHPMD4p1Vz5FY+doK2ZTLgKVywR9j+L5+HXSwH/Z23O+lU5Ygj\neiVU\r\n=F4Io\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/shape":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/tokens":"14.0.0-canary.17a072535.0","@material/density":"14.0.0-canary.17a072535.0","@material/checkbox":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/focus-ring":"14.0.0-canary.17a072535.0","@material/typography":"14.0.0-canary.17a072535.0","@material/touch-target":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.17a072535.0_1638468404269_0.2289205879855174","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/chips","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.5d809696c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43f20e024d793c3b7d750916b592d68ac4225e58","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.5d809696c.0.tgz","fileCount":163,"integrity":"sha512-9Er4DflcUFD8AaDqx2BI8TulvF6PLQiQ39KIRN9phYVtfCLZ38PMVSqzGyqnmeTxrN20iHN2+C5u/UprrnL9zQ==","signatures":[{"sig":"MEYCIQCZGWADNWg/RZVRRQQD0yIWqRSr8V0t1/QcY4F4o4Xv5wIhAILLgg/1B3eaR1yLvgIo6GWkcm9HY5tt6LWteG0bUOlZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO9RCRA9TVsSAnZWagAAhvQQAIc6jT4MxKggFuc5kuZz\nRB5ZlpWbNQQQe9rzALNXlkYUAiiTjoy2j3e5bhrH5x+LARXu9p8j9gQjAaNr\nt5hkYQ8IdjbF+2a+KEKqfO+m+DVPjZcQlT+qB+T6Ym0gZqNbcLt5ACHvWcbd\nuVwaSwABo++SZdD059fj41zaP48h5T/bzr/LcS189q6z5UzROU3qtWBE4fFd\nHAonMQxHYKz22gCUXf8bTRHtQmcMGAYAye4mNpur+S3M1qIEaEgZBWwodxhd\nV1eV2H0bH3mG8Eu5CU01V+pk7G7x92f2tMRj9n9E9CL9QRCKUo2xthXswguU\nKvSAZ+Om+cVjF325JlPCIZooty/nrAHfAu87IvsjHNWL+vCFMeNkKFv0y0h5\njmQkxvZljlL4AjhbdBXnhEkdfDSz1+O3rXGJpFEjGDPZUXLpU2u9Wy4KbVxm\nQjwuj/O+R2nL8F8NTkshU70MVTtmcd6eFxTutVF4UopeSGaM6Ch5pd03TP7Q\nvxLDG5CdPPwAYRcS3irVBy+CXx6dCqvz8NTymWKmHYugyqWQgA3nwsPr1maS\nT4l8PsOkHIj2aNJSYd+1Ihnn5iLud7HdwA4msjJghVstSagyyA3RYZ0YiZi9\nWfZt08LDOokkt+lGPgVSSK/aP6kzBdx4zTOOiXRqMbcy3CUkI1HkZirKbpYf\n7uSJ\r\n=sGLZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/tokens":"14.0.0-canary.5d809696c.0","@material/density":"14.0.0-canary.5d809696c.0","@material/checkbox":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/focus-ring":"14.0.0-canary.5d809696c.0","@material/typography":"14.0.0-canary.5d809696c.0","@material/touch-target":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.5d809696c.0_1638985553689_0.9651352266287545","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/chips","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60dc3da073ad6862e983d2b61ad7782d95e7553c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.b6510c8c1.0.tgz","fileCount":163,"integrity":"sha512-39fv7juXJLERur0A14N+t9sDPV3dO9JF24bZec6OQGIOHj23HU+sNh9f7IupK2DyjxPJqQukdhQeVyX0gAcZhA==","signatures":[{"sig":"MEYCIQCl5Bzen31xiBDIGxYUT+8aC0UVXrIioHH+YzM59ugToQIhAMDyU5kqCaYE97U0d8GOy1HCWGFHvRS76C1plQGQ8irC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPSICRA9TVsSAnZWagAA7kEP/A8WevxKXdD8wkpA6voT\nN1lMYc5g3/qbtRYLw66lWBUF+lEHVBHHLKrRxOJCQlBW+PKVs9RpRzq9oYLR\nPxc0xiuHMovNSo39wtKOsk/24KBimRpX8WlBE1TrZsU7R5z8bbHM4PrkyaSG\nk9YOzlzn2dIgsOthP6Q3Ll1eGM6Jtkh/Muyr9cGGRkJrgIXadVx3v/ELT7f9\ndo5xR8HDaBqpcejTQ7wvKNADsA/3wHcsObtwNj18xkojxtXsgNb816ghLRKq\nv39omGLm06LYWk9wpnybVmof9ig1XHzZS8qayJmN1oqy2sZ71Td0soe0lf+V\nZ2YrNkzZaSPGH9P3/T10Vi2mu+VJWtHSruBP5kbtbmVQapah1XLdSukrQzRT\neNHWT52ubk9ZJchIXDcfS0ZQuI2EJDGez68GakwanGg6uwbhifdj3bVZffUB\nbLLS/ciAuLxlXdg/o3fa+UGEqom0mcE6Y7ae78E1Za01/Gp2zlK4i12+xWia\nXC7X4wkNfKKuaE6D8biE2JcqHN1xdmVVmGVIEHvWpl4GGgMHc5EtySF7tga3\nfzjrKuqX86gLcCi4fJMK5Skk8F+K/BhXxNFgbxdID1X8QwiiLw+zcbsU6/i6\nqBbT8BTb5xXL8iaQrgwzQR81n0oi1a+4kUxGMkw362xvvpjXFTKD6L3B6wAx\nLztr\r\n=9EvC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/shape":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/tokens":"14.0.0-canary.b6510c8c1.0","@material/density":"14.0.0-canary.b6510c8c1.0","@material/checkbox":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/focus-ring":"14.0.0-canary.b6510c8c1.0","@material/typography":"14.0.0-canary.b6510c8c1.0","@material/touch-target":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.b6510c8c1.0_1638986888282_0.5838462638476178","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/chips","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.f460e23da.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3209281d62356cec4b990168371b562fb7db8cb6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.f460e23da.0.tgz","fileCount":163,"integrity":"sha512-C1TynC/jifH8336QPQ0MVcDh7Sk003RQHQPnRkxZiziBsNY3suivwcsWH7o9Mfv3HPbNGxUAwRbZ2tlXk0quMw==","signatures":[{"sig":"MEUCIQCzNR3DxPKL+BocBmYiG6Oz0b2+aI/EVAYDZSOzjta+7wIgAPyl0wJuzTb9fONwwB5w2Bs1vHUnpcZ2a+LAE3LSikQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3HACRA9TVsSAnZWagAAUdUP/jph0yII94+mI1ZZ65zh\ns11ir8WRQ94wWRgRy3HntqtkXHqNixEjWOSvsA2WsPWgyvT4rbxSLgQfgVui\nKteCNTTHuVuqIcZbaDePQTspKPEF2gqprRbyIIa64BiBTfmNQkVJYOdkqZY7\n53i0WhHzS4xz1z0MYvLsWZ3k6abhc4n3Pg4BEqGqfxTX9PPUl3e1FS1e94ot\n6t8Ez51zOn/AqGRJOACwz4qybw04qpX4g0ERW7mPbQt9WAFXg23DagKmIgs0\nLTr7qQ571pJA4siP5WcyVtWBA0sEDSIJHGaOaJjvztXsuNQQU9vi+qJJnI6U\nkCwYPRDbVic4vNONYK0+wqMZ2ndG0t0drgQJYYq3UMf4m/X4tKh20mkp0I3n\ngzHb0nlqh5ZWuUvpjPzMGVhZkzgaRUzpTnvOgmmKgl9B2LexSAzdXz8D6Xls\nFxJk4lFU0PFOSP5d7pWepuMVSARcgLkCKEoxGjYGSarNAupFiAV707+WUCXU\nZunRVV7kbI8jxe+gLXJ9A7024A6bFAZPM9cVuTSbxODMH5jTPLux6ESKQUql\n68BebxgsDokPYRbgZGrgO4CGY9CtxA6AP34GSYsKeVII/0lAybxHYxqnSLpg\nPGyzS9TTZjVSqten/pbhxBpa6tDER0eP+tO0TO00KUkOUQ/3+sUcaaclQ41a\nTUQt\r\n=2x53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/shape":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/tokens":"14.0.0-canary.f460e23da.0","@material/density":"14.0.0-canary.f460e23da.0","@material/checkbox":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/focus-ring":"14.0.0-canary.f460e23da.0","@material/typography":"14.0.0-canary.f460e23da.0","@material/touch-target":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.f460e23da.0_1639150016692_0.963200696648681","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/chips","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c46f38a3c11c5fbbce54691269c48338f43f847f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.7d8ea4624.0.tgz","fileCount":163,"integrity":"sha512-7FDM/li2xJSp2lpcHzYRF+XY0WJgDUEkmPDicl3Q99blcD1yprc76xk5yTvck8YCXvl8yKp3NHe/Dl72pf5YXg==","signatures":[{"sig":"MEUCICfutreb8o7YTI0pLaWTHNouvxiJ7RQzb+7mVbLtOHZZAiEA18DmSah0dp30Un6me54iQZXJzA0rNZ2B5jFjrXZJ5g0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6rfCRA9TVsSAnZWagAAAFUP/Ay5Qvcx4fh84CjTuuCr\n6KyAFDBlfDySPzczK70pCK6WkMrX5Afhr0WzZamw81F9LPtSOQglZ1T+yusb\nGfF5/J8eVfpfZNFog/lQlgmWpXQmLaqyGddgtBhsbof5I7SPk5zRr4jQx5JG\nJrBvEiQE+DFPC92ramDc82gxZLaZXdVKobbz9ioF9Sas3eruKAsVl+Bftl0L\n2aPvcPCiYNmfNDgrxHagzYkUNKYdFTC+K5VoxRHR3jgarrooPj1bBXeElFGw\niLjzDcHV7lv8q+LlrqKfPrNSSDgk1tXxOjh+3x6XJkod21dPN1nJJYpseNUp\nnMidZtzGzaSpoITFroQHkjjPFyqB6SlfEmb46tkcV7OYCa7UqKEvmCiX77Oq\nmur4eEi2qAJDiiAAUS8CobdQhPd7ItsBxqcar4o7hXYB/9O/EUPaHM8PmOfk\nL8LxgqJUfqhYw/t5ZkEM4bVlaXASe2c2jI0zTErTq0zKnKxnJLAjjQKjsF5T\n+OhKkLzBvlC054ej8xxiyE0Aq03szMeeVh+i9l6T0TJ3lBX6arNUvNLKaKAL\nbfsk2ioAyHzDv6uPrFcOu0UhyXLdqb3pA6Ikgn64W3Xsn1LgOD8DfwfyesZF\niYYgyOhyhxAriUoP4ULvkch198c9BN3CO2uKlREDP1t2dYgmcezkppAj+dLN\nG9FH\r\n=3Lt+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/tokens":"14.0.0-canary.7d8ea4624.0","@material/density":"14.0.0-canary.7d8ea4624.0","@material/checkbox":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/focus-ring":"14.0.0-canary.7d8ea4624.0","@material/typography":"14.0.0-canary.7d8ea4624.0","@material/touch-target":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.7d8ea4624.0_1639164638754_0.46229532837077447","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/chips","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fadaca72c8f0e0a5ccdf80d1fc545e3653cf4e91","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":163,"integrity":"sha512-bzQDmc/Y4Iet92n6Qc32/jVRosznuQQqYRX3aj1fYYIMteUSQbyEhpFOsVVNwuXS/Qcfs685sMXRsqn2mkDfQg==","signatures":[{"sig":"MEUCIQD2qPK73zXV1jy18FjpRzg7ETP2uaqNNS8rnC7rhEy6mQIgPDX+VIjtkiGJSRM55KtKiH2EYbh6sVF9jQSLT0OEV7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFxMCRA9TVsSAnZWagAA8KQP/AxRrF2GT9htACQkubOz\noP0sFKpxpw590GYpxCCdcpKsE90FF5AA+kWVbRWOe9VYKWWUxj94qA0VYlyL\nnqERIuakVrueCbGMnIwoBby/YasTNsG+Ht2H3RXwy7XBDx+oVq0p2/NaZAUc\n9T1Rp7oS51FvFDUplwii20x89Xd+5KN4IWZ3WZFg9heeQxKA9osofS7SLpwD\nifWFlD0aMp9OkS0TxNyib3smuMkSaD3GZHsA70CRg1aKM4xPzA5Z2Nr0Yiql\nasVPY3lVGiJpOL4XlOYodoBRO7h2J9m3CxXzWFHfCsPIj7CgBcylEJsMi+CH\nncUAKRZz/Yf9BlHQiv3t8oon1obXCYU1tNzxQpaU2cfY3jh8U9mnI7dfFwdd\nqKCBGMv0Qh/MOkeovHlCg/2mOYIZ1j36wKjrX+ztoCrhDYU+sQx0uQHQUl+P\nZqMfNRgDWN7VSVKrAKx40I1YYi2Ds7NWBAYTullY1TQBIA1RNlQE4afJqrxj\nq+6JG3Hkp6cb5ArAvhAy2kJKWlJRC66myfFRjpuc90bHNQAWQx9RYBbx2iUr\n6ymePQkiTXt/YV7cUmtI8E6TyK5y4ISCFUg0+4JVPErz0Wf/fk/ir5hBXY4C\npNfi1jQilzCPkmP6nStKgpZK8hTS6e8iWCsOKCMyNZ1+S+gOdGa94VbkJ7cs\ngQTX\r\n=mS0s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/tokens":"14.0.0-canary.8fffcb5dd.0","@material/density":"14.0.0-canary.8fffcb5dd.0","@material/checkbox":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/focus-ring":"14.0.0-canary.8fffcb5dd.0","@material/typography":"14.0.0-canary.8fffcb5dd.0","@material/touch-target":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.8fffcb5dd.0_1639472204281_0.29364081018485066","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/chips","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"466b229840e674a0ff547a777f77516c6205a8dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.21e1cb9be.0.tgz","fileCount":163,"integrity":"sha512-bgZ8eVQyjpPLvv135zZH/4hc7pMbYCx8/kURLNCwTopWC4/sZayBy1JNZudrhkpO2obo/nUvYcU6OPdmtM+QMQ==","signatures":[{"sig":"MEUCIQDq0cuaSma6wn4Jd3Hgtca3Pm681RGc40ImXQlewL4tGwIgGRX2AVU0ACgfAf4IYus+y0mg4B4iun8c1XPwJtO9q7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPNiCRA9TVsSAnZWagAANQYP/3RLmdPvNocvhlVE3ogw\niyJw7brmC+RWrPghj3OF9H6O79QQDpNtPrp1qVx9NJR70G3HgRG4GARCni8k\nWoVlqdyKPWEWuSrKr9GglTOyA3NdkFezb2nmPL4k9vYgPyTlS31RE3kkyv1/\nTzi5ATxXGQCq52OlOCX+7xEdOEpGUbfktYz3bkUIHuaRSSywlC3nhtmnyFrU\nkiDNCTZkvM7q+VtMmEMRqiZ6EWNjj2yyn6UXoRwa3/DRe1GUYvPs8f+fPMQ4\nKHopD3pSXMyXtLHZl5xXR7xFsx6JAP2NHKm9oBJoYof/4/E6AyxhPp7kEpE1\nrImzxSdjre30jO3H8rF9/HQicn3uuIa3isHQfEYN0AjK/RGKc6Edp3KDabnI\nolf79LBJkY3LB/+LbUTSmkUrsfKdnyb1kFWV27h9Hy39BSJM1fp5ynqkLK1G\n3rN8MIDsPa4vRAG63ILIfkUvM/MCyFE6bZJsk5xXk2P0NVV2cvyhp1ji6Q8Y\nXXoDgq9C0/k4vapvSh0c7Q/ncS5yffDhBX83a6M0LDX6f4zjueyD2S6TqkVw\nguF8Zj6if2Qw00TRO7sc7u3I7TGcO9ga79BcPeQKgGSxpvjF147xnRkN3iHZ\nLP6mR+sFsDGv4w3pxBWmqrGjJ47Gpl0xxsMxbaYoHp0Y5SDg8EujjSfgxje+\nmPVF\r\n=58n8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/tokens":"14.0.0-canary.21e1cb9be.0","@material/density":"14.0.0-canary.21e1cb9be.0","@material/checkbox":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/focus-ring":"14.0.0-canary.21e1cb9be.0","@material/typography":"14.0.0-canary.21e1cb9be.0","@material/touch-target":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.21e1cb9be.0_1639510882071_0.11091173952622757","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/chips","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0829ef2aeee4cfca0b2112990bc9ae6e5397ed40","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.ba78e8724.0.tgz","fileCount":163,"integrity":"sha512-hy51BqTFeFlBx4YF/CUrl5QNCLwKennCtIrY6YL8ycEEc3oQ/ffgWpr9BR8xCdwVSXcIcOuIb1fawyCyX/fJVQ==","signatures":[{"sig":"MEUCIFJMC6eH1EeP5KqAtf0+uysSpx9jvwk9S/eu198C7L3RAiEAlx+OrUs1VUymX9uA1V9xFHRITK5H8csuvgVzZMZXJfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumjGCRA9TVsSAnZWagAAu/cQAIv/GwaoZlN8YLT4HFrP\nP/OAgpfl/K03NMQGvqifht7gjvSTgc/u1uYoW1eXZvtuxAsRlHY6cw73f+94\nWOV1f3iezntZ/AwiVI7LO0v/Jd7RiVPx2+hMRlxnybfD+sexVR4txnP/7oVu\nNK+lOJe214La5hMPRjfwgGBAqgEw/jcci/fQP8UyiSD+14adPBg4VuSLLFV3\nPaTUIF9cVWWp6zJ0GkdVfGGEiicOhtNupK2V3e8oNmWvEiniej2MxAL47xfA\nHmPK7mdsHS/WqRm5piwgvj4Vr6Tq3yZwEkXYWFhkHS1NA8+GFHxXOXbeyGB4\n66CRbC5AOGavP5aO5IbV+uiPm84QaIsLmqe/Y4HmUnaC2Ak++WcIMhIF5tMQ\n7b5/grU0hP064w8Lki6/35XgQulMu7n2wIC5jkfaFvfpZ2pMDp+SZSZozURB\niuRJ0QTza59Bte3V96aW42NRKreFxwp94yskQ1G76P+NCp929/huIXxluddm\n63ddni+D6JH7akukR/DN8lcFp3aNLDAV/laEJEe606yN39Y92fjSi1MUqI0B\n8M8NCnb0mR0e8wbMia7ZoZKhqAz9lSTuRbtkrKbO0qLXhsNsQSWWfd/IXFO0\n7zkpWhI8uy4PlfdYxkp0iJpHlbvwELHg3GG6ZI4IYtenl9E9uWKFsAhL4fsf\n5bKr\r\n=nxyZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/tokens":"14.0.0-canary.ba78e8724.0","@material/density":"14.0.0-canary.ba78e8724.0","@material/checkbox":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/focus-ring":"14.0.0-canary.ba78e8724.0","@material/typography":"14.0.0-canary.ba78e8724.0","@material/touch-target":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.ba78e8724.0_1639606470050_0.3336894564045807","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/chips","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6403df08b8e5aacc0c5290a4258285eabdd1650","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.e3e073c00.0.tgz","fileCount":163,"integrity":"sha512-VjV6E9P6LNiihq8zNiwdNlQPb/N21vrvS5W95fIuk0z/JHg6y7TUAX6+43Ow8ZF9RVoxk2cXRGT7q8Qvt4/ZJA==","signatures":[{"sig":"MEYCIQDt9Fd/9nOI/C9A7c6O35LAipf4aT5bue2RoIZXebaYNAIhAMVqC4haceiSYOgG28kJULTaStTWsFh/mCa7d/V2ToMj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFvCRA9TVsSAnZWagAAAIsP/3AlOzdSNBe7762hyAiS\n0DLSTna9s5tUr7dxRczFJZrp0fDgjwDjmLg4qYqZ35K4ZGwxba2bKt/p5QYh\nGrFXGGHZQSyik4URLsGQx3R1N+pSzI63Dc5EUVTXvdVjArs7Nug5gkJoQwVq\n+1rm+KudrK6BT3b2yxgdlR5y0iAUkWcPzfMjuSd+Nq64ErX2RY0vfkNsL4A5\n6bubWioWdDb/mU20Fj4fyKMoTBscI0r5KTPHx4PJZGCDH5DMXdQU8T+JEbMx\nJKJZvzglX71Xfah+0IR763dP3EdWTLnbarq/DQWad0jVKFOH7GUfvezl/auM\nsywxFv4zUjTIHHfStSz0iZI2gj6GZtqJWt1JjMd9TlyWdOuv9XtRLR3ltFb/\nUOJtJ1NuW1+K7SXi1qMC91a0CdK7hpUUfdy8Nwet6GVpjC2D37lV3Ba9RXKE\nlC5vOo9M3zEsUjW5SG0CQaUQ5Q+Ai473JXOq2orCS7gCsqN02IOv12/SGjP8\nmkSaPeVv9S0Q/mU1d10cgL9n9ClOggV+rDXQ8bzwJ8bKBi4hQPolldU9a96c\nKiAlgMKE6ZIj22aclZbN9yeSich+nHCE4ul07MuGr7sKfXLEpqq61eo1IEta\ns+iVdv7frj7UENsUACHgdhhoMenRNXUZH+lcW7Xt0S2Ejv0DViUX4IM3fkyT\nwKq6\r\n=8pus\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/tokens":"14.0.0-canary.e3e073c00.0","@material/density":"14.0.0-canary.e3e073c00.0","@material/checkbox":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/focus-ring":"14.0.0-canary.e3e073c00.0","@material/typography":"14.0.0-canary.e3e073c00.0","@material/touch-target":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.e3e073c00.0_1640034671450_0.8285577081753159","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/chips","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aa9609c9c788e0aeceb0334b5e8267977e41b2b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.3366a71d7.0.tgz","fileCount":163,"integrity":"sha512-oLTA9NrAakZ6KVPa7hVix2aqemaA5WW8dJwRxMkhrg7cec/XvKodNjrJpa9n9GpxuPoaQW2z+dAbGpZwWDwiZw==","signatures":[{"sig":"MEUCIEAd7S903UoomxP5BPxq9plCcvIZ7CL/JA4g6DaChwhBAiEA/SRPNfAdfAYG3E5fYOQ1ACLgvYK68k3iaT2kWo12yaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsvCRA9TVsSAnZWagAAsSsP/1bOka01QTrk7ppl5sRu\nQDQGCiui2yTDiqOw15Zkz5NwFlATlHvjpdCRpNszXS/L1rEUs2qBRfkC0KOY\nB5n/jPgtwkADGzfJH4incvZjXTX2JQqPpolXdHsmt8tBxNKGJfaaKx4bE/Jv\n5SmoZy9z+rKDjEL3Pl3IyxSeSxr9ogcL5zAzxjOgq3kHMY6ypscxrg5QCY/t\nwwUonsUKWd4ZXRB68ZS2ZPDmTjlXGBbVBvIMDpLOiPOROvR9WpUvVDolp5Wj\noGzaNlD3AhQYqIxUg1v2DHlQ8/H061kstPFwvASwtH0jJ4pbHzUE3h33SmsI\nmZmqten6YAjhg3nh6KAbXpSeBLKsp1F9p8W59hRR6w2OOjjH179Bb8JoxGoS\nz3uNWYFGOG35Gd43WBweW7Tf/1orekSZH3QdUmWiGTZIIGPaXXSq0TGeckGg\nbbTVta1BV6abgrOQNv+7gt6qHX82DUYMidbSyG4Alrw+rxHd8wRZvtWExKhR\nGE2fWsN1kqc5qzFEcZnMB0djFb/sihBBABZowEkembSxIbLSkW1fElJgXK6O\nuBIWaYcWCyCUK/nAuEAMeDUU10RtBRqdMFgIDj0r9zMgTDIQGReaZFaczSkC\nl6w9j/Oc9ayKb/4bjZxfqt8NwcMDsnWggU7ObAPfZEAAS4vcX8qT2BExABBb\nYAMh\r\n=/F2G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/shape":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/tokens":"14.0.0-canary.3366a71d7.0","@material/density":"14.0.0-canary.3366a71d7.0","@material/checkbox":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/focus-ring":"14.0.0-canary.3366a71d7.0","@material/typography":"14.0.0-canary.3366a71d7.0","@material/touch-target":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.3366a71d7.0_1640176430836_0.7663564218450829","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/chips","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5b8cc6140b11c4987d1f3dbe7deb92bc8bdbf3d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.c047f7c19.0.tgz","fileCount":163,"integrity":"sha512-YG8pKe3ZVHOfHFVC0ctn+CtOaTrJc8klCcmXpgwlhT9YTCNjrWtjkXPZYYzQ0CWwqzv8Cii0ZMeHG4DCaGQChA==","signatures":[{"sig":"MEQCIBpENjS5gATUv+lM47OAftMiTy3U4SaGVzY6klEI31P6AiBfElLJQSOn7Ue34UJ/BGY73t4isCSSv4oqGfrBn8Po1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cugCRA9TVsSAnZWagAA6aAP/RGF70zHqcs6DuU+xWnD\n8Qq5K2xVMH1NoA3StCFHrcaE2YCCwzBZ4l2YU3WN2YNMWwzQgY6gcX+sn0EC\nRp15KS6V2zjEdzw7lVES8KZwFO1I8W1l9pa4u+N/rPIq4HEZdOhp1uaGsdCK\nRP/8nvvXRXevu4WFNMmFNyF+qgGuquSPUrIs3sBp2FwuOkIBQTFJygDK3DZO\n4XJUnWiEQva/vxXfvIgelcjUU+Fxfvu2w7DH50twevWEvdMFEyX/YlChIz6n\nskrCIh7lO0bUuBc9oY1qoqXNkBklj97jSSy2WOyibFe3+D/F8JmTmOPDtsoO\nK888PCuJ3+fBdKrJsTfMBjoP80Ye5AivoU6KqGI4s4/9kTMjCS4zcBcM5lSj\n9zrHUkCw+hjDncUR1MezazTPp5Jx8LaGe2utHUXNX2BazOgb7EnrgnFRgDIp\nu5NA+b6NejBz+p6hV/G6dWjXQY/t9PdkO5g+CvryFf3Spgs+zsHxFrso5wHk\nRDplXEG9Q+vhvK3iS3NLuJwn7CGkwpWCyEtH2fEZNf372+7hohL9lr9CjEDG\nlaU5vfK/w/zILVTg2v5S66V++lFeaQsZgEGAzO+YJ3EOYPEl5ECOD1byl+CZ\nkM534IOiSLxjYGHyXhFhHDlUiYtaILh9u4uEm1wPO3FMtaOQMbPNT6ZMKAk8\n6PyS\r\n=0Cex\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/shape":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/tokens":"14.0.0-canary.c047f7c19.0","@material/density":"14.0.0-canary.c047f7c19.0","@material/checkbox":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/focus-ring":"14.0.0-canary.c047f7c19.0","@material/typography":"14.0.0-canary.c047f7c19.0","@material/touch-target":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.c047f7c19.0_1641401248637_0.9701571023340443","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/chips","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e64b1367a11b91fd0a0d1630ca205c3359ecf0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.05db65ec0.0.tgz","fileCount":163,"integrity":"sha512-xSw+73i1ei/F7vnxVIbh3G1cdrN0KkGzcOdLjJqiiyYBsYEUnwj8npGxYQAwWjgXdljSvsNesJpSgWGQfhjLAg==","signatures":[{"sig":"MEQCIHZvZNiJh/UIVKRT2BqQevIkfUY661mGaPTZAwkni3snAiAbVWVbT3sRKuEqRnZRkNjP31Zn63eJaC9u0xHlJ2LrZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yO/CRA9TVsSAnZWagAAaw0QAJ+B3S9DrxDNc9cqj7yc\nijwq2zQrXb/4Q9FA3GJm7SuC/uDztk9nb3JSuTgfhVH7/aZINjO9ifI20DW/\nPTX/Let1VFOTIwXt+53DoHvjuU5B3V83p6i7WEPLuAqXn140Jy/nvklZmHc8\nFresmH9cAIqAVaHJKJQtN5824CyHEKhBFhgDH/8NcTJYF2FhaXgwq+Uromhm\nL5fNtU21GVhdRnpFBwPsPw3L1BeYWbTRBn0ee8vFKy3WsuByp+kqmqy7h2ti\nKByaoPh7SVyV5eyZcZobH4fListkWsqqudB+C7q30ebqIY06JYVnRbBCg9bc\nOqVc/OdjpqSG/H6YspJXF78lQf5Dl0O7wjn/azppxOQ/mJHFSwtMiD855Bgn\nfjq6VeMGn8Gj+uSzBkBWA6kufC66P9cCDBicF3ONqCfs9Z3kMJHSKIjJZgio\nvVMcAp155fi00EyJWV4S7nj8TAUrd0rUDmNdbm+tYi49SoSDqd/Zosh1n5nx\ns/zJ4+uL0ChNaiiUFso/d3N/5EtadXd76p079hh3Oeqx1eEjghiuhhrCrnGH\nzAqUSON9p5QSBUHbHZMUkwhtyIPe8dhIQJerV7YbCmj7rYA4RCNgjjOz9H0T\nWfT4c5hjjxvMqPeK0t4IyF8Xj6Gc7HdstvJhpUQ/VVcGeugu+dS1ARjxSVMi\nrrXh\r\n=H37y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/shape":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/tokens":"14.0.0-canary.05db65ec0.0","@material/density":"14.0.0-canary.05db65ec0.0","@material/checkbox":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/focus-ring":"14.0.0-canary.05db65ec0.0","@material/typography":"14.0.0-canary.05db65ec0.0","@material/touch-target":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.05db65ec0.0_1641489343670_0.62322192213572","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/chips","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b7e38cb1099916ef52913fbf39ee3f7c288886c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":163,"integrity":"sha512-7V5p/HadnKKVRRBQIqCuhCmp3cMWACn6NaxG/TKXMlUDqKXbbAeI45G7YMq8lJDlh03lMgO2GLbs1EJzvwilWA==","signatures":[{"sig":"MEUCICC8edk9KC9TxUkQxdHpTtlRe6lGoU9YyIDEK48XLideAiEA/R0K8k3h8smZamtpEnzQyubGB1ZyJjfaQHZv6m7NvSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQpCRA9TVsSAnZWagAAe1gP/1AoUxbhfQKr3DU0N30P\nnv0xs9RVgUdjKKvhSPOC488Ig2yzF9enNaX4v+h5kTB2BmFggsGDGr+69xFm\nNN2SAnvdrH5ETtrH9Z7JiUcHk9DZgwFE9LzOEN25qahrtSaP/gzyBi9dkXZ/\nG62h/1l5sWod7AI/V+IrynHS3Hu/h5a/Zx0IefUv8CZfEfzfTZqeqcSxS92U\nJRD40egjq9/PVEdzam18LhHK+MPs1JlQc/edtktRohKAuiIo90cAfkHT0Ewh\nbDMV8loEkmOVom4Jf6FiAn0GuM7vAPnpWwxDVeqxeEwA99ME2oJ9G3hpCSUv\nNVNi6Qbfswo9rLs39pY79n8dZwJS2lJuSUffjgby+o1D54YGTCGk9nQ3Q2Jj\nEZJAf9AZUym4avxfn6NO2sE9hL90jQndtAY5FCjcuhvTjKDde8XvHZsN5mHe\nKpVkdnpWhItsH9mkskHEgHVIEDE6qiuBfoxzE/XITARoI0inDAlH9caoL4h7\nqeLVxxmyXvxHL3QYWbWYW4wp47KNLuMK4/Oht22CmqPIqW83w7kwS9YsEpm1\n+z7gYg7+h6XveT8V7mqbzXjL4Z/NpgHlwygTyqG9ctp83B+eCbkvSomKWbOs\nlsTHfEXPmS8rJsepPOHqIOVzpwq2MV/CPBfMJ4KCCJX5MPn7/h3mISu7zch4\nN5pu\r\n=vp8I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/shape":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/tokens":"14.0.0-canary.6ca8b8f85.0","@material/density":"14.0.0-canary.6ca8b8f85.0","@material/checkbox":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/focus-ring":"14.0.0-canary.6ca8b8f85.0","@material/typography":"14.0.0-canary.6ca8b8f85.0","@material/touch-target":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.6ca8b8f85.0_1641571369453_0.31489671846396683","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/chips","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a3fd4a522375a2b9ba6473bd9b5eafc8eb27fda","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.173ee7a7a.0.tgz","fileCount":163,"integrity":"sha512-DCZolHcJTGpMxmGpJXCOv7Qjm5UuVdNVNWTFEA8KCYarg0L22KfXlr1qtP0FaNtOZSpYjp4JbWylcl46c/EhJQ==","signatures":[{"sig":"MEYCIQCBSSdmiFTQm5IBYrNJeh+vTfnXfp8wBVyVg5Y32REuTgIhAPOzc6gjvbyju/vA7lYxvSW1PaAD6PvTEW1QP4hwPRJ9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GUVCRA9TVsSAnZWagAApJAP/3mXID3O8NJZ46AhNtQQ\nIaH+U2EpW27jJlOhI3cRSz78+uLpQhEodX1G98iPfJFDgCcL5As+xMPf3hA4\nSDf81zEW7sjiGgqylx2GGXS8HLF4TVpJTZvB0aeBB8IO2f45mQ875PvdjxOi\n+fHDI/5+zSYI4vXsYohO1PVsJaRnjm4d5QZILNUX0DJvHonhBMXJUQDZBG6M\nhw0/sYQETiG93/O20jmClmmNL1ZrxWjlSLBOF/gfasq9WCbxsXx3ZzYmFFjP\nt6WRLeB7/LhHtmucdu9sprzgIglP5CfiWurBwWK3hecU4uZVSiF7fHOxNlFT\ntu10avuUx0GNkVi2LIwxFJo2gth8/D8bURwilyMRWGSc4Zgp9kZVGQ0abeuZ\n6wfjouv5gtFHMOPIlm2+JSvXStS2MbpUBVrgMCiLYwsdeLQv3IYauuZTjIFV\nh3O9d+aT8npR4AaCFik/dl+kVrN9lOcSAEg2WavTLe/k5XRuRpV+LgEsd72n\ntR1R9CYfEe4Lzsy7MoRowSFGYO0+x7NPLwFhi6C64EYQ7jJPHvG8Zv0qwfS5\nDl/wNALPgap+Y/pEGBdmo10MK+WLYluSkxNXkn97WASz8kPVauKB7qHPx53u\n6aw4uUwHjltjRC803F+fexc92r1cTkZPVpFyJ6AXIR5F/HzsgyLPBAYWxdvC\n1txJ\r\n=Jcue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/tokens":"14.0.0-canary.173ee7a7a.0","@material/density":"14.0.0-canary.173ee7a7a.0","@material/checkbox":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/focus-ring":"14.0.0-canary.173ee7a7a.0","@material/typography":"14.0.0-canary.173ee7a7a.0","@material/touch-target":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.173ee7a7a.0_1641833749276_0.22700193356087284","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/chips","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5bd8fefe7302141f3d59eadb59d37657c6bcce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.b704e4dfc.0.tgz","fileCount":163,"integrity":"sha512-HlQuCRIx7mlnxekwB7pchokLPYmQ2n+dIofwE6HyWkuQMZsoHsRmX6EhWNnIxXecyndN38v0jTHHzz5d6K4qPw==","signatures":[{"sig":"MEUCIQDNuOm1G6oSkjEOPVMsuWW7vVGJ4wMRhDwWBIVnQUdjEgIgfIfsclGqwz3E4DPOAmaiY9Q8lsvmjK6wKfDN8oH/jCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Hw2CRA9TVsSAnZWagAA49oP/069deuGAm5LbS6CKfK8\nDtyCdvJVboTrsAS0CNS6oojahjBsUCpOckkUnbg+ELK8d7Jy5RdIZbs7UHkH\nVXmmca+uYFdq6QeDukvfTElIKbGwpvrB1DAh3hFoE85Au1OGofmyuAfZmBN4\naTi35J4Pn1gG76PcmSSZzCESCTz9Vykkd28u9RmdqypupFAjzaFmLm6TIw1v\nD0QK6jH3AzWMky4ZFGxMpbS5MrHWX5Yh8UkkZevUawX+dlsf3j9qI30LHiCP\naVZ3oYv1ytdRTrRVLLMSlzlZsU3MEYjPVeE8Ef49r2PdlCJU4tBJMxtZIRlB\nPb1zvYAU+u7FkPz7oaz/fEl2wmEa4ByAGygzizrw5beuEyleVs44BzeUJkGa\nuLepzI0HkgJDqgP4Xaw+5Fz54lph/3Rkzje6XSxWXWUzlVZazla3ypmLw7me\nd5DwqcoQYxpe2D3ZvFzzKlKooV8RRG0s7J7qKEftUkyPbn9WRFwClXxNTbl+\nO/C770RzUu2id0LIRm0Zuu4vSQFvhRvQpvkUyyXg28YnvbEX7BS1J7VhavRN\nGjrEKUHAUBi21RkfTuQ41hhLuAB/JQLwx+ufWxzEGeML3alvw7V/Irvn4OY7\n7xvttZNVBZvi1uHHig4AFcVaYVjKOr9BJ8Zx17Hs24UzyyYUu4zpzWPc/bG1\nKm5l\r\n=wXXT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/tokens":"14.0.0-canary.b704e4dfc.0","@material/density":"14.0.0-canary.b704e4dfc.0","@material/checkbox":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/focus-ring":"14.0.0-canary.b704e4dfc.0","@material/typography":"14.0.0-canary.b704e4dfc.0","@material/touch-target":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.b704e4dfc.0_1641839669925_0.8743926366524457","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/chips","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbfd9915f99fc2eff5b597c67fb25b436e3906c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.c14e977ee.0.tgz","fileCount":163,"integrity":"sha512-3EDrVdU9DLlJ3X8CRbaqWmpSRBnF5cqcxnSvT1m9vAw6WXFKFKqCqvnWfn295RKRdTJc9QoP7y4V33tx/Yu1lw==","signatures":[{"sig":"MEQCIBkRBUTU2XXbOnC4ayTd3VqOtJH51q2UlBuyjvSWVrxWAiAAtUaptf7BpmlrGPBaSdPTcoOWJq3cvWr89e7+uhHm2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1603755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adrCRA9TVsSAnZWagAA5F0P/Ao3iMTgdVoz48SlJpiS\nRo7jri0785VOwMLl0bm/uWgklfqzooOzLWmPXESpNj0dB/X7hkeQwO2yXjKP\nQ9kiyCogCrqNSIlBfF85sDT64yUz1U7nMy0PY1qlQslHkXhm7HmXrIDtJNjs\neaSDNbs9ca6M7zP+IvJe1WreAuryz+WtT8zsJxegJkAlvQsM3La78505UzAD\nBnuJ9U6gkzZo/5kCI71YihL1Z4iNTvMMJJdNdimb+3YQ7zvpROp7PIIHUXUV\nHQa232UBzyZU1naJTzXm6x7YGJo9sfAwkMbcHerKmC/CX663nFHnRn/SEwWk\nPdas5rWGCit8rytEK+cFkPcHCEv2phTga0Ok7ZELxNsG8V6W5c1Zv1pRReJJ\neFxpHcEQyxDOrALDZxcLSiBbpmYk1gucj+p48rRGp4rWAd2C4x/lEDtVP3bK\nrntwzAgoB4JLhv4kI3DLYLwhj5o0aq9EwmbhmLiNM9yzuPuHGxqWXZ7hLeuX\nq8ZYtWcs7HfPkqgK8tyUNe0K2tD/AckoRBh9Gwh48R+sDplrZFxhUTOciG6n\n1GegpgneXyMF7Dw86IiEeQE8NR4fz70maVWUKq2vMrvIkUQSUaOJ2ZbEm8dG\nw0Qyq78W0fT3cqa8B+6nJ7FBCdPIEMJXR79s57BQ24piRJ01wNfEme2OeuX4\nQAQ4\r\n=0/RV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/shape":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/tokens":"14.0.0-canary.c14e977ee.0","@material/density":"14.0.0-canary.c14e977ee.0","@material/checkbox":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/focus-ring":"14.0.0-canary.c14e977ee.0","@material/typography":"14.0.0-canary.c14e977ee.0","@material/touch-target":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.c14e977ee.0_1641916266956_0.0954520745950016","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/chips","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab9d4883980b10434bcf87ac96efb7ce3d657f5b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.b094eaa4e.0.tgz","fileCount":163,"integrity":"sha512-sCaYZXMXaz1kmOz9yXKwzXUnW4fIchCBQj9wR0I9mbcoFYRKvsTUgJSqZXFtmk48XwJkCeO8juoF40CX8amTLA==","signatures":[{"sig":"MEYCIQCIYLRSZJm/fKZ8fQYIhT3/G0a/MrPhkP+Dkv2KqvNgjAIhANzRIxc34ha9nlXsxKe/ouIXAytQHtCSqMMHJzqDR/4s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1603755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRpCRA9TVsSAnZWagAAitwP+gPicw/c3IGRUvl2EBIp\nI51eKLS1Wq+ANaLNkomUcPCnYnJfeRpdiW60w5RgmdZ0kEKwVaHFuV9hI7vT\nssQLKH+aOKzZZ3axpprluS09sEoxs8mF/q3IQgTPqx5oj/myP4Av4roMzz+D\nTyP+XoFzFotlF3hyExOErNMsEXodhYKF3w5oKpT3GgDIcYNyjIg3Z7sNdQLH\nheMkUXkkJv+9C6VIvcIopVrDvZ2vnAcfmRgHASacTNuXsIKNhfb4WSTRRdJA\n1Orei3RtXAOBmBWJ0aBxr51d+LG0Dy4DiPx3C80AppUiFGOQQq76J5pb6iLY\nagE1hvQ863rA/CpIhfQqLuBZc1r4uxAHV/O4wa+uY7aFqkrjnvpbV1/6IuyM\ndvSJlTjfG09Tq1MKsA8eJhV5vSq+TdORJ81zjbiZTCQpr4O5pycrNxuJJdrP\nEEuu4OL8M/Rkui1JXDdM1N8cAe2FNk466wgXYLSCjwQccKtWH+VvDjNt3yow\nc+wKzOr2TU3/GgBJvUMLR04TaLAjrKIhNemdQjwaP0MzbWcRReIXTorSZ5U3\n0wIhJNpyP4AGbfNbPYGvvRTRyryH9vWPH/HTbo5b6wC0Llz/aAMwOFytRGuV\ncN9KXpUI3oYmSzp3VpX+6lNC+449t3dfXaGovg8xNMeqh11ALsQjimnPfNzB\nRIC/\r\n=Dtg6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/tokens":"14.0.0-canary.b094eaa4e.0","@material/density":"14.0.0-canary.b094eaa4e.0","@material/checkbox":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/focus-ring":"14.0.0-canary.b094eaa4e.0","@material/typography":"14.0.0-canary.b094eaa4e.0","@material/touch-target":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.b094eaa4e.0_1642185833312_0.16283970969256623","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/chips","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.390220e42.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dfdb63c158c4e9017bc2413f7381d744cd464aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.390220e42.0.tgz","fileCount":163,"integrity":"sha512-6e5elvr7lLa3GzTw8jCqDeuSbEaLuEBbo3Cu7QjfghCgpbpS/MiZnCZbeRHViwECGoxDSBq5MLx6k0WmZhD/GQ==","signatures":[{"sig":"MEUCIQDm3+mjdzrtaFBEmqLyZLQLZxujVkMINPUPfly3autqJgIgTRi4eKrf8JmmSNGLL3e5kHmhZLOmsZej+I5ANgzPNkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1603755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2uCRA9TVsSAnZWagAA0RIP/A4xt5LX+jEFC6uwHkwV\nfMnwTAqvUpj05jWiwKFkPbJuKGIIKD/fzAlug2uiKOwM54gLERr2M3u0YmEr\nTZTS6+IhGTrSdVO1leJTX45p85tOLtLVwZrknjfg8we//KJns1fwClbuSPmV\nW/UZ1U5CKqIJHsLoSoL/WVWBCjPvRaFptrYbi03nfBHlmFBEPEqLp/vzzMXA\nMcCvNkvqEFYklvBuDPDuL7IH8BgQejWSOWo5/lTZnH0qrIAAqzqWW/WABzEv\nxZ0c2NnZmn7ifhlaW0mFaHfVCkglCasHeZ4sL2tBNszem7eHx2/ueUoB7hMa\nHi0qfN50nC7xz0qHBZ8aWSir8PXAFmywTdbO5gByMR9uZNDhT5U196ZZEz63\nkr+y3Lwlm59iSGKyuB53m/qwrGx117J4cay4c/3N4Y5bp/A0pPYxR/WyjQo0\njsA3jM8qR29wXf5l+xiA4yorpCrJokU8ugSOUNVMV75lGp5PA99EgauclQO8\n93j+nNS8/dj3rCZi87MlCLqVFsVawrQ48PoBJeQBsA3VfUKOF1J1loQJ8oqv\naADeXx2mQ944UtHkpQZDeQZJSehow4EMLjsgFitk9tMnijNfICIDpwyI/cAe\nz6vsVT42XupZ0kdswSYn1UQOCVCxOElqnebFS2k3b4oGmO6HkNbRYzNkjaqe\ntsO4\r\n=XKa6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/tokens":"14.0.0-canary.390220e42.0","@material/density":"14.0.0-canary.390220e42.0","@material/checkbox":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/focus-ring":"14.0.0-canary.390220e42.0","@material/typography":"14.0.0-canary.390220e42.0","@material/touch-target":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.390220e42.0_1642438062544_0.030266730941812536","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/chips","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2a4ba0cc43b72ff2f47b3f2de074727690ffe3a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.4b5391f8b.0.tgz","fileCount":163,"integrity":"sha512-V86OiG3trq1qKA4XkrLWtO4LzB+XiohzpjoshwiJmXpgL6QwSW2N9f9XIkSkW6OWWM9pPAx+w0drmLNPifi//A==","signatures":[{"sig":"MEUCIAzlomn+a0rwy6zSygaJu4SH0FOEEFLEmOHx5pW8QgphAiEAtWHBvQexu8x3DI5C//85TCqS8N6hYNCC11l/s2YGDkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1603755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSqCRA9TVsSAnZWagAAkP0P/AyAYwhcySMLR9JhoVqI\n9d9db9sFYrd1EZlTDMyJmJm1lCkkWRsK4wFkoU3g5OgYp7h6KUo3OaJJ5L8G\n/vLCqstff2LeBid8Xt/crwCHSJKbakv+atOoADzmt1mK2I3eEp2EyEr+OrA0\nkSyDtcqCrQZBRk6AKJtD0xm9BIfaOGWDFef7RbuU/YcNBL7nadYBPVi62h5E\nWPdMQufueSqUyKcdygHVzrMZjKZ+fUvqD8xJt66j1Bza3cGRY3pbGC/+0E/l\ntMl4h/05NUn8fwkvJDfQ0bmUnCgYJHHAIZgSFKOcCPnhtEdobcr2yYNkgyDm\nxC53mGwAryXgLaYa48IaViUqgMRgM6v5JaGQRpbKI0RXs//Zfsj8PK9o855g\nCuwYVzTX7H6ck3CI0SbZ0n9Zx64HLeUIvGSTP9NNkLQb1EjlDskjftJKBLN0\ndGc+nMcSikXCdn/pKx2uPsxgmRUyZUNydeVTbw9EaLEFc8OD182z28fjPA32\nZDtRbzY+Ll5fef0UOLX2xGCcQSAC2qWpMPyi+jrrx27KC9tkE8Xg/W7n+nW6\n3HFlAwuCBnFm0hrqRLoDL+RfFRIspQQPvGJvhaJHn+O1IA49DyXI4Dwt9nkl\nqWjyFkLRyZ+Xiz6jLR2wMh2DwyYjc6UD25STpGFwerJYVEyYu3Voe437v037\n0hFr\r\n=a1Nk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/tokens":"14.0.0-canary.4b5391f8b.0","@material/density":"14.0.0-canary.4b5391f8b.0","@material/checkbox":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/focus-ring":"14.0.0-canary.4b5391f8b.0","@material/typography":"14.0.0-canary.4b5391f8b.0","@material/touch-target":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.4b5391f8b.0_1642636457790_0.07100902550626276","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/chips","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fac6d9f7d851b02d93930e0a8fb6694680652198","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.cef6bc623.0.tgz","fileCount":163,"integrity":"sha512-6jJSNvhs3QSUKAQ17Wg0l9zQEDola5HIhLSsxOsLUoaYEXCdMgCjVhn162MA3NkAEhle7+V3BNuZ0yTtiv6bwg==","signatures":[{"sig":"MEYCIQCUy+deSgXWYD/MYL/nBUyt9mIT2Ors8JDAc3DnS5OV6QIhAPok/4xStAbxjEPTaGeNgBhYViWz+423vFDWdQSPnBT4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6Kp3CRA9TVsSAnZWagAAccMP/iaqmkwNPBVAakjrVZFW\nAlvhW3f0OyZCqNiynT6Pcc8ZdTVRgQyTO4kasmGGTr9ojKWoLxMIO6D3p99L\n52jh7A+wHU8UZKeDZUACsSLAF0di0IFgq7qlEpOO0p37zLIr01THSpm/N8Q+\n/AF05hnZOZZbJ9Zi0xtEQuKfvEMmifTq5ICXPqmpd3gKlrf9KVzccXhfRiI6\nfkng0lMZ6kRHAMsy07CtsBQJdGqjNUkETTsByJjCfIDGjSLB2zxERYNpPWTa\n267PIN/Xu9DQI+U76m9A0Pz2aB8V9qU/ms+bzfUXHltuP5rY7q8JMAzRWvRv\n44mbylhBV5Sosl8PzJZlKFak5X1d/aptqMktZYpEqfrucw4aNGSEYiR4+Woo\nl+Pw/vMqA1uK2oc8yqDY9+L8Sqt/1Bk1cHr8/iPJs0l/N36ALMYvvOA5EsHW\niFlEvyppi7h/uYXZNzvJoiG5b4jByL4b8sArA1e+uS0m6J4ye0zSjtcHRiX3\n50g9rybvyxnr1cl6HuBmBhztfxJwd9uEP9lVckVrQiujsg6aK5h5vDtqON98\nzesadX1jB9oZN0Z+LcIPuJFnuFBDEgEptuBb5TcKg+c3hzOPPDWhB50r533V\nBm9ABoVrnB8zfaTnlSzQQQs1j9e41UL9o9KZlVY0KaPKFVJQwhPLZmyo940Y\nzNYt\r\n=JJHD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/tokens":"14.0.0-canary.cef6bc623.0","@material/density":"14.0.0-canary.cef6bc623.0","@material/checkbox":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/focus-ring":"14.0.0-canary.cef6bc623.0","@material/typography":"14.0.0-canary.cef6bc623.0","@material/touch-target":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.cef6bc623.0_1642637942929_0.7296545505878347","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/chips","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.0379179c4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b97268958d611fdb0ea7f75ee2ed8246a06a253c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.0379179c4.0.tgz","fileCount":163,"integrity":"sha512-9WYKOpaWTtMo3mZ5duPrHBp8WwlKdbQLuR4fEcxy/Mt9v5PbZuVjkqIVssHzEnN6B2HYJPrh4tM10LBZtGyXjw==","signatures":[{"sig":"MEQCIG7N/x71XrDFbIZWiHyOQCRhY6M4dcOwcY1f4KnqaTLvAiBihxOuUjtsLsXjCdRPT/LSgr2iHOiJpMQJW5rzTa2H/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bA5CRA9TVsSAnZWagAAOMwP/3/YsVjwf/t2VCyLsWe+\nodXnbk8quob+XQ2fNqemQnrTuFSLYVByvpSy2K+1Z3P0H89OxfdKjZgU/TER\nMJeKgr5AQTToriTUNqoFHStYli+rPcvlQKCzxr5mkKYt4gCeyEmPUBccwhls\nGZaX7X4SnwfshWFkrOLdJZ0i+OBeSHQ55z4GniVDQyheHkgnwmEgQzcbaJOu\nVOfbSji4wwU6cypL7DXePm0Lmj8hOV++BgHkjtlncbYgwk76cdJDA0eC6fjM\n/VTdXKnSsmSqTaPUzZK0T7U6NYUyCBLemsvMNmPO0RSyDFOjnlPKWENbZSUp\n0LildXlKvNliX0VKsc6Z/XJjEMhbTWkJsEmlpmhGrXtCDAcM9whVwmKu0n3Y\nFcrpzqIGUHc9noFopmDTE1FkPfNwsw1te51Sa4/hXOKpn1D/AZUJ2gLHi4+D\nY9mG8Rvamj7WIBrJuXdLxdncb2VxBmV3wBdAF9O8+kDL9eWXkWPYKuqDIZ8q\nGcK6lJci0gyHT++WyybkFCRMseDGmQzvcgh5U+PQ+f0jQcwgdoxXCqbGSHBW\nHvq7oBHginl4QL5aRnshkeeF1gkUAs42SaglbdMoCRrTErR4NivLmhqn4BfN\noHliIgJyIy9jTrLgUe6HDkoG7h+mYJLakQoC4LnelG42N9CRHOc5++jtkG72\n4Xvm\r\n=THsq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/tokens":"14.0.0-canary.0379179c4.0","@material/density":"14.0.0-canary.0379179c4.0","@material/checkbox":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/focus-ring":"14.0.0-canary.0379179c4.0","@material/typography":"14.0.0-canary.0379179c4.0","@material/touch-target":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.0379179c4.0_1642704953074_0.031546394332470085","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/chips","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e0469130d844c6ae0eaba6767b5b8518b675395","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.e62f3dabf.0.tgz","fileCount":163,"integrity":"sha512-4xrTbN9ipmvrO2WLMjNIdBa+rFuY1F2G7hBSRJB/AJ8SPXYNFkH+0+yvQFQRwnZryt/kxPqpL0Xox4fJ5NIaEA==","signatures":[{"sig":"MEYCIQCA2xvqzKCxObZRnNfWIYb6e2GHHIDkV0sFw6eJyk4gwwIhALcuhtxATJX+wQDEh0bzMVQpkgKbDZ6k0tBImNd9ENku","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zwWCRA9TVsSAnZWagAA8NYP/Rr2Ka/vb+DGL67OZqpb\nzeiQACCj2o+0bjeh9evLvc4OQ+qMvpuwbW6kb0gGhgEP+Oj/mAPIepi68rMZ\nSQ2/ZKgVPEAi3Yr2TWcRWByNFSZ/+cv++I7SDVhuWCh/dSdVMEcK32S/rcrN\n6vgXykfxyGi709KRQyisCjjDe5aMQoSQ4UzTaX//os3hLcf8yFV02jlJumgg\n8yOKg5qDgXHUCxDebFL4nNHcKQHeB7XaNopaoSQmUeCI/wOfc7GD27WGvx66\nITfy8t2DSW9woBVCfG2Mm5uhByiySttmoLtt4jj10e9nEzESBestqujUUm+c\nj1zbhxx0KCzJUCWKLo5X/7L+q8LB1DLkr97yAUtp5Wsd0DOOxjFV5sFVZWsl\nZ8XpDyyeJXtcTOEmWDpCGJIJUd5tN9mFUe0MQ75gxIRx2U9+MMqG0+yzk+Ed\nrpbCCrGn8IBB2QTXs/oP0Ba7oMkLMBF5N5o+O3CEVIoDeqnTxObeB4a+b4Pr\nRy9dpbvbN6FIkQYB9NfkbREypVuQqfxhWPF8pQ9/iXiLmYZSFyq2qpHfMyuU\nB65RkEu8guURWkgqt1pNshNt67TDJ1vSL2G2sPDh2nDyidHFxb4SmyaBOdbz\nh1O8P1fqbOUv/36l+Q2PxURlgSaWkc9vsmP/2GmSb/ON0Cet5U4rIaPV97Qw\nQDO5\r\n=N3Xc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/tokens":"14.0.0-canary.e62f3dabf.0","@material/density":"14.0.0-canary.e62f3dabf.0","@material/checkbox":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/focus-ring":"14.0.0-canary.e62f3dabf.0","@material/typography":"14.0.0-canary.e62f3dabf.0","@material/touch-target":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.e62f3dabf.0_1642806294301_0.32012589872902253","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/chips","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f97157660563cb93e96c486335632de7ec75c465","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.3e20c1de8.0.tgz","fileCount":163,"integrity":"sha512-KX/a1KFcm0oKheSejFr67aXaDgbkiKNxmlVqcmJ8QBf93vFcAr9RsqQx2IZvPwkeAPyLcfJH4Xxi2p13bbxNnw==","signatures":[{"sig":"MEUCIQCcPksQGpZEB+LYUCvy/iXxUcR6SYOhTIb8JHyTGqD+fgIgIkftpMM1ZRIzKDm3LkWxOEeOKHgEHAgMxKNQz0zLJKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BhJCRA9TVsSAnZWagAA5hQQAI0twrxjNaZ/MNr2c6mT\n0lUvvE9ErUlZLHfTENL+vvi78QFxZAXCEysqsOlmxBJO6Jirm4MCUfO/WeGw\nk3SNTxuVQWK3hKDmGHQat2lVhW8M6JV+gPjWTXd58Ome+xRKXV9JFMO1AKiv\nhNgO2PEiwKHQ5F9JaJKFnLxceStzV67xCOsLDXQISpCRsqI4g803PH0tlj0Z\nvciD+xkupRXtYsrqzClRLava+xl8j2J/aApSnQRxofVZKFnNteJe/aN1Q1e1\n6M9lj1YZzICZMBlCNBNSDZCt9lOJFO4gILBxmTynM3LCP1s6Qe6lPTxTK9Mm\ngTrYt6IdUrTzxEe12P7H1gFMpfZonAh7aKUDfhNzIIh3Rf5P9Jv77lCdm0AX\nkrl3bCNuRvEkfiWFlgIiRbTNrb7MCP7+mY/YgBVfU3sLpAEs/RDOILHtsoET\naKDXQXpCj/teI5OC6Th0KJglnqc3d911gBF57cT2EOPGYGaKe4MzFzJyXiQ/\nG5W7pmXRdtM6lzd1g3zxyK9oR7mY7mepqu8s7PlhZVe3MiswuI5FZTvfpKko\nCjpajSkcp81dSv1i1sqlyZqGovACEa1I1k6Tt6wRiCFufT0FjuAaT04I9vGk\nf6L6vbPv+iG6caqrsow7rYD85YWcfrOS/i/0EMGvsYjjYoPz+90n6uVCOFpv\ndWAJ\r\n=HA/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/tokens":"14.0.0-canary.3e20c1de8.0","@material/density":"14.0.0-canary.3e20c1de8.0","@material/checkbox":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/focus-ring":"14.0.0-canary.3e20c1de8.0","@material/typography":"14.0.0-canary.3e20c1de8.0","@material/touch-target":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.3e20c1de8.0_1643124808957_0.9390758842684543","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/chips","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a267600098244afe7da69c98bcd6b166b79140c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.9f9d928b2.0.tgz","fileCount":163,"integrity":"sha512-1SMaq/oDKy2dnro25LQ9ills7SPQO96MoVV2XhFeZ9bJJqehRV4IqEMkzJfbkDf8PqBjnO4HdN0JZLDtesna+w==","signatures":[{"sig":"MEYCIQC9wJjCaocbFIo2AOy2ilCVeuZsa4Q8pUaIBwXt3SbxPwIhAMh26jmypMZzHkqg2gZzM7d2nlPJD0NSnoQO7NWrLsiJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uERCRA9TVsSAnZWagAAFTsP/19AkeajU+bOYH+vLJ3w\nctla7RkZFhRwRTqFtdzQYqq8/q5Xn79NGv/uL//9K86HGANirDckQ4oOYYNx\nSDD1A4RbY9tziv+AtwukPOzSAUSIdH1l28wD/NN8NziHTDl06Qbx4MEnLMdJ\nePQb/pD0rRE/Qnea/8Rkm+uKWsDO9nYAPdlccmxpG5NyGWXQcY6MqdE8Dwam\nDsQ3axquIORTReKcpr3GoZ431uFHoqSvyWGtwaSeLE9DhPS1Q6c+X2A/Rtyw\n8vZdPvi7G5jiwA4urmkBPKqmru4K8G1A4L2pG4nw3+ps9n3HU64hAF2W2dcR\n1/UxZ9PchP7cUsQY/RW0NIFQ+AGzc49Yk8gMeVipzmRNS5L4c7Dz/j5qdpj4\nv2+rwUk+ein7W4K5eavTu/wks5Yv3WeTsVT5GtaiSC5h1A0QbGbaciQSKgFb\nFiFWwc3RiVlTYN957FjC9SJoRm5vnes02W4lIX+P8t451XLyfWDbd8LZYf6f\nP7upPxtxR2gALiU/jQaqzhDZG+4TT251QD9S3lQqQseAcdv6bFL56jxaz90x\ne5xDDT0BXqnMzE0Z0KPKzswqsMUfHP/26NDEL/xRR98RisnyXNiVPoNhkNj2\nTgDP3fJxN0V3YWzSQiudIR78l8OACvAQ6WPBCEXErVmM8SVGGOf+NDm5jWCB\nJk6t\r\n=ILId\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/tokens":"14.0.0-canary.9f9d928b2.0","@material/density":"14.0.0-canary.9f9d928b2.0","@material/checkbox":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/focus-ring":"14.0.0-canary.9f9d928b2.0","@material/typography":"14.0.0-canary.9f9d928b2.0","@material/touch-target":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.9f9d928b2.0_1643307281655_0.4609802027372034","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/chips","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b0bab7bc12bd498611aac9d5e97c7aa7768748f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.a2bcb065c.0.tgz","fileCount":163,"integrity":"sha512-TZQkHxtENe12vFyP5LUygSJwa10eJqGLlM/XyUtTSHbZJvB20GjVQ5plIQixlpouc90UvP4DC65WbyHZT2L3lg==","signatures":[{"sig":"MEUCIQDCHOfsMkfuBFmFt9aTYbPOTGi1XtFZFq5dUOvVBNFdRQIgVjZ91CVGD+u7C8uPEZl9FyRO8W1fqIben33gb3OFqnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EY+CRA9TVsSAnZWagAAIf0P/1RrwVzYK6414IDKC+LS\n3lAdVRtZhkkmX8TP0f3LUo5TjJyLzxhcxRbavQXZWrn7mlrZ/YfBcF3NQOiN\nDWeS7ktqXCW2X60SbtawbE/gCKkG3medo/moh99LFit/njIDv2QtGPg3ecnx\nUw031SpF9LFgknap7c4BP3ZAoRUXFfPCOO58S7401WrJjl+g05Jf0SUnVBvF\n6B1Msq6BYzAnfGEKOUdsz8u2S4BgYZm5hP6CA94sGBdcY75pgTdq4Qpq21nu\nX98sHHV3XDzvWjLeUl49AOmMp8lU79qFPMT1bqa1gwHHGRfKx3+vm/Xab84e\nJKNtIaowdpodiWx7u7Eds079V4a2iv9IE/VqZ3i4Kl5OGepDbgHvDJrqj2y6\nRS8BonzmNBaGvTK6GFLAKuaTjm9m4BYeg6JamJG2hZsESloB2ve9ranWEhOJ\nDVAPC2sx9m7N9hREcx6JD3yXWWQq3RvsZVJ3XVs+P8dKZeD86y0QbWEjC1Xp\nk3K4GOIhk8+ZAJY3RW8mEmRb5bdQCPGMyp4Snmy9v9NglC8gbIxUG74Owy5Z\nQueZHtXC6YvYQBsg+vn+zrkjWx6f16QBiYYvsqO/r4wYwt/EEuJ/67ucfyUM\nJGi3etlbtE9zXI2ZDEj/3aoZ6fajVA1EG1recRdOVoFv0b5/xuWaWZLwvP3y\nUK3E\r\n=J6H5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/tokens":"14.0.0-canary.a2bcb065c.0","@material/density":"14.0.0-canary.a2bcb065c.0","@material/checkbox":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/focus-ring":"14.0.0-canary.a2bcb065c.0","@material/typography":"14.0.0-canary.a2bcb065c.0","@material/touch-target":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.a2bcb065c.0_1643398718076_0.8469732471717377","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/chips","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce10283b6f5100206c8fa8da35ffb0eaca521c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":163,"integrity":"sha512-Q/qf5o+xz5fI0BIfF5XoL27mivova6g37dJXfrA+I7T/vRBksswHrr6YaNJzmFZtYbF0dnqcm5IIVrn6HryM9w==","signatures":[{"sig":"MEYCIQCSvtSXnkIh88z4DUK3YcwDiwy0KQ+J7SOBC/23rkl56QIhAKrHzxZaZiSnSfvhuSH+arEJfW67NQ35zBw+8962nGRh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Ec9CRA9TVsSAnZWagAA4cwP/2hz9MIx+QVVqLj6Nkch\nlrJCZ+oXNjFgyg5rsQVSURGCBw71vY3EKPrCNIvnZnBX1JJ0p/RyEm7oXFHM\n/qzU1QcRAXbQnQgL98gt6VLWjHGvb1FTVnsNKN1vnu2dAMsDxe0HoOlFvjt5\na5fe+Vi71H6ArhNV7vbAu6Xpxd0tmBaLl/Q276/txjxAWzaMIYZElU2qSqAC\nOyNjdIwxNGIDn1/3O6Wvp9oMPbGsQ0YjADEDPp5+KagsWcYnGb0uG/asFkI2\n+ZYYawR4Ko3GWMWNGgnUgGk/8//1cIh0Pzw5yUQmSrHuREUZd0sYvkVI8HNM\njZKFbLDn9y6RDYPLKfr85Hx+ruIPjdpZVBkA+EWDkPcpt7dKn4pp/3q483eb\nA3w687pWw+qumaRmLGn22oz7ye7C8pOHGycHylgOY1MIGir3eUnKkIcGaQ2k\nSmz2ftVCJn9Ov2VfAfHMYo2HO9tm+U8C5zzEwJct7oP5Qg0RAhzqNgVd6r5l\nckL8Ag7s3a0P02EtnE+etpxqy+1lr0YalvZqUJ9V87g+GgCzUhwW/PQuSv6f\nL3Jlq01gfp7maHoCrsBWQFmOElTJImEf87z2TGGQIwjUGFmxkh6Tywjeqwgm\nxxVy/tPYFDQ42JaRTjL5akEPwP20B9p18z64/MgOoKTZiBpu+3axmJfiFozK\nNQBn\r\n=VoSk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/tokens":"14.0.0-canary.4e66fb2e1.0","@material/density":"14.0.0-canary.4e66fb2e1.0","@material/checkbox":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/focus-ring":"14.0.0-canary.4e66fb2e1.0","@material/typography":"14.0.0-canary.4e66fb2e1.0","@material/touch-target":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.4e66fb2e1.0_1643398973813_0.12769203942476892","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/chips","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51edfed81426acdeb514dbcdba6dce4b98deec99","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.9736ddce9.0.tgz","fileCount":163,"integrity":"sha512-qejHpoAcZAKKuCesTZQrlzzu2i0RH5lPseb0w82cLGZkMaa2k5grGlc9MDR/qKka2AcpL7SDqtpkjv5m0chfXg==","signatures":[{"sig":"MEUCIQCNquCL+bzDylYzlAKBXbEbe/ahwhmuRCSulfSfJWYm0wIgeoyBrY29NfPo4l1AkMiojhvGGHs7PLBvsbA5HCEq+/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q4VCRA9TVsSAnZWagAAXyAP/juxHz3rZBTzyX5aw1xs\ngSNissRDxj8N2ECav43yMfMdjH2JQA+60t8I3KOzZPvXPAAkWn9feLJ+uxfr\n30HgsmaKVgPc2nHXzfqA+MF4qIU5XNE0nlOZFy8kZwbtg4BGn0cDDRry9jKP\nur/bvM7Gy6KXN/GIo2ahtJIC4MD/ic8mjSS9xhOZNsNljgb4E3Y86m5eW1R/\nP7341pxMBixtli3TdguTrd4dO/XkBOO6RqLafivyunXPhBw9lye/nVWL8rdM\nrkeqIJ9t4AEyHcK9wN1Eq5CTLewsFaJwTESqejwiHyNipH3pYl5nV0dtGhA6\nNQdtdJkFL8y3H529OvrVY3kyf4MyKQAUv+tua/dJ5DOgx5OYL8S3KaRkK/DG\n3GHLWqrXFvqmebVCYWB6EWGpb4DC+XWUYkdynsiZEIFRqWiKYMCR2mday1cY\nRAQzPP+ACymSFKtmsic5tyMhsoBAJKDL7LsunrBqLPS+GBtL2KZuDEmrWRD3\nyTb+V0ZotuA6Yhpo1a0nWYEJOU51lCZq6sn9PWR/HLQ+nMbBWzfIv3w4a8sD\ncCr+m7ldC9dES5/eUp5a9/z/+u8U2VJfvoT9GbrXs6kXm3BBIfqVHdGDMOze\n62z+2b0ePrLJmIzyx87VZ7ZjSDa68ZIxrVlnlmbRPTtzalWNvGm+2Nwiv580\n64q4\r\n=9Omx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/tokens":"14.0.0-canary.9736ddce9.0","@material/density":"14.0.0-canary.9736ddce9.0","@material/checkbox":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/focus-ring":"14.0.0-canary.9736ddce9.0","@material/typography":"14.0.0-canary.9736ddce9.0","@material/touch-target":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.9736ddce9.0_1643449876908_0.5775657331576505","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/chips","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df6db47122c9e6352cd5951cd2ef8715b32d6b70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":163,"integrity":"sha512-qbRU/pRzRTaNXy3vd9HsZmdir06iN1Y2xfumsCKS6u4A3MPhmOFlk3G4YTvR6sfwiBBFJvS5iL2IxFs7rN5hhQ==","signatures":[{"sig":"MEYCIQDUcl8+IBYCV0n6zXUlfLVEn6Cz9AjN4uIwgmA4quonzQIhAOZPnmg+KC2AR27EOaTRzAq2+jT2s/fQ3I/S5aGtE1Io","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W9UCRA9TVsSAnZWagAAA8AP/iEz7SrA6VD1h/t5xBKG\nuK5UKoS0RGbnARBrPn0hR3VkxhImI737DpIgpBjnAuLS5XgS6hSyqkZl5mkg\nxvqntycVL47OcO8Y4B9ouL4q/lnyUeCUizbTmAhcrarnfF7mdDui2bQU7m6y\njwpSBqUHCp3VAInMoYIdUbTHwffBwxkOLBPnKn+aqicyDAZ0MUXMD5v+81J1\nYIdURFS3JEaTVc7hhdJiVFCjEQakeE73iEtHtCJtO/M3Sjz3sNQfdjb8HxOH\n9oLY6cnCu1lqLteUaidRENxLHiI0+jOSfJzPBWnvSQkABJXAi1JV0k9L/sqh\nHLwEJwSJdYci+g6ImHSuCCdbqBpMRztZzpHXwxPTNtQPDDyg8idaepMCVqVu\n98xJGXrpeyFq2VE7ngtIaXpDT2F2d/Ltrsngai9G7wBCGm6WOtSsVvJy4k5h\nKt+2ZvyCBZ6ZRGPFikDX3FbIqMeZWIg9hkRx2NuDVoEvpQtK4m2NhkwBdV6s\n3CAdwDHXdWgyD4sk536rB5JyRoDgtFP1looEo4VpBsMO8xsNkyuHprz33T/O\nzkLGPz6udphwMLOCir7Rcbr8aKlJWkosbPC8ij4dEzkBXHfqFXPF9GafEGBA\nG9jdYUOegSnOwwiAqXAPvy8f76ZbS31/b4aBV3G572ouHaOs+wPEyyDza7Ry\ncXKK\r\n=iUMz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/tokens":"14.0.0-canary.cc4ed13cc.0","@material/density":"14.0.0-canary.cc4ed13cc.0","@material/checkbox":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/focus-ring":"14.0.0-canary.cc4ed13cc.0","@material/typography":"14.0.0-canary.cc4ed13cc.0","@material/touch-target":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.cc4ed13cc.0_1643999060230_0.13774457944805585","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/chips","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"874b91a4e20c128aaf0ad669d877e671ab10f373","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.dcba26fe1.0.tgz","fileCount":163,"integrity":"sha512-1C9vdgmgnbjNuW9bGO8wBiS00c0+4gKcU54m/2HPSyQCNc/izpJxzs5xL/gdwVmCIMqVvXcNbxdstrZxQ2TR/w==","signatures":[{"sig":"MEYCIQDtUelOURXzQ96tafnBoIaceZI8pJNXZcm+bJ92tVIGtgIhAM80rO0hp5DMAbq6f7CxRQZGH2ZUlMzhWEFhvXcJNsTw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aGSCRA9TVsSAnZWagAA34sP/0cNAb2TRY+KOPh599kr\nI6a0yyJs62S4bDvtMgMNoAZTaQz4PSGtOET2oEpnk4JUUqgE0J58YQj/yWNR\n8KRzJj20F8crc39pvBGAcCbCMfY2IQoGFimHB3ETdDSAw68nmkQMe+ckSrJW\nPAdeV0efgbUmu5oiJ/MQcdh8RzGkaFl0PueG1IKy/8/SXafBnSfLu5U9jXO2\n7lJtBDga/ycQi3Wkedv0WDva19gdIvOHRkUjiipwtnF9kaktRGn6KopIjAHi\nJVXbCQvu0PbTDNXZuZKDUDwp7+2oSLzED3OD6LjzPpOQZKow/KHKg9L2WeUC\nAkkLg5G5R2zXQZmwZDPlVLmbrhngi2gJY/FxKOeybvVdqAY/nlN5EGCfWm5g\nRvJbVU0yR3RWq8JTFfwsbh8iC+iLXkrDSbe/RmyqmXgfeEJFsIe0qqcL2zRG\n3MhA3sJ2da7VAdxVEfh7xUJbx2SfM5ZLbvdVa+koFXEA7/pvJAtPluKM0rzy\nQ2mdR/g+tG0ev5EE5ojmzWZKy5XgGI1ZGvMVaZNGmsORXCmErVdcxOEPiauy\n00tun6O8YTUS/ylHuKEonl6sTV6yh1pQEYH+bFso2GqaQG2hxp4ysgoyraY4\nXc5+5ygnGNP44cpzLb2FbdtH5BOCgygO94DNOIYWv8F+S4kNtPJBA7i8JCvR\n6O++\r\n=T6L4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/tokens":"14.0.0-canary.dcba26fe1.0","@material/density":"14.0.0-canary.dcba26fe1.0","@material/checkbox":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/focus-ring":"14.0.0-canary.dcba26fe1.0","@material/typography":"14.0.0-canary.dcba26fe1.0","@material/touch-target":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.dcba26fe1.0_1644011921811_0.8388142436943888","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/chips","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ca5d82289b4f11d6b00069182350579a8872f4f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.ec54d9046.0.tgz","fileCount":163,"integrity":"sha512-Xx4+If/kIX+N1HxxH9TqYp8F2mo5PFRfvyfOQ1w3mzTMQwhezMidst02nlUy7RW02NLomAop+j0sjY2NYekG1A==","signatures":[{"sig":"MEUCIBsS02zMwqzUq+rR92N13gQBjVTExiqwfMlg8U0UBK4tAiEA/nRxlrAriC3jYJzOHmd+qjXvPG5MbzBMv3Y+xEra+n8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT89CRA9TVsSAnZWagAA9c0P/j8c0tesJ53E2xt4zzYs\nq0NMiJ+CDldeF5k/OFkXLGJmJ1yCi9KQB+lSHzPwbAKf2UcZzWP80soz87ny\nnR6KFprAiyeh2y30Tqyg584r9aKc7cHhWhUEEyikJl6ApAYgV022sD8gnyWr\nZdcS0Xi8CCFfZzdlP8EV0ww6s8RewU8x4hmNHLaw7rNlXMFbskRmCp8cTeDG\niXl4RZhx68lyyl+hzwASs3mVuqLkRH0zCwfmVVEEwe59C2Uz+kMRXqvHo0SA\nfQ6ufYe3B0GKstRMLuqNMaOKJUnWIKHwoMZtKBNBx8IfcKg4to0D8iFvuUp+\nvbN4OCB07sft+2m7h4C4Fqj7+hW9z373LJFedlaTlW4Cy2glWFUoqv6uKyle\n80eepOqQlyrItvnQIZw/DMAvueUWPl5sfse5IJTdlgynboRVZbxvnWJWk44N\nT1yuS2xwdOMpJbYoGTn5/AcoGMMThPukRaRrr9XVGZYKE1U/dJTn4RmKDT4F\nVQnxb26o8DNRr0FYFHEacBTt6p0GEN5Wdv6e5hIu5yLJxmAi2Vm2anvtqY7w\nHmABdrHZt9HSknKKsEfxabYvoh/XB1CoHZ9OLgDYCptZc8bule3iMIA1Br+v\niRgDfAnXkZbCmR2f40M40aWEO1e90hVu5RuW6Klpvc6PkcBxrzmZDa550UlP\nbpHk\r\n=DiaV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/tokens":"14.0.0-canary.ec54d9046.0","@material/density":"14.0.0-canary.ec54d9046.0","@material/checkbox":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/focus-ring":"14.0.0-canary.ec54d9046.0","@material/typography":"14.0.0-canary.ec54d9046.0","@material/touch-target":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.ec54d9046.0_1644248893556_0.028885272584781685","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/chips","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7517eb64c81bc50acff576ed81dcc4688b3a75e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.ea9b5b463.0.tgz","fileCount":163,"integrity":"sha512-EKSw+bI7kztThQ6jde6SIrPEqvi0mQ31kparIT3tzFcEk/DPKs2Tw0DiUJBrfBhFDIfUWmHX9yT5ZtJM/31a+A==","signatures":[{"sig":"MEQCIF8qA5nso3ZS/WQ1pPIdVC/VTNYdqCfs5VYS5F3NQHVYAiAGDSd//poXl+CjqZaGoMuLelV9Cil0WjJ5CpNdp5AOxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//+CRA9TVsSAnZWagAAO40QAJ3foJVlYEhws+cOwCIm\nsyR5IcSG3JdmJRzpMYTidurSNvSsJsBuuqIj6nGv2Q5CbI/ZkTxRNrOZVCVQ\nCH9movp+iwbMGKCb/g7xrRAjoWZ1vLITV3lFxoRsCr7a+VJDFnVzhrEjHey5\nhgCLaDiifGngDupSg+opC6+x2BIRn8rJ4+nKATK3sCnkOmx9PX38B5/CJ3LZ\npn5T4rGWRD8hq5JEQ1CcorxMk40GBkb/ifGHiWQVAvs3mU0hSv8w90+3jMKC\nAFUpYAhByLZSsqt8hcWJ4RwyJLkkhFyGtjL1YriSOw7YS8JuDIQSlbqDaXbz\nWlZ4NJKSQvssnIzAq3qy17OtGONjIjykll1cqzhRFuWdbBMLjDfGTRSKdDSe\n0FyswshPqynxNFv3DR26cCpwWJ7hJ6uqp6zYV5MeykkhgwuD0Bi52x+8J9Ig\nUmssujPL8wFDbo6rk2XhdXxbk6neVrCNdVtZSURS6NCTxjKNJ5J5DdhQBmOR\nsJ5RyC05IZhFxigV7qU1CXGeoPiDQhf1s8RlWo4Lhfmkx5mihSu8lpxM3CS/\n0coeyXtQU0jcrkpX/V59PxjckNCOxSBQXQqzuwcnyYPj6Ysr5wuTE26Sy/qY\nQvwGXkzOZTv88Xq4UIi3WHXP8FeGp+gedjfPMIxVION/mIy+YLon3dBRtvx8\nuQ81\r\n=Z9cP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/tokens":"14.0.0-canary.ea9b5b463.0","@material/density":"14.0.0-canary.ea9b5b463.0","@material/checkbox":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/focus-ring":"14.0.0-canary.ea9b5b463.0","@material/typography":"14.0.0-canary.ea9b5b463.0","@material/touch-target":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.ea9b5b463.0_1644429310664_0.8474810904737742","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/chips","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69e7399fe003410956c39484972f830bf8bc0d01","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.96ea061c1.0.tgz","fileCount":163,"integrity":"sha512-gbKhPcL2HtY6pOO+9S6AWIjXCjmkpQBsWWXq0YnFrqrUYBrvdfVUjMkB0U8T6Lka4bhhF0zsbQqW6u/PkWO4jQ==","signatures":[{"sig":"MEUCIEA2lk62Nj98jzeb8X3mpeRc+o45PYpARVe/7aEJr3CoAiEAmyCsVaDA+MOjxM9KAzDNKLyvv0OQBOB9YnTcI3Typok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9dCRA9TVsSAnZWagAAYEEP/idQnAm22gMHf3MiMW+Z\nhos6qOqfNItfq26opYlzNseyVpcfmLSzp/t9tgG4ZnaMLRh1VDWic68qGuZT\no8VrmA/mLEZ6FLAeITZDlz9yZMsnwm96hy6erq0KnrfzsjkSW3W7iyKImAOe\n3Q3MUAY+54cDXzraurAtjRKN05DylXSmH3eYgQcUgrauQCqIBlajYr/uHDAd\n1EWGrK5BV08rR7vMxfOyEPxs32vYhsOeSDP/mFW2jE3SK733f6y/PJJ21+Gt\nv84YqSim/jjEeiKWmIP/BgIWkirb9ilxpMM8rg3dpyvm8hPzub7yxMiug+wT\n7NwB9Ay59SJj8udTiXPbjkKicudeUgt2VmVAUKg2ERL5sg2s4Vrt6PqQ+VK2\nWiguiDwAniZU/4Zd6xlHlvzDMibfhTfQ1SQdRfWiPSaQFddjNyhI4BaY9mBO\nblSPEV0J8BWWVKemXCDulFHK8CAA+UlCl+L1x9nW6qQBeAho/x2tNh2E9Oqt\njgVYAbJ0KmY4yddqAjx4lY3aBQCYEe9IBPLfZq+hiRGtGQuACWaCmIcgtTYc\nbQtAq6aWg4yKK9fzCU+Wgb5BIPWQs9aZx/+ue7rARGgBtDsu7HltnnB2DURX\nPah/AwP5akT8MCoUh4ahi+GOMeo/Q5m3fl7FJp2QtoMug6sElsOfQt/+tbBP\nnzSH\r\n=pU4L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/tokens":"14.0.0-canary.96ea061c1.0","@material/density":"14.0.0-canary.96ea061c1.0","@material/checkbox":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/focus-ring":"14.0.0-canary.96ea061c1.0","@material/typography":"14.0.0-canary.96ea061c1.0","@material/touch-target":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.96ea061c1.0_1644433245689_0.33950595560598296","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/chips","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.e00181e59.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3225bd00b468f602af339444a1c725dca0d3564b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.e00181e59.0.tgz","fileCount":163,"integrity":"sha512-ZO/A/gqgBmMopBAA72GMc8p5L0Fx5pmjMOY/c8+lTBC7dhURH94mf8U1hx0gY8XE0OtsTOyLDdRMEQXB7K/sfg==","signatures":[{"sig":"MEYCIQDP9IuECzVQT6BNW5fI/rwOl2MPzD6DG03rQrnm0uHcYwIhAIEK4TI7tG/1MafwJyXmNoLj9i9nRX3TgZXaxPznEHqc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXCkCRA9TVsSAnZWagAAjJwP/0jYip74t+dInaHTfxQD\n+mo53g/ZgmABMX0EXSoXySW+GHraIgRh7EjvI27IsvWSc4wSXKPySdaC2FeV\nDtE71ZcXCveC3gPVZ41+yCWEa/D5AMbT5HCcQhwGwzHM2iPwCN/yajLLvsxs\niNPrQxO91g9ppiV8Os8BYJjBCSuupd2YE1Fv+0rOAGsVze71zJM//yj1teKX\nNc+VZKkvtU1uFGxYbOKc4E0MwEvxjakoDynhU59+KGRD8QpXj887fK3D0EZ1\ny4AEi8MphzGiuX0JQP+RixS1xSx0+obiD3jPPWYiAVcSFcDxaRzqyATS6oP9\nMmZQMfx3cArNRkj4Wg4y6fZm1UemMvh/F/Z0ZZY0FbmKjTtEEpFocp/8+Mll\nN08jUPLvbc4V9TAVGwygn8nRPQJpIoi6MExCqi5YJvFMvZKC5+Woctdkd3Br\nAurlnP/QA+HKW7kYF3TyGsyoIcUXsoIEIx7wg1ceegmFTsNDp1DRxSEfe8No\nB77S/oNoL+Pifc0g+v7wv/SmXoYwHfI5ALwcZj4sERC5721+xnE0IbhCNHxC\n4/JrhkTsEqxm5CaIGldk7zbX3GxDIpy69wolD+ZrMPjYZ75FK5qhoWemjIhZ\nqRMBSPTDV5oSEq2rMMwDl7/pkqxPXF0yZamhbdXP4oU0vLxTf3umMa7KkVAW\nRdFh\r\n=wYaF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/tokens":"14.0.0-canary.e00181e59.0","@material/density":"14.0.0-canary.e00181e59.0","@material/checkbox":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/focus-ring":"14.0.0-canary.e00181e59.0","@material/typography":"14.0.0-canary.e00181e59.0","@material/touch-target":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.e00181e59.0_1644523684291_0.76100058612693","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/chips","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.037285f9b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7853335ccb5d6c9822a77836572d809449905f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.037285f9b.0.tgz","fileCount":163,"integrity":"sha512-sEzYso9l1jpYkkO+HuXBuaWINTBOzY4e+/DCWYsKmBTvpmEHkoPURG58Sz+VniW2OSyY0by3roLiaDTIy1Mj1Q==","signatures":[{"sig":"MEUCIDP03NNMsbA5jin1xBKMXPeaO4RAj2iNsOn9GW0BvA6qAiEA9XlDX6GsdrfAiENQ+8KlPMZyPa8o3zDEEGOlWqK+avw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtjCRA9TVsSAnZWagAAe2YQAImDmEjIvNQ7s+0nx2Up\nJM848zZWHIdT1u25jwYN/BixPsMQYPZybES6mg4AnQzJLX1Uwo7nETNab3zT\nQFp2Pl+dIHC75paYRcMmwBgnU4Gi0UN9EWj0TliFIKZh91LXLsDKqVws1dPC\nJ2bx2wGxmDN1NrUI61ujeb+vmZ4Oub/LlEvNfrviLIOfxsauxz9xUj1HZy3g\nChEE/lRaqjL0RqZPls+5cGc3x0XVTWrTHK45L87htSF9WL/CS6MS7gJOviGc\n7TOHtCQpXill5m0izGihJLMpU/F5cS1itxw3sNgiHGm55zlvTmc1c+hfYqrP\nsBTTAf07XhuTkBR/DRpCsTg07mhwx+HJ9WINUodafIxef/5DSaPWfj6GcK9+\nvFmYOgFkA6GGrliLspP2jWxT/mD9SAN/k3yVql2JBHRj4BSTREq8peq8nxwL\n0JFoXp9pWi5NnrA0IWrekw06yph9Y9WRA03FHc4KVAfLBZvI2aF6zI/4UdwD\n4IUEVxtblx3ioyVpNn5Bo5bOB22frLSEvYXS7ooDUTqG3JVe0w1+UMbuTFIz\nmE3cDuM+JWa2Q7ZQtcwM8NwGg763dIm2TxE17/xj6HWuab5j4BuIrJA6jTxe\nWIcD22uA9YBaukLcsnSoCOnlYBiBmGtqV+k1wllFa+zFj2wo3MyzeHm8mF0v\nA+R/\r\n=L6as\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/tokens":"14.0.0-canary.037285f9b.0","@material/density":"14.0.0-canary.037285f9b.0","@material/checkbox":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/focus-ring":"14.0.0-canary.037285f9b.0","@material/typography":"14.0.0-canary.037285f9b.0","@material/touch-target":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.037285f9b.0_1644604259129_0.863336281374985","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/chips","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bba7f5b7a4a6f9412b32b11a5546c776bed23ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.1aaa68dda.0.tgz","fileCount":163,"integrity":"sha512-oyGceqlzzhlvT1+L0K9r9Y3MHVNJmwcsUXfGHsdoO5qc79Tb11iKjhZfDcCb+k+iWDgY5qlwOIKv0Q0km3lcWg==","signatures":[{"sig":"MEQCIFoaTo5U4sFt6e2wr0be8QXqGXSDeZ/YfIZMQjMPg/1VAiAYSCuJnO+KNaGNmXkFizlEpMyVsWVTfxHZRd1iUHX/AA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVWGCRA9TVsSAnZWagAAfEAP/0NDwZE9K47QSr+Hk6xi\n0HKyLxSKtamBzWsL/+xUVGbThZQ28qQ/OvGy8Cv2R1ssKfCusy2UZ2r0VQmy\nEYqiBRn8MbSoDic29+6i1x6u1+sk+TCyDN4ZI9RfY8OcArHPd8FEI8cOxdnv\n6eK6mx7DvNy47s3P6rboQgZIxUyOicv8fm6udC8XNs/4rfSle+0AxCkUAVZW\nTemk+Itq5ZwaFnO8/Hz8FF+Z6p9/SxrXrXxtLZD2DBWio1jkikNepNg70Bb1\nqb0WlVfa/KsY/rGfF32TsGb+eAbkN5S3ugkbiezH++cq+utDVGhvzUrPzn5T\nkpDZGMBca+ZCe5mQD7eom/O8ow6P/tUSMjEkh2sO9Oeffh9k5mItCwTOfnvi\nDY/8GMwVrbpCXGUn6D4J3Q2Umf/ynn7XPcrSSwinCtohQ9sGxT9r6wc6wlY7\niyhCRkGru6YMjLibRAGJhONyZMnVJhbIonH3fZTKLfPLZ36NTKUzIbm1SYtO\nxZdwgy4u+ajVbplfKFiIY0igfJq4KS13ouI79yhjr2D4x44GgWkbUjNTq0KD\nsN2rxuqHSAucH5/tek+sTqqlduI6ZRfHEnYyB876xETOiHyFbd7lKX7tQaNc\n+2zsDxdoy19qgCRfYqydp27jUp25mP2gXQwAPfPp+chsP0Mf8xszvxfJH57p\nfWON\r\n=eSkJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/tokens":"14.0.0-canary.1aaa68dda.0","@material/density":"14.0.0-canary.1aaa68dda.0","@material/checkbox":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/focus-ring":"14.0.0-canary.1aaa68dda.0","@material/typography":"14.0.0-canary.1aaa68dda.0","@material/touch-target":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.1aaa68dda.0_1645041030086_0.5006352060781198","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/chips","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfa7a12ab79c46e0127ac27a5ba45c748fd273b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.ab4aba1af.0.tgz","fileCount":163,"integrity":"sha512-Rhr1n/ZSi4S3DmUdTvyGmGoIdpd3vHX5JAN+KnMNfZKTs8Z8EhnLHU1y/Na+KbK70DWC5MR9lYfv99MtpHt/6g==","signatures":[{"sig":"MEYCIQDxcLcbh4nZGX5ncyaRj06Wy655u+AnUuq3B007f1CC9wIhAM599I0+S05EgaaufzlVVyYWN2UrOe5CUDgPzXZ7Fqmc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpE+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFoQ//TpyE67XBRDHHn1ebI33e+awFOIrbSTUUw05DJ5EehW0B8nyA\r\njhTuLk4d4otcmMP9OJLWaJjIkETyHfbG5AwxI+8DliIWCo5Crtp50AmpG/Ne\r\n493hkWCOQD2BzXTb/wLehRdNBMiJRezo6oIqIKAghCf+1mzg/FpxKC0d7Wyr\r\nq3v4zbmHyOS71xexa2BCYqUGNEl/d6/89mNkfYDa6bPXs5EkD7N7GgkqLCFp\r\nVhNEI5sZpTskQyA85B9PcxqQ9fhN9u0EsLWCtfqcRe/1UydBdYuIQhKf/GjK\r\nLrTRh9ey3NFLexG/fInGcpHRWLDZmBDWdltXZ2mNJaEp7MdwWLBe7dN0Ak8b\r\nqmIdqCyNtRZnz4B/NQIipMYjitNPkUxqcCRkdadwPcJFrhh/KG3k0f4Fy3n0\r\n+lL+opgqN85PnSlOPRZKoUudkS6pulitdyvAB5XBCiS/L8r3SAKbCUuRMYPS\r\nW/4dEdusGypshVBI/eoufw7VIkmII6CITHhB1C44Ha/CramlE6G0sfJuOQYL\r\nk9swzFO7esTl7lnH4fdLLMhP2SR4bDyVs3rMKgJXJWqJ43MGdyxGSdh+fADY\r\nInLde8KAjN/RjPSyyz5mWqqkVKj76pQ++hwKeZFSC7OmfpdbOkrIKYQPNiff\r\nrVfEVHtqKF3VNInMDbeVB5AFJAnrA2ssTcs=\r\n=r+1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/tokens":"14.0.0-canary.ab4aba1af.0","@material/density":"14.0.0-canary.ab4aba1af.0","@material/checkbox":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/focus-ring":"14.0.0-canary.ab4aba1af.0","@material/typography":"14.0.0-canary.ab4aba1af.0","@material/touch-target":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.ab4aba1af.0_1645121854155_0.2767036177537683","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/chips","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f683f3e0ef8d556ea2d897faf89336d1e229a1d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.e58552c6e.0.tgz","fileCount":163,"integrity":"sha512-naPqpbbPRo36MOYxRhjSsDjQ1JgoJl8d+ToPacKZ8pcSXVCHQQi2KxBeHQIrjCcYSMPx+WoxstjVhFcLzQJugw==","signatures":[{"sig":"MEUCIEhOCYnkor4Em6u4qCQ/8V+Tl7jaaxehyVgfSSpz5dysAiEA8lqgvexkQ3iaYaAsr1SAOUFT5MXNHbL9mgxUR4vCEXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqckQ//dtojNiqts5WTNzbDw77SrbzL9KXQlONf6Th/pnvq9pbMCtDI\r\n69LUS5htL4bZPBL+OtdgimO7Fs2PpBuS9+g1hj0/eTgqROfL5jxcWRnL1l42\r\n7GQUvl9ojwGS5OfFPzUs3KB/eTzcVkkXi6kC1jpbe3+N4sEtYjBGQq6w0hk8\r\ng2uKAVaNm/xHk6JQDHaYHyIBPDqX/xc6pqqy1xS0w7m7TwqMC4/tmCi2feRu\r\nR0zZYy1IVD+gUgFO3Y5spUpHC9Q2z8kZ9u5qe7DrVvN6tZEpRfOjvTBX58Lo\r\nFWoLV/EHoVURd+9yOeOPBDQ+ikLUk2S3JV+WKBkroq0qs3PWZibJDgO0ArMR\r\n3quryyssIARTxB8fwun1Y+dFl5V5FJFa01r0voRDdIZOOX6pwVioxkxXt8OV\r\nbTU8rWWzgbjNaB2nL48Hx7tXVva9jwrww7F/Fin8BcnzMo8IAJdg9FkvRjQg\r\nDsaDhcMdUneqc1Tu3JWcERe9dcoJatR8doFcuwG6zgYP7O64OZ4Ob2hDZvCX\r\nec4MG0HxKvtC8vjfP6+Y/HMA6grE+AblK6p2FJNY2OpJEzytBG1kYG8635tL\r\nkknpY+EsjudBtdLRvI5qcXYJo3B5Ic2ImUQuXCipLs9Dw+QbD4+ADz6fZ7ke\r\nB/rCaE5ym7L8WibLP5lYGhxvwTGRzBIytCE=\r\n=mbFt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/tokens":"14.0.0-canary.e58552c6e.0","@material/density":"14.0.0-canary.e58552c6e.0","@material/checkbox":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/focus-ring":"14.0.0-canary.e58552c6e.0","@material/typography":"14.0.0-canary.e58552c6e.0","@material/touch-target":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.e58552c6e.0_1645207520147_0.665318812881937","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/chips","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.868793776.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd49bffb9273f9a1806e52172534a8f8408bcc68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.868793776.0.tgz","fileCount":163,"integrity":"sha512-qI6AVSGI0jxpUQWCgAwS4HqKDeVrU/9EDN3vrNd8U49v4HDSvQWeC7md1o9zkudnN6bh1XCqGz4IBCuCPt0hhQ==","signatures":[{"sig":"MEUCIQCRLrKNFATQoD2MLKk5iTZ8+9n0FKwjc1UY6DH6nYJeswIgN/HHHvHmcuKf/lO1ThhMveEdcD/abTIMTQSii1Qwua8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTt7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkMA//Xe+p/+t1r/F9svHV+/9E9pjPLVvPL4jE/o1BoOiLdj5bt7Dr\r\nPkEZf517sWB6xXyp+gBl4SzqDz2+OhpSA+oufyCyLj8pnGeufJOTBxkol9im\r\njE7xVGRAcaN5BFZtldOaXh7JH9s0GFv7z5Tj3M/m0Oy6lEQdnevdA1FnC9ks\r\nmN5B28IGDnw7MI/ncU/iTrNayOTXBF5Ln4cqAee7Cs6xplYgoLOeD1rvrpaI\r\nod+TLztZe+BiuSbed2VQ3NQWW2TH8IVS/SKuXeWpP1n1MYp5VcEVNAWcjr4b\r\nX0t/u8jYaLjZlxTEp0OPYboepjq7zRIPFLRAAS6MGRvIzTg+YIMTRdpNLzzc\r\n8LThvNszoaL7SW7Yz47plyu4tHxQ9JxVe1fYaHu6dXgvwY0optPOk9YbDQbW\r\nMhb+5f9hN/TRcZ7EYWOnJRogDvoxVVh+GfIY3sey4cRnLfaDztKEBhhvVWDX\r\n/hhxJhOuxPba6PcJzEjfNvnu6hioOT5d3gfz8z1V629qu5hNMNQJdEhk/OGj\r\nmeAUYeS5g2C22yvz+8jiMjCdmeg2cnpioVxLxbRUpGI9OeUyub35lQXRG652\r\nkEl53tqBtAM8v0qab/MSBGP+zonekAjY0yGKjFGOJICFwE2/+4JfR9EYRH5Q\r\n+8YwuWDvLN0wxnKR53XrBnOdKb6YmbNO8Rc=\r\n=XlUC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/tokens":"14.0.0-canary.868793776.0","@material/density":"14.0.0-canary.868793776.0","@material/checkbox":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/focus-ring":"14.0.0-canary.868793776.0","@material/typography":"14.0.0-canary.868793776.0","@material/touch-target":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.868793776.0_1645558651480_0.7088833931094127","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/chips","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e31ca74a53f7b7cc986f100a4bc7792e1bf6160","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.fdc37a445.0.tgz","fileCount":163,"integrity":"sha512-Wgr1tuy0WU7vQNEyKP8NkwvlBUSUdEkXhXP8Yt1uS3uujC6XmC1Tp3NzBxx5HCOaKXHkak/scZkFgeKjulKQrg==","signatures":[{"sig":"MEYCIQCpapOou0ZDlFKPkEgshzAn/JsoVyNIjwMPJV+7jxwcuwIhAOyH5LbBuQ5ljGZA4lFoIcTIntkohXP6PxbiY/lgsFed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRi2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJfg//a1MOk7zQgkz1bEzCXHz806CGPSxaCPyfEBDXvWXPJZ03w2Tj\r\nTnIhhw/6KVsZLbMctht4zKz2Dv8B1A9NRJsDrLbubPUOwehcOy0O7bwE8n9U\r\nSIgLXxz8pfDes2YfNR8WO6P64P6kY4pE6Q/YIBQ4OCp8iTAygo+qZ2Eg5ld5\r\n+fLQtluTbocfa8UgZhJ+kA88rz7B2PJxAoIIb1dtt/AzT5oRsC84ArxnwXpD\r\ncbsFA15wdXToCKAO0I2axuxRKjpwCRJBJINHUkxYuNWYIqOAYvDHPN7wJ/xG\r\n2OHkwBiSiJmCzfIeHP7rPfGxijBQxX6n9St9N7ElhFX2lMhuILecufThBB2I\r\nfdBhGXH4DMcIToPOGfwAlpybj3NGl3kzZXghK6ujX3U27g6LOZckPowGXJXI\r\nm0lO+jNmC2CvrSAkz+5zLL2X9pxK0R/NIpx0dxxHZb59Q+Sp2seut9yYmnm/\r\nIzNckVO4btk+LNoMvWpCXK2X+zlFATq23akohcV3ZfFwd7QQuKT9ZvnS4/N4\r\nYdR+wVbphyoHNfbEIejEnOQHRj8ICIrWjyJNvRzpM8+iIhSRg7b2TB1z/3j/\r\n20leqcWxqDJxsLMjYPagHJabVDkGcCeoNn3EcCT8s8IBWiP9ipYLmIHwOgAp\r\n+4IP3hTliwx2dg3EOspjWsEcKBzDd1kLjmk=\r\n=IGq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/tokens":"14.0.0-canary.fdc37a445.0","@material/density":"14.0.0-canary.fdc37a445.0","@material/checkbox":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/focus-ring":"14.0.0-canary.fdc37a445.0","@material/typography":"14.0.0-canary.fdc37a445.0","@material/touch-target":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.fdc37a445.0_1646074038677_0.9379480858984341","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/chips","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3cb4ab13ceb053c2551794a8e895ca4388e10cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.43c7d87dc.0.tgz","fileCount":163,"integrity":"sha512-3fogS+ETBHg/hPpHXLbgcPjcB9fhxcvclbxcbiNlEoJRqnf3+3BJsldygORaBX7NlhqM+1DKfmK27gkjfS606g==","signatures":[{"sig":"MEYCIQCKRRU5g2n8WNHgH5+rN/Kt9Cxy96Lcwlzq540eu1bE/gIhAJ5cIp1kSVfnFmrC0J+WubnyX02c2FfmnIVXCjQWb5Wh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1606220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHj0AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKbw/+O62LD8bGrF7wmUnQuIZVbNUspzyTtwRBWNsqCCpx14lu/q3a\r\n3vgpWSdJeUcnGioH6d5yQ4OKL752ADRgFcT+KcCNlVGuL1J7gH3mrUEYIvtz\r\nYA6ojIYq6WjyzZOkIdrHMi8tYMnc/NC7QfT7t7zc5fdRtAB3wZanGnrNvdjK\r\nxQmKWuIchSsKopzRsaOjNW0T/83h3highdLt/ikTM6aHNUmbpFabyTxUedno\r\nz7rFsNyK/HoP8e98AE8M/7h42M5RLJrp38QR3yY67MyT8TEHDh2yR7WTjOQa\r\nRMx3Q2I4LJyxFXnqO4giolgxKoFxombWzu282+Cb3Ogo+Vj0kfdUQgAJS+yK\r\narqKxFy85mFXZlKiRwCfdYsQ4AlomouO7HWGxACdgYXcsaoeCDC0VREWcTEB\r\noDfcw+8I3BhaYSqofNwCJadX26tWoGQTlrtknB/r4oCZO+n8MaLAhgmVppZv\r\nYLJBcz2ZLhKgsIiw3XNybqcdI7W2fp7ndeH48BfSLfryz3FGitU2yxy1vT6X\r\nDlizvp3M88GngBjiOQnJwFbEi7uYYZZiKbHztuxW+SpCfSVS9kj259SJxG9A\r\n3pJJZ9rv+IMesB+sZnT2dgGGllnVFiQ3n7boILMJis/lvLyDXwipG7KXhmR2\r\nNth0t3VYIpmujW0+HbYY/8IthrKP2Sy0ewU=\r\n=MMcL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/tokens":"14.0.0-canary.43c7d87dc.0","@material/density":"14.0.0-canary.43c7d87dc.0","@material/checkbox":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/focus-ring":"14.0.0-canary.43c7d87dc.0","@material/typography":"14.0.0-canary.43c7d87dc.0","@material/touch-target":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.43c7d87dc.0_1646148864111_0.1802219628017081","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/chips","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.23043acd0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c296617ede7ebefd364e2adf09b58ecd4d462a72","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.23043acd0.0.tgz","fileCount":163,"integrity":"sha512-AgdYC0Wz7Ovpdu5UBQsyJ6zul5vP79FTWkE8zk/WqP5SM1fAJ87fZeseK8egCTExEI2l0Cf0pjDjhbVqfi7zrQ==","signatures":[{"sig":"MEUCIC7OeFktkA5xrMM3CGkVVpVC5KCdOFTHUvNuo0aZqkVYAiEAqzhws5tIG9G4gmR/GMjqHSJRly8R0b6mkcwoQS7uc4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1606220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnvQ//YVCWaBvvLEz3AtsBtpK9WZkcrishR8ypV/4iLhnyR3k5YPak\r\nvk5F4uQV36QRzbvRx4hgNihj2Zo6ee+uZJSrGGHjZaNb9K++cxACJlflXmi4\r\nUEvtjgtkhuV+0ZkMnBmpfr1qt2zSvTjJq2cM2hxD4Nv1ti8r2mIQF2ve3PJf\r\nB4HJ5/ekk7V52OjWfRfmHE+JDCxo08cC/5kViKugDoQ4cVkCmiPg5h0pQ6ny\r\n082YLMQFzDe+Adkilu5F/06vN3gNt/ShTg8gsS9Wo4P8H75oH4wOso6he+gf\r\nu5y/Fi4jgg1nPK5YCKv6oTHi8v55rbNHE6Db8XT1Mc168+AM/9T7A0QcnzZJ\r\njGynM4bONvu2xEZ+Oa7ZD6ClSj1a4Nygtw33h5+/wG0X/lIJFADm0IH9rwZ2\r\ntIoHETsOM6UBi9LRqbSdTUyJL+AvUngUP5zyOQodDKmrRZMDmgF4B2C0DIKw\r\nllZS0J5wR9fdSZPjTiTUPYL4do9MoaL6uSwZ8IifSNDSAGQoyuJNw5N+Zgy2\r\n5x9oiKkY4LhSTZgYiCE56MQkJgsZ+ofoT4EqC9fgXeStClQEDMRP/gdVQcqn\r\nPCUYneiq0GceO/VND5c63t0GHyl4FVyvY6Odv553FdwZYQg1Ye6bFgGSsy34\r\nOjaA2wrMVccyCY6oQGq79Rq9CxN2BnHCxn4=\r\n=eo9R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/tokens":"14.0.0-canary.23043acd0.0","@material/density":"14.0.0-canary.23043acd0.0","@material/checkbox":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/focus-ring":"14.0.0-canary.23043acd0.0","@material/typography":"14.0.0-canary.23043acd0.0","@material/touch-target":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.23043acd0.0_1646252913146_0.44130059735004146","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/chips","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9061713596c6c8b7a69504f4808e644efeea604a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.6505e61c5.0.tgz","fileCount":163,"integrity":"sha512-fM/BvzxogtgZpmYIECw4L2RuzBhlmTodc4Jtk7/ULoVcISaMFik0NOFzSf/3LlZ61uzbfoaBsO/kNesBKWDJlA==","signatures":[{"sig":"MEUCIQCrFZjjMmaIWUbaGnei7REvIePWmnitjjh3mokkQXvt0QIgYPbbOZ7wwIPLMgPTTovfhkURl5mnzZOF+8R2I7ESnSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1606220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR63ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrW6g//VHBftOSSVIQwvw72HjiLTtmFd+bpebWU1pLEqHmRrIUwsmXS\r\n2mPud0rfBI2rvytakBIjpMuQbRWJnGrfGgElSWgFQTIfTtPeFuH41twD5EHI\r\nIXiM3VkhmTKrVM4aeNgcxf0yZR9QiMTdVWv66VG/cBIsjbxW7j8B5MHLtv44\r\nShdulcy6WseaRNtypaUd7dkc7IABY7JdTFW67PwqwcmMXeCe/dYitwF0cNVP\r\nmFqf505QSZNCqPCKqqrR/p/CGAizTdM+YTwKodHZCJmyTTrDxpTsyL9vXKaF\r\nh+DoAL3Tz24gYoBfO/AT5iY6xeUf3B6vqNaIby6gbM4TjqR8ihitA9w2PH+9\r\nKIjIZuI+xak2tqMK8AMcms7sTk7J6p4LwjlAzshZoznu3j+I+fxL9Rv6PicQ\r\na49/NX28pNuekow37sZLCYLASfDk/oiRVUvan4P8OjTW8MB42Fc9kF+uIRpq\r\nC4oUIJ9NQlDNvkiaXrSLOcTPP5ccjRiZMF6MuNOOsIAaWwcz9AiuHxS7ZaoF\r\nNiTdbiUCXVESo/0pRgX3NoKXRGZ7dLSrd8/QbBcw09WtEBjE4Z01XZyEf4Mj\r\n1uC4xewtUhDErUJh2mj2z1GX/mr+JilFBKIAlnEwFbzQI4d3guFBNkmO0pmF\r\neRy80zjl/h8p+TCWPLpK23Go2o6V86kkFy4=\r\n=R2yD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/tokens":"14.0.0-canary.6505e61c5.0","@material/density":"14.0.0-canary.6505e61c5.0","@material/checkbox":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/focus-ring":"14.0.0-canary.6505e61c5.0","@material/typography":"14.0.0-canary.6505e61c5.0","@material/touch-target":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.6505e61c5.0_1646337719475_0.3249176045804263","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/chips","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.16c166154.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2546ce2b01271f607582358e6dd36f141e0970a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.16c166154.0.tgz","fileCount":163,"integrity":"sha512-tKnUi/pm2x7/D8o2Hyxcht7ibQO8B8HPFHvVAOZ+4j5eeCgvWbWBFCFpMNTn39vlX2IB92+QUoyj8XfEc3JAHg==","signatures":[{"sig":"MEYCIQCIIEzCFCXVBL0Bn78oqKLP8grZ/B/oS/e29s977+niUQIhANs5F/GL0/dk6IlF4rMmDavcdnLuCgQvR7A/BJK986BC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUnA/+P+dTYDmdWr8aQBQZeSTwd7xr0BbxjYNIF2fIZgJrxYXCi7Oy\r\nI9TILYAvf4wBNmDj0t+JxUw75VzS497FHBMg1VYuTUbqgXRWdC7KZXeDCaAH\r\n/ZugdDP779EJI05A4UvwR3Up5p6UlA0O3+w3MdfDNTjZTgXqAiMPpGI1GVTa\r\nRP/EmMOloG9iZ2mtI2yTz4zrwDFd5w6cHzKOGLnUobwYMFdg67uw8jo+PdFU\r\nwBFbWLSFjX7mwx+chK8+8Q/U0L991BRj8l4PN4qCxqL5RMckRu9FMfgWx3SH\r\nGLXe8vs0kLv11HPjmWSqdYAea8aw+LqH+gTrMD7N8Vjeb/ccl4ockky5hELO\r\n2RLHX5f/lR7aDH5Nb1VaO9Pj0ddLsuiE8sNdeTLOiAWNVTzUJikz4/0GC2fX\r\nKlRQCO2kmxaOFMdPB6CvZNnupf1JHjIl7UTOKQbU/OBKNPFn2UJJsEuYGYTY\r\n0VHPZSLev89lZEgOrA8Vh9oN7+oyVtIUkqc8oZiyZMlsItAHT3R6QOE6u7cs\r\nnLZricetX4ZW6ueSNoobiDB1hhmBqEH9EpuEWwc+9hYoVDN0lSlahxck5NMf\r\nXzyzo04NjbLO5ruID7bJqLX5aPKLSmJaieLdqPH0giQNaAYY44yfEdK+TybE\r\n+i/2Vuo/eqwMd17/4n2w6V15vDZu/vuXSuQ=\r\n=bmC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/tokens":"14.0.0-canary.16c166154.0","@material/density":"14.0.0-canary.16c166154.0","@material/checkbox":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/focus-ring":"14.0.0-canary.16c166154.0","@material/typography":"14.0.0-canary.16c166154.0","@material/touch-target":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.16c166154.0_1646781810154_0.09660783299999798","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/chips","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f5544fa5229591759d4e5390dee71dab6230972","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.bdf1d3771.0.tgz","fileCount":163,"integrity":"sha512-W6Lw8PzOBH4bnhBkWmVaYZrDG9ubm3Cx+pZxsS5OzYUkacHruVxqKvlP1N+5dc5x+Nd2ON4M3bqrbHYJUgmfFA==","signatures":[{"sig":"MEQCIF2D5EBgoZ58BMcj8BcmQSeY4DxwWR2wjEszgtvSAMaLAiBFTgN4cImcrq24jHdaPhf2aGQONhxDm+QJ4NRNlm48cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplvQ//SVD/YO6680CkndJkZYzfUso0BW0NLroq7U7LSnSHjZAAuZ9C\r\n92BQhQX24CKF6GaV9ZbbBQ2sC7flQIk9JKW3GKKgn+t0nJiZ7T5USBPdlmQj\r\n8xTiXSbSI2aCRUXcYa2JzU8hJbiW/IEj55QHbvCcZayVFTgbsDoSXCs5RhZl\r\n8CxNHt0+eYeBzDBzenayEacbmfcyCSVOGYqzoDID40j7aKJbnp4LK068crox\r\nrU7OTmfXcdC6j9ZsLZS2VffaiOjBkptpFuYXZ6WCieD5+G4cR9agW+/U+/pu\r\nd5h7upYrev7T3/0+Z+CbwJl/9+rAooaSytQ8scob9+LqEVYoEhvu2qG0VeCA\r\nZ1RkqRvQASvYUjFLIrnHVboky1sk5fiDiu/uOcbTUDPvGP4KddbEg4JCSIqC\r\nPgVA4eN7MmCFcONL8NfW6UURIEaqQP76rG/j7YjJgnKXS0sOGVd2uSKfn6MH\r\nZ4GBHpw53iy1MIwQIm7i9ZqRxraFi2udiJo694ZYqArwDMLt7wk4qtAJ7UqR\r\nvP1kDK3Kgjj6BsdGIkO4adXLffybY7zJkAxgxpmx1vcPyI59u4HwGWmZKi45\r\nvTFdomyV53vM76jWzMrbLA852TWPp42YnMT2yyKaF1MIph3ay9j9JHE53Ep6\r\nAWYwFv8RSIV+fq4RzRBQhcjoxif+CdWlTXo=\r\n=mgmH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/tokens":"14.0.0-canary.bdf1d3771.0","@material/density":"14.0.0-canary.bdf1d3771.0","@material/checkbox":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/focus-ring":"14.0.0-canary.bdf1d3771.0","@material/typography":"14.0.0-canary.bdf1d3771.0","@material/touch-target":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.bdf1d3771.0_1647268185529_0.6334392172442491","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/chips","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.cf4292778.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"345e9b2de735c2b3e85c903e79738a02198162fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.cf4292778.0.tgz","fileCount":163,"integrity":"sha512-LTepHGCFQT+2O3zKEu2elS4g9NcOrMOyspBSSQtd5U0NDON9V7LUg5ghlGeGUpUODpEdEq2kJlnpaWYu4VGlFw==","signatures":[{"sig":"MEYCIQD0q40+MRNB7eP2imZX01pwS0ue14FnV9sO+4jRe3F2JgIhAN//2wvIXdkvmK459n4L9ZNulv19EVGOCvOA5WVyhiHQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL944ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrB/w/+Jf3fbKNxivJT0s9mfmyRGIMnmagWyVAEW5knUDKyz8Z3hJaq\r\niaetkhtbZ0pSTdcB+XI7CDNRXZhMcVb5yT0S1pkJajGyxaFTmpGQKFQqaSna\r\ndWVgK/Uo+V8WAAChSTUyhLEzJ2/zHUvQ7UcRK/7H1yME8NVG/iyDS2xKIul6\r\nIDVwg7taZIyLzJAgdrU5Hkk2NSNFNrTqEjZp5lPM/Grzu/sx1gjcQmxJj2ps\r\naB6Ih33mv2JG8eGejlx7fRmHoPVj7BAsBfyAcFkx73J+0TArw6b9je4gITy8\r\nnAM8CPqpt9yfk+7LF7+OaRHmVX3K+27bR6J3BdxzcyrRJgIHtwEOGtlv4R2r\r\nXxYhMNnjcAQFPab4PQL2dl7/tpklecRvWaDRmGu58pZbaSJtMyiJ/M/AeiOW\r\nSfD2RcH3CXMYriGkDhiZtfCFBB8yQTGh0UzqqeaoaE9GvNwLEIhlrfjCwc9Z\r\nbs0OwoaZhBkHcGiOSGT8oxLBp828IEN8Mt3xP0kuKC2Rw9chL5/Qeh1+ka/c\r\nzFQyHbNuze3BQUkP9cVLVfZEIzNtuR2Ny3a4vCKWpYYY/8q3Vihwvb/3bykJ\r\nOgmBjfm4BWjObyQbMDVKaENQTP1Hu3jfYXFZ/dAz8Wk5UNBt4FoceLkqL30x\r\nY1ey8w+pUDsDQB7wByllM57Jd58hK+GzMAU=\r\n=NGtY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/tokens":"14.0.0-canary.cf4292778.0","@material/density":"14.0.0-canary.cf4292778.0","@material/checkbox":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/focus-ring":"14.0.0-canary.cf4292778.0","@material/typography":"14.0.0-canary.cf4292778.0","@material/touch-target":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.cf4292778.0_1647304248321_0.40441285277457895","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/chips","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d20c68fdbe04d35cb644d5a6ad72124d9a54973d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":163,"integrity":"sha512-S5HptijWBiHuuz2Kdv8fju9FguVGloaKvUZCLWmrGDzICZWP8bABBdMmjDa+2lSIGxLuQca6rUuco4D4XA2Uig==","signatures":[{"sig":"MEQCIEGAgH5dIy9eIo9zMnuMPRNIZSaClc+OFmtSYb03fsnvAiAtbGhXsR+DZPkNfJxjVMmEhBFKRuJNaLuKKRdNNvS7Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk3AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2MQ/9FX6hmvSuT6Zl65K8VUTDz9iZjexLWo/d7jbJtFpqVbXBs+N9\r\nxq25tYF1Qp757X0V7jb7vxr4b7/eM4269BZvDO+2z/YzqBo5bJhxRegRlFv5\r\nlQcgVyNBNzIoEv3X94BikurEXTOsYSjST69TdluvCyVLkk3QX0gNQod6WZE7\r\nZtcflaj1xpbcN3gySh/N9BzAddilklc5P8nM/ZhidKusJz2vvB4+q7M8OcHP\r\n40MCAynAed09oO7+ovC1q48IHolm3v60G4Wwg6hkhX1y+VD1jML8fSYziFcQ\r\ns2LjATOexM5Yl876ZncNyRDfuaFdE+UIVrIy99moMVIAcZnwUm2K/PIlqjeP\r\nGmVI4yme45T0z+HnR1O2W+QyB5ek/arLQ7kTOXoQwBIfTEMg0QQqUHWmhRIK\r\nKFrvI1xBbQXX1KVfyRjByBOVu13d9C/r6v4VymQjhaZshpYYvjtLNuJ97e60\r\ntplETt1NobYz9cYB0PD2ocW2J+k5Av7dO5lKL8e1Lua9UUquRhuUutXXricA\r\nz/rfWf9L9zgemRbGLA7UlV0shwJnMecWDD69yR5oCQmggcLRw016r4giew09\r\n+mtDjQZKdtrPosuqp0LXV//T0u0N06UJJw/ed/G71K3d4NfRSHjPY8S4AFXJ\r\nl/Z/adyn4srprYbmw6gTdoA/fAlEh7s82cY=\r\n=xdi1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/tokens":"14.0.0-canary.bbd43e0e0.0","@material/density":"14.0.0-canary.bbd43e0e0.0","@material/checkbox":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/focus-ring":"14.0.0-canary.bbd43e0e0.0","@material/typography":"14.0.0-canary.bbd43e0e0.0","@material/touch-target":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.bbd43e0e0.0_1647463871878_0.938988547657486","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/chips","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c89cbd4d383674c88840097abd3994a6204b866f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.1b6afad86.0.tgz","fileCount":163,"integrity":"sha512-qF4/JVFS2zjcC/AdIy+k4MMz2pNXSMTIIYiJyioXcw5dTE+NvHie/nw2QKHLqM23bxq55QpxfNTe2d9bpPc+Vg==","signatures":[{"sig":"MEQCIDmomrT7Dg5f3gO33emZOxbkN+vOhKtuzLgxRwCZLghSAiBg097OqMDKp6q4TTFEeF6Xm/r+9UFcmwIDGWzmVhPOjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2IxAAkQIjuHRG2T8VtSXBGSfMzQtSUfCkM2mBvP2qDbACV70vbRu1\r\nndctkeJWpf8dQ0fP9O5xaezCQbBEoaRh6eLA3HElFC8qNdK8dmZCF4VFoVYM\r\nzJJfI5ZaZIJa65/voCMuoyeuzvD45nEyzIO4AfYBNlbiD1YJaeM6ai/j+BSd\r\n3TMW75MLlOwETtvRVWvvs6+HoQwI6x4zeXvYYahV2i6czxU/cFubyfvqILBu\r\noAuNCm8c8j5xpIdT9ijflkPcCWw4GwSLHs3AcyiDgW2OdWFEWVQeM8q3XZ3H\r\npnON/JmHmwjq5tS4VJmNJQ+pbmA/zvt35ObqBXHla0UMxSFSLjSiAwiKhgnD\r\nH5+52ceiYOzF5C0mXOvigtaFDF3LKDZAZFaosrsa5QWe5rzrPTRJn8Oum0+k\r\ngaej8ty5YXs4CRzutowRYOJ8bsFnUc79VssSEqBVIse0RsrdLC3je5w34h5H\r\nNMeUCpmTO5GeWvq9+I/Igl6COFTvBt4XONDN71ZauoOWiuU8rqLbhjRqobke\r\n+ckZel2Ou6SQyRaVo2b0LJYpRMPGXwirjIeZZAyOq6pSI4xwXL1WNAmsDU5Z\r\nnRX22zl450BeHsjdHfqzRUgF2lNcrr24/Uz1H+go0lcT0utloZmWS01JMFKc\r\nVPb3usi2jk2oqUtSuJjAgUivhTi9D1mcokk=\r\n=slmD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/tokens":"14.0.0-canary.1b6afad86.0","@material/density":"14.0.0-canary.1b6afad86.0","@material/checkbox":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/focus-ring":"14.0.0-canary.1b6afad86.0","@material/typography":"14.0.0-canary.1b6afad86.0","@material/touch-target":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.1b6afad86.0_1647464684040_0.6257438756611389","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/chips","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f7566fd8b0273ba47d1198d83b3f7f34366cf21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":163,"integrity":"sha512-4t4Z4llAdq4I7+2qJdUtzHCV7zU3aNdIqPN2I1Y1KX1ywPrPzMKcQYZFebq1y6jHtwCv7UGjQ7e0woc55HKBhw==","signatures":[{"sig":"MEYCIQDslsqBOypBJ8+Tq9e4gu6/4fAzIFr38zSVq+MHBArZUAIhAKQI4VnTWf83DM14xcywdkgKQKlwz8wrL+vfrrP27W9w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlREACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrofQ/+NkifiZfXcROG2bBJPryG3mVDAjsJ7KZwb15aq/kEZC+Zk0eh\r\nh2mludPS6PuuNrSNHZfCudzxP3ztVmDuFr0aVgZn4ow2dos8/+gpdHl/TP2x\r\nAz3ToK0JwiDfKaEpUvQNxVUS4UZlezKhvsTOtYoeN0eygU0s9G2xbb7Y/P9f\r\n3J+IA/92g7uRMInGfe4TlYzymqUBVcFztj8a1Qmf2hkMrrrBrnq3Rcpz+tf0\r\n3xvtISeb7j1hqIr3RZCshIzk1opxPdDOsEXYEhJU3pPUFN+hHlY0w16vyLgv\r\neaeEI5FvWPVF+BVi3zxfgKhaqYtNuxUlDy/mRHJRoR6gSEAuIlZSa/vK/FNG\r\nhZYy3vm7QyztEvslZmTQfmDzx6fa3PajV4+yakHi8LmX8+dQ/ykGjMciegU8\r\nFWW48Gy/wjYO7jEhRWdMD2SjZIt7daKgW3/6fQgCeMsHwPls28Kp/jHE1gCJ\r\ndSoxLBcvu++r6EmUmBif36wrMFMxTDn3eQHr8vYADbK7y6XauTv4By4gtfXa\r\nYm38OtbO7oahD4wktBmi1oqqSWEehSHWkHsZYY52AWV/AgfepeaKK3YwKYQK\r\nQ5+CzqHgmSBaI9BRUqVHxMNuP5zMqPQAUtgcJNwvszMIMV0W1zPR6+a8djil\r\nUHBo6kSL7JSO5W0+68ot06D6hBGJJ/ofNjY=\r\n=7Tfq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/tokens":"14.0.0-canary.bdf9d4af9.0","@material/density":"14.0.0-canary.bdf9d4af9.0","@material/checkbox":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/focus-ring":"14.0.0-canary.bdf9d4af9.0","@material/typography":"14.0.0-canary.bdf9d4af9.0","@material/touch-target":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.bdf9d4af9.0_1647465540656_0.7329585314451412","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/chips","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.32b391398.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f2955ac00f02e7b5a1a51b7ee5aa488540b057f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.32b391398.0.tgz","fileCount":163,"integrity":"sha512-R/JHEwBB2Q4hfZWmjQa6ntw3K69VckJao+fyOXrz/fWhBub76REu5jc2ov2cyLS9G3yb+6NqEFsqvWH2+6+wGw==","signatures":[{"sig":"MEYCIQC4dSv/diIzGK9hcuaVZwE5Hw4W1k6F9ZrULYsTqCyFWwIhANZxeMT49TFKNaHGTmMFJWwC40n3S/VVm9CCd3xhvaRt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3c8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptnQ//SPjmM+gyGL9XwNyw16KdKBpkQjTXKUXFPblSbA/UJjyOHhwo\r\nufRPIVFK1IHW9hbDGXmVDCedZwMYZttNrsqDFXWZfpDr0ebQIJx0Nn9xGjzz\r\nOi+7hCdPPB6MfQGLTv5zU0iIKn74mIHpnZ17NcQ435Gh/7ZjW1mMmmww4pMS\r\nFJBfLIJ3V48qWmWb1QkWTlhYWB7ZV1Lp7L0GB+DlccsqvLuDHgM0PBYyFaPC\r\nnHWP/1CeOoVmgpP4O1dAxLXq+Enfaw2eqcak3qTkgB7tIianQGYEYOgkyDbK\r\nHFnLjqwjop94si5qyK/Lk7qxKbzy7s58P411IKnQKUHWCHH08nXSRPqB2IFx\r\nv9C/7p8MyhEGG1MaIz7gLkKj9yFVNEIhEwpRe4lztXChcuRdTSaybXJOnmFg\r\n61zFnR3xgUSko0eNLNszo4OqQk7kyxMtkkEkfoJcHj9K2Hy++l2jle0EbBJb\r\n7dyRNzf2vZWWFYVKdGXANVd5pXefRVxKQO2J/hfaG1dG8+X5CkMn1OyAguJp\r\nC3rxpCzXLgpysvoXMTbz/j/vRxBYL+Gewci16T/JwCxAZ7R1LNlyglM74Oak\r\nyJ22VWygPqsyCcoRvHYXoLjD1bMp41WgbGCJMqFVNIo9tfZvU5JLlN39zStX\r\nebYVx+/eTej/scNVDRM570ik28c7jnBf9s8=\r\n=7Oda\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/tokens":"14.0.0-canary.32b391398.0","@material/density":"14.0.0-canary.32b391398.0","@material/checkbox":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/focus-ring":"14.0.0-canary.32b391398.0","@material/typography":"14.0.0-canary.32b391398.0","@material/touch-target":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.32b391398.0_1647540027856_0.17062356022472347","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/chips","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb0c45a8eff8e8813bebd710ac3616d37636b71e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":163,"integrity":"sha512-w9YGywivwO+medVA+FN+OWloMCjePDVsToqkVOEZaeWJ8DccAv5WG8DlVCZUYIKu1gEs9PndZO5htKX1vUZdew==","signatures":[{"sig":"MEQCIDhbMuhk5cWjaZoX/Mmw8qdczN6iwBdf4qReZ9zsrmZvAiBStE3eNJ2tg62KnGMuVvG4vSeY4ZFCAyBsHaj5CMst2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLX4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBeA/+OTBnjIQ5UkHRrWGKnCSNWa0zaZ2WV4iN5g2SHe/+uCbHdah7\r\nehe76LoAWKHV3mGYsFvQGZ0JMl84wo1o+LYTnUbAxatCjPZ0yohDUiwTkgUt\r\nhDA89/9+ZAbiJBlFfCaS0pdNwlakC4bJsjKZgLQMvU6RDplXlbNmNRe1PhVB\r\nZ6L+wX6XCoe3/M/ShNAwNI1bjUcsptdkE7dyB8WD/cM5j2pXMFUDYHz2Uz6f\r\naJWdmN3xx2g1DBWs/GAR69PVNGT6tNi85fGmLV5gDd1Cl+74eAB6gTiZbsNZ\r\nKPfi4KixQLq9j3lXIu/SETAe0ghP5wOTUIZB74uHwDSuRzg+pvrkS12nW4QD\r\nCsFlaHcWesW13lCCtP27aMBa8zsDvgJzAxiKZTSrJ3nU5TDzB/1Qpfeslmvr\r\niim7jx/eKHY9d5PxhRktKScLvgPxM/u3pvoCKHv3jMbTOYronHWJo24yoJQ1\r\nAPmtzg9o9GaJ1v7i95fkq6ZJ3fi63E3+/pZ1SZXThGwek2o+sTBSh7sny//V\r\nLuKmBI7dIU4cC3vTmzk4sjXN30fh3IHKytanja2KRAvLDtL9MIELSPbDdbA/\r\nYmRCtpOvUzUQyMWkEehYBNn/Gjk/1jNVJOf/V6gqwEE4Qa4hfs8fNVUoqdXb\r\n8nti8Vnn5Xr9SuZ+hALhewFOU3GJpG0igJk=\r\n=cFG8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/tokens":"14.0.0-canary.ae8a6a3a3.0","@material/density":"14.0.0-canary.ae8a6a3a3.0","@material/checkbox":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/focus-ring":"14.0.0-canary.ae8a6a3a3.0","@material/typography":"14.0.0-canary.ae8a6a3a3.0","@material/touch-target":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.ae8a6a3a3.0_1647621624113_0.43576314536116256","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/chips","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b734f5e9a3b0e30cced2421140ec8c370047f219","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.cbd9358a6.0.tgz","fileCount":163,"integrity":"sha512-C+uwt+nexSeKTYPUotTgHiK9NeFlr1m2ETd34nOoNtDL3jlfUPOWsvq/gVNe/xuODkcqLnxE/dZYRUNaYaJ8ww==","signatures":[{"sig":"MEQCIHslBkw8CVhqnf5ZZcU8idaiGKJAxj/1OCHh5pqDTyuoAiAAwXXTTUHoCKRl7Uy5tZKVG3i3gCIrW+ZJ3m5vefKvCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAeA//ZVpoGgYdGAy3INu+77LPt/UT/3WVUeVSw2xCKNxL9Gp2SDj5\r\nuFOKo2RXhFAwxblUVzEtWUtvSs0az69dv19Gx0jCqajHEkABFWPfGjMD0VM3\r\nm8/YsmTSqJpjBMKR2O5lQfzaeHsmVUqPKgixn01hlwzqZDYZftcjKYUAL1fB\r\ns3uAVubgaaUHAhjoE8rCMcSPELfmzGIqfozPdVzt/ovtko0PAFclN6eRkZFy\r\nvG1lplKo3U2kstgr6L2Ff/7ydKow9QuMRt5GxSBpKnoWwhemnunCwErWifnV\r\n5hhGQjUp49NtDquHqqHEa6Zwi3tAGYuvSNRRLJpY/BbVc+dKFl9FE63p8U3L\r\nNQB3c8goFnylDhRJqbCHidv6eJwXl6n70c4EFwTlP3eCP8uWoz8KxuSER8e3\r\n2JFHlI7W+Wx9ww9IBOY9v1JuGHScY7+kPh9NMElA+2utX2tAHj8CyD64f3NX\r\nHYIObzkOtnIe/OnTw+jQAuSfEZF7N+UAcB6iKJ8Jhly3iA3andGzYHsYslyG\r\n6yGVnFAL9bCMUVWsd3z6Hjvev+9W8t2pX+obrYZtGCCXAsFu3mqTZCcY5d7q\r\nCmqEB0HpL4nn/1xvg+hxhKwgWBqfSy9yiODmQF3r1NKge/Sheoro2J+UseOd\r\nP3OkJbAsvnb+d5XuYxf4BfXjk9igUpOZW2k=\r\n=FfLL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/tokens":"14.0.0-canary.cbd9358a6.0","@material/density":"14.0.0-canary.cbd9358a6.0","@material/checkbox":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/focus-ring":"14.0.0-canary.cbd9358a6.0","@material/typography":"14.0.0-canary.cbd9358a6.0","@material/touch-target":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.cbd9358a6.0_1647643997864_0.05937747639381663","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/chips","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6095f1d31b4c41011121ad8b644fec2924432af1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.dcfe49c98.0.tgz","fileCount":163,"integrity":"sha512-0e6+c2YIvDtJio68QrgWjQ+K/gyVyIbVCHJrBx3KVleqf5jqXbN2SMnBfnBjb4glp9PBcosb5OMck/Net4lgQA==","signatures":[{"sig":"MEYCIQDhZoQ67z7Cm6zAoBroxigaTP/okCT3iojc0b3TQRMwqAIhAMGQr48STjW+3TO5qUW7EnqUjI15CVR4bQiUuPw9y7o2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMe7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm4BAAoj4lqT5J2ZyOixonNg9Ex51BMrKC+wFWyGo2+KLS017TBAp3\r\na0eL+E7i2k++idF/+8AP4my0jB9bvKa6qQs4X0DwKONbNFTvDwurr+eKP0c0\r\n1zZn9P82R/RtPl3B9qJYaROD2iHkbdqNBjUSfk5P4prIElgpDEFL7PJSCs6N\r\nu9TQvEFoIRTrC14BWKLMMDAstO+B+QR9ejshKYoCA+UTqgDOrimMm9TAMXtk\r\nVzvWEMWGiqqA5xuMrY4LoalMkkdg9GiFuVYzgAww7akFQuvSKGZCOGazS3wJ\r\nYkvGv3sGrxS5ZPtFcIfBElz/61OJbHAjJ6sSnOXOGeVJKLHDuGRF437YIqF1\r\n6JQSJT22cp/1jUl1MOXpMUl/pa1KphRNe9q6dHRSBG2x6kpLYbrMgGkcUwmN\r\nIJ/fG4uqxGEVqlioFBnWrd1TZ17gbrvVUMTgEtSAHyHRnjp5URbI+W9V0Tqr\r\n+HCXhVDudKqmVI1Rr7YKqntiVaOTcfFl5hS0s8rBo1tNCum++K3lGE/ap3Cw\r\n4efj+T3M6fo4BmHrEf4KHZMZpicUR6uSTnwCIfQjBiw7CwXM119I9rnbjp/T\r\nfRC/1sIovH9f8pI4kdycaCTYE7t+IDyFtEXPHJrSjqDjn5dbQ2uw3HFBJ2eq\r\nNhWiTpFm0EsJ+tvgwCJKhCBgTXdM/fO/lgw=\r\n=hFSa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/tokens":"14.0.0-canary.dcfe49c98.0","@material/density":"14.0.0-canary.dcfe49c98.0","@material/checkbox":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/focus-ring":"14.0.0-canary.dcfe49c98.0","@material/typography":"14.0.0-canary.dcfe49c98.0","@material/touch-target":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.dcfe49c98.0_1647888314861_0.9158862530010075","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/chips","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a51ae49b00a15273416fe44033f6821015d2ce37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.f31a833fa.0.tgz","fileCount":163,"integrity":"sha512-Exyu7CNCPnaVf62LyJuvkhHpbCA35iPt6a7AvOybERY4EzI+BKjaoPqr/S9yxlzzfHbxbDC+iqNV3juoz/nlSg==","signatures":[{"sig":"MEYCIQCi2vJGYuBoLqfD6OyZ3j2IgmBHswFt4AbVX8cgziyS7gIhANjejrZHOMtghFrMSwICW3zgmTUalv7B9VCiU6fdpUkQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgXQ//XXfyhNgMCCJnfafdEJQRK0CKh12+w8fhafNlIB95hKJbFn1r\r\nWWWo2ekLhPW8DQMHMHC1uDk2qv2dPZyMXHEVru0bp/RXeOTP25CeHV+/GA4F\r\nSjrOEoKlRq1beHCUflpEjJyeGfg9/YnLUkbohgwYFaB5VeVilp01icFpRLJX\r\nlozm0xFoUXIJ7zazw4u9+Tmp9rwGZdujSMoS//oOJaPfG2QoC8hYWOlR4Oqh\r\nlPu/D4/gBaTXRELJMxCFi7crcwKwi0+zRACl+mpIw4jjTY1JAINS14xfv147\r\nu/S0xcc0XbDpPIADorEHezigOMitESDZX5a0B4fXw5bGi2ghSSSgGOHXBxqJ\r\naFaG+6CfOpepFQbodHFDDnrlhC8ndfb37clQf/jtzd8sGNABCpJQJfowWKQd\r\n4NtDssO73Uzge6eIdzOlPHMEj6A8duaCy0vhZFVdIe5MBDY3EnYh980+548g\r\n6GIVNZYg8ARzFRu/hmBEAQlZu7B3Bk0mx1+oB2+Q9Qjsntexzfy2ByEbSxSF\r\nsY91pcRoKJA0aN+TZJugt3KIOhvdD5bs5kfZZiTBv5sbVMlidmVeRazZdDd9\r\niuO57ku1x0Qv4C28kR0LHQktjUTk6dDJ/8qbHqE2bBdcVEUCPO60ZBhqv/4H\r\nvtG+96WfFGg3uqHeAh/IFshQl01OoWd/wZg=\r\n=BnyG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/tokens":"14.0.0-canary.f31a833fa.0","@material/density":"14.0.0-canary.f31a833fa.0","@material/checkbox":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/focus-ring":"14.0.0-canary.f31a833fa.0","@material/typography":"14.0.0-canary.f31a833fa.0","@material/touch-target":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.f31a833fa.0_1647996715451_0.18978657872112725","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/chips","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"102a22d4ac8190c0ad8ef6aeec913b80bcb5e332","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.4b92e210a.0.tgz","fileCount":163,"integrity":"sha512-jGZfns3tfZs1MMFRrD8kOpBAUpWV4U4b5dTwe1iZEmdzKTftpqB/8IkDhIBSSKBa2Xfjc+ws2kPLOIxq5We4bQ==","signatures":[{"sig":"MEYCIQCJzK9puEU+RHRxELM3/vnydaLyQzl4BZ1znx5uLubjAAIhANhAv/tsl7AxGKU3tbP6YoEfeUxyHcSD2K55sQHxEJ8O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo98xAAjPu4DspBy8ktHoIyDtx5jIobVuQvab08PtbqW2gy6s0mRUZW\r\nzRJrnR1WbK5z3+d/y/sacF6boIEhCmAKrun2kpZ0d8OOkwtf/69Ml3Q8jmnx\r\nZYIqEUtiVyScSI4+pYEYzTBkYOAL3zZfgtuoSjtv3L1rwAMSH7XzKpT+zFRX\r\nXFP/oEypMWSfO0vq8odNSI0KEws0BzB3AnY8nt/r3fJDJirZPr0QV3THFD73\r\nG2L/+mOIS/HxRJmcfClvz5wB0IQksran8ezy+tJa2mx09o62CgyTwGdP+bSY\r\nn6wNEJafJdebQIViNmY8dzlsEC59qTH5JFazohgIntTv+jFxdRuwSEWymSO6\r\n+916iOu+64kO4IU5SFxnQ/UmxwuXjTvM57xlHP+9Z6W+tq1AwNb7tnnI26Ad\r\nF8yGztZVLtnyG0o+pzr4CtqCWvgapgTRk5Jar/n06aXaKCjxcUzFb+L9oF5K\r\nBioOT+q4rcVErlaw3qspUJeyhF5IXiyO/LlVWmxdchATPziq5dvARYglRIaP\r\nCxP3+GYGbteEpOZ5suWKMHYA084g1OXLvm5B4XPZTFAGD8CAWafAbb0JhqcV\r\nsDtluNJaCmupP79psGqvI+Hlm9DGIsf+IzWGAs4wiwx/FEmD/MyU/DmI12ft\r\n0Xy1cvQqTyY9u0dL33pGz2uu7/hH6yClYLA=\r\n=FzFL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/tokens":"14.0.0-canary.4b92e210a.0","@material/density":"14.0.0-canary.4b92e210a.0","@material/checkbox":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/focus-ring":"14.0.0-canary.4b92e210a.0","@material/typography":"14.0.0-canary.4b92e210a.0","@material/touch-target":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.4b92e210a.0_1648153181786_0.2950198227324152","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/chips","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.a657abb61.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab08ac593405cc67e7eeb08f7f778bb5f9c2845","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.a657abb61.0.tgz","fileCount":163,"integrity":"sha512-nVixcgMde7ryZR7bBE4xygvYMZl8n9zHwjwGpMoXQW1BqhqEvWD4l4GMm10XtzWcQTtHTv7GBLaw+iqMjRTM3A==","signatures":[{"sig":"MEYCIQCaM8bFUhtjH3oUUhqkRBihdcBcyKmUrHHmCAtQFd8sLgIhANKKU/6LGeOjQwuwJyyUfeshZiSiDZGAItRNr9Hb+uTF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPoA//eRkBbnrRKmGibkdWW8YRoOPV0W+iw6K6MoRmQcphJw/x7BPM\r\nxJZSJC93ZKAnbkEhBoAQdilu1Xf1oV0O0I2bpX6OaUKNb0PwQypK0kpu65fL\r\ngs+gEdvlCeHYIGrglPBe1ckL6SL71HEF4a6Yv50Ma4qgrlJr3sDcf8vEozXL\r\nB+c1X9j1Y0wZOxvOLmXPEZNPVH911A+zD9tvyT1MI1VZPK3t4TX5MGSh/kCQ\r\njsdYHLlaCHUrrAKk25zvK0+XGv3OUqu5XD0ZM0y+7g9745mfRH+e8V+D7NHq\r\n45ljA2ysxLIOmHgVDiQPWSMIIe4xtL1HO4ieva3Ru9Rk4hLCU2piR8QIv+8R\r\nXmwgLWydNEQjwFsdm0Pl7KM/Glh+MZeyLblUcR3hxzFonZZOLfDDJ/TTnUQ3\r\n3PoWsgDx9c2CVUKwQEbuYUBc4lL0aHuZuOXXsCugyRT8lQTpDjlRdbP48ssx\r\nxAiE425JjdCQHiX7hd0H0TGTvja5RQqyj8/pAvp2tX1LBpeRcq9D//3CBBb1\r\n5OOBmKgkZY3SRXZLxngVQ5r60/9EASOQ+/OptC0nmAGih2mDX1wzFiMunBR4\r\n87VAV7abgCZisbFYWYb7FwrIeswMP+pGVLzgd305FTXtuJBAmDBuhSIy1fUm\r\n7Uhf+K1fA8XTyOmS2r8hEkoJOfHAZ045yvI=\r\n=wBjR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/tokens":"14.0.0-canary.a657abb61.0","@material/density":"14.0.0-canary.a657abb61.0","@material/checkbox":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/focus-ring":"14.0.0-canary.a657abb61.0","@material/typography":"14.0.0-canary.a657abb61.0","@material/touch-target":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.a657abb61.0_1648154469626_0.05734479539364856","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/chips","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.443f63f50.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4f278f545d8aba6c1baa7ef8b8b3c9b89c94d68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.443f63f50.0.tgz","fileCount":163,"integrity":"sha512-eMoCYFvYaMhadoR8REIEe4pnJFzRnoAOtkZKZCAOkqCiP5U/bLggpHR/V0bTQjzLFzaYVAulnAicCjY98NapWw==","signatures":[{"sig":"MEUCIEGoqHlW9IwC3C88ZVp9xU3m7noRLTG5OVhmpNQzgmJtAiEA7Femq8P+Ro2dTR3h1lZqVWQEAsfOKV7ijr/dKFDsm1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkrIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr75A/+N5L38tOkW5YZbLB65hf6WT1kezG9MhsQgVsoIM7W01PiPvm1\r\nc1l8M0Ih/T1b38WGKQlOgC8nPNLSaGz1ZUOv+zR9xMS3+Yr97N0VZl8lLmjB\r\nOIBPZtgSAdEIcXoJXodcFU/5Rkr8KRWC65+O94KVhGdJDd3n+sVCEW2O8hD0\r\nVHaAqhafKv2976DZF6ySCZWe4a2HoWvRuprTYhBbLby7sTVk7YjDrTeZ0WLn\r\n8NxoZ9kDomqsIJlY8nvUtvjZUyP1LPvJZNXJBgngXSqo490xlEAwEQznOwys\r\net44fHPUmF7T7+M6aZ3yrrUC16GFsd5+AuBFtB/SmgTiSBd5Lj25q663LCA5\r\nMNzf6BzyKSAFjHDbDSKis/SZqXI4TvEvEN949OzK4TyabnoEdTG9ufcOodS9\r\nq6jA6kfi1wpWNIZa1lh8ZuXq3kw3KSAgymWPPf6CWTBg/dJyR0ZYrWeI1PWq\r\njjGN8Ssj1uhFr6f1CJryBTjaZIN/V8LfwSMx2mQ/kZuGv4rXssnDZNOnQ1ty\r\ny2328bjzCNHwyShdji/FvKmq0FyhZB5C6m52qIv2V+GSZa1DQ7LvLkXcgH/p\r\n3eVswfsKJ0hixLXc3LqehYnXlmphl+CLyDs2POySG813LjCPC51a4uTMwBVV\r\ncdvuoZQiWzWJ4OnSZdCCweUBUPlJsYGWH3Y=\r\n=vf1A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/tokens":"14.0.0-canary.443f63f50.0","@material/density":"14.0.0-canary.443f63f50.0","@material/checkbox":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/focus-ring":"14.0.0-canary.443f63f50.0","@material/typography":"14.0.0-canary.443f63f50.0","@material/touch-target":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.443f63f50.0_1648249543683_0.15028927070921405","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/chips","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.eb382f318.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f25f2c48cae7372740dcf5a4617a121ece8a176c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.eb382f318.0.tgz","fileCount":163,"integrity":"sha512-3yS/kaA5ezc3mOUd5QFg8lvB1pjgTuYZHrKvwr01DcEfS2JA9KBiYRyNcXMPdR7csvgtuVNNC9pcFHYR2Cj8fA==","signatures":[{"sig":"MEUCIQCURtvfJraUy2TCJH40cDGBkdk3ksbnhS7WmOF2gOsWAAIgVj7+RWlrfS+4TVQiJBQ7hKjUWkZVmvYFnNkwcX+OtCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0OIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV+RAAgtcVLI4HUub1HYjH8QPJmsnrarOJQhpLEIzPQm52RIBb5SNS\r\nfD5p29rjYeniwhFmEPiLYLJXfVl8MPqXque3BCYvKlarr3RjgldZ8AGcsP+l\r\ndFaOBbA48wl3VuXI8+TWqRXILR/ZwwJL5P25FtEj/YULkpMMYfSuLcpuleUX\r\n5ztwyneFOfqKxrEn5iaKKmuhcR8qb8dJweOW8nz/96HBSk+rWMSUG7qMYI2o\r\nMFxTvdGUx3PPmFyTU7nhvBkvUBowr2Z/8nPEC1UEU30Y91x6mj8M2nKQMUDC\r\nq6EeeBXGxzn9Xh+GpZWqDx4irbKXBb4dIhsJXaiK8f2/Jdsb6XlZWTuml6fL\r\nr4gOWhmBE04tPTqGq9hYfulumy+B0QDNncFym+dnNrJlNyv0z/vIRy1MuKM6\r\nil6U+WE0WdXoCERuh7tQmJx0ynL2JSYGZj8k8EYKx+C3sYEWRH07atjbwYkr\r\nI7sq+SDVbrGJiWDK7IQ91UgB0tMId/BRCLkOYqnCPG8zOhqo60O9mRoM2y9Z\r\nSB7GuDZQ7yE7Iq1IgD3IylGc1esmQYO7MAn63N9CxCLpNUU5MSdZmFZWCLF/\r\nFbkywC232GhmBx59mvLlBb8kchUHkqj4W9YFAlPjxf51lmbCUiu7crLnuTiX\r\n7RUXa6Z2xqmu6ZG5xx/BQCbukpeWuBXDy/w=\r\n=hbRh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/tokens":"14.0.0-canary.eb382f318.0","@material/density":"14.0.0-canary.eb382f318.0","@material/checkbox":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/focus-ring":"14.0.0-canary.eb382f318.0","@material/typography":"14.0.0-canary.eb382f318.0","@material/touch-target":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.eb382f318.0_1648575368637_0.14972606795879417","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/chips","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.344d52823.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"740fcf93f4f5fd38135a33f3ba1698aec1746e85","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.344d52823.0.tgz","fileCount":163,"integrity":"sha512-e2TM1upvAZw/x6u+upP3+Yk/B4VPwyVr3tIUiDofddD701IliYgFyI+mRpQvtdpMk/TE23W3E7+mkSAbjtGAhA==","signatures":[{"sig":"MEUCIQC2F/EkTrhO4kpMuEUcJVV/ObepPDaB1XbvvZRAvrLT0AIgPjoOkgud2cP87odvNOTASFsu0h+Ke2MsZ4uipGT9N+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1OLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEJQ/+O+9VZEjP2lN+pwteDuSit0YkUmoEKE0L2DPAduQdeOQbdPae\r\nNFgWaHAjvnZvRythq98YJXx6S9oZp3+pWyZN8ShuejDCFTMHmDh5+aZv5oG8\r\nFSpmAPaDRbq3wTTktKR+GwXhzeel2PViE3Q60sTyrvqHEZPAoxL2uoPP8WQq\r\ngFhUHonwv4xqBIbtFAAVOWIqOdC7lr6Hl/AhICJ3q/AOwxoJAQ8TveY5pwrS\r\nhipQE+uTCf/t9Ie63nqZLtMY84xsufSBH0rkFsr9OIqUxOvHeL+CHnodfabt\r\njRHYMWhvgmUjNTUb5Xd3GOjbAavJuaWRfXjEhDVfrCsBbo4q9V2nR2nqa6/5\r\nw1UkkfqonuyV7VDkTZ+d7Jn4Ebr5++8eyo8lbhDFqIt07FfvUNzr91KTWmz6\r\n78zOMSkkc6nNE5GfNgz92o/dvWgWtqxdcfJ5v+xN5tMXqmxsDToECYs943ep\r\n8bZWH/Pqztys35KagxqtWzQJKzlKnW89FSL+lEUFsnXstSXJJsFBECBXyA9v\r\nxFABaboVCTeqjJNxdw2Qpzm8uTfJ3ZjRxkHUYMgH0l5MSqHDSI2S2qYmZd+4\r\n6c7+NDHui8GuhOyXZ1VexmLB4UVmTSTkQUH9jHZyPZSPlXqPRdSVlGK27iNF\r\nYkI2AB74BXfUNMOCX1hrlMCJ0Z6+/Kqz9wU=\r\n=ghcd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/tokens":"14.0.0-canary.344d52823.0","@material/density":"14.0.0-canary.344d52823.0","@material/checkbox":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/focus-ring":"14.0.0-canary.344d52823.0","@material/typography":"14.0.0-canary.344d52823.0","@material/touch-target":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.344d52823.0_1648579467209_0.0607835259236813","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/chips","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a63dbb678b92f4857c2932d3802d00018dc0e08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.4e372fb49.0.tgz","fileCount":163,"integrity":"sha512-2WIEV04iHPm5MsUmGntiIsdWSTFzOJPJk172i1X18tj14UdVWoPLRNBYLBrNpxtz8hIfRePpYWT/koIUKYee8g==","signatures":[{"sig":"MEUCIQDeUqQnMMEJZa6msXd8xFV3ViKxC50TuB2PatZnbrNfcQIgecoNk/qnqO9EgIYPhUH8fQ5zdankMIPUm4Ksx8XiWB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0q/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLRxAAgQReKMjKj+uNqI/+wxdZkip/E+DbFRpSn8zzo4Z4ZsaMehQZ\r\nEf9vqYsUEnJOZY9c+4CcjfzCZ3bN58ej9j8m9JGSxFaP8jcFoV+jf3jJGceF\r\ndkZI8OTstPmPW9aglZmBo10yGKMkAmQ5RwwPv6pTDSgdJw7KVMXrg6FMABJo\r\nBGKjQIldCqCzjKeTI9FtqN3PJGCU9IgHbPmF++2SSHsLdGCDX6+3Nh2EsR+0\r\niGc1Jg85auP12noDI3ud57vvjm7J1kmiAPTDmEpijYqoSkKenyvYfdp4f54e\r\nigMBrfpd7RfC2VhAUT20PwN8C7ZeI2H+FwbepijFmus+F4eS05b2QstVte76\r\nP6joAJAZEeqPaNBigBeVMq5nlnAa8tYdXnmOcUdoIW7mXly1/yPtwgKezka2\r\n/zYiox4pjeJQSBmg+eo2Ha9rFB/6t7/srQ/236nGYa9fB4+3cq3IQ4eZu0R3\r\nDgoOYOKkFqD7GPgl1PCwsqfkQRAzOoK0RvhYGCkoej+rgtQ6AI8bwAt1cCxC\r\nHEY1AQOIQ+Nc8pKjL9L/+p8yRoZweTEEDo2rO/qKEq6XieUgyaFfRa/ZEt66\r\nxMsSV4g+zBhj+euqWBC+RqAgyDehlw9bAT1p0u1fl04fLJjzGV9OjcOLRTxH\r\ngpqKDw9CA1ldBQ/GT8pWEUHFuYDaeEMOV1g=\r\n=swUg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/tokens":"14.0.0-canary.4e372fb49.0","@material/density":"14.0.0-canary.4e372fb49.0","@material/checkbox":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/focus-ring":"14.0.0-canary.4e372fb49.0","@material/typography":"14.0.0-canary.4e372fb49.0","@material/touch-target":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.4e372fb49.0_1649363646861_0.7912276981668029","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/chips","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7013db34ca743aba056feaa44c0474495fbd3a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.3e30054fb.0.tgz","fileCount":163,"integrity":"sha512-c57dfAQuwTb8e7FJhFwuZGNVPXVNTTcgRMlmGddVhfe7qXhunC63r6XAvPQJNUQcZ0mmP7ET8L9NzaxMWRNOwA==","signatures":[{"sig":"MEYCIQDDq825c2O4k4eef6MHJGAZ3SMszs1CEFddxeFTBG9AFwIhAMM/4xcif8m41HIVxHVzrUBQmg/Q7D0tMSA3M+qcSqML","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0t/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0xQ//YNd6nacNanisJG/estA5o9d5f8EAtC0uq+ru3t07Qx+3Mu+m\r\nIzM0fP5eN9NTiVQYUykqfdBhHNhvZHiaclFzqT1sqk6Mpg5yLyv2n6jY8En+\r\nfHi93JYz9lMe5LMWx+tx5eFpC11ak30wBetgqd4SNyvIepwtfbwNJLe23l9p\r\nyXp8/IYiEGJv49y7LqZcxFAxGrvz1VzuEkpI0wnCeAln6Ymi+faYsATUntxB\r\nTPk8nfljFpTvOF6WdLgHqQWsbOezvQ1SO/bT5xjIOuLRX/+gYezQ9ZUnM6og\r\nN13epBb7JfTYbNNeXvH5GUWCW7BvD4YcQT2mwKM66xD9gwOxV1vk91nKrJvX\r\nTz9MauLLKv5zu7HC5yTQ+DrcfwS6Csnm4BGmiHIpB6vIR62nI9jmlzZxVLc1\r\nkbrFGAWJ+ghx5znIXG9xZAIHCE9T4C8fZXT02ZSraF98sLKHQ2csiyWSAkH4\r\nukrncUyJzmjGttchM3wgUoLFleg74L+upgv2J66Ao/pPcDsZH1QA1BRIN0cW\r\nF9Q4oHL+91ZUu8bBZXlnyblgJxX6FcbCICI69U8jS8oAx0MBnzDy8m367413\r\nNhyLG/q74u7M3am8Ir10QL3SWFe9xqgew2Q30ClAs7ChlW2j11pMVnfevOwP\r\nWOOnvogJBhY7CQrBMVkIoU2GZzd3QAwE/mY=\r\n=pvfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/tokens":"14.0.0-canary.3e30054fb.0","@material/density":"14.0.0-canary.3e30054fb.0","@material/checkbox":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/focus-ring":"14.0.0-canary.3e30054fb.0","@material/typography":"14.0.0-canary.3e30054fb.0","@material/touch-target":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.3e30054fb.0_1649888126877_0.0007837236396852632","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/chips","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"976d1bd521cfa819212f2a543525b99bf46ec38e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.8c4da223a.0.tgz","fileCount":163,"integrity":"sha512-9AyUy0r8CP1v47xpeh1zVuswWeHmmwzCKkEGy7BEytgB3z77vIiEMZ4zFPNRJnMbgHhSjAQwL4MvQSD+nBxNAA==","signatures":[{"sig":"MEUCIDw8JWeOOTNn1xexIiSAHyFEKmb6oJtPl8z1iFHBpCf8AiEAsSdeOcFRnxhD6e7xmPDfM2A1cFcEQqyXFc2/srhwK4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogBw//SxFoOvHpF8tRC58065IMCeEYAhwOvcHY8KVutFGtaj7jyrzc\r\ng9EvFmSr1S5Y+pFixX2UPnIDDRetEx4eQhc+EWMJqa5HDfrSEFqaZPq8873v\r\n4z10p8u7xOLIyWu8H/Rw+iXf7I1qHAF2kfBrjAwTHu0Ay7rLu6hVV9laZ+W4\r\n/1iribqfLntvIjcEPHRDc9zDUHDQk2/OPYZ3+VCu6cKPeF2PMxPobEW0FDwG\r\ncWPGwc7UpLf7U+Tul4etsNw8EtyPkdph85L5yqck8Y19cY2XwLhavs2XIMlv\r\nc1JNghH121cOpAvpOCGVbvRFrn9D4IvKBM4Msb0WIBqRCdIkBLrTCCUKtqT4\r\nPACWdqex9QjOGAyfBN0/NandgqcBa72zGVKuAIAcWOzv77AW2iYR+NRwKaPe\r\nvo8onBV4K0rRvV78BNjAb0KDD/9erXUOhAEkCUvVQbi1E2j9mr28g9O0DcM7\r\nOVj/QzJxhhIM5dwhUvCGsM9oJWpBG7tJsNk0bQGSMhiTNmJSJVA5E/rS6DGt\r\nH+A1pW5eVmD821qfZG4Ou419NNWFf/xjQL9hiXWOsCVpuvxgAsqHQRXWqGeG\r\nNOok+DZ+43igUDngVxOTTuTGlQitxrwI48qEKiZYsKYMkrAoVwqbO4E2bS3L\r\nEQU9pO3KjF9I304Cu2pWE8sk+KR+SUaMi6Y=\r\n=L38r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/tokens":"14.0.0-canary.8c4da223a.0","@material/density":"14.0.0-canary.8c4da223a.0","@material/checkbox":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/focus-ring":"14.0.0-canary.8c4da223a.0","@material/typography":"14.0.0-canary.8c4da223a.0","@material/touch-target":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.8c4da223a.0_1650381923160_0.37921935276855945","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/chips","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdadbfa05646f098c2027b364a25edc2c63dba8e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.7de8965cc.0.tgz","fileCount":163,"integrity":"sha512-8ZE1ognk4tIf6KyiLx8Nbyw5oNoID06zeIblhlaBIx2+KpK751H62gS+I7zYSWn3ew2K9PmMD986YjcIFKD1GQ==","signatures":[{"sig":"MEQCIGC9kDf5T5zWlpagCSrJPhO3M5rOrWiWKXKkCk8GRHMeAiAmANpp16S2sz6mqVWopOePxNmapPTVwcr68726tZWWMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxqAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0qRAAnETtGhRShsLdzfO1ZzPm/LtRaUTecSn+AQl6Q1mQFFx4dU8M\r\nBKuryKq9pHm593RqDo73WfEoSYZVhVpRmNAzSYjqAeO7NhhNH9oJfozDvkKV\r\nm7IObmaNexBPR9bIMxUHwFhlS28DpdUPwUa/pihIQDbGSirkUSctx565Npnt\r\nOnqFKQ+ALPGjaHnAwt9KjT5c5WOyE92hOsJymvQbBORggfauCXJ8+tqksrdk\r\nuJjwXWhBNucLhHNEkoom0ddLqoyP2vRIxPY+gwaqtHOK/3kvRlL2tp7Mp8gY\r\ncdBd97YMzgyYbu1DByTaRwRgj4YC8scoYetxk9B15pAeErP01LWnrku+EylJ\r\n4EKdmR2hK3pUIDJTV2+/+6HnswINoMH9IQm5ZU2Xyo/sGSYEZb8QB4e4FupE\r\nXffKddnn0ygTEJ864AcUcU4Wi1MFxdB1GhWgLPyCpq3mUUEhmpb7fRde9whY\r\nTfva2sTPEwB7jQCdxXFRjp4HnLomNF7ZjpMMccc/xRs8leEekrhBalzn39NS\r\n2XuUXlwz47bEVCRgqf/xgOfSqeXcidOnNZEksWv3O2p/HbEJzMxyDx1rUKLg\r\ngCw12RrJ/TWORX//eRIfuGMsXQ6bwE8hdIyJB0r4ToS8JEWKi+A8jBKe1Bvn\r\niy8jMzPR0CPM8vRF1M4kOpF1GtFVPSqLuJw=\r\n=wO4C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/tokens":"14.0.0-canary.7de8965cc.0","@material/density":"14.0.0-canary.7de8965cc.0","@material/checkbox":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/focus-ring":"14.0.0-canary.7de8965cc.0","@material/typography":"14.0.0-canary.7de8965cc.0","@material/touch-target":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.7de8965cc.0_1650399872076_0.7113229922332174","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/chips","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.641ed0851.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a4bbc841fca1e76a93e5e4ab8fd7246cdd82c40","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.641ed0851.0.tgz","fileCount":163,"integrity":"sha512-mXHwyX264a3xIjWP/GJJqu45uRH8+XGX8q6bUYh2Wp7JfTkht+ARgF8LXR1CsH+Y02QNu/jaHRhSLkV2fjjGlQ==","signatures":[{"sig":"MEUCIQCg6m/1rFt+xu2WWx1iEOcevWV2/VwlQ/Sw8z8utZi16gIgOCBAt6FLCvgkNA8jWuMTE7JiBWjWtAmZDj0eeZUa54M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbhxAAmCxV2V02+o4k0lYJokL+vwighwu/TZSR/dTdpEW+fQJC2rg2\r\nijuC9yQpmBZTqXnES6PLKqjh6oRSXnHYMuL57T0WV46yne+uBeoeFK6lpZ8r\r\nCBAHJeGVHL9RDBL3r5Uv9GAKFivZQd+jAluAvYVJRZxoAjpEpjsgH1Oc8W0u\r\nfMHW3Ae69/LRB+5krzJBJdWn78kPA/79POCDzf5aNXheQUF1UF7S8QQ0VsnZ\r\nJc7Rr3v7gV/NnCcDpiMsmufEoQj9uVa/P633CGWQp9C3YqGwAIQvd040/jGf\r\nUq88Uznnu5H3d3DA7LFQEpGJ/rOnDvRy0s3UIb6twfucDJA0lY6pO+UgeK5C\r\ntxxpw7jXYqSgs7EPZzLrak18zdXS3enIsZt2ub1D1qZV8qfnvDAj1s4EWC8M\r\nCx7FDyEurJ1qSLsiWpnYF/y9Q0IuxLL8iCKu9M0h/YPWcrZ1o0DFUsHfJKfe\r\nR0xX/SMHB8mPB4t+z0A6F/7GjYbjdPmVnxsuA3aLLqF5p8RuNOYs0tIH4kh9\r\npQ8e4rLY+2Fv/4CBcH5XweQz1IPq5FBSSqWtWa9R0BFSFiHSOc891pUg2FpP\r\ny0UVKpkou8Psw+dSUIgQ92o+bEHduz6ok3Bk1uHainBCBEq8xYpFwu+npFxt\r\naEFnANvdHMB9/AowOvzSco+J7uwte+Iqudo=\r\n=TlhK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/tokens":"14.0.0-canary.641ed0851.0","@material/density":"14.0.0-canary.641ed0851.0","@material/checkbox":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/focus-ring":"14.0.0-canary.641ed0851.0","@material/typography":"14.0.0-canary.641ed0851.0","@material/touch-target":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.641ed0851.0_1650470815054_0.8217644931149797","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/chips","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.e88f83024.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c2ef33bdb5a370ff3a8e2d3ee6dd59ddc41d380","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.e88f83024.0.tgz","fileCount":163,"integrity":"sha512-gC6xSErWcRK3pz7aL6//3YcvBpWNYEwDBZUqX0QAFJP6kay/D6u9tmKMYxdfTC6TMggFVoCZ7/KAnmNmS5q3eQ==","signatures":[{"sig":"MEYCIQC8pohL4b5jomXuXZ85OLrxv0+gE88HsUszgclonwgBNQIhAL2c3/lhgjlQKIaBMsVikNBkkDUJuIeAmXTfyvk7Os4H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEeIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3oQ/9Ez2VdA3jRBmQjauHdQeO83u+nNyARBAkfKXzFl7aNk1zQbyM\r\ndZnT9tve2wUDwaSrJO5ltVjYMBF3apVOxTBpl5xiL+80UuD9d4Epc670snz7\r\nmpkBRSQUejyEjNxPTNdvO4260pfIByluQxkaQam33fzv0t30/xdWSI4ZYDSd\r\nuD8VZMBouZG90ktEFLMdYjGBQ9a6HdKXJCCJOkW2PQ0t9s3gQa28PlpnT22H\r\nxmcCasC2YqS1Xp56TTHhpHvkCHaRTMupO08RmHuyA83IHcI66KGR61mf4WTa\r\nf6hd7fds+RL1Pr7HcZS46ab+SDc6ItPKfOfGRj6P0utDK//KShg81+wa8AwM\r\nvRpS041j3fAsXylhbBaOWNY5jFNzQgg5jDUR90ihcGDtFMS0kM5DNG7gZX/b\r\nGjw80BfVmiqXqVGYUYjXUm4CFwuz/b6Koqv0MO8WmStgBQi3yOKzkipbrGE3\r\nvh97oI+5KHg20uuuVVXCLgvxhgE4qxjtETu3QZOZ+9cM1hNCoLyDCb2nNniq\r\nRJAyA28fLoNPF0HVNYV6T6uLc2A4AWgaHDgWviXktP3NcI/7nnwg7wK1oGtu\r\n4pgR09swltzNR+yrcyXFjzALFgpB73LJTi10rtivDRT4rJY+mo8c0g+NGDHk\r\nE3IBKx2O7BM/A8y6Htd/9IOYQ2bABk2/zLo=\r\n=mTgi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/tokens":"14.0.0-canary.e88f83024.0","@material/density":"14.0.0-canary.e88f83024.0","@material/checkbox":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/focus-ring":"14.0.0-canary.e88f83024.0","@material/typography":"14.0.0-canary.e88f83024.0","@material/touch-target":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.e88f83024.0_1650476936038_0.2190975321270212","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/chips","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.7321d6254.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0847f032dc2d2657fc2b58945d50b1f68f19bcfd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.7321d6254.0.tgz","fileCount":163,"integrity":"sha512-p922m6dquLLhmkvKCsCgs8jzt8SFXFZiuiMgDn6Rn/Xo1UrtmUvibVgx7rWeDNE1lpUatVObTAVutq9KfSKgKA==","signatures":[{"sig":"MEUCIQDZAH11jjG5d/5eClDL8Gqw9L+MUwKH9qR9+6dUoVtSagIgBcFs7UG+Lr4ajZ2nCGaSe0yPGPs77xMcl7S/EmHZpKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSuhAAgoKIwGidqgJ976YNcThPQilrh74KS89SM3k11mnwfSPbFmsZ\r\nAtUTA7G+z2aA4dAHXNmcXuQheA5coy5Hl7L5B7kYicEGd/VxGNy2tPlHfAtb\r\nT7TOp1QinB31hT0j3fSfUCtci93gUfHdjgaUVnYIwjY/KxnXpjujdbdboBua\r\nT3mDIDmCtq1f4WBLByHk76Djteq3bSnDkKHBlGr0C3JLsWW+dHzC7EIO40z3\r\nYp8k28sxyYxdN8uF/BekKFSHvL0EEGrsT6x4aHoAiFTwPc7fA3YOxMIQkoB2\r\n7Rw/PQwu8BzEqmGBrkzc51THmtwRcW1hHzOftZHJiiQbtT53wxeQyABSzmiV\r\npPv2DtRc0GiK/9QxORYDzn4hc1HcY8OOXXQrUySKUkxGCR+xa6q3JsVXxCq8\r\n4wgXS5kg8ZBm67japLrs9xNLx04dX56wuXik7ULPYrctfo2z3DWDHPNfoMdu\r\nuWep24meuPxeLehMEFQ3uKD6kFFMolA3nMSl2A9pV6CsI2nS9GbLmeK591J2\r\ngsFNAGf6tbC5xxZjnMjmrC1+X4sZT9BHMgrLnv9+tVEsowZulIDEJBvrrnQn\r\nkeRjTrLHDlAVpYI7wP5Si3aep3UW3RZtGTjNP01BiL2yTiN4mTT1huclRsKA\r\nmi0CKam+mkxED/DxmF2m0YVuW12iUFgsA54=\r\n=pdTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/tokens":"14.0.0-canary.7321d6254.0","@material/density":"14.0.0-canary.7321d6254.0","@material/checkbox":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/focus-ring":"14.0.0-canary.7321d6254.0","@material/typography":"14.0.0-canary.7321d6254.0","@material/touch-target":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.7321d6254.0_1650485551249_0.7378375216465647","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/chips","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.3ab956515.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f7503dd99254aa02432f253bbf87ee984eb09e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.3ab956515.0.tgz","fileCount":163,"integrity":"sha512-kCJKbzomx0Umt7eyNpdqc2QQZI32PNEveWEITlJPPnKpeFGAviESQADGMFrDKXu0DT0yfjsxZrH29ePKZYtX4g==","signatures":[{"sig":"MEQCIGWDRvo73iFefts6ocKHq3n2vYCXcRZCFeIJYeoapnayAiA0wu7wAFic/e9SAA44BEd4qFPgCB9rYkpQjgQsYMqC6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpioQ//XRyU8qE91dAM6Tf7eGRJgdeIuxZi/Wr37QlUsW3S1V9JJdg3\r\nKsHmY0NL/89O/Af1xoTQ8lwxLB/gF/knpdfmOnoZ0JI6BmD7pZeClqxe1LRc\r\nj8zADEMpQgh/a274dEStbpFyxPexeUHTw0xKHDAjhm8KPlJD1qHFF8z0GZph\r\nO15T2h7E+yNRaMX9a6krTllIt8YdF/h2sMDesC36BlpYCouHbYT1HZphD4Bo\r\n5V0hUs5v2Ltj7q6AuDq4LwKictTaUco3kMIhX6OUYToTF9VTP19VO2ebetfj\r\n+zWTkv7Y/+A8MyKkRpV2rL6OB3ucHJzc3Rn31CMSohsgUmpTdDc8iOPaUDpd\r\nlfE4xAGrSbjLhujTpNN5zdVl68meO7FcEb+GFvpWHvTGGlaCNOzfOD9bhNAF\r\nLfMvmSu/RK7a9tjLq/ak5K4j7LqaptMmAMdmQ+AQDftKOcChip6HqNmZgxGN\r\n3yWXsnNMT0i9+7/IglvwlCEZbuDz27i3ByHtrzCmxuCs+9uqXMCZjuAoZlD2\r\nqStoFJmhaNFOgPYWA6BPNtPn/5R7m3gRPZpStr4h/5dBLLlSN/6gXx8fToxn\r\nadSxznj2Gsph7lJpoeBsJSWvDhcjvsp1TEEIxDMRfHTvRwnpaoyVjeyqaOte\r\nZDRMR85vj6w38rNbtyq90twvST6Cs0C+nxg=\r\n=DLI/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/tokens":"14.0.0-canary.3ab956515.0","@material/density":"14.0.0-canary.3ab956515.0","@material/checkbox":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/focus-ring":"14.0.0-canary.3ab956515.0","@material/typography":"14.0.0-canary.3ab956515.0","@material/touch-target":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.3ab956515.0_1650898987734_0.8039813502139281","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/chips","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d03e5d4364a2b8f69c678d4b38f53ca9fb1c6d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0-canary.53b3cad2f.0.tgz","fileCount":163,"integrity":"sha512-J7qyWH5WPeRHzspPgkrp08yeRRs+1/duBJpwtkrKrp2qeBqrPFvEHK3OeRU1cO3B5bPsBJy+zw6DXrNhM+sbMw==","signatures":[{"sig":"MEUCIBqQypirR1+lK4AiKzy/ncYQ6AYDQLp73t9srvBdsmaVAiEArmYaUXnp7FUygDq+ishsITEoi9dFeCB6sHXOgIEDjVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBxQ//bxyMndxjN+YCszNODNyM5BlEzbIJWybClKjH90845IPH1fa9\r\nsW1ayMVowG5TiGEa5pmmGsqnSeC73cQ7uz+ifSqhco7ZU+6hHTzRtq4u8ayY\r\nbN9XwVLtIrFCr0TihD6KMsl2hv8QNBJDXEVAn/78JbwWUlNiwQZptk1pmYra\r\n5Uimr6gFx1X/g5xF+B6M15PhjaL470Ceo/6anDkPJS24vHJJx69brhM8hipW\r\nDloBApI/iDDPwTJ2FJ3u8jNpvimf/iIV55Jg8xXFjc4cWwLxH9YuDUuG/3ZU\r\n8s5/CWWzZhu5MECdn1tABrvABLOJBCQAvu93lr5YSN4iyXvhmU6i2zn+DBHe\r\n98pkdnaRtXtQHd7WIt9LolRTFZz3NTOMddaeEpMBXhUkfMqShDVtd3VL7FPg\r\n9voOz0PY8wgzliB4rNSl/ylhJ979+o2cOg7LTDCbTg/3h3tBB0hJVs65CpuU\r\nvf1/s/dpW1GW+uqvROtSZYW/Xs97DX7rPTVYSRXXXK6HKk604qd5SxqhQPNO\r\nfiL9W/TxXu89c5Jn5yXfQkivnY9f/osfi8/CHxYCkAov9fS2MAYDMAOkL0Cx\r\nDYOMx7aw5cAK1PXDwKZr5/5xFyqbzLbw6+G5XD53iO4kZvwPcjulf27DD+xQ\r\nKKsFk/5TXFEKhbNdk77OME49Qi+Ge50ZBQ0=\r\n=KeB+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/shape":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/tokens":"14.0.0-canary.53b3cad2f.0","@material/density":"14.0.0-canary.53b3cad2f.0","@material/checkbox":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/focus-ring":"14.0.0-canary.53b3cad2f.0","@material/typography":"14.0.0-canary.53b3cad2f.0","@material/touch-target":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0-canary.53b3cad2f.0_1651063592731_0.6523642343407245","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/chips","version":"14.0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@14.0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffa6e5434a23fcc961e03827e0ddbbfa395b0def","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-14.0.0.tgz","fileCount":162,"integrity":"sha512-SfZX/Ovdq4NgjdtIr/N1O3fEHisZC+t8G8629OV/NrniSS6rKOa+q1mImzna8R4pfuYO+7nT5nZewQpL/JSYaQ==","signatures":[{"sig":"MEUCIHD3crRt11ISTpPn66V7x5ps7X7LWx3Iz75xYcWQM9JOAiEAvfko9yTfOC13PIMFG++03A9puHlUEO9rSbHwYnLPneA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOeA/9HdqomY/TCVWAdpbmBHBbQh3bHRsf5q8vXBaBmiHKz5L2NGbH\r\n6QgQiDUCk/Z3GedFE1MMepx+MIP/kc6JPg1ZXM8/SclyC69zSa1eWUyEmMZ/\r\nJ9u6UWO0qnZlrlvpaZ1KdNgYAkPXGMThZ7OQA7G2azQLjGauwXlZV+hgDu3f\r\nhNY8PeFD2ap6N552D8CJWSOaJkL5lqHmJy33H9iJFSYI3hN43QH14fi8SewZ\r\nBQVdNsjvLiVE16artRFzlhfWp0YLQkFuDmm9upzkvmrk7Zgn0KD7VMX1kmno\r\nMiLdzXC0TmtN4wLKJfdgqNtY9iJol4cuA3wmjqHSTCm7KNMp/7PYsfxpw7Jo\r\nNMvDKD5wO7u3gXULC00xA+uCCdctd40M7KpP1YxdcRz/SJ0NvfkzvmuTdwjj\r\nvCYUK9bx9oamNJxxYy8oRXC0PsIJ0ZaqgL7uTIoNRG03vw4ikKVD+eGc9Q1E\r\nDlRG/de2UG7wGNOqyVsaUaKiUIN+lc7qVoRDcAPUJCLVGfN+Jxsc/EXnPYRl\r\nE7U2yX2+DcR0sXMpPCD5LSDpfvKuoAvRu7mrM6AvUoPUadIQpHxirkwVVHGE\r\njjragd/B6zjJPUZeJinD0wyMGV/cU/hEyHy8jfCggLBcA/gBPug6KHJzxxf6\r\nXYyY6PNnGwWYzH1dJF6kdmWR/tGQ9BtUFTI=\r\n=zsZo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/tokens":"^14.0.0","@material/density":"^14.0.0","@material/checkbox":"^14.0.0","@material/animation":"^14.0.0","@material/elevation":"^14.0.0","@material/focus-ring":"^14.0.0","@material/typography":"^14.0.0","@material/touch-target":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chips_14.0.0_1651165032701_0.32249734773768446","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/chips","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.432c815e5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7aabeb45f6fb8fc00e90dbbe24360c4a31d6296","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.432c815e5.0.tgz","fileCount":163,"integrity":"sha512-gA9ziqFX+DrhlZCqiyyjyPPEpzEoEH53WrFbiBqsGoqUd8kaJ59zCkudFKZw2SOGv+bzci3P+9TnvUGMeeHPBQ==","signatures":[{"sig":"MEUCIFyUiG2AZ9ue8QTsfE7HZ0YYls6+gEDJvof/RV5qltubAiEAzkv1lmQjeht0hjuESb4r14/xCFNMosmI7B+IwE9pOPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1605482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasemACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplSw//eQldaULwZUNf+wlDGQnI0+Hp+xIgQgQIoHqc7kSEp3Zr9vxb\r\nR8gTd4/OilscTERZqgrtAcyUJ6pEXQZIF9qR9h6phx4IyLhRm7wN+IiIv/5l\r\nmasM9e//ro9OsV08sDv+a8XvHubg+KhyuHFuNG02FwTo5yB76VptF84LajOQ\r\nDfsWAWRHOoeNKIgDd1js+PIMOwERpG6KR3BSQEiYlM5JSKAT9jGhn0FBU6l7\r\n+z1xzBnXBjxPrPbIbi+TkoyJXXfNpLj/o92F4xGYFwMMaP1mBrzetHgA163g\r\nEF/LeEaiFV7psvA26CSTUo8pU3BEn8g27AJZ+DNq2MfH2RjEWIqCLESscseW\r\nQjSjuZv/qhsSti3gEc8L+ZE8nVsSYHZiXyo1GMOseJ/GQNa7Yt2McxAqQmgO\r\nIgYjB1/WfhUfkHO3pPocPA0bSoE/xszQ6ln16FHcY7hByy0goZ9QsilD8KXP\r\nKSGZL1xl+QZYZqPqA7CWBr2XITGenqgpctXiiPGVGKJAPGPOldkSYLjqFbZF\r\nX0464SXEINl7E6c3B9g62GcmrDPWzopvSRqSHczB/M++JEyDEZ7x+dfAFR2N\r\n3rKQrUl2sOAVQInQ/DaM9/OMCUUCwHguUgBiiK15rPCqOxOZouVNgJHMBRkR\r\noyiJ9c5k/wIl3lgsIJ4QP2Qm8UwECY9maSk=\r\n=pxlF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/tokens":"15.0.0-canary.432c815e5.0","@material/density":"15.0.0-canary.432c815e5.0","@material/checkbox":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/focus-ring":"15.0.0-canary.432c815e5.0","@material/typography":"15.0.0-canary.432c815e5.0","@material/touch-target":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.432c815e5.0_1651165094335_0.6724886197538373","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/chips","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c47e90c603f1e53a4e09fa03d9222026f3b70fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a0f01f669.0.tgz","fileCount":163,"integrity":"sha512-f4T9wdh/z3IsAdhlQOgREWAotplrkEJXbyottIhyOIRS/1igRBzwmkvtwTrAUUI+q9sEVy3q4RlDAJ4Gf6br3Q==","signatures":[{"sig":"MEUCIQCP7Eocq10IVAhtJoFwUmBohdzlLaSzWRCZ/cygYywz4wIgG+pIPsLdhFr8bVoZq/CYh0Dk/zzh4cC0X0He3pQKxi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYH5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG2A/+KP0hl+6O+pHhdAussV8k9HWFHYUzomaZ0GjgCSODoZkq0hwg\r\nn0CYyquZ02hbKybSFX9pX7ybBaJTPaCQ9ge4dd0Dm1TxfbdIFKqjrmmm4nZf\r\nHhnC/ESG4712IjsYzTqbwPw3VJ6NXI6If3H+pJTRF8LLQRfodzRxzZ2yCQzW\r\nhQ8OnjuRJKraOGxqJ3d4oY9HVROkIlyegdojhGKIA5diIYH72Nx4m+CbiaC/\r\nyD7dQ2Hd5JFtQ4G7WEtC59+7bfhl49y0STjRLowVtLMbFUrG+z0s58SWzeJC\r\nBVcOPcViAAY613Hq+rI9R9dlOT6g26aZqiFO7SbLU9X9zwlmcyLCk8vbDa70\r\nhtEDkN+XbV3ILF+Zkx/1YsiSUwNjlVAQJnduu5eL/8Cn5zwojRjq8pxh6Zqp\r\nViHq/4g9ZmcoXGEOFI6/9AqblEGveqgCOWF4VcO6Of47qzCbkVbgQpCInXnl\r\n0XxFbKO9MaXn5A1wSPp432JR0/4oylYsCfke4gR4nDx29L2+G30kRI4YoJQ6\r\nOzYoli9lG1VvsIONx29/nFC/mB5CT+h0F/FrcgLZ2zcLljKr0rRFvadgVCeL\r\nIjqWRTgJgvTQRNg7b2myMAA+wy/Qn9+yXwrwQZ9Di1B7E1Hq3cM7+1TtHhI8\r\nivh75A6uC2Ci9Snc1Rth4RqisGqaGcAlOa8=\r\n=xdMs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/tokens":"15.0.0-canary.a0f01f669.0","@material/density":"15.0.0-canary.a0f01f669.0","@material/checkbox":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/focus-ring":"15.0.0-canary.a0f01f669.0","@material/typography":"15.0.0-canary.a0f01f669.0","@material/touch-target":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a0f01f669.0_1651868153463_0.5259394672176521","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/chips","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8837e332c343131f36ad864985f7a6f5b02abfe4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.276cb39a4.0.tgz","fileCount":163,"integrity":"sha512-3LFo9rbbpk5TJOGr3tkmf+8Hxc26TiS6UHodKJEN68G8dBKzugS1x+X3ESdbX5z7QqSaTCwghAWU3i9F47zXtQ==","signatures":[{"sig":"MEYCIQDweDnodHCBhfISNeUIKJ8ofE3+2VlWm50otvojsgPKSQIhAJajYGH6WBkJXQXuxpwYCW4aoF5e8h4O9+vLNjFi6AaZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZP9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgOw//QcbLZDZjVIP96AyENSo1bpHAm+pNXa4C0hv2l2DDIGco6Rqj\r\nlNkvpNK09Myaq+/0D+ylWGr0SnrDAZF4GpmQRKX4nd+w/IbB7BzAzfWvHhWO\r\nByuK0gJ83b/x7x3rGHGLHE6RDQtHQmMN8XyLliT94vQSyuUl9JvJOcjIlml8\r\n+/xFt78QhxDW8v4e77fnQbPrwoOAGe8ie9oMNEqha6INl+lpKeVYPB4fkLVZ\r\nfxVwBzhBgZKvy0Gjyc7UkkxD2PpH798L2mdauRMtw4UNUhG21N+X7rnT8KZU\r\ncSAWZ+3+Wfv9KEGfAew/XoIewX4QXeDNUc0EJCS+Ixp1mZ9kU/DR4dd/lXb0\r\nJ8p+Kyvev6IYe/jp7KQQQd3v58LGWAt4+JgraTW5bl34YUHNL7KfCokcxaIc\r\nELs0UiV7NTkfE2MCiMBmR80dvp6fOcP2hkt1y/li1eoA9ONc1ZPRsBBC7bdM\r\ntyNuYbJTccfoAyYtOA3dMzOMAXtZcRG0+3UVNBQG5cVqMSEWCtABHJixBj/R\r\n7g/DsWn9H2DqGjQ3vt0964PyAKRNGC91inhF7emN6UAQZNV6OzszwbyN560f\r\nbP06n4uLcFFORSc3JflzfcsMGVC6hG22Ws9EbmM1DnGiZPehcpxqS6ZeEyuT\r\nkeObzSbA22npnfyKBl6SiSSsq/ahsXdUIY8=\r\n=KUBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/tokens":"15.0.0-canary.276cb39a4.0","@material/density":"15.0.0-canary.276cb39a4.0","@material/checkbox":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/focus-ring":"15.0.0-canary.276cb39a4.0","@material/typography":"15.0.0-canary.276cb39a4.0","@material/touch-target":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.276cb39a4.0_1651872765520_0.16176826878532968","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/chips","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"016f0bb9c125173d92890155b7a8a808de31da66","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4fe98ed70.0.tgz","fileCount":163,"integrity":"sha512-rw0nYru6k4DcaMOksZ86H97iSDSCpEv6BoeAAYskH9sjCpHeqyqw7BczUARUESmW8pDA3Sjz4EITFDYN6iGQ0A==","signatures":[{"sig":"MEYCIQCWi3jJ+XIV1nbBXQ8nalrKovczgKC+xY/82kEItoKdRAIhAKlhar2T3FBCOnMpH13+gJf3aoUI6dGOlZphCowGQbmx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZm5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodVxAAkJDCFUi6vGhD6hXRwns0F7kpKBH921bkJOseJhtB6F+tdchL\r\n+Bw92EJqqIXDe4y7IuiCqkhMnBShl3REyMTnUDgR1yj8ax8DXr0PUYnR90uf\r\npE6O+DBE1h/YljRAduaVJlmu1b/RL/e5ulNqdG5xTAEtacdtJT4YgdypotIJ\r\naQ+Wa9WDZVQSSgkARRvJonP/EBZOgxh/wv32zZorPFnZyk9eJLu3IbF5YDXR\r\nf3y9wkOODT0tXS565xqlGgkm02nNUAS1mVupa/NHymwE7oJETs3uiQ3Yd4cq\r\nVxCAoWqgjAdDkbvjjMyH7lOpzzSIbG96UdJjiFs8FCGByDXgNuUDW+jQl9DC\r\nsvNLgxaZJR7MbpXUKjT/XvZYCPvGDT+y1v4rEvH4t9tc4Mk158NMZMcbaXy4\r\niTuFo0R+R38Z4uPktDLgG/dbQI3Zvq/CCsu0z73GRpv3ySiXfMiXlGmB0ofL\r\nCy9zeBQ2/cMeoJiwaNnE08Z5AehMLGDxOYBL54n6tYQ4afq0EcuWhyS7IgE7\r\n+RFboZMIVRR71YnafmuInZtG3e3nmeflr6MX+Szmjp3/2XfqPKj6p/ILKHuc\r\nwPV31XNAKdjaQNn17pj3Cyydym8sdYH7RgC679/HJ7BMoPoBfr7NVfpHlhy8\r\nlFJXJhWgYCSYfUNdoaiFp1440RqxtMVj368=\r\n=83ah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/tokens":"15.0.0-canary.4fe98ed70.0","@material/density":"15.0.0-canary.4fe98ed70.0","@material/checkbox":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/focus-ring":"15.0.0-canary.4fe98ed70.0","@material/typography":"15.0.0-canary.4fe98ed70.0","@material/touch-target":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4fe98ed70.0_1651874233675_0.8807441777023384","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/chips","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"141608907ef3cc980e7d7d600479d882ec7da305","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.58b130a3d.0.tgz","fileCount":163,"integrity":"sha512-UV6Xztx0yXBfgs7zUcqvlQ8Be9Fi3l9CvQ91bwQbTWGwfBJxhxKZyLhbMRIFwHUI2A6sgWKciFRRvREW4ZLQZg==","signatures":[{"sig":"MEQCICszRS58WtQEEq4HqGg+6wxb8m58llHqz3k+qxJSyFImAiAh+av/4L4o9ORDlp5vz9mUBH3Tx9nrB2Y6l6KpHWL2NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZpDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJgA//XK4h/UsWZFLH0PG01hT+0U16qny//w6TBQ3cQOp0GGkVjYiR\r\nwYJticMViBr2D7HlPaL3oHoKMwutu9Ff31QR+YawWJQpbGuqH6R0spveqx+0\r\nq5Td9omfBlj8O/JDuRi/qEIWmNuIa0nUFL790IWbnHf0vb2CaCD1LytGWUnn\r\n427JEhQpEZG2BI+ALtWI7p+XOncOICiteldD2DRfNtkxOFa7NFhIGXQt/gIw\r\niTxzveXmxhpSrAjoAXnRxhExiwOiw077YvBkuOYVpWv6dUIvbrZgAcV+Wll2\r\nzxNNNj92qATqhUGXN1gDphc0H5T8O5vn3PY571IP337owG6vlkKm3HT+8dbf\r\n2lrlBB0WuJawXt7N//rs7Ucvbam7OWqswWVICAqyDKeOmDW2GiLRhqjfiy9R\r\nunrD+bkymtkOzJdKCtTyLE2NzuIciJQ/JDGRQ3gwXIkXiBxPJJyrmfD64JUk\r\n/Ziesr5skgh9uL4COuGcxd6Ueene4HQMwNSKQ38STmlSn0Xveid1WM5XMkwZ\r\nacs1gJiHDjPHYVUXuSZy30baYgJ4gVuYNVBLCvMQAhwh4oLE6BAQa+i17ApD\r\nfbievXiGQneduegxX/b8W81CTi2bT/vbaYQ4JHyuDWvW8cnGC2awFzjDDIzA\r\nk2Agb4c0dgXsxLPELwQSocVpy9cRulxK76Y=\r\n=wKTf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/tokens":"15.0.0-canary.58b130a3d.0","@material/density":"15.0.0-canary.58b130a3d.0","@material/checkbox":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/focus-ring":"15.0.0-canary.58b130a3d.0","@material/typography":"15.0.0-canary.58b130a3d.0","@material/touch-target":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.58b130a3d.0_1651874371686_0.8384965591018771","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/chips","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6397356c2abdac2edfed62be5b1b4a1cc4cbe6f9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ae278a2fe.0.tgz","fileCount":163,"integrity":"sha512-No688LCoeCyHg+BMEIownY6MzukJLW1F90CCbgvV+enZePx1B44E9hUwILg0xczwWgYwvQzYg9k0seJzVhcooA==","signatures":[{"sig":"MEYCIQDV3jJf1684A5dSdktD+AHS7dXNxJXm0rFXKgmazA4HvgIhALj4/Da9tWTBqZZkWtIF2j7QUlVHShnZD9TxkR0ZJZHG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTKXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP9RAAkqq3eOwwoRqbZtfj8XUIzbVDmn8fugUxQRIlgGpYcCSAp+Xy\r\n4GCPYCdL1LT0jS8E3yteS67nZ3BL314RARaDcxYX1DVHmcCLuHnjpxyWMS6p\r\nJz3zKszqjsMTP9wauekTrI7RDiitsOu4qPisJYmSS9fNHOYI2mO+TfacmDyv\r\nLbr2FWhUCIdsQ9OBDZSs8qADgATsBjN7nmRYRSusLKyreoj4KSQuucHi1JPj\r\nVITPqrbF+fDxMJ/V51cvjDFx4SDNCisX44MpA7rf12shFiRakRSSxblrS3X/\r\nHZ08lC1MgM+siB4GVAl/I/sQJPH+KYF/pMHP2JeTom+GAOAydvbhTBtrpDIw\r\nEe1nV86DxXoguV2ROMaCecYLfqVlhxwypZh9y3UXimkocjpCIug7xaX3SIys\r\nf5gRiT3i7eL4Wteol6yxIJE6BlLrv6nZMNvpF7ocA3raxNxMX9qac2foNhXP\r\nXCLEsJB1hQ9Boy6h5UdDku9+5lUzqhiaEvIBd1NC4IyS9BSjw6XLwLsizque\r\nfM4z6UpUkNgK8ymoDxzQf67zrxK9euIoACKpbgFNjXBH0KWYrU1WyW4sp5mo\r\nT1rAkz9XMdWdY/Q9+evxYlRhzeE+kyjbXl5WqiSq9ISg2KGqxUro7gIpibJj\r\nvzN0yJqrdfyINLe+F2X3/3JyhHE5qj4D74A=\r\n=DILj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/tokens":"15.0.0-canary.ae278a2fe.0","@material/density":"15.0.0-canary.ae278a2fe.0","@material/checkbox":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/focus-ring":"15.0.0-canary.ae278a2fe.0","@material/typography":"15.0.0-canary.ae278a2fe.0","@material/touch-target":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ae278a2fe.0_1652109975504_0.7479706011549974","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/chips","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9e200d88402cdfb640e2e66c4c00ae9aa6d5ee7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":163,"integrity":"sha512-iBaLVTC7N46drWGAdVEJtcT0qMz34R4IN8ufg828pyuyVxCYlku7BV09q48purSxvyM7CVVcsM/FhfuzL2iltg==","signatures":[{"sig":"MEQCIFGpJQBeYZpUPHWMk6YU8YaRMpPxJtM0oa9yxcN+aq28AiA4NzIC8ijBOtsZ7zUXFVrjbF2h8iSwz+EUun+gdGO7rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDyA/+K2hUU8NCd88GyuFfN+tknYS82afgtX6dBHk3v9t7XDSAAkJd\r\nAbkp47PBjVn/loNbps/w3QYB/UeU96Y9t6FULIvIAEDACOjdQjDsyCVsBJUe\r\nzbMdjvXZLNd87U1Y0lEbJ4Vp260hw+q8LLy+zyWIsvE7wZBVR405bQ+qUs40\r\n5LEv6JSLpmIsf2yWTb9fhKrlcwT7BDPQ0d1vbewu69rzFwRKIzZ+gzLKEAp6\r\nEv+ZPeVU5R3WKAD0ZaWKsgYDXgELdhoOrpOvNSfkaPvQ9sJkAkcdHAB4lq7d\r\n2l5DFAthJeoZaS21lhfJIXbZac8MW/RM41R2oKUFs0cuAWZ4YJyLx7uhA3OJ\r\n6bSVobX/tWZGScmhKuU/y9ak6mWfQO8vvdznUDEYwBINGyLkb8mTZ4wKgtZJ\r\nZVbxi5QY1cQIR/MI/yuf0CxpAhreeFXUDXtntGuUCsA4I0k2yDe1IlJKq96v\r\nQa0D8UENae0JpDr3jgA8Wn03j/E1BpkXp7J3M9k4hCru3XCPszSQ4ksJgEqA\r\n0tanzrW2YjSecSKQQHCMkadIAuaPtAKz/wgM9EPRX5je+rljxhmlymDLesyK\r\nU/JvpHjkcVyGT/LE65ZJbNWBF+MtW3deiDFbR8KOdKJgPUu0zItMzYOQqRqE\r\nw+P0+oDnrqd4iIK8TnXGKGqC6tkafGpMZzA=\r\n=bw6j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/tokens":"15.0.0-canary.bebf5bfdf.0","@material/density":"15.0.0-canary.bebf5bfdf.0","@material/checkbox":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/focus-ring":"15.0.0-canary.bebf5bfdf.0","@material/typography":"15.0.0-canary.bebf5bfdf.0","@material/touch-target":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.bebf5bfdf.0_1652236894358_0.4577872175040967","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/chips","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb23602ba8bcac75373bfdccc174cc608b587887","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e6072cd6a.0.tgz","fileCount":163,"integrity":"sha512-ldZaND6HonXZE3guTmLLZfIOlY7cz80g8e3pgQCJitB+A+osEYBDK3bHsDMAl6zSBM7Eg0FAWrbB2QgsNblFnw==","signatures":[{"sig":"MEYCIQCl2BBSSKt6HY6+ajsAvn7KcMUGSeqxA9w0i9B6ED45DQIhAJhmezxLL77AUdwzf0YRLht/xTaW3GMCa949NNQDKjuo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphng//aK60F75mI/iIybpYLurnxU4zW+tlei+NQcY/OUQP7NH4p9tM\r\nzKNh/aN+7okO/oyBSLIEmvrqHauLKso+5kY/e1Vz4zmUJrIkUIcLbGYpaszM\r\nY6aovlkS9zAXPedy+Zeiz5weJ4TfKEQznXnWNCAhUemrYUZ+wZIA8RItwcLy\r\nT8dzmj7OIaRnJOqb4MNNzce77GTGn3J7JTpJdFnYL4pP7/959lYsykQb6FG8\r\nlteXWj0e2iWQ83xQ7VAKCPpUI/+wl5H6b9TmoZbmkHCwrjCIhwALtWWXVLJh\r\n2BNR0h0jw2FlUKzfkJosr29q6cQ18FeIZ3miJuTicghiiAf7AAEkMDNZuswj\r\nW/Ziv1eIg855Exswwm5D0HfUGuSoxIhTBpJO0EKNZ90cH0Iks8HiJsHi/aU4\r\nX0MV2ie9HfOEsAQ9HGMKycqaG0cPK9y/hoSX3TGLEiE8bHUh/cVkOHrNVzw9\r\nxDEbdPS3MCcxMUgiutNK4lPMU8PpuHDY1+eWsGFYrTv9uTxCochN0tc5UjTu\r\nJifyayDdQgvR4ThO8J65lc8NXfinZOMvWW5799+M3i9S/z89Y4qt64Xs6bar\r\njWEhbGPC6TSlm+zjzyhwRFHIDNXa5KA0SlQHlwWFn7f4JrVCzxHfaD4DFzvT\r\nZn2udawAZPWommNjYMbOD2ROpcHwbKKtzyo=\r\n=PLHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/tokens":"15.0.0-canary.e6072cd6a.0","@material/density":"15.0.0-canary.e6072cd6a.0","@material/checkbox":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/focus-ring":"15.0.0-canary.e6072cd6a.0","@material/typography":"15.0.0-canary.e6072cd6a.0","@material/touch-target":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e6072cd6a.0_1652300380243_0.5203447245192023","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/chips","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a66bb185e52b7aedb9b79dc3c688086529b0f025","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.5b40eb988.0.tgz","fileCount":163,"integrity":"sha512-fhdPDb9kjBjGhIOVCqjVd2J0mt8h6GvLilGZtOpw3rPHy0lLtDvUgQ8nX0jP8hm8VA05DlFb2wPZCm/GeKbwmQ==","signatures":[{"sig":"MEQCIAFU8n3LBlwleAqLzovKhXuc/m/txNISCuMkXZk4+apaAiBGOyzYN+u2J/tvIhLjMDIAGD99DHjEceDZUKer58JUZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHTKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxvA//eyrJIis2nFep08x4UCz7qGCEYYIsm78bvm2gzekb9uBLQyRd\r\nawg+N8AKo5Wig2K6VtpdIhRtdVU9nDheH40qotdQLEq83zwj6WNo1ePcMnHx\r\n6ogXsbjRUsgasyopjdtv/sRNtelp88TRXoa1E/GK6NhJluH5q4hVDMin8qt4\r\nkVJ8TdkotrT9iGed8+ViBsWTVc1y9JKMtT4KGD23cVD3RD3dle0tGpWvJiDk\r\n4UObwqjq/G+UF5qxYvpwtfviWP5Nz43EFdO9+iQOGjC4ODokRnaE/p6rM8TQ\r\nxFrICEcqkk9tNt2O7nRq77dUfbiGi6cw4sTpXIwhhty8zf5s+jcVKVXCDkOz\r\nXqV9ohcfYguqIsz0gQfr6691xFvCSsF4zl9h8HgWeFLV3xKCfXFRn0C9X57l\r\nnmwGXdR0uooNlapJzyva0+yKs6QhLWYGZUsqYD0wGEBGTrs3utyd0A+mNbi5\r\ntLd0Z1nPevAIbF/KjS1tqBLn3KP4W9tVP3ET8h6cLfewFIkmloMUoZIACJ9z\r\nLsAFZjRVGBtqxAdOiI08w/S48v7/Eb7zyPCFHSulf3ajfyq8pD8qgGVJEHhe\r\nNTGjJVEbfIwli3vxPuToLtKBTuXWljIYWXM9wPIaWZ5LwW4cmwyoJSQKxPGG\r\nP3KuXBpB2qo/mrMbggtipseHKeOWvVtg/vU=\r\n=RvVn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/tokens":"15.0.0-canary.5b40eb988.0","@material/density":"15.0.0-canary.5b40eb988.0","@material/checkbox":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/focus-ring":"15.0.0-canary.5b40eb988.0","@material/typography":"15.0.0-canary.5b40eb988.0","@material/touch-target":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.5b40eb988.0_1652323530231_0.8884566864088326","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/chips","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d092ca70dd71de74b81034f9fd019c39a594e489","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6a61d62f6.0.tgz","fileCount":163,"integrity":"sha512-J3YI+if77e3hyXQwhEhzzCwlBhEg+LfMiFb3NZ0qnPmBw3kBEt4ITU3oZpdBsSCKA/B7X1/KWLv+2eVG+mPhxA==","signatures":[{"sig":"MEUCIQCiFedts/5f9hOuJCI4FybkOIRW9uyjZE/4b7Az6UGWcQIgPgMl4kuFaD80ReRw/F8o5J0uFJyVLZpHu3uicSutU3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY0A/+JTVDkV9xcaEDFyZprzHyuxTNaw6WvholGKOkjj1foXCkbj+1\r\nzgbvVsHVG98F8hAW0iS59s/nmMEGd26TwvOFTg4Y2bsFZs4eeFjgFu0mKGXP\r\nayN5m9z9khD1Kk7dJsbelrru+KSsuTrpIULUJ88AiWj441OZhOla2gMnFH5q\r\n90qMOYHvAY0aONoeXugQ2C5wHCN3EgA+tNHC2DzYVZVUUHQ9izSyxBsiMD6S\r\nSp7CQ1UpsCw5aGTGBMVi1Y6YUasUkAhBLkAUidgbyAHpOtq+9sgTvHmoeMsO\r\nm+HOdvcSa2pjWSZJcJZtmwSB4L9gjjpV11Dnnwxrbw94SM+QwFTM7UGtb65d\r\n54ctTi09yzN4hUFoo0S41T4sl5UCvweHKmRxDzH7TOXrtGJAdYswkzYFW7Dk\r\nuxyr1fVStluMcxwvfCsnkZ1GfNvUv9Sk/BSUrMtm2zHLVTWB4f+Jx4/ahp29\r\nT4TyJcBCzy4Lsr+i7Ih/p355WpVTwjcfges6DvrLUEd8Udxi/2v4o+t9xW0e\r\nYDcyrkSwTxWRRIhSEE4fTnLWVsfV3mZfJAVGkQT/dVXgC9H8tw/H/dBWtfSn\r\n+GHE0jEe4QuF8+KReU8dJBXysAVmer4lqvpYYWurDiqEpE7T+3CmFPsz/xLZ\r\nhWcTDYDDBY08hRGf3HdMNWgD8qiq2/tZYKA=\r\n=EdM/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/tokens":"15.0.0-canary.6a61d62f6.0","@material/density":"15.0.0-canary.6a61d62f6.0","@material/checkbox":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/focus-ring":"15.0.0-canary.6a61d62f6.0","@material/typography":"15.0.0-canary.6a61d62f6.0","@material/touch-target":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6a61d62f6.0_1652387292806_0.7311069529262297","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/chips","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.05930a453.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"396c5efd11f5384516a51f0d9b97eda992ae450c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.05930a453.0.tgz","fileCount":163,"integrity":"sha512-TyfwWQZ6YA1FenkLMsBqipEwG+JkXlSxGRnN7tS20ASR6v6w1Si8GQ2vWdbwTBs9AuwUsrJvqo+pXmLdt1Fsbg==","signatures":[{"sig":"MEQCIF1YUB+D7CF3FICq0gRjBUvcmUySnyhvL19zeXeWzziTAiAR+iTq1t0vQ1y9PqvDi0BmM4ZEyiORgNNRraciNTQU1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqgKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop6A//ffcJF/CFH55Ml0EEKbZdKV6LxKtxupn5pypEIz0WH1Pt9XG1\r\nP0/bw+EA18GYcNPzhu1nSHk9U2lY7jwdzc/HD7xsa0K9jVqs1RKi4OzkRy9Q\r\nn1Enzek00ErdlL+lSdTVA/sVeAnCniuXuhEs/dcrAJHCE2JrHnfTpE1VE7E6\r\nSvIDO6gNebqXvYs9tEIGHP9YDgCKnNyf0MtXhEyWLyxcq+Ad2iHW4nBM8sO4\r\n+9MbG+DVBBuBmHvIyQdNOFlH4lRKyQVeCXmaVPq3gdWoDDBVexGJBGDkc+bf\r\nKVE1Yh8Evn6fyaRosmRBWoHxBCgh9F+FVEco0kEPaFc5tHc35NZAtDrjNIM3\r\navhjrCxkWGrWtSd04LjhCC/eiwbp9UOJpyX4cxqmY+Gi1kq9n3cVZ21Vf9pm\r\n3KcZno2n0gahmIr8n/0e9cQyXRyAN/9rr1MpMZIgakwNfMYduRMY+dHb7ULH\r\nXKNgCSd3Te2YZDFNagK/JZ9r6ATHdkNqT4xv4uS32ZdfjcAKBxKOQ53xyD8s\r\nchPG9eUb161btqpWgttS0VDWGQqcfyRezZ/xa22TlQGlWsVlSvM4t+yrEtvU\r\nN9cUoScZwi+AR1kR/qMVTPlj6Cmt8L6ZYeOFeY2F13nrdvRbZEnE0029SIhC\r\nOasOR+oN4fZMVxvLweFcK5klwZDim8En+vw=\r\n=8zbJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/tokens":"15.0.0-canary.05930a453.0","@material/density":"15.0.0-canary.05930a453.0","@material/checkbox":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/focus-ring":"15.0.0-canary.05930a453.0","@material/typography":"15.0.0-canary.05930a453.0","@material/touch-target":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.05930a453.0_1652467722092_0.3427523913437276","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/chips","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3884eed0ad3f98715da8cdce98d1f96a3d9de1c3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":163,"integrity":"sha512-H0GvakjCI4ut+Fbq0+PLN2qSlJWFniLDWC7Gasjvb6KLMiVoo/RnNYyJTuDhUrlxl772N+NHurs4s+/ydOXZvw==","signatures":[{"sig":"MEUCIDz7ae9TUeOOXuBO6SZbh9VcrEs/WtGd+emPnUPTukqGAiEAj9l0MBmLmnQ0JQd1HASLUnXZsOupKoUyg60kBIO49EY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEcQ//VyfC1gweF39s8x55amQFuL3y3vghVYEON10oFKVWOrH9QLxJ\r\nfaWPAapb3Nql91qbTJVXUYX4nh1O2X9Oh8qV9oSD8ExiUEqFXXNn7v26u3d+\r\nvxcvyljIDoqDrQ2dHhrecq8U20DcDVk6ZfJrG45Cxkq9oo5wsvjwBMaEnQr0\r\nadKp1SOoy/aKsUbPHtldXGlHUe2V5kcNs1QL0qB3IK0VD2/rTV5H24v16lJz\r\nl9BHaciUckPkAuTknKi6qZdgoe0qhgDCOw67051hJkMPcy6IHm5H3GwXzPYe\r\nMTqkfzjwcGXHp/fic7gNBhuovoxhUjGOcbSnuuGEGKWTK2d3pmJlmPFPD8oW\r\nEN3Mp/Py9EXfYrvN4jcgqN1xQBw6ryF2J6FiS0NzXKFyqMqM3vx8AprqVwCV\r\nzoWI2lYhOpw8WLUulrVJ32Pja4EjbSGYY30Eya2TBvzrlkzdNSzPWP3zjfZ1\r\nbUMqgph/7E2V7UDrH8qgl7Cb5UCgHgznCdXh7huUhGqDprAD7zCuv69iM0K/\r\nRWXEtc0DMVVnYN6s4Dtlh3JEtLToCWsC6JRXhBJFv9Kx/IBH0ZBQJMqtUDLW\r\nugbOf5Kn8ZihAAEIRlImgs/uDsdYzMMQACcqyCyoEsmykVzihT5GPW0FAW4z\r\nfC+VH2dLUkTWsAOyz3Dc6mAmGpxUG79N37s=\r\n=v/+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/tokens":"15.0.0-canary.c0a11ef0d.0","@material/density":"15.0.0-canary.c0a11ef0d.0","@material/checkbox":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/focus-ring":"15.0.0-canary.c0a11ef0d.0","@material/typography":"15.0.0-canary.c0a11ef0d.0","@material/touch-target":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c0a11ef0d.0_1652911333392_0.9823684881961399","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/chips","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a49bd6e1d44e1b7ce08d0950f863de9246d7e96a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2f9b268c0.0.tgz","fileCount":163,"integrity":"sha512-WXQWCW1F0Z1ldScv+oKVd7RhutJQhOmslPN2GvYSwu8Sm0Bdwdh6W7+trrd8dtQgPugQ10fre0jRtzl3Arogkg==","signatures":[{"sig":"MEUCIQCVj2hLfhqw2f5wjiJM5qI3QqWWpE1GBLkNHsv8Li94pAIgIuXRaOdkssYoLusGtxbUCypB0X96beTXJ47gP+uOLSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+cg/9HHuDXI4YSicUcRkz4tsNZSzDf1VJ9ReqKfWeF0bizaPKoo34\r\ndir5EQSie2fpP9fMs4A4wofbdIHMhVEA6SdbAkWxP7bCNpF4w4V5Zk+Ww2RO\r\nGR4vOWcugmnOv8DR7wSgXEegVIdhxzcKTVJ6Ls3UZIVOSuMbWBaIm7178sEk\r\nQh405GJfMYS+4ZOIZQ04Fdby2IvIdfIAR6MDr1xn/CKQtzf79ge1Ck1DxGGv\r\nZ5k14b4UpRMROqqb6Pxeh3RpO/hhgqTQqbPg11a77s/ZGJDQn8d+ldL7IRmm\r\n0CQs1w5WrMCDanLEqJ60P7rlMWBU9Cnhz32AT2yk1WyO+gKFMTjgV8DqNcyw\r\nHBkGyMelFnfCL0H4Kw/pQB8ouTJsyHj1vJZlK3bxNODUvmZQHCKj6HBS2VlL\r\nJJN53VJcBPenWl+r/6pBvc8BafK24hlgvITR77S2X+dfCWwgfV8CtloV7xMx\r\nV+QbRP4mDKb9+bSQoCo2zWD3TKKhQlh1mX4mWxBR5RTHFMjROT0vLXNhcbMR\r\nHf0iR+kWDE9nNbfNPW/nOM4AoIlkdX7awBUiImMEGxc81ktx7AIUe8i6Kd5P\r\n0U0GKWRi/RoGWBtW7GrGYVT+3eufjKRWf5DEaa5195s5YNW9tcI+nNW56EYc\r\nqpiZ0WLQVa++btGvZBrZ8zLL1MajDXXjhFE=\r\n=sqVy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/tokens":"15.0.0-canary.2f9b268c0.0","@material/density":"15.0.0-canary.2f9b268c0.0","@material/checkbox":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/focus-ring":"15.0.0-canary.2f9b268c0.0","@material/typography":"15.0.0-canary.2f9b268c0.0","@material/touch-target":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2f9b268c0.0_1653075234128_0.5960320022564254","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/chips","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7741345b8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdb0613febb786c46a2249743362ffc26a60e85b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7741345b8.0.tgz","fileCount":163,"integrity":"sha512-+KektPvyDNg/RWsnsoKz4U1zZxmrLH9Qis5Mk1fg9OAPDbyoVos89b4VROPte7v0n8HgjPfYyP8M+EN19YyhDg==","signatures":[{"sig":"MEUCIHN4EmvQSfmHS289Lv3Sw8IdJdoDY5GzPbWJtR0XXdcgAiEA65fmPjZcwSupMSCsph+hkT66gyBy8aFymBZTM2ifxew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSvg/7BYUn/pGfj3eVXjiXbBPGgQdrvzWO8+O7aFL3z45jhGfdsc65\r\nwbgIeRVbKnhXxrb77AiQtpxdtwwREStjqGSR5pchu02zWcAl8TfRaJs/05h3\r\n/CemqGMLkZvmcsxPUnU6hbkY4GgyZNBTk/eJ0QzmVm+zEYJhaGFwOpPEGBId\r\nwXikfhOXX5Zxq0mpgsolniH9KaoewpAJNTdRrvKPp/3usQJiX8RAF7jDk+Q3\r\ngnHDz4N+AdscPPiCsF3ktnteZg8Xdml1w+hOxZwnQ6KCrXj3KP904FiiJieW\r\nzfqskYEDcmbp+llhkp5OWQFFNdQrhDFv0hGOrlFkjRm8DX1hQ6lrv6H3dz3f\r\nf31L7dPjuJT+ZwNuQwRviWE46UdMDcNkkg/KysTrL2g3G1KP0nYUQa65ZMpg\r\ntiMxW6KCGfScJJen9laB7en/m7jh4SktglNM6X3OO0aO+laRjXyCKJdiQ4ey\r\ndsn+77Ai23j90ppW3bEtBiiRgaPHSy2bHdOiOGhO5WbHRmExFcL5dGxoKXFR\r\n6sKcT2pIR6qfOQO17ASVtjTpQwiK/P8LecVrW13fzTI4rmK8KNDztobrZKPG\r\nARXuePb/19uzzfMA1G4jrM5d38b2crKVjvF/uRhR8GovgBFH3kAkNqpYD7W+\r\nNc6kFS5TXkn3q596E+H+KNNRsb1Mlu63rpc=\r\n=Daw+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/tokens":"15.0.0-canary.7741345b8.0","@material/density":"15.0.0-canary.7741345b8.0","@material/checkbox":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/focus-ring":"15.0.0-canary.7741345b8.0","@material/typography":"15.0.0-canary.7741345b8.0","@material/touch-target":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7741345b8.0_1653077038818_0.06381839195661643","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/chips","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f807e793f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb85381540f5f5012b9e632a9be63d334ee4f1d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f807e793f.0.tgz","fileCount":163,"integrity":"sha512-VuKPL6IwNCXp47AruFXo/uh45SN+mxCVdHxEVwWDGAlNHxHkfAG6mMBxWQtAo0cQ/n5FxPERWil30+qkboO3kw==","signatures":[{"sig":"MEYCIQDHHnj1sMmAUeB8Eh4sFXPIdMUCsEjSKiibuWTdGDNc/gIhAI5xHway/33j71gYl+FpbFsLt7Rn723mANCjMIkAuOHT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBTGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf/g//cxbxRGjO29Al2AJE4UglNeybIS45uGke5AwnxA9F9tQM3Ceg\r\n+srWOW85/NwNsIO9NCAz/Us7/Sgm18KSI3KO5THLSah8r6ebu2TkVFb+7ski\r\nI2gtKLcEfbWLD6vX9Rgb4kD+x5N42fxT9UgCFRpH8/jKydB+0e2D881R0zLX\r\n5/N2yZJ3wV/Yrrs1wShUVgZP+y5BSmvZ7+0DyaQtl6uw2OIuW4Av+GZruCsJ\r\nyAr0ytQjohkzZCSpzCKWRCBeX5olu9UGgH/2aRoou/XqtmUsqrJzysnKArcD\r\n35vHBOzxzo479t4+JgwsdatKK9+8N2N5EjDxZassKR8aRkTKpJ5wl4o603Lb\r\ns4GuspKWcHx7RnVNga7RC4qWPK7WurtFWEX0enfwtcDf9GUn1KF6ZuCDpDYs\r\n5nesncyXM6acbxrVxhZt3ReTvYRheamFOBDmB9Z0B/QrwBCSYQVg3auS5U9n\r\nrObXsvT6TL/6fRAEFu8BMS0nsLKJzBbzwd386FdfEGzJGYAj1uRhhPK6NNRv\r\n4i90XXZJMjJAiUJ9KwNKrccC6QTseMnCl2D/AA7Z+WHfwcKgJxoLFxXOiBK/\r\ngRluevJgkzVNr6GseOJH8Cc8Yf7PfxhZlswndX+JamLj4fLzR5KtrBJ5PfjX\r\nwi0f7dC1IzLcyZ3jZ9XUePLYqn8TVeqw/nc=\r\n=QeU1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/tokens":"15.0.0-canary.f807e793f.0","@material/density":"15.0.0-canary.f807e793f.0","@material/checkbox":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/focus-ring":"15.0.0-canary.f807e793f.0","@material/typography":"15.0.0-canary.f807e793f.0","@material/touch-target":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f807e793f.0_1653085382211_0.5302243527687831","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/chips","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3440492fe21a68cf77be343badbdac926833995b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":163,"integrity":"sha512-4yLPJ5mS6yy0ccE5KxmFXnpaUG9o7atVRGzDo4P1tZ9zw7zKLMbsPm1GULtZxtN6YdBAwbPRSB0rLKi73+Uuhw==","signatures":[{"sig":"MEQCICcwnJ1VLS9TqDC6O1FypTnYh+SdSY6RXo27CLVsxV49AiBQOqWeX7assPGx8Ier+0o2FNDMn5TodnmN9X421DWd4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6E4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/8w//WjRJisQE3DP7n1c+bgs7tvkdtmPseYMhn39j7/swm/4AHoer\r\nYA0QTRmKHCel/g7wGpEEIfH9iUT3A+rjDIXYi4m3sKUaE67YsJTAtu98LID0\r\ntZRvHsJEcom5KhrMOEhBTDpGhh5THWYM03/ZGcBAqpm1I6aj6AqaE4x3aC5I\r\ntSnz+EoP1MMFYZnPEPREXNcg8494lnVS7fv+oMIoHJhJXA2xf9LwGfCKlRpr\r\nkMO6fKjSKAA0cA45Hr+F9Xlvhb+xuTL/rQXi9pWSDv/YohPIn43ZqRah2KTh\r\nikF/RDZy8+X2R210ec0BKdUVeBEI1k9NjHtgCsDUQoXzMiGcEfXjuUSWKTT0\r\nP1dpDYIibYrXuz6SywFJubhc+VIT4rwq84znqjGP8b3hAsh+kq7KKhGUBMVk\r\nzBWDl5+Pf34/DvoE3g/Zc3veKGZa7uGSfcEdOCxAAkfUcD/PoB7C194fpBoX\r\nkkZk9sdrmjGJ29ZBM2tZLKe4MhnZYjtOZM+MdMDXHcidtG4oWMAOAwKyEmN2\r\nEMPkJpTKjJthdWAnhvR5iOkzrzPlMPKUdzEA1rqF7QPftGCs89IGMROZiZTA\r\n0WEI8c9EircEb+nwZ/cOoQE5vM2X8PAnqCD0dGd10Kka9tKSjXaKwfwnnmmd\r\nZWARBsGIZw7EP6tPiECXq7z3yJrPsnHGIlQ=\r\n=Xtrw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/tokens":"15.0.0-canary.9f53d4a8a.0","@material/density":"15.0.0-canary.9f53d4a8a.0","@material/checkbox":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/focus-ring":"15.0.0-canary.9f53d4a8a.0","@material/typography":"15.0.0-canary.9f53d4a8a.0","@material/touch-target":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.9f53d4a8a.0_1653317944118_0.48762122750229797","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/chips","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f14d5889bfe67c141f37918d1dfaecae9931bdd6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.77cf00e37.0.tgz","fileCount":163,"integrity":"sha512-itDq/Hc4hFvGv0a6+vpWf7bqzpsbV0BfVNvvriEmyOD8H4bIIAE8IOpyRpZVyQDdHengXCGcd3tAxxfQ/+L07A==","signatures":[{"sig":"MEQCIG48y451WDjBZgZh1i/A8+WzR/iMkNfJTx+rB+zFpvasAiBs+sYLeLbkDuvfWR/ITz4XHMhnqTwrV67ipeLJsR4nuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillNGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokCA//XDnLMIM1M+JGeA3DIdk5gTcH4B4r+yiRG7LZleLEBnDVz4jR\r\nk8gnYKCxQS+vwBH1BA4PdYjlQAiw6N1ZLzL4SESDXvxPktywuZpJxgNJMLcc\r\n5pP/rCCjbGDMVMTSaw8nC00P1P+NTiHcO9vp1/axlS8mo2aqS13loUOH3lUz\r\nmFao85b3CHqOTI9+Np2qc5G30Nc2zCd02DSSqullxH0fz3h+nPYfvJcmjJQz\r\nKbq4BvsFCH4x/VL0kspZg1YsCFqROOicvMLgF0YM9eRA4IdG4nfZ38XfzPB+\r\ntPJ8psSQoYwlrYhYzA6GHlMeGCfoPEWanrBPHwt4m/6AmkVyDOa3tWybJi47\r\nkJ7+hRosbT14Z18gTtOJuZg04N6ennlcLRJoFHALuLX1oxQwAZeFwa7NqkEi\r\ncG5bWjXiMCojP+JyGjxYLv7XFb/4UQhIFb1v7snWItdv7m4pfd+8VTahaiZV\r\no6exVOHGBb92KWjgsQsjO6EXD08d49atFZGQsOyEAxpWLFo6qNGnRIU7kzz6\r\nJlhbjeWz46x1YjH7/nQ1h0eIc1q2SSwMr/2YJfbxiRm0FNRC+vvYhA2ARU3a\r\nDQ3zUz7evxWd4j0q2r5GsTYZhXWqi4LngiF0pekSeMlvBF/2k13ZPivQ83oz\r\n8EbNZsu2IUVE3gbuZsJXl15NHE+wpbe9aIA=\r\n=yP8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/tokens":"15.0.0-canary.77cf00e37.0","@material/density":"15.0.0-canary.77cf00e37.0","@material/checkbox":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/focus-ring":"15.0.0-canary.77cf00e37.0","@material/typography":"15.0.0-canary.77cf00e37.0","@material/touch-target":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.77cf00e37.0_1654018886212_0.1488686244668973","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/chips","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5de52f218aa0b43be5945acd85c5bce0b27b3c73","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.3c7b844c2.0.tgz","fileCount":163,"integrity":"sha512-0ASGvKS6ZFGQlNMQ1m/2JBebH28f3w2NOD6ZSAK/bc50jua4HDZnPH5Mtq1PfrN/4GTOLXga5ILed5v3wE36hQ==","signatures":[{"sig":"MEYCIQDqIYcOVW+SVXXkFDfX5AVlNhDbMkhRS6fPe+8M8DyAkgIhAJ7pr2CqBa6iik5KSMsfjm/iU1+iviMIkib+n60anfqw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpjww//QXvSog1a6FOwo6WoZQNSkIZ9BCxzJAU7utp8Vxe53vct7Gj4\r\n6HKA5VoGrTwt+aMzcvFYCvDZvqFtgx1MCdqQMuUfOaKwjOpPkmNaba5zr5w4\r\ncbfeV1s/O2G3uEeVU3oimS34sB6JFcnX3nPUx8xesUFmVcQyxN05t2rSvaF6\r\nOY2GPd2q1WfnFVN942MMS8/Q7QauENteOwkSNGgqX/ltHLSUHY1IuseMxJ+w\r\nliMK24+DmNTzestBXzu/jL1JqGHoxXEmHxC5A/i8jNcNq3VHSG6LwtIsi7CQ\r\n2JyuHMPe7oALSLEsl34BHtIOrZCpbEkcSxZGXRyYNzR4AjYZ+6JbiJeHn0z4\r\nyvBZf2acabg/l6ib+eduOhxjyt9husbUZCemWGPoMtXvAH8pGWCCOAyWe/LQ\r\nWquaFtq418Et67Zi7UmPf+9ZA+MCb4RjCCt0AQE/phUhMsZaVBKQdgLoS8rc\r\nYP3XKZUdRTKGa48JO3SNH53PpuWwJXNG5fC9W+s0dIAPt+4B+3ED0yVSiX2H\r\n+P0K+Xb6YZlI1oY9Gms74YzEet85Z1l8Ixv3hEZQqoKq9k+YRIMqJsnw2xKF\r\nygBsigsIP1rqeW+d/H3048SO1g1752X401q7+HAz5qw23wQ+j4r6hwObDK/x\r\nSvgVTOVhsuKEYekS/n2MZSWe+opKK00LCSY=\r\n=VaN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/tokens":"15.0.0-canary.3c7b844c2.0","@material/density":"15.0.0-canary.3c7b844c2.0","@material/checkbox":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/focus-ring":"15.0.0-canary.3c7b844c2.0","@material/typography":"15.0.0-canary.3c7b844c2.0","@material/touch-target":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.3c7b844c2.0_1654640556804_0.5964003700936356","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/chips","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.df47894db.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94feea24c80b4cfa5ff63d1545f4bd077a025342","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.df47894db.0.tgz","fileCount":163,"integrity":"sha512-IHre6gBOVdEm3CP26yY8TxoWvjmaqvd2EAoQZyHB0yRDe8sTLr8GuG2LXp7qZDOEcqyKJhXAZoZkxo2DmCkUSg==","signatures":[{"sig":"MEQCIGE8G0phqzsk/TdCn+RNBsalFYJpCsitNWGakGJTXEwSAiBu0q2QMlln2gig4SWYfglTDDpbEyFFikV9L0WrvzewBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip29bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8hQ//SkUkzQVzqa0cBocMz7qV22QS89CZXxrRAAfNudh2ZMMBGX3z\r\n8Ck7F02pZru18O9bLk2qn9vmf5AqzGRdsdvshtaA8vnkSTXCT4id+QT1YWvD\r\nmv5LI6wCM+u2gu3QuaUxkC6NWXx7iU3TO5CpXs7PEDxN/MUaApGdJevQyCmO\r\nFt5DtTU2by6MLFRLTm53l34tzHPxVKVRyI9onJAucFHEA+pwkzAxhO00ccUx\r\n6Y+sibkHrn4ASLMYOJSJapIATKA8WlmO3VhGpCZBxkeUijdOz4XIkd1i7iFn\r\npeM+g/qPIcDJbYrjnagcEPwCUSDRpvmALlRp5+eX6GGLnL1+y0F++FgQ/9p6\r\ny2f86K13DSEyXqt4vCPXBHUJkCs/jbb4UcDlGDAwg74hl9qKSS6udba+JC1C\r\nm1K6D1evmCT382k3adREltF+etGSIJOW0YznLtC9UIEnxGmJ04CktSZprG3D\r\ni/gfTcJYHcfEhXFR6DhOxB1pLrmoqJHuhvGCzzfP2zbY188oBTR6ysXZTbEi\r\noGkLpDrq1rweI08LbBoanGW4d89eIoX1jZw5fFlQSIF2O4ivA3+wwDRDA4Yc\r\nKL1lcBNNxPhGzQA9lGtgp4imBedcNTaLj++vbBx5sLC4ZGDYyvsaJ6zntBHX\r\noV6Dou+COnw2sj1LiyzzC14bmIbi4txYOcE=\r\n=1ZUK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/tokens":"15.0.0-canary.df47894db.0","@material/density":"15.0.0-canary.df47894db.0","@material/checkbox":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/focus-ring":"15.0.0-canary.df47894db.0","@material/typography":"15.0.0-canary.df47894db.0","@material/touch-target":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.df47894db.0_1655140187246_0.10185109444979323","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/chips","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61cf02f92e52b4a42af3c856695325cbf42ec7d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b18a873dc.0.tgz","fileCount":163,"integrity":"sha512-6LuRzq0DMp3cx5tYwbZ7VIZbYjuIHzSIAwrYBVBSaotWwzvsmFfe+YT23+APylnG8qZsRr33Y8tTDw3zAC9DEg==","signatures":[{"sig":"MEUCIAem+s74f89MXSwN6zARaseUo+JlVK5SwUKKNDEtDN6XAiEA4zz9htx/YgKdA4l5DdWQwmPQXObM+og8zDABdrExzkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotbQ/8DCmBvw0gNK+zR/o2zi1uXUdml6NAtkVBr2Gb+FoQB4w0Tgv6\r\nnmrlEeYyIfZ6NcDwVRevksiuqFuwP2tOCz8na2HJjHhsyBzsQq4cP3Zf51Tr\r\nw71gdejwvaIBvt6bncWXItNxtMT/rcEhAUK/XPG9NT1opyS6HNY0aAGvITdN\r\n1qwAoyA+6u0D1E9eX5WXhZ5G+UzgdfdHgS7CDlBgR/9Lc0k4q7X/WqkBbJnl\r\nSAgpJVG5RkWp+1oYm1BC2XKo6Phr0mkk5Tc4OMLQfJ2g0BU0QR8MiMHaBZyJ\r\nCPOpGuYU8l7R+RNTDKCugqnWO/FOORsxRLTf2BTw9fWiEQ5jKkKR/N/5aXr0\r\nxK14W5xJuHPjag6zM7z4jddmSC0n8PZHB3Huai1yy2fQ13Vi23KStp0+2jf5\r\nWHAhtNcWdd3BXcZtaq9+o3r9GF1EauzYOTr5Ima8ilzIzpb6oj65sEBfxOXa\r\nUnwKo3l+cktkEPNwpNEmPyerufYcBxfDEHSeay844cgScCId7a7K2pb5xSkl\r\nkOcY84zANeVJo/oVpp2PF6ZGPQdyj1IkgokBONkqd3IjRfdy5aeSB+JklTOi\r\nqmD2F17kohzTWnzVW2mSxXgInk8XUijUM+mKAHXnAWZ46BizF0A6oyWPUmER\r\nGe4PwgjGCjUCbNyfJ/MZBp7h0h7wL/lrCpA=\r\n=gWA8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/tokens":"15.0.0-canary.b18a873dc.0","@material/density":"15.0.0-canary.b18a873dc.0","@material/checkbox":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/focus-ring":"15.0.0-canary.b18a873dc.0","@material/typography":"15.0.0-canary.b18a873dc.0","@material/touch-target":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b18a873dc.0_1655188259345_0.7592836989487146","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/chips","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efafaed68f90861af343d6eab81bbd178e8a11f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ba9c29637.0.tgz","fileCount":163,"integrity":"sha512-VceU6TFXc0gV87j6plJ2J4MwM9SwTD8KaIMcDxOkL1nWZU8hhjQkfl5RnaSgnhgEgHjsFX00P9Zp0P7Mlo/ytg==","signatures":[{"sig":"MEYCIQDcTZpHQfyn1ApdNy8aZmycw8gB9spd9L6nqBS81YfszgIhAMsBel0KD4A83BVtRnjgDqI1nTVmSloRzx2cgxtB3NQH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNpVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUjw/9GjB1iBV9bfVquoKli17tgIZdOm9vdfKk8XLmcbpN2uUJQ9MX\r\nof0kXrjVsq8UZ6Sym1W5JvF/zQWJ7wm4UtlWY7Gj4VkpqK4eGp7MoJ6Ivpy9\r\nTULW4d/XbzgoEUGMeTVFqDtGpICZxLah5o1eaE2uVBmDGVgE3YHbziPHTjG5\r\n5/6v+H5AStmMDd8vPiWETaaidVEQxyqzgROaR0+RwU2DT0YlTxSBW69XVv1M\r\n3EvKOwZeMIVDn76vSvXAPm/Fvoqa2fzCcaU/CNd9RKCrulIbjTkcIUAhtdMi\r\nK14JOK2w72jZpfw7QcntGF4s1PvXuTA7h2W8e1SfN+KWjWAa/PZvny2K2AKL\r\nB7Ag3RhBjK8I9P1fF/R+qzHyo8Nx8fRBwWga0bO5IEt7ttW6wWcecrumvfPu\r\nf/EqFGm4QSqXH372fFhs1fZx4xw2ahetZwmBxgCvpT/5QLsG/WoZ5pyDDdHs\r\nnoioDrjQm40uu0UqXgpHmZ7vDzmwevJUuEwz3HRm/gIadfGsnAD6Ww0TpQsw\r\nFtStSfjgjm4EHPgRaXRP4m8kbpT61CGJuWwfIZERR21fxMI1ouCP9uOLc1Av\r\nG8/2KZMu26pmLdz/ht1t6aZTOVwYBqcyWmXm1ydsVb3BAS3Tyryy2wOl1E94\r\np3m22x33aK/25ulgkKrDyIoQ/g/DbPzhudE=\r\n=SUso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/tokens":"15.0.0-canary.ba9c29637.0","@material/density":"15.0.0-canary.ba9c29637.0","@material/checkbox":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/focus-ring":"15.0.0-canary.ba9c29637.0","@material/typography":"15.0.0-canary.ba9c29637.0","@material/touch-target":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ba9c29637.0_1655233109682_0.3820537198138647","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/chips","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90751d981b71b4e78a2ac76440f45938df65f8a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.9bfd12f01.0.tgz","fileCount":163,"integrity":"sha512-XvnYTcx0+oOqcoQLVCV5L0HKMsW4lgbFW1bIREIUOyQNRJrcwJY93x0jS2j+aQwkOytmBztMuZvoEApixAp7Ow==","signatures":[{"sig":"MEQCICE3aksaNeft+1KC7Pi1vaAEkvuXdeCNXrPWsbqOdE6YAiBrybyh0h1qU3xJwLOFfpnPub4a0PCcgpDWOQM0PrpsZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2w8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppBw/+OdrgRsm08DwYylVkezqdDt8QIVBc2mEncj5Z7GJECbIPe3PH\r\neWk2s609udIsK6CcPvCtE9Bqh08MsdWQOUVD6AES+4o45lJr4jOpwbrYI3NJ\r\nkQF43oynUi8f8Cp3FTYURcJxTFpYU9REWmvl6dxyzHsIvchKcmuvHuXc11u5\r\nWpcDVrJM8Qa1v3qp8Wn6ddYlBUsXgkG1q8UikvzWoR4f4Cdx2rXVXjCC9nUJ\r\n9wele3s4EB93RI04SMc85yrnpCnEuGMVTcSL78qrtukO7AbPgetdhD/qDBtF\r\nhjUOYQ7qnh+fT4QFcSQo1s76gd5r1jRTAdfjT1GviYm+x9GuEGnjHZbZuDZX\r\n8qaku0GvvyRpAQwlrqW3NdtmhNPcxZpqOXRzNAA52QibNVFvxLWirRIJN3Lf\r\nevCsJVg6/KarXSfAm22cs1Fh/jC2Mug/d+DBN1SZbzAzp+bB7uNh3gTOBFhY\r\nIL5PbsYXfqgF+fLVnxXjI3ySDFDHZSm4rqSaJ8h8PI+O5cNPMruk6rbdWfZd\r\n1i26GtxgGyzEFcgMnrWQsql0LK/YhnYqwhuSheBeg9tpJuv7OhGSCd1eHIOW\r\n6R+mM5Mc2U5lRkw6pYS/oQ46cdjiY3T+l+HnMwwDUkYvWMEIPnBZ++a9aLND\r\nlpRObITCaHyx2Qrfn16TLu/QwcwjrWH6Vys=\r\n=CyIZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/tokens":"15.0.0-canary.9bfd12f01.0","@material/density":"15.0.0-canary.9bfd12f01.0","@material/checkbox":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/focus-ring":"15.0.0-canary.9bfd12f01.0","@material/typography":"15.0.0-canary.9bfd12f01.0","@material/touch-target":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.9bfd12f01.0_1655925819961_0.7641421517492637","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/chips","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.764de225d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fdbe04020d6c66cb2f660dadbf13d8ee70e72bc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.764de225d.0.tgz","fileCount":163,"integrity":"sha512-7laSJdYVhhF3QSf3uC8LU9TAeU5jym0agiGXq3fVgIb2EjHsdshXFmgP5PaKXGM8RVdgxogcgNERTH9PclcnnA==","signatures":[{"sig":"MEUCIQCx+OUTeE3mN2Pr7lby3jHcKpiA4EWgeCDf/m+/He+1GwIgWTOLS3KEQJurgI2ZuT+jylZCkULDnBDdxoPP4y1mNMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrETw//cr9DdGR58Pm42kKH82oqXI4ud/CYeE2KJeHFLSR6kda8Y9MA\r\nJWNXTb3nLUdhV3Vv9Zyfc9xs11FppMy7bAdObJdUQNa7v3HohMiowp4i+F1K\r\neal/igU50gvR8UIWabVWEJSphekxAuipOX4nt1S5VqqBEXynYguwem1k6Dgx\r\nE6r+t9a7OJeZKev+LSAG14Y5ePsvxCe4jgsnNRBzUzsOu8OM8I27PGfNHc/s\r\nOaFu77IzNUnNgxiDIQ0UJlhThq98pWkHrx65VQbiq4YjrcvJ6w5tdrQPU3fY\r\nWOwuTXmVBRlEbLC7j1wX6JiWpLnpa7odqMrhLZ6L0/TR0dNO2PuFFZ+jyjm5\r\nOkZmI2tdWu5H7hLndu+C++fVnuFxZJNOxDHJI4AbsAhfVfWXolY2ZQEwU75w\r\n8QyAgf4LoMXlAlkjiff+lqD72cwpXAPLu8ZQl+5DH3bpwLLfJLDtVJP/CvyM\r\nonKHTT6nneVqf5QVs6QgBK9EDbfopgB5vP0ysfu1jfMQo55VgLQ3PNupknNx\r\nf+fi3xC/WKdTayw66B6jvfdf+eTkeJidOlgZ7RZ5Yf0/Nk3Vh2WcV02gUI82\r\nVqg4zyCpwwvRAtF+wDoRLvX1XHcT9KpAayk3cFNiXvhm9ZIZKnoBO4fFDqcM\r\nmLAufQGLt9UUcV8a7or5rA3UpscJDOI+7qY=\r\n=QSpM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/tokens":"15.0.0-canary.764de225d.0","@material/density":"15.0.0-canary.764de225d.0","@material/checkbox":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/focus-ring":"15.0.0-canary.764de225d.0","@material/typography":"15.0.0-canary.764de225d.0","@material/touch-target":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.764de225d.0_1656520090227_0.677812802159955","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/chips","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.31e517cea.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87efcf5dd507a2ae0e679bd4bde5d550149656a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.31e517cea.0.tgz","fileCount":163,"integrity":"sha512-+1H7JP8ClrWEi+mxTQkyQwH8NHuNLJnZ06anKxrQlh+5OWkhRTWgVJLkWlgluhEkZhISryZknSFTkegLpiINjA==","signatures":[{"sig":"MEYCIQDMm1WomgC1mi9oH7JsfmhVNm5WKk27zhYi9uO7xVPO/AIhAPAo8v6aktQEuYaUYuDgkwrEDI/4wpsJFCUQUbmtlgOk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivz0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqymxAAj6yjDwhxH7kdCAodS/OJ+ruVYX6rtMOpE9gDVqg/Wbsp4W0Q\r\nFVJSWjXegTKuTWXdW96exSow+yAl227J3lMrGnd0hejJkXKGgxYUmwqVSuWs\r\nDINTULkGf8gm+gT3wevNpAzfLG7hfCnHQN87VM3IvOHvJEIP7oR5e9ObY4f9\r\n0cIMWmUnA1HNbehesuasN7egFS+B+u7mV5BpvvquTrYfw6hWfp8PQWEwue4g\r\nFK5yU+McIwLKnk15t6pfir9X5dImjxy0Vkr5wyLT+FmEQEaLO99DKhMORNG+\r\n8coz7nNQE1qMUVxus5+dI5YNxbqeub9JSZ+2b5YLYmJStBwDuLSVgW5oYo4T\r\n49bvOkBnfBheO8tTw7hkcxkLwUiDUclW5mPZJ7Llcsn67FyiGQSwvQgCkCgY\r\nc9oh/K+RzARAmagFH39mqEwcuKE2HrYo1hmtAZKEKArmah9NHSazeNk+0lA4\r\n9Wn+0tAsIIrhNV0MvCnpZKE7HvUiLiXTE/Sb2dQo8mmG7BhBJLBDvNvAV3gG\r\niNzQA2s7qs8EyqD0kCDAYKFzDOC6AyCoxpISz237BAfMgSK+30tRmPA6bvjt\r\nJXu1U6ACwnypK+Sfx84KwtlA616pqiqU/O411iuBt8IbB2A2cooCC44eQqez\r\noQ49nQ5BSSt5VU0JyAvTrtf2E2RQKqSUZv8=\r\n=64zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/tokens":"15.0.0-canary.31e517cea.0","@material/density":"15.0.0-canary.31e517cea.0","@material/checkbox":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/focus-ring":"15.0.0-canary.31e517cea.0","@material/typography":"15.0.0-canary.31e517cea.0","@material/touch-target":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.31e517cea.0_1656700169730_0.726965952938875","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/chips","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f3c7a7b09498649c522eb917b050c7706802822","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":163,"integrity":"sha512-xKQ62qnvVZIQoCpT3H3mk2N6IsnaSOfV7zOYS7G2HDfHiAYME7fsFqXe/yV4G3MZLqZprj9Sww4oqwoJSNf31Q==","signatures":[{"sig":"MEQCIQDvfVuhxp7GGu7faZN7fTiKriT0tnuzGomKbvNXCEmpLwIfbcUW4C4MKoTr7sjCq5H7q1LmBzFWr49qrY5QYNS4yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3uFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwvA//Vd2O1gS3Zd/19l4kD8uMqXX1fZRewXu1zYcR8GX3YDTHbaXu\r\noPXyPV3yV68FsRPkzRNu3RtuQcMMxJjBOfU1snn/qKxdifz1pwUvXHrCwNRK\r\nMh1C+NP63so3PBjpmimU3IEiYXxwOi+Eap+0U+Ql79z4EceoBkAlDrg+nNdw\r\nvngcYcY6Qn8pt5MNXJt55cGm4HT2rUDJyJRS7g7DtwDxTvdz0xVE3qihqNJ3\r\nf8r39S6SrGPoEvNoSvl6xttjzvRKkAxUEDvDiQYRRpOEPWlD/jiEAH8SoEiR\r\nq43eemo2pq8TohqEOFP0eQ+ftze3L9A5W6P4wmhnArUh6f+9gZig/zDVmB2k\r\nWogZ+eVVOGkxjktiH94TLyAL+nJd4n0RXy2dBxfIzN9B4IDNhCLVuHp9MSvf\r\nI7m+0Pleg9WDkxh/gFByek1HXUsx8dwjSV2YeeYhzhdUNgqnG7hjPL9GcLsJ\r\nOemOplgPLTPEKfHfAP8/H91/rgaEqKN9XVTKksJT3dNbEzw2FlYSlopeCIiw\r\nH/rOMNsSz/leQDYMYgPd95ykwyHToU68nJzonSDY/9hKYclLyQLVU8LHVDaV\r\nXIT1K6k7qaEbYa3QEGKDagrA7HMQBi2rM0XywocxGgTt41KK4dz4NRMX5aYB\r\nsWoS33/Zc7Mk04jKOdVT+Ttiqv0kVD5l+GQ=\r\n=OWJX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/tokens":"15.0.0-canary.9ea4e8e9c.0","@material/density":"15.0.0-canary.9ea4e8e9c.0","@material/checkbox":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/focus-ring":"15.0.0-canary.9ea4e8e9c.0","@material/typography":"15.0.0-canary.9ea4e8e9c.0","@material/touch-target":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.9ea4e8e9c.0_1656716165431_0.36088764225179815","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/chips","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac21c71a6f9dd7d5889b66f808dd4b32354c382b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cd5bafabb.0.tgz","fileCount":163,"integrity":"sha512-LXSM/0+8HH0dJivN5xFVEPPLOu5MAUk3G/4LXz1YlyR1WinMiMK8cKYWX3io9C42whbGe+QIvgMgINMDlYvWUw==","signatures":[{"sig":"MEUCIGm4Mzvz82Lds8TLvjv4BAcuPZadVx84bGwwnF3YKTW3AiEAs6GtBYNiBMr6HV5DyGYVS+yCgSxQn9xGsMG+R/XObvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcyaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRXxAAmRdsjcJJ3i6A9yOWd3jCxyE78FMjXMPw5gl/tQIrt/oz1pGL\r\nW6luH9zFZpVv2+ApJrAVil9Ni91yAzX8NkPiXU8i+KmQPP1rp+ibFy5mOKP4\r\n4xpPcYgdthgBT5S0u9iyvvxp7MPkafp0KUzj/MSlpQuH9cA2Itc2UTHpwS0J\r\ng7159zRXT4SqE48bp1hrNycgSvFEO6JCmZJtL2O9VIVcziqD9Yg0H4Aoc3Tz\r\nHxgQrXlFnJjxLeaQDSrYccDyLBTIYrIZX/pLUQp6KFcP7HOq3JLzupzQBq22\r\n4IvKodM/qsjmRmBv+S31xG2tCYkTWrDx3nuoBKJRHsaEoMClokZ1kS6kpxkF\r\n7ff+4Xay2HTCP6nZ2SF0WvbjkKZQA+YH7YieONuNFp7OGtVyKS7muSro254N\r\nxcUTACjc3Uv8LdDE8OmQiHS7ZPkG5oknnqfnK8iWbPT7eWEmXx425VBXlBU8\r\nVCN8fHOYAboW5oYUsj9regaarAJtcZ6VY34gJ5TRa4tCVs4GEGT0/4Fi+qOD\r\noRIlTiSVZp5rMOMIbvXufxofn3Yh52OEAMfr6w8iWrdEQeyDcsbbrhtdY0pm\r\nqZ/8E2racrJD8RKzeRjzlds9813wCPpYz5jFU02LTWLDKyhiszQnSggSbo/z\r\nCsf9G4WG5h2ouD+uKe3zdgEs7PdSTSvQg2E=\r\n=4igw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/tokens":"15.0.0-canary.cd5bafabb.0","@material/density":"15.0.0-canary.cd5bafabb.0","@material/checkbox":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/focus-ring":"15.0.0-canary.cd5bafabb.0","@material/typography":"15.0.0-canary.cd5bafabb.0","@material/touch-target":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cd5bafabb.0_1657130137711_0.16639275156994993","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/chips","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d554e99edd3041d541712e7e412316d10260d378","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a02fe49d3.0.tgz","fileCount":163,"integrity":"sha512-zsTrm3YkyI35156Xxt2khFH3+Chx9eZw/sPCrgE6X0aQQnQapLIMQ7YGhBMYnf6Mck3LRIz8Q1J5sGdrL570fA==","signatures":[{"sig":"MEUCIQDnlS/W+1AIBdMy6Yzph94ZtbzXENv58WDfHjwbc2q/jQIgGKpS67u6dA7cfyARul9l52rH+u+f53X5o2mGQK5VqdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdncACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFLxAAjWeHxCMxF1vHTknguXH+jgDDfkQAjK99wwY1ID4+H7CbrPSQ\r\nJnHNlyPGSfjvrrUBtgq95pGO/7Pfno21zo360tsXx1ZIwaNQR5vA+Q3GBhec\r\nihGZ/6uleYpQcQVbFBaPsR/2/2XHxpaIyvzchQY2A0I46K5DGXXjqhmOshS3\r\n4PJkr/9jgv1oJTI3TRH4Neil3hqGUsMoICvPaCHf2/vlXE/PmLXSrRhI6amd\r\nIZpSDyR/CvxRpXG2w5Wnpcpk7ednkjZ5tf21UB33HJM0IwEtVy+LSxCu1pXl\r\nU6fVsEQ7z4trBe1yYexV+DMSkhVmiQyNT9tJzcba8XIz7MvFhG4XJAks2+Q6\r\nF9TwvQBruE8xXGXcWQ7aD3kGV2mJAmZjA0gJVg8kbOlqFiQskpds+gkL8uyL\r\nsK8BUocgLYPeRKsPGEY/IZQZ13rk95YxmQwRIipTNw/Pfs9C2DUBQAllS9/g\r\ns50I5T9buYupqAxUbLX+Ilj7ENyMIcPHcmYrX7riOhy6qJE9WRAamTCIcE8m\r\nbPvQyvoWYX27gQ2CdLbK6/yVD55hhk1Xp7tAF4PXS2pyHkUHadmym4HXFsBG\r\nJJ+c1Rrr5seMI63dP/mojW+cZ1jsV2Iw/52mbm8XUXT57o8OyeRu6VXDUfkQ\r\n/oW9CNgDQOUMhnce91hUorPccxMASn//nQw=\r\n=+AWY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/tokens":"15.0.0-canary.a02fe49d3.0","@material/density":"15.0.0-canary.a02fe49d3.0","@material/checkbox":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/focus-ring":"15.0.0-canary.a02fe49d3.0","@material/typography":"15.0.0-canary.a02fe49d3.0","@material/touch-target":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a02fe49d3.0_1657133531860_0.659343094155642","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/chips","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06ae143735624483eb0dd16ec8c72f97767e34d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.826a3d8be.0.tgz","fileCount":163,"integrity":"sha512-TXZ7RYx1vzZR1moMRrpITRTXapVAU3suH7XvXhQpR6zXE+FyJ5VRqUuQ2LbPNEtKpe3uAXSZykYM3NE+7rZuEw==","signatures":[{"sig":"MEYCIQC8RfFkIzUhyiDIeaas3fj3wEDRzuYh2re4GxnIqvbwJwIhALKtAiO64hC0XXZhDKBNqVGplvztq8vpIFZvQnNSULS7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeM4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWOQ/9GkOpxFLMIUQ0qMjwvMnxw78CQFoKvW1tzySsM0eYgP6LxUhq\r\nyXV2BjaqzPthAFz6ROyxWZhuQ4Jh9/PcDRLF7mjsFJQfBekWPdi5XjiKTj4S\r\nssYVwZr71pdoVHEXAKYdkJLIxx/hFf66qnHoKZbJhRM6unALqXrNpMQi599U\r\nChbAdmc2wt/2aP4nlt6qMjFYuwCIQILDxNckzy8hVBCTX2siRQSHSTk+Dbg1\r\n2vBLbPco9tBqRSA0cBsBWep/F+uDBTGHlH+rUuGI4UBIVxMkdW/efFlyVOm/\r\n/G6BGqW8diu/FVt+xET8A8EwrnteJZnoPe5FOXe+KF4jEOt6BlGrvABeKiHT\r\naiJWBm8zwJoiiANdWpi8SLibEzw/iqLk6PXVtAukjSXe6JfP/FBqaWp3ax+D\r\nl9RfhKrGvDDHzkCziLMy3ghFse/LNqdF5Vp+naCMoicML5UYFuyhFnWriZV7\r\nQMrgnfR2fI6rDCqR+IXXFUEqn8PitjxyenV5f38cFz2WusfflV9i/DKvYuly\r\njTcCNLh2Mnqt2tv3hyqVAxzkrIhkX6KQHR7BvOxWdNe2QZ9b+3JW3IHyD16+\r\nmxC9YaEEIkquCJKZkBcRUQdPSU5HGODnwsAgYrBWS1QBHjvm9x911q9t51Ie\r\nIeQWapfUcnaCjtt8O+a1/+xR1Aw7chflows=\r\n=LeSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/tokens":"15.0.0-canary.826a3d8be.0","@material/density":"15.0.0-canary.826a3d8be.0","@material/checkbox":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/focus-ring":"15.0.0-canary.826a3d8be.0","@material/typography":"15.0.0-canary.826a3d8be.0","@material/touch-target":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.826a3d8be.0_1657135927639_0.7772182975746282","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/chips","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7ff57e84f831313faab9e9cb05a11e989157046","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ef276aa93.0.tgz","fileCount":163,"integrity":"sha512-7Hynw2eJIu2EUbl1+iHjYpKYhimUW6QWWiVRHn1lIDYoMJN6J8UV6HwHlYMbfYyTiG1i5Wuop1A7O1RZvMJAWw==","signatures":[{"sig":"MEUCIEKXVcjvZttAhkVeBvsvwFvOv0F6aeTjpVtMKZQe9P7LAiEAp8ovOOkwqQBNKSKHrQ/UUfkRzTGtm1MxJFlFNOq9OV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxH4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosWw//d1bpPE3Ll/GTNjI/F0L7V6EeteDq897xUpcXrVBrV8n4GgMq\r\neuQihNAXB3cQBmuCmfGXbAji1Mq+dXq9wEawpgh3lB49Cx/nrcUMapEQKgUM\r\nnaJJwrh8Uglcj19qyP7PyEIqd98nD/T/qOQpnoQfvvgL430gf3SwgIe61c8C\r\ndlusymF/2+ywEhxZjp1KfxmcamAgmlPj+DofCd+jLVyvjyn5INX+P5ZnJMZ1\r\nVuRBRl+TZYc2hZPetH64LwLCaIDfxUSu+3BKcW4bNcegzlkQEYqa2veylmY5\r\nW1zdiTXUc//KB8WlQtttsQIuJZEzNTH4MxA3wfp8I3piJ2K6eBCWytDnYYTD\r\nbZ0dXK3m8Fv0TpXVRSaVgN6SR05VqrNfhsbRqGb96tS6AorbtR9t8n1CgY9H\r\nRvVaSFN2MK/qAzQi4xHNuFqjf0EWwhmalsnKE9PdegCtKZWY9UtVWfVKYtnJ\r\n0cRcB8Geho3MklORBpbDN0O1M2tul39SPrLVYt7pggWE0ZWneHe2iTyfyx1E\r\nI0qCaZcOSMM0mktNuw3/eBkxRZ+oKzQBN8srmbI6uwfMOYqpGJ8H14PjhSnH\r\nY0+mWmGYTYk+M67HGzXIqMjcDMp6sthYrgM2U2RgGkQhFZtGG9Ta3SgtZfsZ\r\ntljATZ3ACGT8FJK7+yQPAtjuFlMZbcx5q5s=\r\n=PXs7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/tokens":"15.0.0-canary.ef276aa93.0","@material/density":"15.0.0-canary.ef276aa93.0","@material/checkbox":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/focus-ring":"15.0.0-canary.ef276aa93.0","@material/typography":"15.0.0-canary.ef276aa93.0","@material/touch-target":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ef276aa93.0_1657213432050_0.07212893141289434","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/chips","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66b99970297b913fe34bd4607caf6fbcebcd4f8e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.59cf61d6b.0.tgz","fileCount":163,"integrity":"sha512-XRHWlEv0rCgCNNNC7GEV/NKBPFooucF5R5sFKcXF5UJCBOz8VaG78CiWn93iPVt9rt7gwGOU3k2LEo7G1OgRTQ==","signatures":[{"sig":"MEQCIDMV+dWuBSFNBzsAVTSyQJqm0sP3H5cfrRklgNEw4Zu0AiBIYq7NtvZpn0dHUJUFFxug6Xqssu/enfAYBKEi497qnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxiyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeuA/+PHpf44GngCcF57bEc+I7ecvKUzsglG7ghUjyyrhdtnpTLDwN\r\ndoDi0KXDoGK19CDIwltRs/MVSMTyhSThdysLfbzVRVLXwA7gy0/ch75MjYJj\r\nXeF7J15nKFFqJK719w5NjB1R3/y2iB1nyGnBClhqeqorSZ31j6mEkGWDV85j\r\nRZNPzhOEtXtHyoB8MV81WVesHHGg318sVx5PBE7+DvCdLoOPfH7ESkS+Whns\r\nkNvyLGhgokxEsO5UtxlvYhQwXhtvCYvCamtjjIw9xkyxQy7OzoRxrovKOXmK\r\n2cmwPVrvY6n2oN2p/CDFi67Lwqq9EUZfbwo9m0jho/Ca8SiDEpZ59rNoEm9i\r\nZKrUcnRv12GDmFFvMJ/G0eqF7ly1ylnpXNE2dC9Lv6CfyjT/7jZiT3TUm1mx\r\nVfdCwXllFnKPGX2OpU/+F+8vVQWpiDc1+L7oUwgVtlM6Ez64EBSL5FaPuHFA\r\nL+pSuIvkJ6VuyF1irlVLuZJ017o2skfHwDCB0TWySAUKnona8JQm35FgXzAJ\r\nkykJbMP7YMVJPLI3IuyjKzDHeconBN+4aH2w8JV9/IEK959Ae8YuJeYawbgP\r\nM18MnhC8+DOq3QMvUsUQzwoWqU3yxElaoGFYDr/YWawqdP8V2K3o6ssCu0Rh\r\nTf5ppzwqs8iC1QDA8UfjwrD8XlAHh5IScJ4=\r\n=dZq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/tokens":"15.0.0-canary.59cf61d6b.0","@material/density":"15.0.0-canary.59cf61d6b.0","@material/checkbox":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/focus-ring":"15.0.0-canary.59cf61d6b.0","@material/typography":"15.0.0-canary.59cf61d6b.0","@material/touch-target":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.59cf61d6b.0_1657215153941_0.3423988506933069","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/chips","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8647092f7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"103468142426cc2a79a7947c4c0657cfca535249","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8647092f7.0.tgz","fileCount":163,"integrity":"sha512-gENnO1jMX29UfzKH4PRq6SiRfbLGQkIHMIdrtYU2M0eO/s4+9CShSegDWjJ/zliOcVeL0RtrQxkoQgMuqoQDUg==","signatures":[{"sig":"MEYCIQCfEns5ve7/RWRzkQsey7xcRaToru+2U9KxD9r5LToLfwIhAJ97Fln18zSHiqAvUuuZWNvBRN0PHy63kNJJOnHimAs8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0SUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo68w/8DUydVPzvGLcpRTRxXIjenvHj++EilVKz1pbaJ3PLE6XKFsLy\r\nKNhwVf43r2JoZJGp8r6TRZX9fV2HmuIVIXHVT0k9JL+aujifkEU4PRieU89q\r\nUKmIL0tcAa1/u0NNL9lIQKB1P1w4XVJa0N+IishYLVw99CQxlwdEUF1wLkn3\r\ngkAWHcTqVkRHyrFCv1LDFWMvak7eoVChpS8WTcsrMp9zeJIDOQlY6p/oS3Ql\r\nz7A0WLxGTF7zAbnCy+bXsMxDckJ/2Lav+pmMSOiJVcnNx114ua6udxKWHNuQ\r\nTgobcwW4zS3bHy1JFTXZ0nlrhkhBt34OMBvLos83ttvRA1P8KW1o0DsGCWWl\r\nS/JLozD3s4hXTI4dTR/3PUwADPGra0yl75X5NpGZ72h1svbYHaoiL68ccPGc\r\nTE1OfYfysu9hUJL5qx71tezGyh1Imc+jtBdUAhJ5BzHOsMHT5f+SpoSfv0KM\r\nqzukA66x7Kh1lkzIjMcBpnz8JAZvJyky+amFwiNfBcF+CSyWRACVqlNjFbyx\r\ngZUwhU35Ia7rQIH8J29nj56IDUNEkv945Y46ktd78Xzv9IYtD7sdCurP+BBB\r\nw2+b8mV+w1P+vYSTAN0icKDIxa8GeyeNx2qy307T9C3lGQMJIxJf/2ThZHXa\r\nxVT4n/22Bc9+ivPXawFa98eCjsQvnEc3eaU=\r\n=mszI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/tokens":"15.0.0-canary.8647092f7.0","@material/density":"15.0.0-canary.8647092f7.0","@material/checkbox":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/focus-ring":"15.0.0-canary.8647092f7.0","@material/typography":"15.0.0-canary.8647092f7.0","@material/touch-target":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8647092f7.0_1657226388113_0.81682354554458","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/chips","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b785381798c7a0265d94724fe0d4701bf90cc0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.02ecd4d85.0.tgz","fileCount":163,"integrity":"sha512-uVMvPrTaX2kvdcloh41dp9WeWoCGXo6Bf3FcmOUdWv+lcWwpRWaJfEGLRt0NdeC5PAvvJEbPpvcu01cRQ72Tzw==","signatures":[{"sig":"MEUCIQDkXDbgnkpgy2bGj1LGmzKUYycnttWIrIYis03x2tIYEgIgbgjyj0spAr5hfm5hNKTZ+brr4tQKdaXPMOxh1oq5Y9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJ7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhZQ//chT7LLqdsv7/bJR5BuyAcE/FRLSAN0d3dGucuqPazK3+Xhha\r\nJZMPA5mD7kyWnGsBxxD9W8ZUZ0d4dBFc+SFn0nSJoYQMU0molRHtHijDgkDs\r\n7IC2OvmvQlkIke/AaeSb9U2GTJTgfsv5Tci2aowt9fcNYhCKwXe7o1L7BPnt\r\nVRz11sFCUauJSda5EhQU+qLOpuLf+BQmdJkrKBq6CVICfTZeo7TTtj7qQNwx\r\nPauMmKhANqBu7IdPIjb3s1nsR4wo1zweG9Wv7B6N3Kg08+3+l2ujRzabcvku\r\nywSJJNjBTy6ebHb8oPBknjFOhjzon17jdsfviLYF29mvvuEIdE6vulzoZ79B\r\nBKVo1XcGWeg+dNO1xFJY/1D9qsILx2wk3us+1IIQ2S4oj94DYYcD73sgA3OV\r\nv/ZTpoV8iT2F5ndxQ3wgEt901b97tnpkdfVfuk1bx8YHNgZDfFiMGiwMDIBo\r\n557bKI6KYZsIc3zLw52OxtF/6mAIzeeToFLvEsRmshvk6wUptBtuwlhpU27W\r\nWrGcnivUyoJLKAOuVyBMU02RAnFRM0f6zTEY3zKogJQh/p5JU8hsZXj6+gGc\r\nk2z2nfM6P/i0La4ULynzagwXhyD7qNNsjXbWXT3wiF5rRM6LsRWmvjv/ho2e\r\nO/doVpirtJQIXcdImfB35m669fRtSO+I590=\r\n=ZmLL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/tokens":"15.0.0-canary.02ecd4d85.0","@material/density":"15.0.0-canary.02ecd4d85.0","@material/checkbox":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/focus-ring":"15.0.0-canary.02ecd4d85.0","@material/typography":"15.0.0-canary.02ecd4d85.0","@material/touch-target":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.02ecd4d85.0_1657557627050_0.10590234874745819","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/chips","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b44df947567108263b39ce2f789317dcaf08c44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.63d3a146e.0.tgz","fileCount":163,"integrity":"sha512-wgalW/U70eT/EmDKwVX6Tg9jC0BoEhuoFrUrG7rVVyVxzCftCYOVOTctuNYt5rLCneyzUO+pvsVQ4+WOFLgRHw==","signatures":[{"sig":"MEQCIGQyeq3E0ISMvALIE/XEmvxNX9CRU4xwzsN1epaCTpCxAiAhx6ZMkrDQJiRSJjH1eB9/dzf6fwkEngNpF6hoDHZxTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaxA/+NyXTxEYfmvonPuuFsuBRC217rnSmzTpFxn6CydAeNjcy2QTZ\r\nWtJTpF1HdN76Jr5H+iADMj9i7UP4NBW9aEvNHJPhrkH4WexoU5IAtWq3JHrF\r\ngrW9MRzPm3pJam+EsgxwFSa9gz8xlIU7x9G3aov24pq4f9+y/LnGLbLDr5ZY\r\niBaujKhfIi+QrqudLz3zUjEzpe96Jrx8EVywySgAIXHJM1L7pS4LOyF9TM2t\r\nYd408VYmPEs26GQau/VHqZ/CeV+6DigMA+3u8MlNNT6wNIVoObymrLek0+VC\r\nRbJVGoGb6nXWEL8jIsads1o6RfPZOJWHKm8t/mrzPZG+6f37USgRdh69PNqH\r\nOXxaKwRDwQehWqc8+Xwdzc4QHxfd2uaxpwj/qc2NDzFBS0Z0j9KYqo1IKt1F\r\ndVGKzDuA00ybla6WG/DcAPU8/NvFoSkxjposbNJkPkils0B4Skhj2U5+hw1a\r\nTVqkxhUdWuCKtcHKeo6K3fF1YC2yNYYRRaUzUsdTtbaVzfZ+GDIvuVc7XsFm\r\nFSrKLWZPtn13EuJVR6yfMD5y+WhfDODu9X56/eApsKBnh5hFuvIcLQoH60yt\r\nYYb3TIDuoVL5jr/LGFrrrLbj6BPbJY4DYXTw1AWOz/wERbOjbZFW852fQQen\r\nLl8A14n5HeRND0lrAyKFsjaaLSEpO9Ph30A=\r\n=rZ6I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/tokens":"15.0.0-canary.63d3a146e.0","@material/density":"15.0.0-canary.63d3a146e.0","@material/checkbox":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/focus-ring":"15.0.0-canary.63d3a146e.0","@material/typography":"15.0.0-canary.63d3a146e.0","@material/touch-target":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.63d3a146e.0_1657625894150_0.33983321025160795","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/chips","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.88db01990.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4d3d9811765e69e3d9d6e610cfff801ba4a8fbd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.88db01990.0.tgz","fileCount":163,"integrity":"sha512-a63prJl5HhB5Xkk9v9KpunaH1p2XwcsU+cLE6XyQKory82kcTXNDvpyaE17XiaqoD8oMChO6R7dAJwhejq+TVg==","signatures":[{"sig":"MEYCIQDl1vGGoKJYCdEF3u+cJvZd2newVp/gtLOdybWSJAlxowIhAMzN/IChCvhf+NsE8dcL0xkM8DCq+rIqNgNoG3LzVJ25","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpomxAAkEbMppx7IvLuHaTuc75s42nw9KpwnuJEtXmlx9Fdcau/UwFc\r\n7YcTswnfX/C+ggmP8dVaXhPTvJipnATuCxcIny60LZ+xaxj55D1ySuq26pHz\r\nYTUf8S+3HS7o36SkH6pp04PfDpnjMxDRKx7p7QxV191ADIrt6MlwRnOqnkpT\r\nkev+4cHzbVWeZ+HgRd6TXiz0zolyenrvX3d+8YyBBARztNDggovgASSHAzBa\r\n8+cu+gmX/Ox5IhfeetHnX1SQ1GOUotKYfCXvkByQeUC4Va74RJ0yKcjsVywG\r\nHYUEVmqnfL2cAevsNB/YEorjjkCpbVRLIJz61XxAeyJUfIHOcKaN9AmAaiAP\r\ndD8nbe7YqeO7HScNneaJJWSyckLd7qeuLmNWCWQfgasI46e7TwH2+cxWuYLm\r\nj7ywNchWAIoTunX2sQiBqXA8uIizE2o96Lh6DMwC1R2rtz8LUr9rfWuCXGC8\r\n+c2NNzt7UKMME/PNqKPZATayCV8hHm9t9qSTZR7puqIJyCmEQVwlZ5Yo00OW\r\nOYNjpCxCV6mETYqbXrP/t++BwoP7pccGo8gBExVtY0zf0nbIJvXEMpTyRiAw\r\n3cQ7chvzFBXuk8+SdsAi9VNHiBZoqdV0mpLsQVMmQKMZGSqnaElgRvuFfz/N\r\nVXiV4PvDzSBFmbH47qrQLRUfHGQSTvd5H/Q=\r\n=SYIb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/tokens":"15.0.0-canary.88db01990.0","@material/density":"15.0.0-canary.88db01990.0","@material/checkbox":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/focus-ring":"15.0.0-canary.88db01990.0","@material/typography":"15.0.0-canary.88db01990.0","@material/touch-target":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.88db01990.0_1657626076386_0.88964131946679","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/chips","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"747ebc2730bb2a0b6f831ec538fb4c95aa321fbd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6432d8fd7.0.tgz","fileCount":163,"integrity":"sha512-JSOSiyFd/IM+xtIMMUgmkS0GYo6LLxwTa8TOz9GgzAihH7OpvOp8S5JT0LWtv3rmHp5Z17vJvn2rK1de5F+rOg==","signatures":[{"sig":"MEUCIHrP362XQTxAA3wjHa5Q0f1D1+W5VCbhsGTpxvqIN/+9AiEAmYCkbezU7CQZhF/kk4m02jp2iU4GIbppAAEt+U+wFCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8X7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzFg//V5cUcrGwj8RAEBNF4pH76Dgx7d02KW8obuctIvE/ZmbSa4II\r\nahXRsQJYAbmMgUeNydBS/8KvZ5BTdlX1zTDqUHFE/tXufa6fr1TBcgDaqroZ\r\nl2QpSJuMt0hx8P65cjAjYPnRTTndjlEWoLAgUXBbpTKDfQjooa98U0hvj2Oa\r\nPD8c68e7i5/tNlNBaDT00SVjHFR3O/L0dn29xqrrtK6hzEFqSeWy7UPnRYtc\r\nRXoJ9acR+Ubs4PvZEVgTMYeOOpHeUSQ62X/N16esbczD2+YZ1e5dU9T3uQHf\r\nvFKO8qNxXVp2d5qZkUeTo8s4dg+4TiBLe4LDNGPQLJHllImLy/t1GXGnPIqP\r\n7QGKfK8/8NzIrBwen1w787h1PEulaiLwpvPg+IgeiI2AmcGWmLS9uecuzKuN\r\nTSR/WukymduqzVM8dUgqabN0bz0BNj1YXM8De1gBBR4gVA5smveMK90tUzUl\r\nQzvbqQfLFgy9EjEH+q3OKqTHv87NqhHOm8yvpVNeSB8xQOwyd8PryJxNcL6d\r\nYTi2KA3Aw9mLtysCBCYBAIUTqQyBdfyn8CuXgM36C1XiVaECpBbNvAw/tSdw\r\nBGrJ7b+zyJcf09RD5v9fVuLeWM9lFHwYZ4EK08wasxvEQLPMv7OHXsZxmrNh\r\nsNIlP7b/N7tx1WULTxJpSyD+oIWZwGHslrc=\r\n=VU41\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/tokens":"15.0.0-canary.6432d8fd7.0","@material/density":"15.0.0-canary.6432d8fd7.0","@material/checkbox":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/focus-ring":"15.0.0-canary.6432d8fd7.0","@material/typography":"15.0.0-canary.6432d8fd7.0","@material/touch-target":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6432d8fd7.0_1657783803021_0.7991085118138661","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/chips","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8f52d3167507309792ccd4daef2f34cabaa502d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.085f9b25c.0.tgz","fileCount":163,"integrity":"sha512-mxVk8bkOBVmhetGK22RRvuOuEX3Z+GNxMhGprALuRt3BG4l51QnnhhQTS45wl9JnXWAX9KXz0k5yV361Nervyw==","signatures":[{"sig":"MEYCIQDon+4Rx3EKvxNkCZFutfVTeTQQravo1ply8WZAQOSoGgIhAL9cI7a8T6TGBuEnqfgrFM54gC0qsDSdUCCA98/5UqyO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EX2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphAA/+PZfu4yKqGUDJFmWw33SvdkpFqClIsemtJxQbwfFKFGfeLClc\r\ncejCTcU8wLWJLSAHzrUckqmgv0CWH0yhih/DYpHJCpYJ0UAvgWup/wP1Ug4W\r\n/dZDFYn63dm9krNSIHBd5z2CdEYqvdHrBmWuzPjc+g8xkOlYKyepZZh++ueq\r\nVK9p0tSkcu+Y8ou2UaeAVOYIL+Uhg37SdxZMVk5kNg6W/jr2aPNSXph8yCmW\r\nqdmiSQ9AnYrmdlgCKcTR3jkPqCSnbusTh3awx13brQDes0ye16i9IPG6W/sL\r\nEfAk8IZm5LL01llqwc+6c5bpdMqwu1GN9fCSsGlC58q15gsz/KFiZiPDadYN\r\n+6pSc4bqvHgwP5Tw6i4AxodSx8EiHx2GHJXNmby9ZsSzrftmGdx9KBy4UQX7\r\nWxsflrUsZfZTnuMqCqO2lGB4pBouzhXgO6C9a/kRClKPVvfSza81YedM7oHs\r\nP6qj/PNjTigjfQYPR/Nd/zWVCqduMVR9FWghAdMBLDYRzjVMP6cleIOlBs01\r\n7cgMUvCr6fS7RCikJVHzkthyPXp1FVHiALbRCIrQMvoWDPHmj9v5EQoaslsE\r\ncbptdZsPwbaVeV+suUbck5I2cez7eo2y1crcBdN2OvREqEyWT18LvqIPJcbU\r\nOm7aRnEWOZsXApKfH5FT9xl5ZIE7YwGoyg8=\r\n=Ry4l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/tokens":"15.0.0-canary.085f9b25c.0","@material/density":"15.0.0-canary.085f9b25c.0","@material/checkbox":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/focus-ring":"15.0.0-canary.085f9b25c.0","@material/typography":"15.0.0-canary.085f9b25c.0","@material/touch-target":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.085f9b25c.0_1657816566624_0.6135028025822624","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/chips","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db4d87b9687679cea1290d165a7417ab4a613b80","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.39f9424b3.0.tgz","fileCount":163,"integrity":"sha512-cQ6DcnJ52+6n/1EhLC+aYYeFgC1CRZ9dfUlbOUHKGt9h5lZfJxRwAh0Gs6iIsRnJ8tVweEysslUO2498/cBFfw==","signatures":[{"sig":"MEUCIQCiLqinPF6QAPcwNV7hR4wp76gLG9wLL2EHmBQZbl1vCQIgLdVyNRVuRenLPAZ2LCDfXopBpqt1Iz9nIRvtpX1mPl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E0SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPvw//YJoA42CAzXCUYmRgtqq/a+G40egMMARjr3tln3OjIVXgXoa6\r\nYq2eUDj9c11uQdaPWLM8qOXtsismEuscvnDqSrW5fVDc2A8xEPwLoPENGrms\r\n9Zhpif4VVk4iWcBYJbdo41tw8BNuHIEUwW41eSQ1ewu6OXJqrrJnccyC5w7s\r\nn0+xpDvwEutYbKtGkRTSMKpiRd7+KNqihxhPZFNudL+Zxka2dMn4B4X6Sy6w\r\n31Gj9BO5HTgs4LU7XgCPveKF8pFjQkER2eJ1/eiLqsDxNcv7UXiAsx7giukD\r\nj5HrtEEgYpqr+M15ZIWMrNo1zKf0otXKBUJlPDOcbsgb7ZcSC8is4+Ex7ki+\r\nJYKYIu3+NnEx+ZBhmCmzYS/uNCIp0RJcHSAGcZ7UUd7n48RftaZQXsByYFjr\r\nAlqTJnc5roxkqbdIaIeeaPftu32YI5b+mk24dZla0B1sqPJ+Q/vWFfVKPxn1\r\ny8Z0mG+ErHeYuZnHitfMpebDaFbxCQAvwKAZEqOcwTErkbjkXQpGwQmHxbQr\r\niYLcMRKvVPQnaQ/LmoATp0Qyx3NqbYTCZZuy8oRj1o4geYt/5O8j/Jk25W1D\r\nAUCliMU6lozBpLsraMTJUifotmRG5mxzYI2HbBg/t8QCCzGariZdzsdJPQiM\r\ncEH7RvWQ541FZXUnxngDwhaYrNrSHZhTp9s=\r\n=Neji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/tokens":"15.0.0-canary.39f9424b3.0","@material/density":"15.0.0-canary.39f9424b3.0","@material/checkbox":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/focus-ring":"15.0.0-canary.39f9424b3.0","@material/typography":"15.0.0-canary.39f9424b3.0","@material/touch-target":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.39f9424b3.0_1657818386511_0.038080054144004505","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/chips","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46ae81a5032e89183ac5e7e577a728a64a3f3f02","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ae9fce587.0.tgz","fileCount":163,"integrity":"sha512-HpPWAHZSRlSm9pUtjLRbffCO259nOIAbgJjaJp/Ew8ez9jTS3K7ukRMIKps+G3jCiiEt6N6WJrYkuuELnkcf3w==","signatures":[{"sig":"MEYCIQDXclZwr4F971R3/FsFRZxa5weodt3U1QB201TlMO/U6QIhAMtrJKt7yvb7RB1TztzMGo0gV3cZpCv4nbR4bRVx/WWv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorcQ/6AxRORxcVhSq1cTmC32ThBsjVMEzhtZKZonvvgDVTJC9ehYNG\r\nbLuB62+DQDersqRETNtIDX9WsXgivTc9/2BFekBgpr7ACK40n1i+uj5Zig9q\r\n2kRC51Efzmr06aMg+09GbnvzRHlEX8iRe9Kzi+VlHH88QmYJsEeg2jr7nX3v\r\nImyUFkpAwr+1/GA9RpGERkEMy0JnM2qxsLdrD3Yfv+HpDWJXqaa+QnUpWLub\r\niBCD/M+OmTQgWMI+x4r7otBzpbuzSdO6KEfdTZfGq4ErMNA1zvQxQeGPAc5q\r\nbAxlqON5PuNckzlFzsztMVu+uj+HfhP04eg2UaMZ8eXf1+Sj4VK1gd0LtIGZ\r\nqKo7++8zkai9UCdbclI0XUNfU8KdbtZVmBTtoN/JqE9dBdf2EoYR+WV0abNO\r\nifTX7JhqSnimuIeqqDZVd+hV/Nze9fcIQNML0zmDKw89/x+JcuSGwiFRFURK\r\ndLqAH070m4FyEjppZZeNQlaPm636hMvAGfm9NLw2ESaTONamm0sux4AsRXXQ\r\nhvc+Uh7SMz8EXPES9s264jhv0BCS9N+e2cACXdom0gzcGzlYDQb/RY1PAvwm\r\nQT1Grxxk6efPCsUB0P/ybKVY1oBI7EPNnwGsE13CZmjfl85ooPN3cGII74zP\r\n9pX8LiGaorJLeZfroACOJ709ds8bDbM7VHA=\r\n=wUJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/tokens":"15.0.0-canary.ae9fce587.0","@material/density":"15.0.0-canary.ae9fce587.0","@material/checkbox":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/focus-ring":"15.0.0-canary.ae9fce587.0","@material/typography":"15.0.0-canary.ae9fce587.0","@material/touch-target":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ae9fce587.0_1657822159310_0.30107322883717536","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/chips","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02570f4e17c7eb593225511f08c0c0af70119dd3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1ebddc343.0.tgz","fileCount":163,"integrity":"sha512-Tb3dU1+mAe43XI+rwdBOec1R5JxgNw+JiAMCHh6uDfIT+ShpJDeDTx4dogC+Vs0JmNJasLnYQX0TaXosDHtyxg==","signatures":[{"sig":"MEQCIG2PNE5acjQsDsFQdYzuJGh2wix7J1IsrhL9tM4eb/TxAiBk+gGIlI0K90gRhdsd8DscMUIwsH8tt0TLlK+KWV0SUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcsg//fyZ5c77opTdCui1y4tcWaSQAGG+YwToMxox6cBnM0IOllY4c\r\nm0yfYiW0BpUhjxMYskqg0hykvTDDg07SEtc8u+7T/JiXajJ2VYpJqlEnx0qi\r\n7O2i0aQ3LMJ4LE69EU1wt/ZMlxzXG2wlvJxN9ZBVyciaafA5j+p755fuNaga\r\nFdj74OuTJ/3/uFeF+hrUhVnCGs502pLP9CX3dA3Q90SKABYhatwULF4iRXgw\r\nUciKNoxfo/1RqHYsem2/NkHSRoVO3bwd1ErFY9f3LJoF2OQPnwPzQDWXTz9Z\r\nsZG87pRXuY7z4WIOahz3xvHPvfgmMpegAnnitvR8Z0TSdD0TZ7KsoCGkb7L0\r\nK2157Zltzk/NOb9Ts5Mx/FxKg109Gch7+rqy3sVN6h2Cxu2NxTFp075BYnVM\r\nAdHONM3DjcFpNx0kO1M4wRwPYvGiy7tF+aK1bf1i0TSVgDlOugTC9QdeE4Fj\r\nyl+A0CHxu8UA1cdS/C8S3VtzfD1yWi2qImnhipmdtH3UrT7YohAhfL0no0it\r\ntbE0wTZWamFJUnzQZthh2gFlCE4MCVEhtAzyZBNhRBhlzHBQ1vNwJCUIaX8j\r\nyhKFv5w81OE86lgFSMi5lGXMgSOQIT+WePakZOH9HV5bRrJJcxF0EkfVH8BA\r\nHpTWrV1r5sPdSBOQ+8IMYGDTniCYpzPHRUA=\r\n=yaHf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/tokens":"15.0.0-canary.1ebddc343.0","@material/density":"15.0.0-canary.1ebddc343.0","@material/checkbox":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/focus-ring":"15.0.0-canary.1ebddc343.0","@material/typography":"15.0.0-canary.1ebddc343.0","@material/touch-target":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1ebddc343.0_1657875032608_0.05751809158320098","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/chips","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c5018840c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"239bfa5779df69274ec957fa8f893176b21a5fe4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c5018840c.0.tgz","fileCount":163,"integrity":"sha512-JPf3NlLvRlJfuO5FLo0/NW82iQZTzXwvyJYa69r09jzAhAlwXg49MelZS/8KdoqRwsZf8MXtItxzLNfikOTqeA==","signatures":[{"sig":"MEYCIQCk0EyrYzChhpCvJLvfmSttvHq6Tnbybx3z7qhAqolPFgIhAOSlmbq2WSDYHtyiXiJMiGvK23k7kDGzIVR1a/cIodjK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1St2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxEw/9GzCw/U8YAJJqswwC2B1AK/30c5zhpWZCZInCXL87E/R1z60x\r\n5vhXaSGy3anKJFxRcP1mt+725RfGiunDFz5o2Cd1IdPsFWNWO2Q0f0u0YLLo\r\nHJr79sR6EnvqL5yu2Jpvq2YB/gVCcDEv1n33YbK+GuzdZbV6GFG6fZbmDOng\r\niRuDACc61QRf4fZ0Pyqmyv7Os/kjE1GA+9gmtFcFgHU5Nq/EUlmkezSkro7F\r\nJVudeo0B18PwOqP15xc0CYD6aKVmtA/RLScFmonPvKwtyebYykXKhb3XeTag\r\njuhNePj1a/x1y0J6HO0GSiOTKP4UHCMAn2trzanSKcWaqXdd/Qs6cZLija97\r\nWIVd/J0mWDYcpxcv9hfaweeJG+7pFRai/YytWE+EVVSOMIeNff27JyAq09w9\r\n0umd0UgoiV9EzYAVMnxP82w8OcNYiZJJtVgcHCh0b2n4D3WUBrs+daYap9gx\r\nsASUvzc0o8lXNz/pngnzl+njxLaxFIOiN8c6jr58sOTbEfdvrCzui6NCir+4\r\ndgdF6rdDk6SbzCpSH7MMgBdJy3KyAKVz1jASMIxzPC6gWxVzoGzeXEX5qLTY\r\naT+pnqzpG4UW54SACiCsqy7LWr6aB8oAFJZsmnRcXKGKZM6043YXdrUlgTDS\r\n5l19vhMbvCFiUBE3eQ75Ut6CukJkPHHcwNU=\r\n=Ot2q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/tokens":"15.0.0-canary.c5018840c.0","@material/density":"15.0.0-canary.c5018840c.0","@material/checkbox":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/focus-ring":"15.0.0-canary.c5018840c.0","@material/typography":"15.0.0-canary.c5018840c.0","@material/touch-target":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c5018840c.0_1658137461924_0.5948091384474459","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/chips","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.551b40d18.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92ec4dd6ca3b1a74688feea2dd14c60768bc1c07","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.551b40d18.0.tgz","fileCount":163,"integrity":"sha512-oqsEbqz26d1usuGMwZ7OwKY6ORQTxBVGiANYqt0eTaYEB3N00hswHF2zjdZxGctNQH1pJD1PDg5Znlmo9K2vqA==","signatures":[{"sig":"MEUCIQCfTdVPNTFEbBmI/KJC/CiR9qFCc1MPUDKflnkO8BkqjwIgc3A2pzoTf9Ls2mAFUnvGSfNw4U63cpV5wYnq1BuOfmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGNA/+NB1EJB4CEpcFoMQL/V/+f9Hl0fUzvvOACvKcyDZaoXB3CN0W\r\n8aTJLsOu14Sc2OxJVuhC+02eJdt1QeViTALpKZ/31nFNzI6MH3rjQy0pR5we\r\n2QTqpSRXivttTxtNj4a/curZv3kzP464KVWc5gYe6vSpOi/Vypz2rH1RtXFZ\r\naa6AsYVcuk8ubkem3YtztaONx1aRyX646Rmw8memXDckl8nGTTRPbdUYXgJw\r\nlXWUfFzkpl/MGn1KChj9wgyZhNhfA/tIitKAknBph3GaD5XiR7LpSwBtlG3w\r\n/nvN0K9iltnPc+9JWJ08Mwt1VTmjtjYRG2+DIc4XlEuU0JJb4fr5r7PCirZE\r\nUdWlqOVozAQcEfDjwBL8c77mlp9krlHZhhGscP7Wx3pyB9zx4Ft8qveiva8Z\r\nHtZhhbljFKCUQnxkgAMpCPO6mM2gERIVT8GIbq4iUpmVG4v8eq0BRQnYBmfI\r\nq8Ka7nz2gDCI9aIVKIjVN89ba+GaunlisWZwBp4obaJd0cpWN4aBvjv4dCDD\r\nRj3xO5ijWMms0WZ3DpGcwmwi675/5obE+qRzdIMNo3y0J5IIs0c3ylzf8DBt\r\nPFjLjhEvRl4hgi6unR200AsZEFYrVXrU/hxscEeTysCZa89C12SaKwBbNkUY\r\nxUbt3AdPhm69/+Y7W2OlLDFDQ2UVLBKxvg8=\r\n=/KGV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/tokens":"15.0.0-canary.551b40d18.0","@material/density":"15.0.0-canary.551b40d18.0","@material/checkbox":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/focus-ring":"15.0.0-canary.551b40d18.0","@material/typography":"15.0.0-canary.551b40d18.0","@material/touch-target":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.551b40d18.0_1658138543476_0.7515939364651063","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/chips","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9958b4240709dd41b2d5717951afd92ae29c1d45","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cf9f12371.0.tgz","fileCount":163,"integrity":"sha512-mcDIHxJ7w7c4ytNvDuU/vEkB+acePQYTWdbIjO3/rOZrvQ5CXrDW8otckqH/mKTTcAvRb1/AT0gF/bbdiTR0pg==","signatures":[{"sig":"MEQCIDeOe8Eh0h/XEY2Hlu4p4aym5zvPyDGbDynfRHqPDH3oAiA539pfLNc595NRYdexu96fuGwbNeyzae+D2ogXkjXbtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TCcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2VA//eeKFHfi/QO7E8XtKwiV2ZxO9IMseOqcTmFRpuE9TYKHwJNG2\r\nJNyCmZlWyqPBkOvHstjwbOItu2cQi4iGxnYrWWLhForIeXjuQvpJtHnyxb9b\r\n/c+7QGdCVaszisoLioawAwlUxhPpdsJcf/hV8gidfqd9Jys2y8yaZjPHViXq\r\nGgSzYS8nkEypQuRfZT6Qa+otVZMgPF6t942twupAB6velSqCtuBACEUpod5W\r\nwfFMFOkzZ+Ow/bFW/XI9AB5ItR76VDNoT6fHe4pZ+b15cj65SkN3vJn553Hy\r\nXafIo++o9d69/lc+BVKis9PY5EUy/9yV5p95aoSvpbs7+0mheivL1yYK+gQO\r\nK/98Vj2Vda5DjfkttO7diGWA8YO0exBpDtriIqmi02fVjSXW03IBY6mc2OBe\r\nUua71d0NSO5tNkS3aRynkWuGh2anjMtEKFM1Ly6TgFKjeqzRFG1wP4EcHpmz\r\nigsFpfZ0nuoJeAyYn6omN0zBLhv1CBxbJXH8Ntg5kfeEbXUunz72QMZgtMSy\r\nOBvFVeJ3aYiIKTiFhECBme6PIGr3LEP4p6jNm3oxb5R2ixqN+1CUqZZ+pjVQ\r\nsVkpqoMdUOKabSAHHc1kEu5GHaCK6Gs5ckjZffIF/A//0xZiR4PalVJSEBNk\r\nZ9TPkUdJG0SwNiEXFN6E+dMIr6jg+pnB/Js=\r\n=cB1o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/tokens":"15.0.0-canary.cf9f12371.0","@material/density":"15.0.0-canary.cf9f12371.0","@material/checkbox":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/focus-ring":"15.0.0-canary.cf9f12371.0","@material/typography":"15.0.0-canary.cf9f12371.0","@material/touch-target":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cf9f12371.0_1658138780509_0.740112082060749","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/chips","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1146eefa999503bbdb9bc4e73a0a627fa59121e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2797ff8b6.0.tgz","fileCount":163,"integrity":"sha512-CcajV6guQAvg6yY2GkOPyttO8jYAhyBnRBbvP+x51smsP02WvAK8SAjco60Uw0EcqFotOZBRIizW1LWPBDHbRA==","signatures":[{"sig":"MEQCIEPQfanSR4a9Iii/zwGgWU6uKwFsiAxNm9yot534dVXmAiAKifMfJLfb4UWuT1sElRh/5JmcWuqQJxHilcDM0/QfAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fn2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+2Q/9HxIhfpNQ39w5G26H9Qgnq4y5EtMEMaCiMzsaqU6nT1dtDhXA\r\nGerdxggzJ9dxVCKceOqgYLsFUpWK8Ltle7aYMffawkBK08zBxV1qt05skkkj\r\nKK7CQmd1Q21n6zAmuT/QVWf6QwXWyaqN9K/Deow/D6nWWSdgv/Bv++1PIO5H\r\nndZJZ3hqlKt0Sv/s6ngNjTANHhCT8paDsL2F5AqtRfuoAWU/x9hU7Fb83dnM\r\nclBgJTeaI2wE3ppFS7WN1wQHhaankmu/6IIiAu5WPB/RyfYZ8/rQ1iS1xFlX\r\nl33nFy6bxACabh83NFYmW7GUc75s8qlLcypRxIHwO1eaDclyshlH3J1wjOGZ\r\nIdw+b3oSE6XuoMNf+0ulsrqcNVjcR1Dc0pzZKOdL/yZUGnFkf0IAcSp2NwNP\r\n8/g9jD1wGZuXisAhdPRwvbwGYR8BCmwuf6JBCk3RtYSYgjb9pGEFGziYgW5R\r\nrrSTicDdmncAHjnpw8RgQea86YLWgJdDiyeTVIXt8V873ZIGzAOqVnQfx7u3\r\n3gretntV1CR0oph8SOvxpuTkZiqyEhAX/xy/aFY0uJRScpG7VG8zMETrgRCw\r\nAbXAD8BCYDtGRwxXHeHYlSXe7TmKr8Wf4I6TIgll0TWO0BS0NdBZXmZZ0JZ0\r\npWX28kxmVH02JHXmQGY8O1WBoyW26KUv08A=\r\n=haPr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/tokens":"15.0.0-canary.2797ff8b6.0","@material/density":"15.0.0-canary.2797ff8b6.0","@material/checkbox":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/focus-ring":"15.0.0-canary.2797ff8b6.0","@material/typography":"15.0.0-canary.2797ff8b6.0","@material/touch-target":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2797ff8b6.0_1658190326312_0.74889515791675","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/chips","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.110fafa17.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02238fb621a214e36fb726343c0c31387cf53f72","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.110fafa17.0.tgz","fileCount":163,"integrity":"sha512-4e2Om/J0j4H6J+Haws+D92FMwf3pj9+v2UKbZm5HYqpyS+b1c4Ka1Leb541A8jZXrhIF3ZG9DuPXhC2xPm8czg==","signatures":[{"sig":"MEUCIQC8Teg0VawWsJ1KOkTpJxtb/VSu3HaEkyb5G4pl+Vo4NQIgcXpkR/jRX/ZfyI1CDhFUvkfmC31KxJ4kA3YayEgseRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptzQ//cSb8BlZ+0rsDe2REzI4+N5NCj9jXslL5kKkX2XH3FmVg8LYa\r\n/kej8wBNyLaag3UoxtjZ9dgmSu5CP6xvcSrgqa3C4FTqpTW4n6Sn7VQL5MWa\r\nvXv6AZY8gmIlGbdUBjZLSAE9856l/qo0AkYH1sN0l0XHvnOPt3oEbSiEovEA\r\nX7HYs0eqx6DrZ+b9KYbPtLxr7iNmlsJH2aACPJfcQKL6BSFjL0EgYVByfxbP\r\nmt56rskBakb8uDB99pobR7iNYbLvGuVB+/BhEDdLp0RB65C8IhBnqlI6zI09\r\n+hVmQztsmkiVdVDzbr0dsFPOph/dvjLclWLiQY8xjBShsz63Vw1f0uTQ8dcK\r\nbArVC9+ZyCCQLYEXIuHmKmyw6zZlIKYL0kBpGCWWjQ7C72V6mVkZAPiJ+K4i\r\nhoGJ7NoL5WQC4z0aJP1/ins8MtoKzkriahpVukFNZ2yT0Ed0Vwhi6c2+rYKZ\r\n1xRCvmZoglvDZtWnTbIbbKbmAGbEbp+GBDsiGoyPzTdnoTtvhP3GcBxu0goQ\r\n3tCdp49XSZLE9tjYkxq8BADShscFPs9Bhu9tkk6R/plzrO2lCrKPemZdOXBz\r\nC9uGbDGlc1Q+sRHPYOZwgCOW456QnZ9ovx7/CX4tjIcsHZpQVBzXdJyZC7FJ\r\nt/NQ8jTLMxWy4tGvNqC8Wvs6hAJthDAS8rs=\r\n=rupU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/tokens":"15.0.0-canary.110fafa17.0","@material/density":"15.0.0-canary.110fafa17.0","@material/checkbox":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/focus-ring":"15.0.0-canary.110fafa17.0","@material/typography":"15.0.0-canary.110fafa17.0","@material/touch-target":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.110fafa17.0_1658303273587_0.10276595943291289","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/chips","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c8200981f1dd9f20c1899de11a4a7777413188c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.386ef1d2f.0.tgz","fileCount":163,"integrity":"sha512-AJAQ8MbBKpaQgRouqcU9GanuKcEtuJcGOlar0ms851bxPredAzQGiQrEp4LMlClUsdKhTtrPq0S3idOZ3Uro5w==","signatures":[{"sig":"MEUCIF/0pvIJBmpKwS5kQkPwhci5zqQZNxJQx7Dh4HnWXO7LAiEAgbupVQ2TGJKtkaRniEAWvra/gKJkoHNyL/6Nrch6ehA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EebACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcAg//bm8+kzj/eIEfcj0eDem7zTUwPBcyGErncz9t5fDwMxmqJL5l\r\nTZNIz++kMVjv+twb8jCGyzZFdjpODV3jy5OdBMgm2cT3k59u+aGzCrSjZ43X\r\nPkjjEbZoBeknDJFleNrdopR1VAd8fCBeNILDXsOMOrtjTaOaoAjeDEyN2W+j\r\nPvVjrzncd0lrH9TTXeoXnq/L5b9K+AN/mS5PdhaSL4WWe6kyolCGEiAfG3hW\r\nc/yaIH2+SzCLqvNPzlw+ZW7GXP60cj+IyK0Ij7fsT/oCxoVKQ5f05dJX7Yjl\r\nQzj2q251IfKHROw61P+fgfaYt9F5Cb3kOvZ8TM1HRTO/oa/GQJ7jcG48Ma4Z\r\nbg2TXdS7bf+X4XpV5Ynn9L7sV/F158ErVJwKADpKAWgSw9zEuPR37rhRj2z6\r\n5iCXBZ+1OcRnDg8H1xANoJ+AVTTvU+gBQpv52NyggEGI4gv3eSX6T1wrX2/h\r\nw2Df6LiKv20LL+Yk6bNT2wNJ5dK5Vz49A6sKf0dGUSz+JJKystF0mEuxq6QF\r\nBL8ULjlO5LzvS8QHg8RsBA2BATmW4/DnSQyT6eXApzlkBQfBlbdL2IcLXX44\r\n1UlkTcbigetTQDx7ikumEwWjAF7/ZAWOMdPk8PI/PgCyVGH5224HGBExr6Tr\r\nPaZzhECeFkAvD1vTdyZJnkOOXcIe31UounY=\r\n=Nx29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/tokens":"15.0.0-canary.386ef1d2f.0","@material/density":"15.0.0-canary.386ef1d2f.0","@material/checkbox":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/focus-ring":"15.0.0-canary.386ef1d2f.0","@material/typography":"15.0.0-canary.386ef1d2f.0","@material/touch-target":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.386ef1d2f.0_1658341275366_0.7822486963315498","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/chips","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c3924efef.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c34e60032a3a259b02ee5626f2107e8228cdcf32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c3924efef.0.tgz","fileCount":163,"integrity":"sha512-zaR6kdiaxXLNsxJ6IOrWik1U67kN+uOMh2In2JcMPu/QPrprGs5i2aD++MiJmHuUJRvFWpT3R9AY+JgCQ52p4g==","signatures":[{"sig":"MEYCIQDrMQ8SeXBGrJZuYnB3kW8gFLVKhwNdzf2LmsC2nHFpdAIhAMzRsKf3RPYZZgdtorFt37Q3hU8JLOE1kPclkv/WZTSg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/Tw/8CrVfbqAtJIC/JYlZItXt+FgnjrTtR4eKhB1rwWkZdJMGjxoL\r\n0uQkxGRxKUAFHnzaA52qnMkZuH0LCmn4FolXViBsas/aJWsJyKJf8iZcwlGf\r\ncJe1eoMUGnSIWxWuSmgr6GBFecGv/3kBELEL0hXQiy0FQJWeLhTwPEHrhbGd\r\nZ9W6zSP+VUb67ymyc3CPJjSz4xpVxj5FYo+dIJLRpcQYJBwDcHbSrtB03J8i\r\n6qhNmJvKOxzlnFDqzfLqSGJecpmfmQaI6stpIGiWSVx3J+zNghRjmwKDnX5U\r\nglqLoC3MnxYiF2cJqgwFZDrubX6INQ6dXdInWIqSMbYD0Mic1L5ho1H1Fk9q\r\ndv4svGECuxMuBoHZYfoAaquqlpmRiZrW0+yipY5fWZF54jZU48w8KKZtQlAS\r\nRu9rXHoVVk+Aq7Fyqtj1hWoO3QLmixpeGQvyhmo+GmQtdKX5B7bQo1jcdeBc\r\nvflY2ldTS3UAkhccLmLLOBuZMSEsWYMtOKFkxyUESnzEEk3rnV74tozibghJ\r\nxaQGoc2gjrefueDYZOocwd0mhIaX21Vsux2UQt301drJ+YMz01gkB04sR5sJ\r\nbZt9epHW/k3laYTDeFkv6c22/jwlTCaqn5pHyfNaHVmAmYAxRBM3ZIYy1sci\r\nMLB0oxuGornsKzRzvGN2MRbjhkzfYHe1Tmk=\r\n=qCgV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/tokens":"15.0.0-canary.c3924efef.0","@material/density":"15.0.0-canary.c3924efef.0","@material/checkbox":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/focus-ring":"15.0.0-canary.c3924efef.0","@material/typography":"15.0.0-canary.c3924efef.0","@material/touch-target":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c3924efef.0_1658341855078_0.8870485779065167","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/chips","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ec1a555931888c887ecd5b3bf304c7b8a8a6f73","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cf5c5907c.0.tgz","fileCount":163,"integrity":"sha512-zSQTAHXMKpMlBDIRMk0yQL/P9kCBsMYMkB60sV9ghIDAisY/SQIEdMp8408K61fdwrGYKVwD3NUGFOKplFlvXA==","signatures":[{"sig":"MEUCIQD2RLYxOWzkx5l+Yol3yT3n+mNv52T35RC94Ivo/xQnewIgaq6INsT41Ds4SAB/EP4+m6pkgbgznMciBqtHZNc+LVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1606506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HI0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSUA//RA/QklNX3569B0m9GqMk78lIKPCdSHunntTAw4q138E5/74a\r\nZIL/2+GHfS9NhwMtJ4rkJ8yGguWjP9X124VKbhLw2E3PMcuffxbwemDQpPC6\r\nKce4CwXtDVMIUpxpSLn5R9g9RME2odtF0Wzb5GTrc1OCGzsupcyDo2MfnQx2\r\ngtbs9SvpSDeHM2YgCVG1Gy1FHOGDJbXxOugEsjoMGrAsJliJLi+LbOlUwyvn\r\nuvSo2O998/n15/mSSVRv1TiMCgv0e+IDyOyPmU1NeWpfA4wB20mf6kCss07K\r\nFPE+BvjsnXv1w6qG/GjAB03E0PnfWK8/sF108CTA6USW6UlVSQsEwKhXFHQC\r\n51+jsM4J4nvVyggc7ZQ0FNw/vGqg/f9lgw9NtgNnuv1v95i9n/wKTBiAj6sO\r\nuErEmvVjDejD62Ctvn0rDB3nVo+58p1u/vbMxRa88zbOPy4shrmjLizILwUS\r\nk2ZUltW8AgtKMKwCET8tN2JCR2hm+hHszvaB4uwtzQC+pH3M18yH6yexUfd1\r\nxoMjpz/JCGv84xNFVYbFeH24QRZRWFqYdk1Lp9+jLC8pTm9v2tBrmZagn8jF\r\nT6AiLja6QfMmQydnh9SMHL7WdVxbzq57q2jvDoOw+I58JOcvvdpNLVUn68VJ\r\nNMpS+FtLFP1zXnGlU+9ABi3iKoXgBjxQWFo=\r\n=sJqc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/tokens":"15.0.0-canary.cf5c5907c.0","@material/density":"15.0.0-canary.cf5c5907c.0","@material/checkbox":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/focus-ring":"15.0.0-canary.cf5c5907c.0","@material/typography":"15.0.0-canary.cf5c5907c.0","@material/touch-target":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cf5c5907c.0_1658352180618_0.04515452964503641","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/chips","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0617e2319.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de5594ea18c79149c7ea5bc4ca5f409db1297f8b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0617e2319.0.tgz","fileCount":163,"integrity":"sha512-x8WJZH2pP6V8vGY0mgDrXzz84Jc5kxv/NNESqZwRptXmlodHLgwSe9yejDURIyjn+e47QOAG4uoTWItDVZDzzA==","signatures":[{"sig":"MEUCIQDzIKqToDZAC1N+tM7f1LSl3JqRuQmd+X7TH6jK8HhO9gIgbAlkfW4oN7FNBZUy+VgOVMdf2Og+cIZYJeKwHn1AodE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1606506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HaCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRNg//XD6njf5iJrPr/NdMUE8k5iejZRD4DHmn6JtgVKCW/ix0IqKq\r\nM/9YzxSY0GH1YrnMNhphznXIV6aPmV//j/3jvZ1ZsBYTNfK2bxHT5WoUIegw\r\nn4o/c7cMZn0JuCgfNfh9N7UAQjyyzieN71B1ymCWdfQJa7kAn7eKMkYcb9m8\r\nuUCT5btrlkhNw5J9KGJvy7+r/OXnsqKig+iv+gOQYqVfSopvEm4H5xyctiWA\r\ne03HtTzWvkWitZdYW/c4/i2qwzAZi2AsNZ3rw4gvksxCzW0vhwyURPoQ5naF\r\nHrJsFxpcXCEV1LYgLHg+D87l/sr15ZYEq+2sT1rVyXiEacqwUvsLyqzqrbEz\r\n3T3SR/fYt1yPi//13BcEt7+rOojMjWt1o1G9JeU0WVzGAjvEKrlgTDwIV5Ok\r\nQSa+GzH1RO68kcqHwJpNqHah6OWHqnPdBkqFApUFKMiV/prxxuqW+riERaHP\r\n/Jxq/FNz/IgTAtSL4HOVTspXzvqTjErPUEREyMUWOhuV9uvqE+r52hBtYkIL\r\nwCgQS1wBlLF84F+2XQ3Ro7spZxZYkqeTNoPse5MRcfZH9DPCtxLjkX+vPCOk\r\n4X6IWILriGp5Dalsxb6ieksLIQ3IHrjPUiK60krQcdhK8Ff3SjDW6I+qhi0B\r\n1pONgbeZI/I6zshltVNkQT/cSFFAaAGE0DU=\r\n=vLsu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/tokens":"15.0.0-canary.0617e2319.0","@material/density":"15.0.0-canary.0617e2319.0","@material/checkbox":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/focus-ring":"15.0.0-canary.0617e2319.0","@material/typography":"15.0.0-canary.0617e2319.0","@material/touch-target":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0617e2319.0_1658353282468_0.9346842040997787","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/chips","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a743b7967.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b3fc2e5cab13b41c5b03daf69acd01149210640","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a743b7967.0.tgz","fileCount":163,"integrity":"sha512-op9oe9T8kBDGOGeywXNyVwX8L7eJL4ovH+ex93f8jx6WC/jMlbiwHwEoUFOAYb91YxIQexw9F9RJO5KqW58tfg==","signatures":[{"sig":"MEUCIAs6pZeNrzUVTBhqnvO3SQVxAJmeWYg7fk6KHPrLVzT2AiEAt06snMc9ol2lq7uCjZrBKtLiGZXFYcalPks+L3xAGo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1606506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Hp4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8/Q//Y7e6vJCfLqpr6dQBipBeg/SVbeQyosoOEx+5Zp1Av7gm5icV\r\nQqR5mblvoswyhkf95UXiRgz8RUeAt63gPXT+N47fi1snVoFk78KGnTtndzNL\r\nqdDHoUYbwPobxGJmnj6WMLUNEDFuLYArwDDjhQlfYuXnCAxqfGBNmfrnCGTc\r\n1yhuvGei5OZA1xID4dWlG5LTo+ocCK/XINFrQRoJCm1TAlLhTvxGkDTfF8X5\r\n09kQaUO6Y4/DweZTt1/KSuhk+lHIGWqnTgXKkYhLl8eeaGD7906ochV9doDV\r\nOB4YJqWh0KhcWalMPq/LlTkTDijEn7JWbPeeDzdTsXiascUWqH3oN8IzYgFV\r\niGoPEnP7YJaFMTyInQH0oaq5i08pIPMe1p0TuJjtsgNPOiUPsNDxQs2dFkKY\r\nkUewYdzRvvr62snU4QiHQn850uVW9nijA6kxplK+CtmHtZ1VWoyIXyxpERXi\r\nxkkI7mdML3b80gIdcGzO92kf6rDnWrOvm83+QsW4IXcs4ixxtkhMYWdN/Ewi\r\ncPrN/SwMCZPx2ziTn6Nu+or6iVFQR3c2+kZmndBgxz+jT0skad54F1p04d21\r\n6NcE+9jB0FjQoBkuBfpZkhaa8hVKacn9oFfrQvwl2ux+7A2IbWMc53x7jmwc\r\nBjWvRjbtlYowsjNp60Ww4uKKlgCE5k3YvEw=\r\n=VljD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/tokens":"15.0.0-canary.a743b7967.0","@material/density":"15.0.0-canary.a743b7967.0","@material/checkbox":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/focus-ring":"15.0.0-canary.a743b7967.0","@material/typography":"15.0.0-canary.a743b7967.0","@material/touch-target":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a743b7967.0_1658354296218_0.4983597911144404","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/chips","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e25fa2bf2e0249533150e00821a6bc1c0a2f4662","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.69fd619d0.0.tgz","fileCount":163,"integrity":"sha512-OqNuEn6nwjAiIDVLw+qJUh6poXw+zIe3JjBHYG/P1AdDNz6UpyUlwezXD6SlfvoyQLTtPXRu79SUdaCNQpeAtg==","signatures":[{"sig":"MEUCIQDE/Vr4k+5Jk5wT9e0SSV4kjlPKLB+tp4shKtHW0KRMFQIgBdJQuTJ6aekS1dVKHTUtgbFpt0/SL6qKL9K0NPguBgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1606506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H1SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfxA//eAzuxLLEVVzUF55/jFkeI27NJVPhDYQnM3qrJeAYHIUaV0ix\r\n42fLySsQQOKUy9F76Aj36jNe21q2NhM/AGdhfr3Pf4fORoDrLcVHM//Tpexw\r\n+UoeVjldWeOpP/FSAG6ZcPwVFRny6i35oQQxQVyUdg3eoJ5KN3uqPOvB2Ll9\r\nRCP+NvRdF/SETFywkQ/HezJgkPFMJcT8Cz5mLyjd08sZznjaxUmeeNI5HZa+\r\nfLYSUU6J7YSBqUkMQd92dDpXjh8XMmQjAurk6z5iaBu6O05FHDji81jGRx7U\r\nET9rJJ69sHFHFWK0X8AsCXRA+PXqwRhQiW5JnmveenDKD5f7WI4inCU+v0Xb\r\nrruV1r91Qa8gRdu+b/chpt+7YQWQacSjLhLfqF9IKsyGSGddPHyZyol2Im7j\r\nxH6GJQJ6Rxtq5iBO/oWchDXdNtGPonEnJc7ezOgS5sykXm6xcXuok6SGbX8w\r\nNXCrGhcaeck7iSZdWmxpye4nQ7xL3hmJPWAgP/K+xnIb2vFxnJ28fD9OsRMH\r\n2onX6EcfXow8mmvwuw4Smdt0uNCabCG5VVdVqaDqzZBd2bBQiaD7e6tMS0I3\r\nk3Wg6KxWcD8PofPza0umOGxtk03qtvM139zvoLHTyzgmN6TMU6TPS80iIeTp\r\nbFr8CJxukZCIoer5TISXn8gVrtzGt4WGC8M=\r\n=7oxU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/tokens":"15.0.0-canary.69fd619d0.0","@material/density":"15.0.0-canary.69fd619d0.0","@material/checkbox":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/focus-ring":"15.0.0-canary.69fd619d0.0","@material/typography":"15.0.0-canary.69fd619d0.0","@material/touch-target":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.69fd619d0.0_1658355026380_0.8800070481032192","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/chips","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a818e2ab25998ddd149fb39c7c6c6f6f56206b20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":163,"integrity":"sha512-M+VLZlt+dh+2LRENChyHl6Y56fgXvC85H7idbc+zcjOgzzvjSD0SMyBNQMu4v9UogB/9S1VlGm8EsN/gX7kvrA==","signatures":[{"sig":"MEYCIQDssomXsUMEnWRvzKCEdOKQF41/i9yOv8be/3UMmaXicQIhALftI1D7DTeHNXFpcUX/N0EpClTdGr3hYXaiboVfmO1g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1606506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AViACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuCA//R5qitaxPyx5xTtUwENij4FF8wJn1x/LRyUThIP0N8sTVOOth\r\nI5joV6RgZDB0+wuUAa4IwxnAPDa2UyxiReXFY7bfyHASjit0yvv+io7XRyEI\r\nE7qsYb0hz4nFowLu7JSQ+h5i60hK04DYQ89qBbzlHZkG+t+y86UVbpVhczzY\r\n8E2yrph3kZClFBevpStVk/HXXnFDZU/kWwx0Te4gojXMx/Yy08AR6iFfmU8m\r\nK8RmVl0etDbK80oXZfipCGDzpZWFOBmsTEHYDcyp6t2TD300xxpLsauBOoC6\r\nQ5gpRbZC5htZU8r0oEnNgTzGZuWYSLc3KePqkshqRnQ7bKG3uKQ9BJl6m32+\r\nivsa6EiI0sGbcLXVvRxqthXJq/xwl6h9U7QBfD9gUyYDqnpbn12Xlu5TskCi\r\n0kVr/QwAcV94n+2VtdRqu2ScUMaSf1Jn3OQQpNgxDkq/SrwziaQrq97GPtxb\r\nNAYFICbkuQPtBaht1x6f91gC9sVHBKUyW6z0W6u5kwN95tWs2YwPCogg35Ua\r\nA135Ie8dVoVOKo99O2hKKB3HKndxqAhrRswydIS4lMSQjfJKrHMLbaWXgGK5\r\npr4fqJL/fIPf7x7DL0q2nbAhvdPSiyS/rfn8SjRoGzZ3+mfl/dZ7H53rgowb\r\nVVKk4n1lAYrTqA86DxpxgLtxuQ+YOB+MwAg=\r\n=1TqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/tokens":"15.0.0-canary.2a6ddc1cf.0","@material/density":"15.0.0-canary.2a6ddc1cf.0","@material/checkbox":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/focus-ring":"15.0.0-canary.2a6ddc1cf.0","@material/typography":"15.0.0-canary.2a6ddc1cf.0","@material/touch-target":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2a6ddc1cf.0_1659110754361_0.9992661897163246","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/chips","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b89bdb00c15a2d9dfeeccbadc2390eaa622ea8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.86efd56f6.0.tgz","fileCount":163,"integrity":"sha512-eN0zvYDDDKhwNysKaK9EALrppWmo3Vi2Mys+AVd9EktC93NzUEY/qS+vw4x5C/Gif3JyioxGepr3R9E6IM8Vng==","signatures":[{"sig":"MEYCIQDT8SPmN0eAy9x5mPLdVBfTm5Dx9APasQFWfg/lkCe2BAIhAJVt4icMdAerQQgshLxH9DRaE/zYilD21ImgmH23GqW1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TjiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw/g/8Ch23WZhBKzOZ2txtNJtJxfF4Kd8ugmY3iv9iU+fIll3UDq2u\r\nrtRt2c+DTioJ9G0EUKk/EL/mCQFZ25366KBAQOqpcMM1Kj11fj1jYR/frBiC\r\nLcL2hYqssgx7WmIZopWRSzBG5R4mK2b55I08N9eLSrg3jtqbO0P3zugBHKdX\r\noUGgv0LkK7+GZOP6ZIqjzN4mnzHX1XdhLxxVNJng9NWFlE82GEfFwfDF/MU3\r\nDdQ3Ts9SW4PmIQ2sOwaHtb2zsCg/hrU0qbyZyJHOWZ/8QrLitmbVH4yKv9yz\r\nrHYP4cSadJiMW7b/awAdYWyXvlBxLXreZMkWYxvBuEXWfsNQrkdMBs4UJtZf\r\n10/07TaMgBEL69DDDTe0QfMnMSt0aoIMJMdfJBAJbviLW52ONhqQ5RFaRjQu\r\nOmDB4QTEa8q0BRYBPXwsRelIx1yvQRlp4n+43ykOogl6FJRhsbV6He1kmGg1\r\n0EyaRzusspyCuchtwtyYHg4BUe3bUe7+xnHSnxrztQ9kuKrH0IVThjSypB6U\r\ndkMlAAoxIqNZQ3zkl8FyyFnKjKh6eDwa4qepDE3cMrdbjOz0QfyuQdO4U4e5\r\nXIbkSmz+DRdPTMM8DOUENj9A4DCrd4rGKZURw6kcnpqx8Ipboz2wHw3jghXc\r\n8qFQJR5cuQGB7I8SXqyulorAqHrDGlJL4tI=\r\n=fjyW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/tokens":"15.0.0-canary.86efd56f6.0","@material/density":"15.0.0-canary.86efd56f6.0","@material/checkbox":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/focus-ring":"15.0.0-canary.86efd56f6.0","@material/typography":"15.0.0-canary.86efd56f6.0","@material/touch-target":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.86efd56f6.0_1659451618108_0.030510568294527696","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/chips","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db78b771bc364db1c352a4d6d9a3a632e0b2d028","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ccfc24d19.0.tgz","fileCount":163,"integrity":"sha512-82s/s3PQwpKLzNLzmfByRmEQdxjR203ANtojEKJrKusG9quaQxX/KJFsMcG2KxBKsvCymn3S7/aLEq4iBum/JQ==","signatures":[{"sig":"MEYCIQCnLfjncUwDw+0JL2w18M/gQScvdSBv0lSD3Km5t/iHWAIhANaYPcknymkVpUsXZpjE+f0+zIUnrGnOEDgRT0qBbfBc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rsUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbgA/+LpmmTWbDm+Qe38UMddj8fvfd9tcvxpY68HfjyweMMtoUervS\r\n1jpcyH/YRnqaqSRBVvloSgDaMAGgYvNHKyjDQ7PyfpqrrR6QJhhVpQQoUDq3\r\nVSb/vttTzQEuSwrhSS3xgC93KEYNoDOkeKH+9AhwyT+P7QMQWzu9+lexnXgO\r\nUKCHxW2nCAztlf/rNZ+0CObStFJADo0JdG5xx/Xf9yVgqlmVqMnPDKOtkU3L\r\nsxJFkqrV8iXSrdZB8ZVlO+CCK2DiDuv9OHX8TMR0w8pxHoOR+bC4NxA1CrTN\r\n41GGAt07GgTYLiNvIpRrOdDmUoGbgbjSDmfR4G6686CcJCX7+6ye+uz1l8vG\r\nXA5VxQ4AWuCZMackHN5SyPTvw4Ah9vFIORT5SkgLojOQ3b7Cf4mr9c4wRMw2\r\nfmm/ZS/kHjoSAvKRU2NMGg6j8mFRYgrwSNdlcw9IP9et5LWC0oCzbDUm3VCf\r\np67FPUW5oLpC9vmNvIjtnWa+vhWfsE+OjrF9ybQFEvyoOus2cSyqb0c0QtFV\r\nt6QY3KomVuiIH9gSRqTjt3/9fAwNRiT8sB/Qz5vlkjSbTVloYQdE1iuD0OBt\r\nuJKccxR6qSTMSJPblr9LQ3j0lQpguLGsDl2umyr3nr2dYWKeppeEFT1asiRR\r\nS7I8rv2IhN86FpqokvDHgOd5r0tc9L9hJ6k=\r\n=U8e2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/tokens":"15.0.0-canary.ccfc24d19.0","@material/density":"15.0.0-canary.ccfc24d19.0","@material/checkbox":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/focus-ring":"15.0.0-canary.ccfc24d19.0","@material/typography":"15.0.0-canary.ccfc24d19.0","@material/touch-target":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ccfc24d19.0_1659550483741_0.09332933000498089","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/chips","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e4570146f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc576349faee0f11f76e2bff93556b9087fc9183","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e4570146f.0.tgz","fileCount":163,"integrity":"sha512-5ITM4oAoqWaMln3dYkE0fsgOlTLnHw/TNrjCgfX2v7+bOnTIoMzu6uqQvV1fI71+iZtLInwiStKae7R9W1PTHg==","signatures":[{"sig":"MEYCIQCSO9GkqPk5/Maym0Uc4AKaUix9qojH/owNoCIGOoE7sQIhAKsdt1wkjJ8PCL38wydIBtuMKakHKVpyLF0TcO/Wq8Iu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sF0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHWg/+JGr/Ds1KyYtjm2k2uqqEvYd0TpnlcZZtKAiRTMRnB3C7+8Dm\r\noO+Yc5pEebFYmRtJanBTc0aybLf1an+qa3vU67RbfQ+BBVoMXa8btLOJyuw+\r\nE96tKEXPV0iJFg8NTTCGb2njaKCBhARUFYTMEji42JgD/2myayegI3NL/4Q0\r\nzL410f76V+tSpja71vdIeJyEVyKIORHDFziktrg381b1sTQ0qG4sISqsrUe0\r\nMHK1lbG6yfgLS+jb0wPOr1TzgWcttGRN7/Xh29oGDaNOOblOs4h/d1NiQpmu\r\n/HHKutccETFHN981iPhHdewS1lNv1KKiOKWRrANecUlAk9c4UlvMQSfztW3c\r\nu+JpAKqcq8PLkIS5YdcA7snc6EqdCXbHxnEPk5H2Nh3nlCCeAUXfD4DHEvnH\r\n6Dte2vBHOXsLUp4Tc7JWvVvri5pKQawX6oNxde+N6WLt4Qjn7IHK4wa3Ntsh\r\nHLmOF3SaoiEm3J5m4/sjJQd7QPVzZI+GHgg0HzQvv2fYcJU05GA1ejHq5j7F\r\n/h1yDaOjsjYqes4GHxHqpc834i7mMjIu9Mv1J71iUwpqeCKiplgmXZQADpYQ\r\nl1kOByxXR+B0tMdiV+Qt7BNJDVEgqTByAEfh/4blMPITNPfIOHdbb3apjEDC\r\nkUMksGtZYFE/dYs9FyJODeQ39SyF90XiwDs=\r\n=IQDt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/tokens":"15.0.0-canary.e4570146f.0","@material/density":"15.0.0-canary.e4570146f.0","@material/checkbox":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/focus-ring":"15.0.0-canary.e4570146f.0","@material/typography":"15.0.0-canary.e4570146f.0","@material/touch-target":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e4570146f.0_1659552116540_0.7048094300134091","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/chips","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbe08833ddd7a549a294426cea023dab8a16e77e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6683a36cb.0.tgz","fileCount":163,"integrity":"sha512-6LVSVQCbiPsb5hJlWdrx2zkALJafkBfAp3KR05lDxszfQICugox3DC67nrG9nBk2uHXZ+OJVXMe/dC+FoohR7w==","signatures":[{"sig":"MEUCIDwkAYXmXT/AaDAmNmHVnK7r2ZCOJXRL0GLN6I8D92ZYAiEAl7Iu0AsRrft8V1ZX2HOvlsAAyANtzWYZ01zxPg1eE5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6srbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSSw/7BrCGExPreP36lzvOB4CC0JWXd2BZsRwdJ3qELmkjcgmilB0M\r\ntHdpB+NCQDVA087kGXkN+s9yM3ApduXDZTzOtMkMDig9JqkdBkE9sgJpH7/5\r\nrrvOH5KPhMqk/L4P2dUFXMnan2CcNL1PWEdXSbX+96a0SsSY23Ws1Zk9WQUM\r\n1jniJc6eFpVOolgPoYuqWS4EyWTS46IIrwcz7PWaeshXY8GHHHQnP1bdFaTw\r\nGvetIGcIzlDWaCnLOYPmiPpyoykFT6ub1Z221zTh0xS717EGk8L6TBmvSX9e\r\nEaqjFvsod30T6oK0gLZYl4JEYmCjBEkwXqJG+nq2kxEMN8dFKdiANCT5G/Jp\r\nmGplAKr0CLuQvDCt4MtsNj2n7ZirBCyujhM3a8ZTISF2U8JeuTYR5XjED2Wo\r\n8m6oY707bpiKhCT55ZOyrpr35PKGpc/jF96UqOkikRgmo9EWCpqdyIUDTs8R\r\nAzdL1Z22vZrI9AcRcF03OkXkKaxHzU/njW3A57SiTb7gqxBFiyzAgGRC5d8Y\r\nIm7A80DUeS3f6PqSxypElxF/DYSyAvqQim2CGnDcTtnUgGAhcSuQ3MLR6Np6\r\nXqllrzQWnr5bRzRVbB4hJ4Zg8pQlAeYXJBbnANrr0HQzfj0sAJJsAtcmRtjb\r\nxVPa0a+hx9ZP1PFveo3UgGyks2mu1rp6WpE=\r\n=hNuA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/tokens":"15.0.0-canary.6683a36cb.0","@material/density":"15.0.0-canary.6683a36cb.0","@material/checkbox":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/focus-ring":"15.0.0-canary.6683a36cb.0","@material/typography":"15.0.0-canary.6683a36cb.0","@material/touch-target":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6683a36cb.0_1659554523561_0.6060227465045875","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/chips","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.10196647d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e8bf13ca01a52306732d1146649c96e7c140dd9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.10196647d.0.tgz","fileCount":163,"integrity":"sha512-lLqxBmeEQZquLeoNUbAKBdpq/4J19K+SSv8miuH32p1zFxQARhPmBx/NSvS8uYxBCJLUC4ePAVbG0JhTwZpizg==","signatures":[{"sig":"MEYCIQC4KCzMnA1J/gQOIGyX9sx2+ekE+aZAsrnapLIrelDFzQIhALB45h4xHDoXADSZI4iWzGO5DzmSuSkNFd9gAyfHR1IO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5YA//bt6RBDJb//J3PTTS4VbWLM9WPUriE/u2vd2jlT2DNdT7fATF\r\nLZIabZnizsZwNtc59yCQd2y54iAU/2w1Ny+JXQ+m91Macsaz0B9kuhbBpC8s\r\ne5T+Tb3dy5IRlAzAKR3N8GO89sNU+RHc4rsv1GrXAryJncPNkste0jmNGHn5\r\nDD8KSgZD6VyhPbgzs68PkcJafBoFUeImbJ7kG8wQgloozo0eQSImu1Qcr5iL\r\nyGtRvW2NMqRLF5iSMZ/1gHqVF39QmKHH5ocXDnqd0CH0iEuts/EV+k7eZHvb\r\nICI9sNkpJN3dpv1BCbWDP4yKuzZ2McwMFmGye40y6mM5Cb2xS38Mc0pwtiDm\r\nVwJcsBBut7rfVepF1ZJLozEwxEmL6k7U8FEcrkm01RtUpTg9la3VJKU2KU4a\r\n2i3HESIs1oOjNxBA3927O2lf+vwfr9tlPxaEMMpvoA7TFvn9UO6xzF8S8uYw\r\nJhGIi0gxYZaqmh0xCqAicJ61WO6Pc3sszuEmwil3wPqLIeEfnHpBfkfAnOdG\r\nnEklaq+OwkXqlJn3mFAxwOAVFNJhwZIp9jfRByOJt5iK0HGBmbI8lE+z1qFS\r\ngTsi0TSBSj0QYWk5Kb4dJk4HVKx4GTi4Gj5wSNS5vrgofq0JhDU+LGO2rdk4\r\nWrhtB/9ntG6zMsXaWat0MxUhSI+3JItFKew=\r\n=3PLS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/tokens":"15.0.0-canary.10196647d.0","@material/density":"15.0.0-canary.10196647d.0","@material/checkbox":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/focus-ring":"15.0.0-canary.10196647d.0","@material/typography":"15.0.0-canary.10196647d.0","@material/touch-target":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.10196647d.0_1659563693601_0.8811409057570843","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/chips","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbaba82cf6b8ef6363540f50ee7d9ae606a308fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b20d3d73c.0.tgz","fileCount":163,"integrity":"sha512-kgqYb/6elDE5Y/J6naZub0Dh0pwQ1uV4Pg2lqpF753PHTWqkdVqYQRyRw3LgrOjd++yQnNYH2GNvMT8vOSjyFg==","signatures":[{"sig":"MEQCIFmMpJYkX5J44xLIxk73nHusl2pyeShIiZI9qWbR0taAAiB9/mTfOT6wZ2jKjCZa8uheO2/fAXMX8j9HcLpON6Q9Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7Eu0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6MQ/+MGj9S8G8T+InsdB9XHTWJMI8kG7sMl9fN53VX9S09e6zK+LI\r\nD7hkKkfW+UuG7H6j2KOvHDToPHeeck29lBmbiZoXlVGuC+5+WYqSBt9PnHxk\r\ngy9JdJS9uM2ZHZ7/5dxbBMOmlvBFjL5d8hjO5PH6qfu/7ZFTwi6PLh20aYmD\r\neq1JcmHZgv1pFBTbrMC6hBaryf1zPVpNmSG33INVslklE06eU9z6gXuJIORZ\r\nE/YGS0AWyQ8pbgZWw/vqlpLFFJG43ov3WDKPNmZV7DwQlvylS4lut1zkjdcb\r\nb45Yooa+u2j2MJCWOOw6RW7az3OdXumCf7/Zla+il1bCDd8FG58YWzCG+fyu\r\nmkfWeoOvAfUXT9FRg+P+bunNNYwlbBsUtGQDLvcHtsVY0DBa6kCRHNt4xlcd\r\nuFGT/o+Qs532BDV7UikrpO14ejDEAOyavlL8Nez9zPVZcbWvJCRwk5O+OD8z\r\n8SErChiTQIDFg+fzg/6tfC0SCXQ1gvPq+RpUScYs/M2wemafVhBClATMB2s0\r\nz7qxFW6MsEMXRb4g7tdFhFfljIGIFbYzKeUFNUbH2IhHRfKe8y0QKqTVwXMr\r\nd6zoniU5ODS8DX+zqbcWM9z7E4AL4O+8VozF7q0e0HpE6HsErE34mCqPeKZn\r\ni4XOcntTWfOe5wizp+nR+jBTBZ+Z+En2M7o=\r\n=kXuv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/tokens":"15.0.0-canary.b20d3d73c.0","@material/density":"15.0.0-canary.b20d3d73c.0","@material/checkbox":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/focus-ring":"15.0.0-canary.b20d3d73c.0","@material/typography":"15.0.0-canary.b20d3d73c.0","@material/touch-target":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b20d3d73c.0_1659653044580_0.21892136726712996","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/chips","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fea2efe1e9111ce00eeaa09f3fc3171caed8b0e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":163,"integrity":"sha512-sLyZQ2tZDDoBNbHyunI8thLmiDxFIBFdchXMBvRsQ/S5FbMmP9khKQurXNeIzKPfmIO8luBHNNcollZdJgmX/w==","signatures":[{"sig":"MEUCID90Kpwa6CBqY43ixnM4J7vM/0+5KrCCcdzt4Pd7Tiy9AiEAoHmp/CkD16LL7oR+nhwWzOhjdGoV6EPosgLfLdcY7HI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nuWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqE+Q//a5Ce7XpxbGyQCZ4BCY/mdi37RbHJC/2D8wkd6XHT1jXasrsS\r\n3qNVuslHiEchlpDvBZW0PRln65lGhKYCwzrbENqydCABmfAuPE35oq2XIASg\r\n+lsVm21XDIA2vvzn8wKfca9R5KyAM8X6u7SpynKmX0QD120yflToOhMFKAEl\r\nNxo+VbWihPZFMUf37FPqcVkVFZEyj2lEhZn015hp83wqB6rVkPph12fZpl/A\r\nzpv0BHZirc0IPuByS6q0ZZSL2z3l5mvaHNC3wdzleYVnFaQlnBGYPSmFm4Hj\r\n1hVYT0dozwbX7q6LQkf6uRuDqS7V56xpBCIcCFwqbnZZHbFXGI2h+I7dFpGd\r\nYRO+y/KIDc8q57cTx+iUQe8AkFitfS2F1F0U3hkcK+L4JlU5IqqPCF/TY/BE\r\ncpf2fdyNiEfA23mqsR2ifDmp0y9RvCbf4IrQnPC4AM5mVcTN69KjqJtn7aZK\r\nWGNEz4vR5l/+f6fNOBFGsWov6WeDxCvDXX/K7xBzOWZr2fo6JwX5V8vlflC6\r\nBhrx5g9OXUxMxEOXFkST0PZYjRbLt0dY3k7137Mkxm3ZqCu2y/se44EfyrdV\r\nf6055gFUoCIRBnuCOtA0hfZHv+tG88GbwaPqome6q92PAtVysStj7D4kaGGs\r\nRISI+JX7n+50K6BsZCLGf6VmyL1lEQqSPJM=\r\n=78RD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/tokens":"15.0.0-canary.47c0c6b1e.0","@material/density":"15.0.0-canary.47c0c6b1e.0","@material/checkbox":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/focus-ring":"15.0.0-canary.47c0c6b1e.0","@material/typography":"15.0.0-canary.47c0c6b1e.0","@material/touch-target":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.47c0c6b1e.0_1660058517843_0.30783004703825445","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/chips","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cd80c39686a1fb6e6db977a856e3d4b4a28cd03","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":163,"integrity":"sha512-ORMi+p/3EutiqcG3T1wpPetLBnyX0d+L3/C2/QSe1i3ojo+kx0ip3R1gZDvk/MijigjdOI0njgEAszBdTEmT6g==","signatures":[{"sig":"MEUCIQCatRor7LY9Tv+7ttKnZIQfgtWbjQuG6fRLBMmatwSIbgIgf/8UjbOcSxbyrp2mSkjK3+Vao3e5229/ZBu2Dzpdru0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofQg/8Cfkt9sbUYQgzO4BUceT+ZPjIf9m1T7UMAqmokUfAsnczQqcY\r\nO5u/RzemtdCBApiOHy7bNyrX3okgm6IHRrt0V9gwT4P3+GWgF1Ricnexoqaw\r\nAkevmEQypHWt6EMyamWBqOTc8AH9SsFdDnT5CJfZpjkkd7DlsuRqVP95l0Da\r\nBL0gC92du/fV4qSjKfEQ3bixi53CzbyEpipfQ0ztJSf8/ya1P/uYypHHoLE1\r\nXZpuRah+td8EsK4NpNFwgStRVr9MJYVFYhBTh6sN7JAAXkn2m9gSbdIZgHxD\r\nweqWXZFRzXj224J3cp9gEtJfjP3Xbn4Lb2KIaPe+4OuNpXQqMXbCezDCsV2g\r\naD0babRZNnoIJVm/st6qtC9o0c4kqUWq25t/GjlcGOd2AbaAlawUpNKF/OgJ\r\nafw2xQl7RfSM7ABHg5opYSTyjfoqdbORoMbjmuL/RvMR96T4BHs1ENCYg47I\r\nHXiIuDTgmVsNDyhxRxUvAWietrqVTd22A2u//Llqs1Qo4p5d+aysrMBIoqVX\r\nfRWtoZfodLndM3EWW6O2mS5oxc3kPWhDEj2pJSJietiVtIidDmleR1eSjIlw\r\nNcdjCIujYu6qreDqWUso0P3Kpav/WvoTUXLRAdLboFgbO17AooO3InduSoCv\r\n4Ms7RPAyHUJxCCoepLNiTIQUbQDaVLP69P8=\r\n=/RaF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/tokens":"15.0.0-canary.0e3dc8e38.0","@material/density":"15.0.0-canary.0e3dc8e38.0","@material/checkbox":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/focus-ring":"15.0.0-canary.0e3dc8e38.0","@material/typography":"15.0.0-canary.0e3dc8e38.0","@material/touch-target":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0e3dc8e38.0_1660243625910_0.8922603364686845","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/chips","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"719c21b1798fc1d718b99e6abf4bac11f08c7dc8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":163,"integrity":"sha512-+QOFu9dGewXo6yVd3MO97AiThdr+Ch7pghxXW7zDx0yWuCC8b04X7qdb5bc5+LlXnHk8FXamFfW9zevwCW9XaA==","signatures":[{"sig":"MEUCIAwzjeohuuvYWiTSWMj0XZjK4KrHy1yk2XCQkp4fbiKcAiEA5acjLmPzBYAro7jAIEj7/WAdh7oExtEHctalovBSt/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpcEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRFA/+O5sEXKjs9w4W+iaCAWYM2h7zmNleL9nYWlg6BQ5RTo0m3ESq\r\n0RERxA7Lh7DiZ/Ud6Mzuy8M+LjJAK5SVLEmbL35W0HN2fBEwJ7pDycVeLWEU\r\nS/+cQaG4xILeFf/xK28D/bMqE7/E0TlK/y1RSzzDCG4WWS/whhV9GOp/GjeV\r\nS386WID4UUW+H/E3n5FToQgnz3yCm+ejCB/DcEj53ntOMHjosnKWfPFZThv8\r\n4jcTA7c72vr4t29VNk+Qs5YbfyeHKFDrN3uXo+X743FgaSxqmuOs/1G6cTEe\r\n2LCg5NtpO5CevXphQpmKMq8R3GABGjuyMGRFqfWabC7hp/qFvyhrn5vpjCx+\r\nYbtkZiQB+jQx/nPkCBIQ8jvt8xlzQ+x/sk0L8PlCTp5xnbGMxfzkgzlv9pGJ\r\npotLhncIy1g4IdWeBO2e4ccw/uqP/hx7VxD1Me9VsbJC2MGp8dIKcct0e+um\r\nfMn6rZs+OIN8Zf8OSPaOuQVz40akKXmHZIT45r1nl/pR0+3I3GeScxh6m/Nq\r\n2k9eNREbqK9LYuwNBrNAn+yUv0FKqDvFG6LKlgctN7vixApmmw+oC0IcC1Of\r\n/kXgbIFg6NnJ79ytIxxZzN67fCufdTVltwoKYJ1/XeYg9uysDKgR3s05tGio\r\nipDUEBjjqL+ykdhIKrLY/JqN7m4CcMLGS9s=\r\n=NrVs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/tokens":"15.0.0-canary.d5a11f1c8.0","@material/density":"15.0.0-canary.d5a11f1c8.0","@material/checkbox":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/focus-ring":"15.0.0-canary.d5a11f1c8.0","@material/typography":"15.0.0-canary.d5a11f1c8.0","@material/touch-target":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d5a11f1c8.0_1661900547650_0.07574688333172608","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/chips","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.bac992a95.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f759b9c37551b39a87e0ccee5de24961c5f81b3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.bac992a95.0.tgz","fileCount":163,"integrity":"sha512-SkvWQM47KLRSz/0Rdb9xGqbIOo19nM1d0yejtpLGPl3bmSGT7+coRwXEpBkacQLoWKYNEsBYAMvH3hgQey6Auw==","signatures":[{"sig":"MEYCIQCPUUbEW/nTigsMJutKIS+Nbn0yDg8O7caWMM7GNQHqzwIhAKXXwqeQGhc2VroXPzoLbxkfWuPFvAnl59JyFLUiLumD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFoTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP+BAAjGZAjWwsPsULwRJ/ND4edLY2xnrPyXY77H9PmwEOJtltk3tA\r\n8EIYCljdgHDLVum5Y5i2zboHSTi3evbv0BO2bXI6IVwOAGcBBv5syysltDSs\r\n9CYtnzy5P6G3tRBuQFyGnRlYNyjkbMkbWwfpbE7QfV9H8xuiRZoSCqw8ONx1\r\nTiyUL587wPcsYxKKWVpjXa2T5RG60OQoCBnV4XSpfeQ9hxfsywjJsUX1hv8u\r\ns+T+NJc+0I93SF2ETAYOvlrQSAI8sFT1PALC6bvrfP8f1WcuVpfOPalAuO1o\r\nJm+ScKygeyzfwznBtHbY0+eBqKoaNO49gqcbdVGVgsRyuPHgL6zU4irHgQef\r\nBdNevEPYX7Xrye5NZGLLZeu4nyK626p+CnycuhzuZymy1J7j5tGmGCLEBe0A\r\n1ZeoLwn9WzGZUs4vg6wY7OFN5bg7l1T6SpoPJI5v7ka7pIS9W1H/ZTs8N3fm\r\nnx+v+jaMSeGmqtqSFt8MOAXmx0y37xuVhL5Q4eHF4Ti5l/FfOKelrqeuklUv\r\nkkRNHJUlzrDmYTX06/L01ysez3BbP6tjJP/Ktbc6lHj2ggPT9zBTu1dJ9L8W\r\n/XUfUrWYJ/GPpgv3VET+0ATif9H3g6e7AZBYEh5SdfEUEz3vu84HM8DJw+tk\r\nfw2M5MmqnO1/0N1wxAgoLMZrss7oEC3HePk=\r\n=8bf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/tokens":"15.0.0-canary.bac992a95.0","@material/density":"15.0.0-canary.bac992a95.0","@material/checkbox":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/focus-ring":"15.0.0-canary.bac992a95.0","@material/typography":"15.0.0-canary.bac992a95.0","@material/touch-target":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.bac992a95.0_1662016018851_0.41111898337123787","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/chips","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd5ea882f72bed1552fffbb2cfeaa974912749e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d25f3404c.0.tgz","fileCount":163,"integrity":"sha512-tRYT6aGFzeDrAj+XxVCuJMAHLzci2Kzu7cBVaJUS4j8a6I2BpUEkZLSxuosDsP7yhhI4ZpI5U6XyjJskZEeRwg==","signatures":[{"sig":"MEQCIAWXS3mzLel7GQvUCN0RZqczL6iRuP4PuU1dko2B2FGAAiBy92kl3KFIWFSA9nSPYtWOPhEUc4Epe5wcwhHzunGniQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH92ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfEg//TgMRqE0W5Ahiay0xcAvmbNy83nSo8yAv++M3tY/VjDpKy8xG\r\n6g/ySk3c1hPPjvIyB6VlxGP8uBQIJdGf9D5Ukjt8N4L9fdYWwwClEdean6dM\r\nIARQmYnxlmHY+EZvaNxvu2JNh44isFlj328kCTnczFGk1raYssHoF5EWD6CB\r\nYhD/Skj5MEZT24h569Ryw+UFRAoFyENNW/v76tzbYWmhk9onxTP4LUHTQNTP\r\n92nsp+lTlDv1RIFSY91nvNtAbwPrsAFzVddNKixQxGxtEU6/V8Kod0ZPG24J\r\nNsplPReyt4+C+mcWKfjXYJe5AkW3IkVEkAWLVK7uLBJ4fIZdhnjPaKtg3ddH\r\nMGBEdAxhzTJhdgMcMoh/miXCGDEm4aOl73YLR6/1tgOIuibCYXlLTDjvsEYH\r\nr7GCpkhJnVe8IaymChxVO3fT28ltKfgAk03Rv5/gedBBXtyqsMIdsa24vnym\r\nVJD//RPsRzMGLtR2C0IDafwLZrLfzowxo4IKvVlZ7anJycjNKDUIK5gAtHYZ\r\nw7rqJ3ISoI30dn7K946xEhGPXrXmUUh7aPyiTzLfmh6CCuT8XAMekGjkOHGb\r\nPUZx3M4XFMNzGw3bcGb8YTThGs7kecADiZCKLjWcx9gPfi85xahdn7bVPut1\r\n8os4CVLOYaJzFTy3SC2C2mB2vANZkY6DU2k=\r\n=taN1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d25f3404c.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/shape":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/ripple":"15.0.0-canary.d25f3404c.0","@material/tokens":"15.0.0-canary.d25f3404c.0","@material/density":"15.0.0-canary.d25f3404c.0","@material/checkbox":"15.0.0-canary.d25f3404c.0","@material/animation":"15.0.0-canary.d25f3404c.0","@material/elevation":"15.0.0-canary.d25f3404c.0","@material/focus-ring":"15.0.0-canary.d25f3404c.0","@material/typography":"15.0.0-canary.d25f3404c.0","@material/touch-target":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d25f3404c.0_1662025590128_0.7486696846136554","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/chips","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84ee77193e06d4bf5f77cb4f90c6ff423b5c829f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.920d8a79e.0.tgz","fileCount":163,"integrity":"sha512-hfDuEs4xXJXKz+H7QPCM/GD42DSh1zBSFBLuNPQ7DpM4YcarcfM8m+ooAzfJD4B6rlJEGefr9OOql0YZ5GOBFA==","signatures":[{"sig":"MEUCIDw4bSaIlu0UJc8pRZFkTAUU3zq5XW7qgQra8fE3BhSFAiEAh4I4rEvtZ1WpidJrOmawaDFjaYCj9gVhoo0gueHo2Dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzUA//RdII3QwwGVxk68S5GYulr2gOnhDcyhLlIUnol1pPOtAHtdTs\r\n1hs6tC9POpaBB8/IR6q9sz0dQvnA8wy2gl31hJ4Cu4pLRlfLbVENTVxzLF7e\r\nQM0a67usiCbSbZfMMQOmJ2aU4ZAWMVSThcb28wwGnlTdhTi1kunT8iftFaDo\r\nct+pIqcEm09WYxezl4uz+vn21LAGbgYkbmqyr8yEBlx0BuDUbdd2ESORUIkS\r\noVESSF/sQMYdy5OYh7NELez7QwCU7Q2u30I63X7tyJ74YgVuiRqpDrcrkRf8\r\nb0OP2RryWN6hMnOlMaxz15Ffoed6GFDkWBJHBq5l44ztjjyNnJZCc70DvRYf\r\nXjrXCP0f5JFzNfyVMEptKnBpaXdSPLBlLTcTT/ot6qNze/Opbmnnj4xSzfuP\r\nJ/J+f5MkhV1RUa7Sk9j4UNJmrRwVexmfcrUSahd8dyH3oZCG/JPe3oBs7Kf1\r\neRJzK60p6PD0nZrppJfzHBozWarRJf9bKFb4lZbS+Is0Dln/r75pXTbZ5rfe\r\n9JaO7tciVzNsS22+gglLnIzeydpAstgFIs2ntpynrvS1R93izPTQ9jpDybbS\r\nJxld1vyvBic831z0P0MDTm0ouTkD9qxR2bsDnsvhUieEJSHWUD6UnvFRP72d\r\n9TyS08GxNrDsPxdKKf4R/zMtlXmjL4Gt4UY=\r\n=Te7t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/tokens":"15.0.0-canary.920d8a79e.0","@material/density":"15.0.0-canary.920d8a79e.0","@material/checkbox":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/focus-ring":"15.0.0-canary.920d8a79e.0","@material/typography":"15.0.0-canary.920d8a79e.0","@material/touch-target":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.920d8a79e.0_1662063729236_0.4956164516661836","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/chips","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c363f267b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3d7c191a0b3fde0b4574bcd6035d46090288271","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c363f267b.0.tgz","fileCount":163,"integrity":"sha512-gYWh9eYtk/N3jJsmmZgy6Mnm0ZUwJnZz8gJ2evOYRDS3mhWgdVBWXJNKn6/Yd0mcKnIdT+Z8lwUnmSqpRqOR9g==","signatures":[{"sig":"MEYCIQDxtcaZ0SPsKgVLOALHWoQ8B0C2ZzKket4o3VJfWcwFHQIhAJdM/W1D5ViWmsx6kdIMep0DDnw7M79CY7R2ZCfkAZ5m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhTA/9F7qq/DmvTuJNI5ruA6UQrxeYNtfTDQsmlA4lXEUY+9c4eVGD\r\nKrDowGY5O6I2As4DmKlVSKDoRz5p6AnglFCrDZ+QS8jFsmhDCrPfWOVKcTGf\r\n7AioFsvLyt//wkVUcQgXN6zP4KtZN1w+TeHgx4Fgq3+JPpT626Vdbx3gNXkU\r\n0D3EXLC7pAbHRyi1sdBs5JqbO6SkeZgpSS1FXg6Bpj5vTAsSHbaBJCYUS8Av\r\nf17gbE887EUqVSNsTgMD5VLsjWr3j50b0tUh0Gc/AcdMr3WoACFLeNPeYo/T\r\n8TlrJYWYOFMv3N8VGdPY0KKfdv8+M6k2XxRUQDDLBj4OXJXe3TxarAdcB2Ts\r\nQ4Q66Hh7dRsHVTWt7B+SOr6dz5ualiFyMF9WFslyJOh0U/FGYmYULqC2RZDI\r\nQSUNgcnJQ4nvfiXomJndZhp2kgXaadHk2u2eYP3kAY0oRpwsLKXXwZyPpH1U\r\nDvrMsNmqBenat4i2HZKcWnL81wdnL7/5QmvWVSVvnAyLlUXHpgQHLHAfcRV8\r\nhDa45urdDU06no8RkPsmpTzm1DoXDOcryhJfwRs+XzWGO9vSASp8un81EPWu\r\nbm17lSU+9bfNcTuEJK1L7tFh59vC9oXsNgwH+SoicsgKxwJvSG3+SMQN5pNk\r\nNiXa3rPe/EBiiU7ujLjABsuH5rim2b61TS4=\r\n=1pIq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/tokens":"15.0.0-canary.c363f267b.0","@material/density":"15.0.0-canary.c363f267b.0","@material/checkbox":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/focus-ring":"15.0.0-canary.c363f267b.0","@material/typography":"15.0.0-canary.c363f267b.0","@material/touch-target":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c363f267b.0_1662067167019_0.1611606186166814","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/chips","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4dfd89638437fe97be147229807fa1d79d70849","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a4eb4937a.0.tgz","fileCount":163,"integrity":"sha512-Vc/edUWodfhM2cGmgxHAe/WiI7XuZgf6q/QO+Ojh4r5s8jyOVCYnTFIyHBtXZh6XYnsoyER5H5lPeH7P+5uTJg==","signatures":[{"sig":"MEUCIQDrhZxjVm2CeRutQ0fs6ez7sQdDLQWj4XREyGSdvr1zGQIgawheZ2XPF2eXlHs5oSGi23s7YOKpC0sZ2sM13FP7KmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF4+JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBpQ//Y6BWW1eBAKduyb5vkkixExfVd5nUOdgAOvcRqRhg0u2wMIwE\r\nf2Vy47uHupg7DJDQ/wr0pZhosc+qAd+zHAT70XdL8xT5MGCAYnkav4uGBsNT\r\nHDzAy8CI2LCEL3VThtqRvW7VtrrcbNii/++Zf869IAp4DQC1Z2pY6Hz2o4mh\r\nPAEXqi0w/2jAgqvCfmeDU0x76Cmgm9jM/uAMVsjzLsYklOAmdQv77L8+qVb6\r\n6fVZwYzlgdrY12A7n9EVJSWihcfVnjqD/yMZpxl9Afn21gLGAOb7i4Gj9GO2\r\nX6W7n7XilkG4YVC/FqXAGLmxUyv3WKztjB63JF4u1SlIlbYjs4huYj87+jAP\r\nc6pqAD8BAESvbOy1xtHhyUgvGEy3jJ9hzxC/UNbQILXz+pmE1g7H9kcpR/Nl\r\n87IkzSZHhjIYcJS/Ta60NO58ETY1AARER8qlCVDbFnh/9iZr4iz7e3B4noRF\r\nuu1Wuo1hMFWCayx1reAEqnEMj+N3TUT/DXoYNgDP4+8e6Y2mWzLyFT+KZ+pF\r\nuxloS94JtpqJAcOgq6BIzk5zzdXONhS2rv87aYSjur1sTduoIygK/kNKGFeu\r\n0ZqAHVyfnCLKzIVFf1JErYQXeM/ou3bAqsvCi+QFD7bHmgp9vPMohrENfgZA\r\ns5FyKVrmT+tV+0BPStJFAhUltygI89ixdec=\r\n=UhEX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/tokens":"15.0.0-canary.a4eb4937a.0","@material/density":"15.0.0-canary.a4eb4937a.0","@material/checkbox":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/focus-ring":"15.0.0-canary.a4eb4937a.0","@material/typography":"15.0.0-canary.a4eb4937a.0","@material/touch-target":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a4eb4937a.0_1662488456710_0.4544200016008437","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/chips","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4299717da.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75d63d6d355d796c8c5b87ea4561badbd0b5a782","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4299717da.0.tgz","fileCount":163,"integrity":"sha512-TOKat3J3f8ZJYPGCuaVy6Gn+3EXPJj9r7wtFNvY4XzaaPQRXWp9+34Hx7G9m9y1cSoNgAo3kAlMRfntft7YinQ==","signatures":[{"sig":"MEYCIQDa+59OwgNFiW3ZJE9OcIYKyEfQcce9/lhKdSTRetjhwwIhAMPRP1t+2HD8hJdpMRsbsh1SJFQ3gU+Soe+BFNp1A9yJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxqg/5AdkHQfjiIlIz34oM9Ew4S1eEDEbTlTsKRGy7Mk/IwQ8ldHnu\r\nAJsV5MOAYcKDSx/01+gStJ0K2QQz5ULQntKs1ADP4DU+qGECL99+2hU1GmA6\r\n8Qp/COx6zaP/qfJpTb0PJ1Ft+ApJTLU0zn2LA7EpU4E0xD0/79z+2yIaItn0\r\nUeJg1f2JVfyNlc1WaTOs3bx34W5a0NPD1o9D+triQ8dAdoxW500WyBgD1jj0\r\nrL6Z2hgIvE17j2+WpYbh/vly4LaH817OCUJQQXpgUeUQFbIG2Sx52YuOibYp\r\nqfzmhBqGWHr8Cdp9Ekv86q94fprbyQSSY/GaEU7vNMkZYStO0qcYDFBb1faF\r\nvSB//hkLMQTYSf0qvr+tJU0lcKPhmjefQ+gsn3zlEUlv+lec38UhTmvcx/E7\r\n5bKJ4PZcMVYExRGlPpmLjH6A86Xu47Lglt5c8A00SzTt3R4sfN/Bl5ez4f6D\r\ndD300zJE15FLkCiaa3lBnXJIGfGUm/aXf7jI2E0DyfVixwp+yr1QbAnevpz3\r\nS4nvXSMH7TnDozyrqonaNV8vWYLCNtSHIqdu7kPMSG1fbyO4M6njx5slYRYx\r\ndP/RB7n/vY2x7jP1m4J3sSB5xeVaSaDvjsF04DKu+744GSlolWEjZNCouoNe\r\nCmlYs7AKvKBp36YkmbkwWSXFGXuN1UiAEFA=\r\n=2QcF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/tokens":"15.0.0-canary.4299717da.0","@material/density":"15.0.0-canary.4299717da.0","@material/checkbox":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/focus-ring":"15.0.0-canary.4299717da.0","@material/typography":"15.0.0-canary.4299717da.0","@material/touch-target":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4299717da.0_1662567411432_0.9227680197556429","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/chips","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6752254b78cf98684f8adc730e995269ed4c982f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":163,"integrity":"sha512-AgVbTv5YiPlU0jSoW9HrECIA+eIHdhny4XlwopFSicxKiB5fW7CbbzoUhml2MQ/5sIAJaAxRo/5Q5kCXoLsspQ==","signatures":[{"sig":"MEUCIDWVLNws9guay9VD8krKQ58CDCp6Mh+nLhHwVHkiRKJfAiEAw4smp67WuJk0pHnFkU5bef5Jm8TDjgAYUjadK9uMWgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDRg/+MA2YSQCZ3rK/HCXocl6N1ZEshtEql58QxruVDnB37RBNSVqp\r\nwNI/70Rjq+Ka+F0Xo00lvdzpJy+qg2eneX1s1w4f2hXt/w5/MB3FibcBqT6z\r\ny5+A2wF+hR9HSPp0A4uBbZvJdyo5noiHbS9BSB7ap0iiJVrqtKsyvMRXsvBk\r\nUeOjf4/aOsQR1Vhyu6NjdgkMXyv7zZ/nbrFFTCDdeMq6CxNg5c3u0mSEA0Zj\r\na/N5DvUaxEL9W1dOV9qoXTyxYYoQQQLYmh6IZHUUjxrDkD8nzi7OG4BiYhza\r\nqXpctea0ViMJRo0yIRSA/sN3h/Gh5PYRb8imFCyTv10vCtzOpIFbymaJy6Zn\r\nmURpmDqdNEbUkguQDKkdhoLLwADk5NGStUL0iHyXLjWD1T2/Bhto5ZxBlYtw\r\n3TVg5gh/syYpm2hghWEmCKZKO9qo86iQdQOVFB96nEoEmefU599pQszbzUmW\r\nYR+L02x/opsPbEOeFBUwndqdaDeQixfuR4rNg7KPfAEV1mhos4FFxXCkEWFN\r\nq+Mbg3GSrb0gQ+z02b3PO3+QerkYyaEtzzGJGIPWuAlV6JjCkWv+rZUra3Rd\r\n2dxZspMbnmwEA754SpaXj36WKi5OA1ruXRD/XeSKMND7apsVoNgM/1tjPmJp\r\nBNzIu0VOMKTfIX98KixPC+WPy3j4H9qP0xU=\r\n=xBbN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/tokens":"15.0.0-canary.fa7d8d44b.0","@material/density":"15.0.0-canary.fa7d8d44b.0","@material/checkbox":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/focus-ring":"15.0.0-canary.fa7d8d44b.0","@material/typography":"15.0.0-canary.fa7d8d44b.0","@material/touch-target":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.fa7d8d44b.0_1662578409315_0.6009027812059857","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/chips","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d862617b83bed7e0720d5b076418040831fe3260","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a40e3c768.0.tgz","fileCount":163,"integrity":"sha512-Rqz48K979cwZYNHo1cwmUbGTeJeUOHJcEMxrx1iCB9h2DFGriCV75Q8eIfwsFm2Ns9CPBJh2raDBz4X0JRoe/g==","signatures":[{"sig":"MEYCIQDiqPK1zJi4a0MCmInvvKrAchelxBtwxkU0BFma2yPGhwIhALo7KHtxO/EE2+ij4AM0DSUuxaaGDBJeIutZh/PUJU2h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUqQ//Yqniqxw2BYQEhSvZMvZS4w+6IZErqdimxiSt0SOwBTlx9QBm\r\n2M8DzQ6vkrFDkjpj9ecftBHATdodfc7Zss3pS8bpUP5ESud5bCTBHf/K3Acp\r\nTj9UwVlWzzD2yzMDzMGYwUdlL9Z3ZZmxFGywrFBxarjhZ2l668I7AutOBvRe\r\n4wV0JF1jSyGy1mMpIi2SaTX2+NWK8Rpk5BvqyN89wUvYHJ/WrwubnvVaCKOg\r\n7btmt6q22LCKQ6tH1pwP2gqLam5l2w15S3N9szHCLaBhDsJO6IQ8WNSPL+Db\r\n4EDAxSk5I1pkgCy6F0ohZGWu9Vewgx8U+JTTFgvKcdmWzmFk/PYSnPJAAEl8\r\nPM/XwzdQW4oSHkXKyIlpBhOF+x/EUEqVACmpEjes6HgjN2FCyfvIP+r+smy/\r\nAGLJv9Yw8DIf6OkPP8gED9ZPjShPPYU1snTkiQSdZ01lh4XFs/3dUOQiSHAh\r\niyOsPqfUy+ehKQ9z54GMUhTRpOLwPWz93ynk4j1/ahe1e9pHjV3LfxIuJeoF\r\nxmSmZmTa7erA//n/uTaVFD5AAW8YJXRkyvew8EY7gOyfJYWp7zao6kdBTepq\r\n5SZLDgjgTp6zJgXG9SUWf0wHbjMV8+S134BmSkngLOcY/ElGFafvc6g0dhbG\r\nIK8ncth+gTnraD7fcfT2DrCWhYl2ZpTIhtM=\r\n=pam2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/tokens":"15.0.0-canary.a40e3c768.0","@material/density":"15.0.0-canary.a40e3c768.0","@material/checkbox":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/focus-ring":"15.0.0-canary.a40e3c768.0","@material/typography":"15.0.0-canary.a40e3c768.0","@material/touch-target":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a40e3c768.0_1662753903825_0.19567341684350326","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/chips","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8e691a31e483d0be5d757280731d584d4898fb5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.18cdc9a00.0.tgz","fileCount":163,"integrity":"sha512-r+K8qFZeSTBJ5eb0tj7TDqjlkulj8tHEQOsWiBWQ5jvf42QmcunoYv3aqjIuhCFRm9r6XwbFvi0dJgGR4I0u9g==","signatures":[{"sig":"MEUCIQD1wU9EsnpvpifP+ZiBz9MzvzinQuBsbqev7JC3ljMGJQIgcu2iprHfYxglptqtXtthSV5VIOxFfeIopNIz2Mi7Snk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH57JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXKRAAmI5YHG4ErTGp2As/LpgPs4GQllpcy+WXd+G8nZb8WqfPqCQ3\r\nEVO+fi7ADxrQIo4e16O8+jBrKn2vVKLS51abTPwVePo8+1kK5Qm/7C0HvjaC\r\n9Q4zSdjoMhEv63+ayFZ8uiIVN6JJ/7E3R4QEbZ9PfozgPh+Ow9J4Xl1hVzUh\r\nlaMW/4Awm3V0GlYibMZLv+XO1AZIlYTnm3YWFpQeCGWJP5bFmYvFFgWBKdvL\r\nKd5n/+OANZBnBLSzanPqxo68P6aXaFNxPFK1qcRTglpuoAUOQPJC9QaC+8vs\r\nrI5a+/ijxYMQCXIkDpyBNVNbzKTV4YnxZta4LqY/QeD666JDe3p8zrQfVPt1\r\njuh4yhCWTok8XnoT5MlC0sqY+MjZhuAukqpJx2qYMuCdVd3nyRrZszPjBYW/\r\nMq3UILqkuW/b68T9PMj4ZGJoAlq/CMvPuZK8WP/ItUPRlREjJjqq4prk/x0S\r\n/CvLkk3ldG7dWkyU63XZHkpW6mverk4kF6vWE1FU6Kc8x2XIcWNkBkTGkXSE\r\n8AfO9C00JY398ol5a16zgAwGNycmUSQWgxRXkUPAeWpnHSakbnSBBjwLSY8e\r\nwwoFbIXKRInnHLR2oKjxCRR/9ScHJixC8PjXZ9XLFbRLpbalRQexyPV9HeZa\r\neUBeqI6kYuVOr7YGAQwFkWZvFiQvfLtVgHU=\r\n=vr4z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18cdc9a00.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/shape":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/ripple":"15.0.0-canary.18cdc9a00.0","@material/tokens":"15.0.0-canary.18cdc9a00.0","@material/density":"15.0.0-canary.18cdc9a00.0","@material/checkbox":"15.0.0-canary.18cdc9a00.0","@material/animation":"15.0.0-canary.18cdc9a00.0","@material/elevation":"15.0.0-canary.18cdc9a00.0","@material/focus-ring":"15.0.0-canary.18cdc9a00.0","@material/typography":"15.0.0-canary.18cdc9a00.0","@material/touch-target":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.18cdc9a00.0_1663016649199_0.8034447725910057","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/chips","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e26f069ad2be647e69c702a05c3bd256c127b58c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":163,"integrity":"sha512-TW+dCkP6AIirPxbnYlZnPi7K5eYhaP70jqSsCmhGHCqTQ1tgr/uIlE39N2Igo68UlYNkqpCCqJsm99PhKN44fg==","signatures":[{"sig":"MEQCIGTcIeiMnya8hzRZW6LhzhjcSCVZB5itM6XIyig0KTomAiB81L9x2YOfpekBNrCgk4WBqKS/X6JBdXI461ygqnMFUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTRw//UcsRRw4A2xDFX3KBVQ8yD51Q1Nt/fy9icn3/dNLvfEnGbPVR\r\n+v92/Wz4v0FS/8IJrUPmN1v6SLpMwz5AkyKIbwNPAAgP1UXiAYCdo2kkaZdE\r\nD9Bo8G/b6hMvG15doAJsGLDzwYQzdJlKHaoFVMQ1Lzp5FgwBlgP9i9UpNJI6\r\nzvprGOFUlSlGneg+/DR8r6m2Ur/Q58bm/qliJ+/qAHXaD5xk+ZM7RqD6+Ksx\r\nr7Yy6UAsLzGVZU+mBRdaZyw4cxJOmzGdjXEWqhbh7xXV0LzA2Iuwm22sWln5\r\nRRmejhQc6w0tJGstXxu6MWVFMWcE7MgWoUYETJfJ7S11Bf+sXyvT0bt2InjV\r\n7DrHxRl7IwO/chh5Kl8yiKp8s9t5q8xUsuURXPbS9y+piT0QETiVSQ2mhAfm\r\n1q6mvYkggtDwwXsukh+zr1ittY2mJJYm7UX4ZyChqLFd8eUlwBJWec8Djngt\r\nBBFdGsIQi3daiEBumn1/7h6Wa2EGxIjPLS7zb6ncyaLNm+V63AnMBWzMrM92\r\nfd3byKTFhtmudpgukW79chLs3J+ZLotTSGgg0FdHUcto0nPBVKEg8bpsy1mX\r\nlywU4t3nVF6Aa+gNFFHviwi1qKVtMbNJgRdIuf/TDzR+M5BMh9ZjcMpzawsz\r\ndDLm6xoech7rb6bzv8GRFmQvvW1KUERPIUs=\r\n=Fr9W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/tokens":"15.0.0-canary.7ab3cd3c8.0","@material/density":"15.0.0-canary.7ab3cd3c8.0","@material/checkbox":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/focus-ring":"15.0.0-canary.7ab3cd3c8.0","@material/typography":"15.0.0-canary.7ab3cd3c8.0","@material/touch-target":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7ab3cd3c8.0_1663108821101_0.5963663975760418","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/chips","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2860d244d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11d32f13c9bcf974887ca888ceca4306885a83e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2860d244d.0.tgz","fileCount":163,"integrity":"sha512-x+NKqdkTxz1JnAO3zXL6yeyJxia+q1pgVWr2+rbenx1IpQpQ6c2Q+s5NJB7AI4euvREh0OtrWIPTUDHEddg2OQ==","signatures":[{"sig":"MEUCIQCTU8avyoJwo6B/yAY3DvGNzOXxH3qPyUEGOxlMdIVMTQIgQVo4Wabl6AEb79SKMlYhm9lUklqsibN/kj1yp+i0CPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWwhAAhjx4xN0L+hobGb1MyWkdfRa1sHl0Y+ghLAQ5YhCRtRi3MxI4\r\nknw5j6mwjwJVVz7zR6Ht+uhUEesgXGxXKX0u/txbMtmXUx2gct05vApGqWEM\r\nRQHBBQ2PrZCcmoM94pjotkt55/r1fpTbiOcu48Aw4BJzsJRSMHTaLBUASvk/\r\n3d80z8OiQvl+c6IEYwWUvG4505Ab7jZdmexStsDlzEcTiTJFvRE/UAGpMUVp\r\n4T2dJPFMQ2pXFNzm2liTGQoX+BaSyqwWySTb9QD3+6NGAaCfF1ODW8CeRTIR\r\nVoVIfBNIrZokg64nVMrH+asdrkxmbM6+E8nTpYy4bFZMjUbz9HDaIwZ8+IuZ\r\nsu3dYXyqi9jAETdzCs86rgU4XSX6E6BjKlWrT9XEdl0T6y4ll400OJIefudC\r\nbMzBjrxdZVOveHj0MY6oAOuhR/YHR+UVn19HVHBdacNixGIsN6qQZbiisXK/\r\nE7mPbYQOsXlxc8rq4DCJYRXBlnDq7RLvPaw0TnDBbpIZ29/JDjkniTznMaWJ\r\nJCTMYwAifjt6c7yQJbhDqalEPLT4fXNA+ZNX1d4gcKq5ztrvMzEug88FLycV\r\np+ERefOTvwAb40ENnArF9EorBKbkiVHWOCE7su/5/bwttbUVMZtBbfVOQbA1\r\nFTg+xbk7Kp1bHSZwgY3DXf47V8hs42FyPUc=\r\n=eY2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/tokens":"15.0.0-canary.2860d244d.0","@material/density":"15.0.0-canary.2860d244d.0","@material/checkbox":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/focus-ring":"15.0.0-canary.2860d244d.0","@material/typography":"15.0.0-canary.2860d244d.0","@material/touch-target":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2860d244d.0_1663368958816_0.9067958510416807","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/chips","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e8726533c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c54cbe08bcd790cfab498f01de8daf4ec19ca861","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e8726533c.0.tgz","fileCount":163,"integrity":"sha512-0ebQwxWaFx968Ke21UoSJznlEsjbgZ+I9AGEJRruzWA1lKhcV8wKpMUD2mxOG53ZhO+tqJnyWghpKAfxaxfv1A==","signatures":[{"sig":"MEUCIQDqEcjF/Qs45uR7mXI/xyA+hj8JDw3SNFDkrBR6t0T8cAIgLAEgRATY81t5KFnO2yGqOzPu2Qf+2BPgGFih2hTdYtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiArACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Jg//R+Oq9fYIJPve6nfZLflU7elxNBt2HD847fsBkXWBCVcKB9r9\r\nhaLR224TSp0NqmgevCuHDoe/d2OJqRwRb26F0t6Zw2y9N2QBECzmzjnBOudU\r\n6riGrm1yCMssSFu+YJOQ3LnOy8Dg/furPltfaCcvamgmkLducgoFcNkqFZdl\r\nVUYWkAh1WtFcZpVGiO/G76zzEv/kkEmhF6UufDszSYvr2+2IfypwV6pIm9/J\r\nvrbWtAyLpJx2ppETc27x+M02m9cxeZSke4E6dQDxgYgRsDikica8StEZC5mS\r\nsI8Rh4Cm4B/LnTYWCifklR/+E8QsoGS+M8t5Yul/Y0mUppgvmDvx8lqWLq1u\r\n39kDdNE9g1Q5nmKCScUp6Ntxockvc3A2bPpSe8efCipusqJAXMTZINZmf+mY\r\nrwHoLC4in0sgX+fCsjxs0XYD0ZnIHyX+zGsr+dplJMUgzxA2PPvWkJJ5Spn5\r\nco9zJPYa9JKXqc5tSSjUAHcd+dfTWni8cFURNIVKtPihZ1hDt1iv5VaQHcdD\r\ntwKHamIqUhvDaZL+sGj4gVSuHDac1owaMIAb8mVVXuFPXEr2lxOWZ1HYg7Sr\r\n6gACv05eK90dx1XP7R5Cv7A+V/IY0kk7TRBKQYDx97RerHzSNBUSUCisrw/L\r\niZnQIqwPPrfXBJwACryS1e5GveMnG6m8wFI=\r\n=7Z7A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/tokens":"15.0.0-canary.e8726533c.0","@material/density":"15.0.0-canary.e8726533c.0","@material/checkbox":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/focus-ring":"15.0.0-canary.e8726533c.0","@material/typography":"15.0.0-canary.e8726533c.0","@material/touch-target":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e8726533c.0_1663705131065_0.08304511043126395","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/chips","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f26678cea7be40a359c623d7eeaff6dc5779f589","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.00d8de0aa.0.tgz","fileCount":163,"integrity":"sha512-uy9BjFa6adI0gtdefSGebuJiQIKXiodULpOvMkYKLy0hMWNF4/67g8e372LvToXHlowyr4/AlcHno8C+nIGflQ==","signatures":[{"sig":"MEUCIQCBOR7GPDEnqtFINWAqc8IgcNDbKz7vd7M8wCa9rf0q0QIgW2OBTAzbF7zWathKzaTp+Rdt++c3emj5v34/U3Lkn/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKywDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqj7Q//Wc6i4jcpccm8Z0pNqiCWgrmse5n493qxFcheljbzTKbK5+aQ\r\n4HoyGvApwuCducdyJ8bAl3jAbH8velB2TPe1GXNrnUxIojjJWMT6Mb2TB0TI\r\nogTVsZTMrNNT93OkRNWSXzJZ9PZmnGu0tS9cW0EIQ/RuvvaI6BebL+MFfj2k\r\nIyfi9xcCZbLJhvvfOe1oBS4mHZ4C+MAl5i6K34wNX+NrJcxfCRmBubhipgAq\r\ns22nLNr2QmeX/JkJDirkFs2mDtV7M24O02gdoJR3cipdxEBO6MntsBy4UkAe\r\negRvSq+ZvIvxXqIlZ0/kACkXN0clT/EfSEe6awynBIJnik6ZOBuoLZMYt5rg\r\npY/gdFo9kYbsrCdion9SaPCyd+llTza76C99XmMg2/WrOfS46iMWIkAGCYXL\r\nqFc8Kwqn1ph+GcWYjlxB8M/Hm2e8RN8oY7HmJtbzTBFhFZK2rrOgv2bEsDrM\r\neprqfEyN9l+SDDUagk8z9vJ/woa3qvtklCZLiOqvbOSyjr4V9+i6B2YTOjSA\r\n666LVtEK7Zm/lt4ViTziL52U4TVvzWySxpjGYg8R3P8dX2BRfIXl1ECpGAar\r\nXdXy4aV2ii6x3izIo5qVhmPj6FGM2fuEISY/pIn7tx83b0jf+s0+UhbJSf7l\r\n3VLKvXSKGQRkDGNGKTmTyHhK4yF1IMMp2oU=\r\n=Dvkr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/tokens":"15.0.0-canary.00d8de0aa.0","@material/density":"15.0.0-canary.00d8de0aa.0","@material/checkbox":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/focus-ring":"15.0.0-canary.00d8de0aa.0","@material/typography":"15.0.0-canary.00d8de0aa.0","@material/touch-target":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.00d8de0aa.0_1663773699373_0.969573113709733","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/chips","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.271aedc30.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a19c773d96ee6cad83ac33848eb28622ca52705","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.271aedc30.0.tgz","fileCount":163,"integrity":"sha512-KYBqks8CSjUopRKaUEYJCZYXVM68J5BzvKTP32bHdp+VKrHWSJluQ7889hx2bCktbRJvBSNzSoW0Jijy8lbysA==","signatures":[{"sig":"MEUCIQDmtCAo2x/rLHFu2VluN51F3A7WToE7a0eFkVVBwAO4YgIgZxAvPfs8XLq4ENKMEF0p1xh5F7FfCCqrybRH0Rwnppg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrkA//Tt6F5qFnLScje4uXthW/Ux9ciF7yBDe8eGj/MeASjw3Tyg4e\r\no0MaMVdi7kiKSfQaET1a5VWDcVvFn5sXYyOtu1bXer87pdyAX/EYe4mKCQur\r\nWsBBeMfHl1CXyeA7P5s8WYBSZ/Nh71FqLcDw7oNIyReOs4Od3Vijl4VhpLMR\r\nDpxVRsDUFyu2NRyJb5M4VPhi46U0YGlPGdbxy/TcOTsyQ4aYyxlMppzbcmHt\r\nrn5Ly+9r444GoiMSzTuGk6fH3eSaofwPJvY9zi/o3HsY+42I/7ODstNKYQX+\r\ncX25GZQy+3EtodoV+HyyQKndDUBcIvk6iRcDAXEWVpIWzm65rwSA76vsGbQa\r\nEbHK4Q8F4LqWHKaNEH6bPyJRrlfJWwpLMxTVF7ZbmZKlJWqk101lKVbB2+6u\r\n1k0OXyLAmf2eYpUjWQ9kca6s6j6asAAr2YmNJrkKH/wwDwaS9a1vvrtRkadG\r\nonCY6ru2F07vV5oYMf/FmoyR9t2S+zoZzAkPlna6YsQ/RE8yLCKDbn908VYb\r\nO16vZknzQutMpf6iXRSUZ6u+yM7KcZcbBnt6eC8TWnrHv4VK+/2SsoGa4TC5\r\npA9qVjb+c8YUfjIkdcr8qld3WYRzdnxHXyD6d2FM7ls6Pf7HUW5Jx+SpfZhB\r\nrVSATdCvZfSkvpd67S4Dczke0wjPebZKkEE=\r\n=MCfF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/tokens":"15.0.0-canary.271aedc30.0","@material/density":"15.0.0-canary.271aedc30.0","@material/checkbox":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/focus-ring":"15.0.0-canary.271aedc30.0","@material/typography":"15.0.0-canary.271aedc30.0","@material/touch-target":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.271aedc30.0_1663774633149_0.4770282352627331","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/chips","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8d6b4ea5e7e6cf25ffdba11228f2902b5afb4cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d3344c16f.0.tgz","fileCount":163,"integrity":"sha512-VUrLgyZ7CoWwhV2a1rJzUEf3iGE6ndb/s0ASLaCfXQTXdiru6uMGIm2JpvR32y0TPjb0rwuTWPIHxpCZ5kFSKg==","signatures":[{"sig":"MEUCIAhgamzLWqPQb8Ir5qalCq8PSkfGrHTiDXAD+TK/t3XaAiEA2RquKThjn66qqhPrWGFySCEsyj56rmyes9vHYAa3mqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCoSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOoA/8CWcES+TBRu4yL7o9Y1FBYcm8FUYljevU2kDP5pYOtebhrcoX\r\nx7itwcWpuhtqUdklVaF2xswGdIEtfHy+WaH0EQsc6ygPFIC7AenkLl9FoKJq\r\nqlklJ9srsjD4EXxqMgtNs+yneG2gukMBfoFpylmBkwD/jvlXIXMDCU0FJYRD\r\nQzuaJb8dMljI5yEpZifW5FWxsi5p7ArS616q999AVQBNi4hg6AXr7stPRqJb\r\nnxFWsT1pFQZC1BY6JWF7RPZytd2zuf3DLJ5zhpffnr0Gev8ayshZMJVM8OWA\r\nTA+8invnazto5w+XOaDB2+iTHgu3aKqISdTKP9xjKNyiDlWHz+G+kT6jVW0S\r\n8iUsglsqYALUQh5srnFBXc9yn6txb09OR/YIjpV4Fgr3AgIRX4HzugtsL++T\r\nqm4f7n0kp3i/AYSNoz2aE6CvNg1rBtmTzaPpebE+tsbd4PxXt+7Fh2fctAnh\r\nMGDJBrxCYytI4JmyFbXsPI6GDx9+210hadO6EKOHLyMMCkjMzB5cO/iZ0cgn\r\nnaaoD4bqSRm3BP4Pq/bOr0MXB0l5/EQ6HdDS15jejL2MXrJKb7DKksCdawBf\r\nBx//Tjwxot0WbBv7W3Tma6Ey/2NjVxWj4u1kxbkqkmbk1sjfS8HNHRXMR7FA\r\ndxa1oXdT05NhXCz4tTMHqIFy9B2mToDUy9w=\r\n=xRGr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/tokens":"15.0.0-canary.d3344c16f.0","@material/density":"15.0.0-canary.d3344c16f.0","@material/checkbox":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/focus-ring":"15.0.0-canary.d3344c16f.0","@material/typography":"15.0.0-canary.d3344c16f.0","@material/touch-target":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d3344c16f.0_1663838738266_0.720417757055249","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/chips","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"883efa71cacbe7d2d3870771f6c879a9fa018f92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.94f20ccb8.0.tgz","fileCount":163,"integrity":"sha512-3nGP9jEJFhxEAGrk1C0izF8tW3r4N+/e9e9caxunx7gSKf7AS6gthjee98d9JKqtMWVn+Mw7rIqYA4p5EmJ3Vg==","signatures":[{"sig":"MEQCIDQzzmZyoiCUUWYw42RjIHyecLQqT2ZjYd34yAr6T6ytAiBfUfyziK+v8QYQxQ/u5OWBA4BpYoRAYwAg1wnIN25lCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMpFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJQw/+OgBiWuqr+ZH2F15hk6uMWC0BLo9XucxmdwB+Y0zVn7fAVksL\r\nmsjS5QhkxUedLOHalTuPQ9wblW5TC4BvN7ChcqgXWCJlFVNDvbLQt8fMftU8\r\nePufMZkjqMu5agYbjfNvzCagGC/O/4/QXuThglNCme9TSS/3gVFjAzjeiEKl\r\nMvsBKuA1V2VvTQGqNJIXIwsRswILJSFBLbPWJgEM6qSaKZx447zbRv/uIcdb\r\nYdhWIA0mwVAy34oL+NvD2qUeJVHOW+caJi9wtRy8+7/dbV/kaGK0OrFVBXpU\r\nRWTGevMfbKtUI6yrCRIPKUujyBk/Ed3xh9gzlgDRH4V6pTs7hfID9X99eNyJ\r\nGv1cTdeR/Em77qiRC0k+OvlP418FJpy5QyJa/lHTbW1Hj0nudQ1JJarp0Id7\r\nzn0Rq3A+V8hjgGyovwOL+K1cSdZ37ZmegzS4bRp6H33FQXflzuBY2eiPGYed\r\nY7/xC3eRBnOQMcxhSJ271JuI4oDiOyAi23yZsdU+seL3Qqco0PiKLS7BXYXh\r\neJ4op8O1/8gITnfMkfECKlJlvfA//vBVHaOtZ0UVUYL6Zctp7W0YX4v3C+nf\r\n3TI8pD/5HTZQwg3iHV5/lW2hR4vbwjwyJHGepUO6tDb+9mHG4mb0Tvh4HZam\r\nYNFXKglYvZKTlPq90Dbby8UTd8zp5MwN0OE=\r\n=dldw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/tokens":"15.0.0-canary.94f20ccb8.0","@material/density":"15.0.0-canary.94f20ccb8.0","@material/checkbox":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/focus-ring":"15.0.0-canary.94f20ccb8.0","@material/typography":"15.0.0-canary.94f20ccb8.0","@material/touch-target":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.94f20ccb8.0_1663879749017_0.9197650077828265","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/chips","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47e65f2e78db950b40dd5478a088782ed08da278","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":163,"integrity":"sha512-t2r8W+UH1+A7eZ7P5Ua08y6EdvJQIDilxRulmEcG8hRZncnO8oWY+3vJyLfynpSSDTVKtX2bzJPnAkBpyVRp/g==","signatures":[{"sig":"MEUCIQDU44a0+STQaBbL0UA0YKDsTW+9kONL0E3B/OctXyTTbQIgJgX3oDbMuGCuBRHBsG7ZuRQKUMx1ge1QwbqXhC3CDsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcwjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeDg//SG7L/OQ+GryPhx/ksdGO+8KkHP+WOAKlkmVdK3/fFzl3S4vh\r\ntL/KuEPr3rlAMxGYVEAglvK9/vwQJADxPzoKCSEk4jXpHULtCOsAA36f6EP5\r\nw0OGF6Pn5ufqzOahNfeL0L4zTmgM+L/yIKmBQXzCJEWvb3Tay1jKtnf2KGN8\r\nijqVJAjrPcPO6dIUnK66VrqcadzZsjK5yrhAZmT3/QPnmG50BRgLlGH7N7Jo\r\n4ffm1NwbvIZvYDtwCpstMy7uzxiJu1tfUGRH5LJF/DGDvkPDNkBFRLT85g42\r\ncRhlPq520DrY5frXdoAiqIv0/XHyDeSTU5rIlUhpVSk0yor+VC3wci5xIK0b\r\nhgQAHpDkQhjC/jpqCPJI12VwS833bx6osYutJd3JdYXFI8FfstyIe7+BeHr1\r\ndf0y12LGHKEvC829P3XZzPVTfnJDQRyUP8SVAtKifdEASURCLhen7iE274+M\r\ndy8Kb8d1FcUMEEeWuUed0TkKecomw2ZB5UDaBvo71Vc+73VP6JnP1Syiqu/w\r\n8WTGFKw1j6pIUV/+K9s2BmGeJZCizK3kr/hJapbvsgkKNcGVwx0dUVbGkGPB\r\nwnz4MOq2eSgTstwIiGj715oXKUZPiyeOX/iIoWGuYwYGAE1ckMWNkYGVHrFZ\r\n+7UtJfqdoF9wn5KglWs8d9J4hpvwLsL+YGg=\r\n=bkvy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/tokens":"15.0.0-canary.81e4cb7b2.0","@material/density":"15.0.0-canary.81e4cb7b2.0","@material/checkbox":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/focus-ring":"15.0.0-canary.81e4cb7b2.0","@material/typography":"15.0.0-canary.81e4cb7b2.0","@material/touch-target":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.81e4cb7b2.0_1663945762850_0.5189825173092217","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/chips","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdded1b95b0c89cb2852ec8e10b798f258ec07b9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.aa85f9413.0.tgz","fileCount":163,"integrity":"sha512-BKU5OGsFz3yPwkRTfe/Po5axyV/RtX2bRJzqHuDhePEkyaLkCXWp9JQnIUI+4rsSXvrMcBv3PchOsRnCIgXUqw==","signatures":[{"sig":"MEUCIH6x0i9jhIoGl5OJ25Y+GZP9wUJprRiyXEODbALDnDqwAiEA/tKWE0etiGqrkfx+1MzZ9P9apUs/TKjGnHdXPraeDGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMegOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEVxAAnIncKO3esSxewLQMe++znAYFlzRbgtVBvGtn1BQBAwsbRFA2\r\n2E4Efb1En/gvRRcT+2OERRWWA+1wTgD9Ol9vrR+eu0g6egDW7qpfoPmcaSD5\r\nCsJ5NxWKmVWfbvAgDKNqFtsRLc7or34A7xhIJbPYIUeClfzfbFUraCSfgKAt\r\nGRexYDJ46iuFGYr4htx4KYMj0i826b5l+JOGJEhLNPW3Eo0nk5ZE02ynCuqs\r\nXEaQktisgQfxB8JzFTXYMDpUf9+aQcV0rSNUTdjOC4Ka0ocZzLYkRepQJPNH\r\neEPgN4jAnHgGKjNb9WEAQsRylQzFLdWbNaoHBZdx3Ry59QpgubMpSBl1GvWX\r\n4sz06Om8yOKNly1T5t9FO3E1+eA7daOSN3Gyg9fGinkJSORZMC7TUPMYwCE0\r\nqeG/yBVQF5yyV1YKyE5Ie98UzzS9amuUsAapCpDG31ZhgombuIfoK9/iNRxc\r\ncYKokA58iAbk5BTMcBQ0xvDRLjW/IuWcxvv3g8EWN8OiT30wrFxJXTrqfyO6\r\nUZS32H6+1PUyPVMnqi9eahqlL3meUqYsyIyJ7/BovWXSWxD3VDY1oJJZXk3r\r\nMJiPqwKZlC2rLlE6mhOpUB0SgNhUUGe2w9lbtuINc6jWAOwgu/vnFKE03BaB\r\n6oC5y9RN3k0DZcXf5g67R5D7a4fT87XU3hM=\r\n=kXzA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/tokens":"15.0.0-canary.aa85f9413.0","@material/density":"15.0.0-canary.aa85f9413.0","@material/checkbox":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/focus-ring":"15.0.0-canary.aa85f9413.0","@material/typography":"15.0.0-canary.aa85f9413.0","@material/touch-target":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.aa85f9413.0_1664215054485_0.2294537950890576","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/chips","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7134a7752.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e412b0c2fab82a17b6d39a96f8f141075b92a29","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7134a7752.0.tgz","fileCount":163,"integrity":"sha512-jW1wPdTGqaJcEx1Y38tipuOQfEsjNJwe4zUcCkGSWVlQmCPgT1W8EKwUzSTBF6WsoJsYTE8dBZyaxSq5EYxteA==","signatures":[{"sig":"MEUCIQDLAjnsx7F7M0LRaI0kL2UpXUg9HL85qyeo/t2GwR6IcwIgT6GOGFrvoxC+uK91lVJ/oiHSiKSdXdvrNQ9mHxZVZ+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiCXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCMw/+MIEsdlYH5NMmNrCpzdIRvaqArOPuyeaXf7ecWt6QeCVu4C+F\r\nQyS2ELmQjGaVHNcmJlxkK9UfbB34y/IISeXfKqDUFAfNexbmWwbioie1gX8c\r\n8B0s0k7TvK5ZH+t6Ao56wDvxPbJHQ3+cusxwkNkNt+zRxGmI0SvCVaFWEN+5\r\nL49+Vwp96APMmUNLgOfSWrq4yblOWMXRvELtIDQYSTD3+vWV6zWF+b+yeAOS\r\nY4z5Iq3kbcEE2m5HfiF/Gr91bZ6SKedGKzt+ruHcVpLTYdRQqnNzZZBCgojM\r\nLnxXbo3J6rZDlL4XjeIVRvqHElXdznuOqukiFvcHDuUcqDdOBknK7Y5h+Oq4\r\ngPIeT4UfIIY9AwqjD0zM400/xTqGnjb1UHnEp793ilLt3czTQhPCVfvbP+U+\r\nE1eXDZDu0NTd4Fv69jTcT1eAABwJsdV8r5AJb2KOurh/dt8ZW1FWyLXHeI0d\r\nHUdJUY1ip1FybG+EcnuEe92WBo4+ZT/h8yIdEKaIlJ1VWksFGU0oH5N1u+Qx\r\naSjL2njndVcnrqZ3pB0eWgcCuZMvPQlOKusp6JRsFetCMHhdwj3lBm/GF/sb\r\nLjrNVp+3inFFvSnPuUP5QGSApCFMC90r038DxW5oOwG3Z18fvN+FfzcAuuns\r\nkbFMwC2PzYaMOKuoJkIE2nptahFmWoyJY/s=\r\n=mPx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/tokens":"15.0.0-canary.7134a7752.0","@material/density":"15.0.0-canary.7134a7752.0","@material/checkbox":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/focus-ring":"15.0.0-canary.7134a7752.0","@material/typography":"15.0.0-canary.7134a7752.0","@material/touch-target":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7134a7752.0_1664229527162_0.4043629319694366","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/chips","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cae709739eeaca67bc8c022f34f073e4ce527b7e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.70b8ac16e.0.tgz","fileCount":163,"integrity":"sha512-7hw4fKDp8uh9UDtS1okGRzgnnEb9Zz3n/81boKaYlRfWxa5Bbovg5K+dwC3/nvj+vDEc3DSEy16Yp8W1HQQ5Ww==","signatures":[{"sig":"MEUCIQDEfekac6Ost+suJr7WeTxAaxkGxgQN5M/ziPfAej8ZLQIgaHD3r76YJNpocsP2s/woWYJvzJjDaqLJ4Hjx6LdFd24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroHw//dGdQPCEfCC2b5VIMaHJ3DTbS/qkMKJI/b8B9g8N3eyyWajgB\r\noWHxZ5CJ5mAGMGrncak13K86rjr//2hZ4vxC485iOwRLR/plYeJhi7McbPxZ\r\nf5rqDPDPrrBD8Nf8NisoyAL6JpPyVDDB/RNvBATt2iMhgNgurg3aDYBn5RUd\r\n8FjtWJpMvtzhWbucsrDtF/9eqpz2ftSY+1vkquXgktGA5Oy/bvaNN6+lvFks\r\nza4nJxOkU0zdzRR2oLfjL4ljI/EdbU3/750Fxda6xq23nm7UqtrhqtmhwlFW\r\n5tKsGZEKBwyKruTSfzAAZbpCAnxnKOJABD/K4+prtz7Zp1GtnP++4Opy7uXD\r\njQjBi5p8MclejPs6MM0nFloY8IZT9xmVGwuqokGq8LQ/x+fK/2v7mNyRntkF\r\nUq2fvM5VXPr9+5mwXM4PrlJr4ofTWG8CumvK0fVWm+/LIyK0TXTnhCtD3W1n\r\nNGl1QvcqtGhTaQ15WsViMa7hLPl8L6hOLlhOs4ejpqC1InXZE5OQe6f3E5HF\r\nORYzdXHm7YM9RSyzAUJ74nM0OvN8ZCTX2Fmfb+d4OjnB7OalQum4eyjWsE1C\r\n8OBjtey93a0JijaH0nQBAD94mZFSJY+2w+6l/8yFjOALfr6tZPofwMuYVVIT\r\nRVeR857rmis2HY1DEFicg5B5DeFElCa1WzQ=\r\n=wkH5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/tokens":"15.0.0-canary.70b8ac16e.0","@material/density":"15.0.0-canary.70b8ac16e.0","@material/checkbox":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/focus-ring":"15.0.0-canary.70b8ac16e.0","@material/typography":"15.0.0-canary.70b8ac16e.0","@material/touch-target":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.70b8ac16e.0_1664318759631_0.8543594547833784","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/chips","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c20d74405.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8873a8db75c4273dc1b38439fdbe4649c5b721e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c20d74405.0.tgz","fileCount":163,"integrity":"sha512-OSJJ8bTp9A4Qa7QPFT9t79aQkG7v2DJYteO2ofKpWvQ8MUIb/nemjT7iCJPXkTgCIKIF5OJ5nr4947HlPwFYkA==","signatures":[{"sig":"MEQCIDGzLt2nSKZOPAI6vg9aPYSN/i4KHbXrqAS/R8K+UZQ6AiBNVMzxZHLGzRQoS50B5+sWplgYJuCKbO9tcUAJQR9j1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4gEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7xw//ebPbfn3IUJIaa9guY7Fmf3wPX/7pGyyi3Aa3QFpBaUxyP261\r\n/pRFMi/wuh7uXiV7OeiTbwkZUv2IgLtFwA4zi0B53DOVAuwgMa2nqy/daNIx\r\nh8A9oYZBqH3DAbztk2rhxNPwcv+N5jOdHpozKD6oefHvWr67ly3bAw1xY2qi\r\nRJvFYoG7VW7xw6TDmBcsPZGhZF+vwUYZJYnBQ9OEzaKXZAKI1P8RDRs3rvYg\r\ngf+JB1IwHKCksFfo71o7MA8l7VDvUw6IKvDyuBQMu153sK3tWBb35TV6dKdO\r\nxLNdySPuS1CJpKTOwIDuOe2fjBl7kg8OIV6/BrQnPlCFqn381Eai9/TCKnp+\r\n2hgfz+0gG4sUD6c9nvnWcR92DjI1jecNTq58HC7FcqzplWwN1Q9EtlicIzbI\r\ny0v0UWjzKHXvMJWZsN+ccWWwRJwJF7y05XQs7WYb4pVlsHTknMt/Sp7+3lPq\r\nCnwWm4tgHSmvW1fqJ7pjrEqoGPrSxkX99DDZwFzU+PrLx7vdgPrF9kqzLEd6\r\nxnCp1UFPU0kHCGfBwBSwK++5dUrMujfsae53plTEVEmGC9ZG2kUcBUWjnpPp\r\nrd69dKXYVtUmjjh2/1EwVjyVqJcKTXOHhvKIFS8KGn3Rz8lUkebD73vTtp3Y\r\nkCX97sYAAT6dnMsjNtVTTlcnEYFbZYM8Plg=\r\n=i9IV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/tokens":"15.0.0-canary.c20d74405.0","@material/density":"15.0.0-canary.c20d74405.0","@material/checkbox":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/focus-ring":"15.0.0-canary.c20d74405.0","@material/typography":"15.0.0-canary.c20d74405.0","@material/touch-target":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c20d74405.0_1664321540043_0.533259623874454","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/chips","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed60345fa8f71d51ea508572c3db5c53ddc7b926","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f033fc8d1.0.tgz","fileCount":163,"integrity":"sha512-IGiLpdo3LmuIo04SzQAXldtcBCfyk+rNZuCa8pKMkvsC99UIvdcRg1s4qdECXQ3Fm4CaM63pdiRxe/E/ukd7Hg==","signatures":[{"sig":"MEUCIFAMLve1qxqxmfqAaImqnMzFmt9oRwnFSBWCiySL/0sPAiEAzz610sxDqUR23QTpaImfArI3hi5XMMDv3pENGYbEe18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM44lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNsg/9GGiebakGwG798O+2vnsTN+0HQuvAHiJEbp+YjDoNMgnWWcJv\r\nlSVMQ7dCBF0cXrT2CWG0DGFfwMHmDTEHQsmPEvZ/Q9COWHiFjHVtW0JwFSBm\r\n8j1PvTELuMN1UuFCFW0vOfvKyEjdRaY5RaQj2PP86hn5T+eckIV7NFDPTrLu\r\nAII9ZgddH3yVWg+geh3t3kk4PXX8esQlYPYl21Nz6tg4cNac+KItSki2l9Uf\r\n9EShhE+61MzbFVkIE+57Opd2LFA02V3kJ9FFY3Qass4C36Jvv8MEbI86Ubo+\r\nhfN7BLhxrflXhCXbH9fcHhcmk1bI4z4t1vqBNjRng4jZwkHpCy858ujbA+Yp\r\nl98ckuxMVdmZX2L5NZDc9st3JgYYsyCJsj+LBLo4AeLD+mz4N9Tt8gbk54Gt\r\n67gY0XmbpTh4c+h6v7bb2yKIGn5VhCYqBZMNCtQBSGfJzT9JsfaZx0YQEry7\r\nkRgwv6BpTvgY+D7ZQd4jX2o4I6yKn2W1Gq/B+y2Pase/AYe8JDkYq9dMLz16\r\nfLUmj4o/JSYQcbsxR/KieM11DprjkiyEkuwk5WNXM5YOSlSRo2/B0w1809Km\r\npx7r4g0Z52TKQ0mxk70dBdOwN4qcNppDoNSGOLIYuhYR0PWiRd36z1c9O8aw\r\nIBEEaueoyXydnink/77VgRnNa0q976xSnYA=\r\n=ERwK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/tokens":"15.0.0-canary.f033fc8d1.0","@material/density":"15.0.0-canary.f033fc8d1.0","@material/checkbox":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/focus-ring":"15.0.0-canary.f033fc8d1.0","@material/typography":"15.0.0-canary.f033fc8d1.0","@material/touch-target":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f033fc8d1.0_1664323109213_0.07485697273783742","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/chips","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d042b3d8f5cf5d4ad3db2c2c0535bae4388aac1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8d7ae912a.0.tgz","fileCount":163,"integrity":"sha512-EoapJhccBPg5MAz8Db1xdDgHwP+Dh8fpy0gUcA5YpR368QugyNUqPAnl5qepz1y8WvczidkPaMuQi79vCBDfsQ==","signatures":[{"sig":"MEYCIQDnG0sB+vM5z/NAX3MYqxsTkJ4zc0RhFGccLUYpSkkXKAIhAPTRrzi5v870OlGdC5holNzt1RzrDWFv6wrZMg4Oc5Jc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Pw//dME25Kpx00FSQxTsLY27CBcB1xmQwOihUpSLhbXsBLbDckH5\r\nLHG4pC9sImpZOYnPl0zmPa5UiHI6TsYpIPW35uSDLs1ZpTkL02msz+FvRbZR\r\nHTbS5RMMpFcyyQzc4Md3ZVl8y1OVCuTsmwp7+Q5glw7JcqHZIbZA9Xwn/SJf\r\nc2PZTmp0Z1wO+BwbH3PZyeP36g3CO9DUZz+WUEWDNHyiI1bNWqILDCKvWxH9\r\ndREtnbDARU1wBeFzT8q09D3BVB6Bfb6G8exKJ+HQOenKxPjS1v6Wv3efGxZe\r\nX9V2MFbfy3HNMgQwxzAYGwrCYfwCymVMiFxiKtYyq5yyxe3RfFPxXL5IVGfG\r\nFlKzE3+DXE7jvayllEMGVEEzWSElmb6FtSjL53wVsgAX9OuEaoGP27jyp6or\r\nCpAef/4KWCFx4NSAH0SwtcmgBk4QOKLV4MoZeD7ASwX1gcpO4SJyiR92zzxw\r\nD5eN5mLpr9FWikdezhqLk+d2LGh2gDrRqBPDGqr3XLje0I639lNFp8V/MYZ6\r\nH3jXy+NAXKSF/nYha5gMw6A6Sm15++jyLIfDhjhCiL4soVqwU3U2X2FNn1Wx\r\nAsetZfYxvU9bX76tTsr1oY0TtBL3W2tJ8+VjR/GroqtnzJVanKY4IBjzb9r6\r\nUgm5M8FygWhI2n3ZpefjTZPwLgaJwv7dsxM=\r\n=XXmh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/tokens":"15.0.0-canary.8d7ae912a.0","@material/density":"15.0.0-canary.8d7ae912a.0","@material/checkbox":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/focus-ring":"15.0.0-canary.8d7ae912a.0","@material/typography":"15.0.0-canary.8d7ae912a.0","@material/touch-target":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8d7ae912a.0_1664351832061_0.8663162975144252","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/chips","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.db414b864.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5182c626a1b498e0a9d89f10089e7030b9b194ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.db414b864.0.tgz","fileCount":163,"integrity":"sha512-e0Ydc+P7BHzJWn1XMEm9LIJfsYdDztE6Cdo9sGNqioSyTuAfb6/sOjrpTpsRo5NpA5tZRW3k/JS45wBn+TEU5A==","signatures":[{"sig":"MEYCIQD0Tt+DsP3aP57bJR/3sJFWLT6hTg9fP0VP9hEFXs+DRQIhAIjdXIl41B/fJOFvM3G47WVnAaRJowgMRD7ikIRY2pXO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKxhAAhR+W8HKXhMvq4oXLLuS1On8a3Vca0bjVBMdy7+RMAHE8Gfln\r\n4PQi5sn9fw2JWZzqPdZnt/CmkqnIIn7nhNtj4EhCNCFpw/Gp9sGZJ9robScA\r\nXML9VitD8oa80GxoZjJ0Xa0r908jyo9gWFLY+IL47GINuG7wiXY+Xpo7CqZ6\r\nomgIouEg3P4sMybuFeopTJhKyV0EGaFZnjxfPKOyCZjOzqyXmHfk5pk3rGNP\r\n5X4yQzE3zUoQYwq7MGDlw+TG1wWfxc61JK5nh/51KLV06NtwvcwEqupizYdF\r\nsbfDLJbjhlWaS1MNYdZyKDy37rArsL/ANoxKh8xHILNy8Wh/MrjtCTyK4EEi\r\nRtC5ib3OoqVrvbLAdNPMpLNvMXKWh3FRSzRG3e9f4RWiU/2RdTMc+xDI7Y2m\r\ngwGeERq9JxcdzJJBknbU8eSyZgpIWH05EUWxHFwO6NULWTdkX1tRdOwNq1ie\r\nEaz9gutt05892OuzHvLC1nEXL1E6X22yqea/45cmkQhCd8QPJg2XKxQ8tb9l\r\nggFd2/NQV4PWCbWYGVQlL3P1udJJGP5hWG2/RyezXjDueI2OIKBvIXdIO0Ml\r\nM60BIejWhFJU3kG6yxdCMnY/N5ikYoQWDsACrTxlxjuzRojDpJ0GPd8QEdoJ\r\n9QPlBkcfnq5ig4UmEXhZK6zNj8qfwhGhsL4=\r\n=UlMs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/tokens":"15.0.0-canary.db414b864.0","@material/density":"15.0.0-canary.db414b864.0","@material/checkbox":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/focus-ring":"15.0.0-canary.db414b864.0","@material/typography":"15.0.0-canary.db414b864.0","@material/touch-target":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.db414b864.0_1664376830728_0.597410608561185","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/chips","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"113c406094c9a097a290c6758d33d1a25a3a79dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.28cc6791f.0.tgz","fileCount":163,"integrity":"sha512-gYPgrNsa/gtwA2y/oXU9oDpQ8ZVK6Dr4/a7v8tu8h7tuGQ6PnnATwZWDj/JenMLe13HR8wwESLQg9QIHoD0uoQ==","signatures":[{"sig":"MEQCIGY5Zo91chwuvaTzF7oDMku2fay5rzGQTzX7K70/KAHIAiBQ5YvfNPRIsQ0nKhsF3KQNBXwHOJWMENgEDaM8Nz1Wow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI2QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFlA/+JsZt2rO77tjVxWb+k1C9FRScHTQbHWzJgudfCGxKqGuEX7cs\r\n0WQ2h7+45q9w7Ibr5CMy2A0R62QFjVD+jamaotYZOKhMH5Nd3Hm2reS2Fr0t\r\nfWg9aHHVP48yLAJt7wnQqewrgERbmFahpF8xdW9kGtwuCNU6+Zz1SpNBUE+H\r\nueC84dSgrVi7GYJrmfIgHk6GSGHEkjnsY7TvFVfmAkFMhlArkmQGOeaTDY3y\r\nCFhxDMFL/8JC9e8eyEOJ1GQgMx6bbTb5t3k43YgSg3cjML9BOMqqHvfO13D2\r\nFWXOXbUZQZM/NQM0secxWRDf7CJHCKxS7XObNteB2S3WsnpO4tDbXJwIRsfs\r\ncfbtzW2MInEMU558ab+SqlIFKywwn3mcu4qb54GJxF+QqaxIh+ol4DQjZRpt\r\nyhiugLNQk0OyEQQlY1Dd6lTCT7Mco6E764NKqO4P37oZoxfRfIdM1e+ET6k6\r\n/ui4E4jvCyghIGCEm7R2LHyp5mzhUi8fQnCBdBSX/eGrWDPXhyRPuu0i5fvW\r\nbmhC1GHigMG8hbnVs9Zd5jIVy9TDTc72ZsDTbYVwjpkQDUVDXz0U3v+cHLno\r\nAQbC1I8fmMDoKLXI/2wwO6W0gfNrUIIqNQ8jh/dxxY8j7lKOtnhxHPezlxOl\r\nprysmQZ+Gyms6k+NnkBizOD9VSSKIWWwNOU=\r\n=USes\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/tokens":"15.0.0-canary.28cc6791f.0","@material/density":"15.0.0-canary.28cc6791f.0","@material/checkbox":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/focus-ring":"15.0.0-canary.28cc6791f.0","@material/typography":"15.0.0-canary.28cc6791f.0","@material/touch-target":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.28cc6791f.0_1664388495621_0.41234831479028444","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/chips","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7acfe0b6fa24a2661e9b30feabcc417c493a85e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a515a2d18.0.tgz","fileCount":163,"integrity":"sha512-d2Tta2lrfriosUp1F74MKr7G4vTprcHiwwQ+pinujHwHPRLgTHICXNpwRPmAOxvJ1a+Z2iEAi8pqgYAXrRNw5Q==","signatures":[{"sig":"MEUCIQDK274M0DlSC3Ga690Rsy2Qa8zQI/z3/B3NND4gESg1NAIgPp8DciJtxsCtml1vR0jcHMRaOT1845wrtpGou3qGgNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJj4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowwxAAowRxobbwjm4GYWmwp9U01dmV7a4sfR761CXdMd2kKrmDSION\r\nbVRrbC4wzHAXMuuDxHGbsdk2dd9w8fu9h250AQ6sMiN7wddNQTO4xYNx4a31\r\nFxJkPP/PqPYLnTkm3Qa0JwKVbkSu8SxUCbz/+cRyJkdbUGnXILetvn0fSMiQ\r\nhn36xvpK7kmv0w4iaLe2EKuaBSHi4+9A244XfMS88X7hxCeLUH5o2zC2uEou\r\nIbLypS3UoFDHWEXZmKtcAVGXgCcigqXYkvBoALOC7Ez4om431h2pnmkR4Gib\r\nmMcYUB5HGxq+MfyAZL2laAqW5PxNKjYOSidfP81Flvsx6joC05JxNt+qTFl2\r\nijwvnJ/SCEQG9HylExynGWfNZB1h1YWlYYisksRVKMgoMGVz7+Z81D0NukWu\r\n1ePMyTPl/kZ9BNF8HPYrTzQIcLtnynUURzaOHHaX/F141ofI9ZavKTax671V\r\nPoU+Y7wYGPlFq3u8K8arQnX2Gwwhb9QFJnD4voimony0jUXHVPqjQkJpmMKb\r\nqSI8v83TJSz4WkhGpboSdKpCS+CyKjR/CFmbhe8t8dIVTKLuMxQoS7aMbtu9\r\nwXDssHvdVwwhEzSQIAwv3MtRFxQurlKTQO/hgTDfDTeNXGT59uk96XAqRpJL\r\ng4A+v5PZvn6mVB3zICbdoOkLJS7jr9YT0MU=\r\n=LB2r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/tokens":"15.0.0-canary.a515a2d18.0","@material/density":"15.0.0-canary.a515a2d18.0","@material/checkbox":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/focus-ring":"15.0.0-canary.a515a2d18.0","@material/typography":"15.0.0-canary.a515a2d18.0","@material/touch-target":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a515a2d18.0_1664391416045_0.0952693889432521","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/chips","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ce9523167.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c53f389f41429a440ac1ba844715ff020fd7ea1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ce9523167.0.tgz","fileCount":163,"integrity":"sha512-oLsKtb7ukSg+Xy9Ru/3E6UuGybimMLmVoKptpu/HxaXeADhS/Hyro6Ls+ujLKcmCNjkqhvZagxxae+zsngyUWQ==","signatures":[{"sig":"MEUCIQD5vZyotIQA4c4hf57COpUSETFLaQmJuj+IBpjGt29LFAIgQsT4fSlLAwUrkFjRbhOCB3R95TLQu1rJQIRuJRB2eQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgDUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4IA/8D8/8yb9iu7hbHuZs0wSSY9nVTZC9CrT8MJDTFaYy9q4zcZ4w\r\nhYBvUR43L/56BglhvebalPsOVgpFgMrhJEp18kbXQNltIjL/dbA1obXCVYlr\r\nVPZ/U9g67Q18tfZxVg28ozm7ReMZhjtNsf09evw/bEmvYZ2Ra3xNmge7mKPe\r\nTs/rb7H4h01perpmT9VnTyFnMj4QHOnHG+GeWLXrGbSXKHudig0VFWWkNziY\r\nmuQG1B6ITIG1Fnwjv0HxJJk6OmZ9PuJSUW536MDTNJH6EcolZp/EeTjTKuDH\r\nEP7bngVwNV+H5Q6npMoMfRdNYb3YlFuNsrT5Wq7u7QgvsUKjaHZ7a5h3GT2j\r\nLF2zV7Py/TKaPymdQ1fxy7I+u6ocu09m9v0p4MGV7hGs6k+IFo1fqCwXadrD\r\nKASyp0nWlDMGjM67HsuwNvJks3WEbZDN16mnPC5E9wYp1GJNO637rTe9hiDG\r\n0KzxfsaCI7tlmO6ApHLa1S6EhlF2D+jc31lO87cyv+X8qaY7S3fFJ/eEw/3/\r\n/sloa4L6OYcyQQn6MVQ4odQFshz5PhMDBYOmUm4e4gA2DjJpc+QqpKaGS2c2\r\ngIXAHn3/Qlo/Zxd7cZk6SGvJlW8YhGfCw7WPfZGuxQwMyTjHKz4YI9YxtFC0\r\nh0sJzpyoGw4YesKhGZpPPqAYI7XoiTsJ4ak=\r\n=v3mg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/tokens":"15.0.0-canary.ce9523167.0","@material/density":"15.0.0-canary.ce9523167.0","@material/checkbox":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/focus-ring":"15.0.0-canary.ce9523167.0","@material/typography":"15.0.0-canary.ce9523167.0","@material/touch-target":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ce9523167.0_1664483540505_0.18736561771476135","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/chips","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1a2d2acae7284368f544f2420f3daf530336138","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b2310f7dc.0.tgz","fileCount":163,"integrity":"sha512-VIlGUOac84bhAXzxjjEeGXoy0IH/2sxo0bksLbbrk4oAMlzVOnnNmdG0mQGuyIfzYZJ5HdqUINil6k6upjCQMw==","signatures":[{"sig":"MEQCIECVizzw1fXkVPUDOcBkQB2ykfn1hjWLxUpeWkw14pnlAiB5uvu85Un0JsQ9TKhLrw0MlFi18/PBw9+6tLEHUIhfQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1607441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjT+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6oQ//RGjG4sdsMWrYYvkjUXwMdJlmFngln5Op4Lyx7T9zP738akbo\r\n+MyykmGicQlIy+cVEyiHzlr/GTi0bjVvXS33OnDdWrU7T36quKuaLpon2y1C\r\ne5PgLWL7d6QMJGhYNL7h3BuUGe+zSQQ74A6rnBHR7eEnqDketsN8CTdBnFaR\r\n8JjX7UMZBVgov+m+5lvKbL+yMODTidi8uKs9/wM6CZczBaYFWVyyRAaFSvtt\r\nKa1Awdzh9j1+2KzhgxoC6hGR/3yOBtDdI6LOm45PsPX56EfgDFqKrDATNFjJ\r\n0tzlSp3aDYpDu/DdSeZI4JZsf6KSfg/yrPuElxxHFI6Z5sf2S8/ASt3qvx10\r\nie0wUitHC5qe9HL7MGcWU3d6U9nvaT+5fRtkyzDKMMd0ejXaMnzxTdfiTKDU\r\ndZ+dKzh1Gje3WZeN1XPIhx7y+BCvYLYjqGr3fh04V4jzlwsbsjPXXp1yVFOP\r\nUZ7VhzWXxB2neGo4DUtImA8bTMPdwjzJ5SFL8T3Qq4CfRbcrtpJ0FLfXRCnO\r\nALEqXIxDSJwGsBp1foAnlSpM9MJZOqAO+YgJYe2Hj3PVoJtkDd50J+l4bTIl\r\nxl5DSc9rTzjul2Vp4J695VmMf20R9NU1qEf+VjdaQ9m1M0tQOq6938ZbupgQ\r\n9XBCX/fdeEkaePo2WW62VlC8iMFgRHLlE2s=\r\n=wBQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/tokens":"15.0.0-canary.b2310f7dc.0","@material/density":"15.0.0-canary.b2310f7dc.0","@material/checkbox":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/focus-ring":"15.0.0-canary.b2310f7dc.0","@material/typography":"15.0.0-canary.b2310f7dc.0","@material/touch-target":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b2310f7dc.0_1664496894255_0.5023916697637993","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/chips","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a44241e54.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e253aa3672e402b9fea2485a0981db58546ceda","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a44241e54.0.tgz","fileCount":163,"integrity":"sha512-nAFbWwEM1/Fsu0Xt1X9C6AI3rhuRCkxQ0TqLwYdwLqq1TAYhPP7hd85JZYGdidRYmbRqJJ0814P/TTTdi9WvyQ==","signatures":[{"sig":"MEQCID+rCvXyKNXHEuj7GPTxpsSc/VFKr3cpsc9Th1tsLtf0AiBNrR9gphyWWgvYoU8uHve6U9BTRQo4N9Lsaeek7a3IiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1944897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYzQ//bi/nMJdyEARRGJVhZ0IQbspiztdp6CbLn20sTbRaRcsStX4L\r\nyhxb+9aiJEX0s/+7JzYUtPYTHUmdeWMyUw6MFJYvXOLBTp1NeE0vw6sUh0nb\r\nKbD5dzzwSYm01Xmr189i0XOaeZ4M1LAOiGnZJHFoniBBMoMqNR+3aeWP6zwC\r\nk4C29fRsQAQFjgLn+mZzpn/S2c+TsxCz5lnQn7h3IgxHXontwHlGsdBBQuuy\r\ny1eKQlydwLW/DKd1f7KMZvrvswxnbAS5HvQvVfMPW01ZbZQUSXYlyw9NEguP\r\n1d1+RA82PiiyXSyf6OcX31A99nn5PeWUKNJUa3x4k2JUFWbNAb+hWRYpmSGV\r\ndykW/7/vz2prPNu8xgwqkXpOY4W1FP/Mj5G+4cjDSs29jfCb9HT7K2lur9sd\r\nkoyawy7gHFhfH2/sn2+26VV0HomnMqbUBR0fBI9iqgXxkhd2uaI9RaRYkE19\r\nbhfCu5sVTHDC9N4tP95Hem6rTgpkoegLCnDCftNP53RocVRlqJxom3VSHxGC\r\nP2GUjeHPymM0vvz2wtgewrNE577DQjQeDKKCfdzeaCZkA0lSyStuyYNljpwc\r\ngeZBmFD4Te0W0V0cybcTmPhg4g/ScXwLOtH/T8eAN29G1FRDrz7einoMcdoe\r\nkW3Zlq7OmM8uyyoLbpn7FCHs6/U7qb9I8r4=\r\n=WPsb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/tokens":"15.0.0-canary.a44241e54.0","@material/density":"15.0.0-canary.a44241e54.0","@material/checkbox":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/focus-ring":"15.0.0-canary.a44241e54.0","@material/typography":"15.0.0-canary.a44241e54.0","@material/touch-target":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a44241e54.0_1664526130581_0.03399288395915501","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/chips","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88fb06772d1d6e5ed3f498b70eed5ac3ad280b32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0ce81e115.0.tgz","fileCount":163,"integrity":"sha512-b9rqDdOSK7p6awNxxHlt05EtZMD05RtgjvRtYfD+JqI9Twbl6geSEWBE51Zz3CROpFKLdIvMc4kaTthNnThecA==","signatures":[{"sig":"MEYCIQDjQb4lIpRwzZ8nqo3GETnwSj04fQj2QKT/tcpVeV2/igIhAPdirfmq9PW+fLn3jU0UdodachGiNqKbq+8k7SzSkr7t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1944897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzMpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTmw//W5A9syfPFAxB936raRfROMAse3oibcoZRqCgPCmsuetEPpxH\r\n7VFb52k2xA5kEqxdy8l7l3tr5nGZvNW/50Yfjy9l1970Vrk883m/UGEz723N\r\nFAJNt/PQJCa1p8IUsTBy8vvkbAUhM0XN+Gx6nChghk8VGlhCGPNkVrThmjmw\r\ncALPI1MscazhH1RtiwxpGD4Y/rlyzWt2x8oJMCBwXrHoOu+mQ+0K2T5bUW+y\r\n1bwlGQOFSENx1FbhXDP2dAKnP2owt6rPmC8yX/JlK3h7FXwpnwkyf2s95mRB\r\n1Sp4M10lr1PNYZX7aICTB+FpUzliVcL6FyRF+xVneUyIewlcO/9FrmtLztGK\r\nuKWAuBSpWgaDpxOU173zo+ykr6mMUm77GRyRhDXEQRXv2wtuDyJwUw41+3Uc\r\ndzWHsUmvR1aC3mMlR0T63YAt3weyil6mTd+LVm7jJ+lQUd8TQ5cXEnRk/KMa\r\nJYV3LKUZkDHQQJ972NBNTtlsszNd+DFGnIngaijMzu2bjohejMjN77VeiQvu\r\nz9YoO/+Q5R9urEuYxjArNKFXqSCFpQRBrkjpMyXSCsvnc/q3c5eSHYJjHzqw\r\neizANmoo0kyurX7T7hhvx64EBqAgvcCw4t3NbwgKc2jpMdrxzorm7ODLUm/X\r\nojZK0Eni9d/v5BYiELNLJlwuN/lb4Zgic7E=\r\n=9Y7U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/tokens":"15.0.0-canary.0ce81e115.0","@material/density":"15.0.0-canary.0ce81e115.0","@material/checkbox":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/focus-ring":"15.0.0-canary.0ce81e115.0","@material/typography":"15.0.0-canary.0ce81e115.0","@material/touch-target":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0ce81e115.0_1664561960714_0.30818814155225627","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/chips","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4861500945710b389cef09c4000d3d560b96cd7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":163,"integrity":"sha512-fAkSJKvtzYe62yT+Vt6BLYXdqf4SfDCbDx/e+/dP3W1VF/DW2+ocr2jo3FGq+JA9lUXHe+RlLX6wCbPWWqB3Vw==","signatures":[{"sig":"MEQCIBaiC8RM7+k3/+09j/3077QToeWXfzT5gs2b4uXpu77wAiAMCm2rFlXzEzQpGNsLhvR5/fE0/bbqtBLlHrmPWAIPDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1944897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGtnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqdgg//dTzFCKPbhcE7vvdYQ93gaQMYu+niMj7MeHnxR94usHPO4H5G\r\nZFPChWGx3kzwPTwHMgsgKESnBUZGNGoToG/wNI5Kuxu6u4ivN/KPjJfEzUdx\r\nYj6zxS75gKB8iKgMKn4LFV2nmtlp/1+0QrHA1D0LqKQffkHjlOC+7jAQi/Ph\r\ngn+UroIru//du2+5iBijgjxtwLiRHn9jSHxyRiX3rnK2mikdM5+r35Tvrzyd\r\nmf/L39sFV8YiNd1XSxwCs/Edchsn0tOUb9+CJNrX95yZIFyOKMGT8m4ggXXo\r\nldVY3J56SZ7mNgo4+FCWcxJJJ8waDJBFpmmgI+xLvy+n/8AkgsfVvfbAmEUk\r\n0eyN6YmRdjx849X/QsDkqMBh2fqkemAGmQbfHzIS3fzCNnIWTrPDy7ylAsbH\r\nV8DFsWUyG0NXGiTzHq1ZPE2ZmcDwOez8HoSGULwmmGQcP14SP1H8jULFs5CV\r\nFCn4EVTzezP5WDQE0MJUcmYrrn72T7dIe6CQv9K+Jiribn1RnWhGjneQiB9f\r\npwmp2nLj3NW8PcGKKMXuikmfSOeUMqW7PuRk0E7cHWK+Ww+Hbei5FPrgU8k3\r\n0vqPZjpofeiJF/erQf0mY1sLYBjRWTOb8ouGSLxs31BKj9YgRJBcCsrcvqF1\r\neussd9EgO+Xkul0sspvUzh+yWfMAZCkKBuA=\r\n=Skji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/tokens":"15.0.0-canary.3cc30f6ad.0","@material/density":"15.0.0-canary.3cc30f6ad.0","@material/checkbox":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/focus-ring":"15.0.0-canary.3cc30f6ad.0","@material/typography":"15.0.0-canary.3cc30f6ad.0","@material/touch-target":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.3cc30f6ad.0_1664904038826_0.9175195905431468","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/chips","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d28c4f55701bb7be4476e619c49ab686105e5ed0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d9cf98e60.0.tgz","fileCount":163,"integrity":"sha512-X+Fs2LWyEOBwwt5CQOhSpwZlMVaGRgIOG7I2i7BzA5oJiKTDWm68ADj/b5+QfJZk/IH/PnYdHf2NPe0odIzNbQ==","signatures":[{"sig":"MEUCIQCVIyA2xOXUb4lbvQlGAgIUt6WTffP9uy0ByoSK///t4AIgdntL2HvkOPb2vCu1gENE5kzt2J411fF5PURzWJlin5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1944897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIPUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUYw/7Bmeu/3aT899FN9gbb5j6b75t9QvdrC7C0AY4dMSX4PIaVjsr\r\nm/CAF2WZh6rxUBMyFtzxaPtx1VUacYXnT+vraqcEHMTnDgAnqxQzz5ZLvXIq\r\nnNoXKOAZ/FuyiXGD8YSimSN0VU8Z4zQR48xJgB/UwFCIN1UUbp0UzffaLXX9\r\n5zu4V/IEZ/XZ/AAUARP3Zso7WdmzyaK8sjBAqWOualWhZTC0IyImn895BSg/\r\n/wQfi0wAOfKfc9ur6gRU3kFz1bGuQdvaYngTcuw6Yrm65eugEwboXIyT597L\r\ngJDLEPB2fEj4sBlWHbmq6Xdc1LlXgYNJBLDMK48AMVv5hVi9ZQATB+4CgI71\r\nMfRMwIpiC1yP4q/c7b1240b2Jp4F3Q00kl9drU3yiP3WnUJqedNphg2mulVX\r\nsVj767ySyGSNpdG6Ods/j0iKsmO4SfqCGafVxyDVsZPtFY+wx15ABk6Dgr34\r\nSasddE4TZ4sEz9ba0nRJJzXbn06/buffQmlaBQSMKuyLHSLZRub56Jly02Y0\r\n88Q0cf5uGGCX07usk/LmBO7EVEpliSTyStr4x8GON5sTa8TuZvhXsB/ZNFFU\r\nZUs8XttjqYxlzWe92TGXS23Na2cf57KPEsd6Fk9+5gBeCAHZp5qz5PsfDMEP\r\ntopHB01hCH7ZUaZ5KxHOgk8qmJHmB2APPu0=\r\n=F7J+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/tokens":"15.0.0-canary.d9cf98e60.0","@material/density":"15.0.0-canary.d9cf98e60.0","@material/checkbox":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/focus-ring":"15.0.0-canary.d9cf98e60.0","@material/typography":"15.0.0-canary.d9cf98e60.0","@material/touch-target":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d9cf98e60.0_1664910292382_0.9059410394733205","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/chips","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b4df34bf275208c5ed904f1f79e691162022562","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d71935c8b.0.tgz","fileCount":163,"integrity":"sha512-/BY+/rjydZt/Sfgg/HNGaTI5+KeXiF6cyX8YKl4mJiBclKDrcbVp49c21ecnhirBxxXOU3U0BwVm4xn50WqlCg==","signatures":[{"sig":"MEUCIQCXuALnmAqLPt/FGFnNUVtSjNu1E/qXIbHhOIg5BiWoPAIgGpNfL6KNyt+/rcc6AI82YPmCkY2v2IdRRUJ+85Qni7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1944897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo7AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpsQ//Q7wSwXQ7BE8HTQ2pkhMzLgIBF5CoF/Yfvxp0t5znD/M7qnRM\r\nNbAjPUUD2TubYDjtFJDCLPCJCrkd9UxKV49KvgZjL5GZUhwJR5MKo3gSioDd\r\npCeinUHlGkTtNC8NsoQ5HdPux1mmRXhYzaF8P3XOpY+bUN5QiXTeTz8obf+3\r\n0eKtozlnu3j+JfWcwwM2atebHQP1ic74tSR8SgXZcvoRquLVVBdqQay9Y9eM\r\nFIO8ALFqboho1xASluJDPN/LjZXzSGHYdSJ+wz7d8eOMbCrdYC1QrX3oRMsr\r\nQ57Yzf/rJPn/cx44fSCwze4BcOgmlNbXgyOcXN7UPA93IFosnQXTlofvjFwo\r\nrUDbM8/0yFY6ZeBN4BdNAhKVT+gUzQdUSwL8Dj4Vh0csRD3xGhuaBm7ZTWOI\r\nuAEq4oAM+LLviTPFn7jOSOzLa9Og3jx48vOsw0FJ/5wbxE2eeFP58hwVcnIq\r\nyNHS8Hy7slvE8WJHnpCh1QqJyDKvGr4xDXRMz1X8hAzyxfHOfOZIyVFEQZp3\r\nLS6SiMFQ49RlMC++eSKDmXFAvNkCX7LQBK/PQ09oDoERRFNL01UfCYgF13Nl\r\n3e22lBeNTlphartQtpXBJEUOlLcgloLWA9OHgsi6ONM0S52nc96gA22x3s7O\r\nvHR09AeEklbU5kGPtIi/S7Ovymcc+5bkjUY=\r\n=vMLc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/tokens":"15.0.0-canary.d71935c8b.0","@material/density":"15.0.0-canary.d71935c8b.0","@material/checkbox":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/focus-ring":"15.0.0-canary.d71935c8b.0","@material/typography":"15.0.0-canary.d71935c8b.0","@material/touch-target":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d71935c8b.0_1665044159600_0.9284447440519399","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/chips","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23648e4fb3af1694af6abf87a9906172e70ff369","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.49c56a25d.0.tgz","fileCount":163,"integrity":"sha512-HisziyaVdQQUHPW5KbdGC7mGuomtB7C/EoZqqeUvDupZv/du7vcAvYEq1/GPxcytBlfQSWOYbd/mW+u87Qei7w==","signatures":[{"sig":"MEUCIQDXe76xUg/w8zhURp1LyS1bDbMkvFGwdzwzVBNrxhYH8wIgNW/+RFtiWRAQQuu2uDXS4qPknDrdPNsMEV0i/NbV1tY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyPQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoc+A/9HctnN6fFhTxyap4dWbpd20AuI1Vs5XE9IL5TTakmzpQtWhte\r\nHQK2YHsL1Mo9iopoJEBFCt7CHj3kOdBeeb8pwLpJI30mOyvAtOBJmvS7dO/G\r\nA1O8gNZQY9jkmdZjIqKj1eUsjZehqqwB+Dg6fH/kFm9m/RErd0yMRGKWBpLI\r\nEB1cG/lU0LlFwWYk+de7JleFfh4Ak0Ym6DpS/CxMs1RfuSwcyiUqWR5tlYcu\r\nI7bVRDAY1jmjd5IDgZshEMhq9QAbZ/OXjqS6lMkqK2NbYnmTeFzu9tJocH4t\r\n6Bt9kYkyVIsIEe0t5+z9HbHlV8R54ND1mGtVCn2xk213SCMc1/m2fGE/fYXq\r\nfPGqBJGHoNT00aoFbQv+iULKjSf1YT/hvW1PxH2nwU3hRHS3kQ9S+ru5ber0\r\naIkBieOUYUDtRvekPx1jQuATXxf4uiJSXme1d/ZBZc3zpBKnRg3akv/92HFK\r\n41pwCRntlIxyWFNxjEpxDN+J+c/K2H4CAzb7FdhnKa951MJimwsZVJeii2OQ\r\nntlASKP879aGZOYOhXFPvuahAXPbZAeuIB0JOcfcETrzB3X5vATLJQ3hGwIO\r\nS73e+5NG1QNqs8wXQRRC0Dv7CafDHrcX3sg/HN28LGcVtqTH4YYvAwCw09iu\r\ngcXt0ucqkHRIfMalNiy54pwur64o66R38uA=\r\n=tx6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/tokens":"15.0.0-canary.49c56a25d.0","@material/density":"15.0.0-canary.49c56a25d.0","@material/checkbox":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/focus-ring":"15.0.0-canary.49c56a25d.0","@material/typography":"15.0.0-canary.49c56a25d.0","@material/touch-target":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.49c56a25d.0_1665082319786_0.2549597516767077","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/chips","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.07acddef3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9dad545d74b166bb7bd6f6cccc435f0632fbe38","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.07acddef3.0.tgz","fileCount":163,"integrity":"sha512-7CyMUX9R52/urK08lzUs7df6myOxAE+dF7NtTK5kJ8bBJWP653E1oumVlju8sQi2ENNQfise7/RX/yIpMw+0ug==","signatures":[{"sig":"MEUCIGu3UI9HeGoASNtK1leLWiUs0iJPIYJzOM1kYgPdg/T7AiEA3+JzAatc5r0nH9YZSAGJyMQ39Y9G5tAhT3JTL3F4F3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJxvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLqA//SDGgjIRL6RbSEU+1u35aqbrmpCNJLE91CXFadgBGRxug9BD+\r\nzN3Ck+BaxK+X9tzJ+0cBJDyvbnbGexTzmHBExHFv+17zlApj6UWsnOb8iuEK\r\nloTrznpZFPnMLABdiuHh17/gnw/9Aa32ZxBAmThoObxv4BHGZrAQYYRxSKU7\r\nSi+tL1HlxFuWBM+btZwei/kQio4PW5gFKkLULcXkJ/u9VqjjNybpXj9MT45J\r\nJ//Vl/XAgIKQnYijNy4vIsy4IvSn0LXqQlAK/LOMVR0+F8SLK5I0K9Mb6klm\r\nN2/Jcef1xAkoigj6thuc5fWJtknn96W8YuxNZNXY+GWSO4FBxo2V+33Nj5ms\r\nZEAu67TYHvsieuZoK3xq6Hk5VKGR9fJnz/wGbA9intPei31PG785TOWXCfjT\r\nmg//hBgjiV2H6D0z3BcYcFgJEzS7I4BgslNOiVcrleC4c0+cJuenMXSmZf7g\r\nFNzIPAyVD7Q4TBkGoIX9bU/4jkdkFe4S6gXMBXk0bjWWpAsKwf/1mJ00gxpc\r\nRvs69lEe+5gjbsvi7zcc49trt/Vsg0yy1z8PWS4W/8FqU/G3h5Q2i658LwVL\r\npGxQT2ita+MvEirXW8Nke79+Oyvf9i5y8B0BIwBr1KbiI858C3Jhsk3R7Rio\r\nevdMqZ6ZhrMOmZbAh4YCTJnJj8LSInS3nD4=\r\n=beYZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/tokens":"15.0.0-canary.07acddef3.0","@material/density":"15.0.0-canary.07acddef3.0","@material/checkbox":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/focus-ring":"15.0.0-canary.07acddef3.0","@material/typography":"15.0.0-canary.07acddef3.0","@material/touch-target":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.07acddef3.0_1665178735174_0.4574983244930064","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/chips","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc7e7e32ed14da1c3698619df6e8cb8d0ed557e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":163,"integrity":"sha512-skUW7Ksf8x7Q+p/ZFVriDhmrw9zM4/w57f+EJwOy5lbYnT8rB3WOUhXp9mK+0sdby4M13VuoF8mU7P8OjefVdw==","signatures":[{"sig":"MEUCIQCjZdNDi3JWr5JEUmd0d+9CxjKam5o5lvHs88jOaZcnRwIgYd5T2ChRYQrYTYc2Yv+C/VrKbBRUtLv9C4je6ByuU1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKCSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro7hAAk//f8yT5Ndtzvmmdky8hsg35AebA8Z4n4mxF/ZGpn0s2biP0\r\nok2g7NAgMRk2X6BAUjGS7nP9sC5uhgf8lJJ2GF/fh26tBjnrKKq7iQCoqXjb\r\nctePxEt9ykxf9rJtemrCFbXEhi5QjG96dY0iLsAkkG/8YMG7tYatyD5W5BRR\r\njBTQRNzbHBQqfAMLEFKxiejMQ0C2MXYOr0WagiP8p8eCipz3Q1IGT3wGTb1J\r\nEZRqNGyNGOqEn5DRvGWAQ17N79gdxIYDkYCf6AqY0d9tqknSYdUQ6aIwVFrV\r\nfD6dpSKEnZug/ZFITKNXyB/ibe1mNRx+EB5OBWCYXljjluepxM3ZpG1Bt3zh\r\nL/KTk4RDZMYAN/RnE8Q2ONxb/gh0TqVLs2dQ624+VFJpCAfbbmhRMyFmaV55\r\nt63xjPy2HOZauWpXsgQglmGIcyzphhybSP0NUREaozLlDT3FAu7Ql1r1G2Fx\r\nSwPpLK/DtMdQmRvtl7C1GuLrxPLZPaWYT7VcBfiDDbhPFsTq8O6k8A2yHOHN\r\n5pL13v+1R3h3l4XYJgrl0dBYyi1vvNWELD9Mr45y2L5PfsUncZebHWV6bjR4\r\nDQxXCCxticDnnn479Fknn0uUWr2S3CfZ/Ol+z7y1QnnI2GrpF1ZOzT2+Tg7C\r\n2PaOLqEDgl4L0wOK6sjh7q+ZY8YsxqkFLi8=\r\n=Ft+f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/tokens":"15.0.0-canary.1c74eb2c0.0","@material/density":"15.0.0-canary.1c74eb2c0.0","@material/checkbox":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/focus-ring":"15.0.0-canary.1c74eb2c0.0","@material/typography":"15.0.0-canary.1c74eb2c0.0","@material/touch-target":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1c74eb2c0.0_1665179793654_0.601877337329219","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/chips","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c926c4305af6ee68a910e0e09605349c8349bd2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.dadfb713e.0.tgz","fileCount":163,"integrity":"sha512-+5H2nbE0ikpwj1cSgog8TNPccrDdkIWp2PUXEvUIff07RS2Ul6+JRmLbL9hsSccl35x0/lV1ICZJZ1xjcpMqDg==","signatures":[{"sig":"MEYCIQCHQFu6W/v+4wQu6pQW8y4HK6mZOksF6XxU7+P3O8IDOwIhAMnk5OeY1N0EFZTYM/vi1qBdPR5lUH06m3Z1rcYvTFMS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQV5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNvA//TcaCEyg1qZy/M72TZJM3+stmJYh6dKnu//oR/MmSoJaXstYv\r\nReTF0aYUZ+kg7+zkHZyn7CB7moAB8xKgKLO0snW0gPKZPxfdvT2yqYG0K3kW\r\nBGmn6oevE88+5byq3ExCPLh54luA8nuybzEs6arI0UE0PjL+4j3UutFaCTpu\r\nnPMuyKHGGlFJk7PgxldEs7v1c4HXjh89pJK4VK3qfGD3kVeILM8HZI+edQW1\r\n5z1nI0wKTasFy5DjvBrJmaFfXDgO6ggECQasRCFRfAkKrqlirZRIzpT+HOCM\r\nGrV7rraWaeS1jHNf96bLT8F/3/fL312pQ2bjt3vRkK9VoT8yS7+Lszd0DIb5\r\n7X9xyXCSemGdlayH3q0/ywJQRtFeOQnEbyS/5bhGQuQxXUbgZFWhX7RP+nND\r\n3ijizz4ApN89HicdEaXExvdgAnDwe+44bBdch2m50ehfBxwiyB/20d5dcMKu\r\n5VKVzxQPUib07FdunSvp1pdqTY0bHUVOnmkIbG86tSUJWHfaM6amgusSDwrA\r\n6qAv36GuZjzJeAbKazai36pjPPVAuvQopJl7ocZg1cdvCkMJasNsF8UOqYrQ\r\nSHnu37bP8xIjeD9k2o4tnF287Z8/7NGRJBLjdkdsaqlrZfAHDUU0Mjt3ZEXc\r\nXmwDCwIZCsLIVIyZQHHXipp589i7NcJc2ew=\r\n=ml3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/tokens":"15.0.0-canary.dadfb713e.0","@material/density":"15.0.0-canary.dadfb713e.0","@material/checkbox":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/focus-ring":"15.0.0-canary.dadfb713e.0","@material/typography":"15.0.0-canary.dadfb713e.0","@material/touch-target":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.dadfb713e.0_1665205624959_0.897937709633696","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/chips","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59c67db6392a009d420e0a8a9abc663c010887f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.395f1ce61.0.tgz","fileCount":163,"integrity":"sha512-AgkyK9ogd1GYolYAUgjqWSembbNc5R/KBL8nwfPmGrXLUIH4x93s9CLmWhvaCtaQg3F7sqqYQOblhRnVfZ2+PA==","signatures":[{"sig":"MEQCIGVtCsErSTz8FpV/rSNPiGt+SFLzssFlycf/NPe9atcBAiAxZA/hGe1JOW5i5Wx+7pYM0SBxBw18iHSUZSyGf/KOUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQXvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1zw/8C3gFxiBcF7ykf65jozTKqX1FhbWjpohSQLmVfYpQ9+NaIoVe\r\n88ocu60F+kNg/EWoERdazrjhHb6x0sltqtrtgk3C7iUt5tqYc6pBCz0dpMma\r\nWxgmd5Dp9D942tiS95TS8PBsNetJuGfg69hp6XhtOYvxq9HquiQP6b4Q5y95\r\nY6qgFWOLKjyelCSK3G+rHD46xAxZ7GMw7/a3I152svzf63jJz9t8mgfOblVt\r\n9lguuxdG83q/G8Y8m7vhvBU/Jg4HKrwixG3TcrjMQ5aCWHnseg9V2pWTwwNu\r\nAk9wdHQcoxyDDtdFplLPM75Hw2i60M+Ih4f0KmqAbkbFap7Okod8yF5RlyQH\r\n6xYFc8A+BVY5TOm8Q5BQsoHuGR6zGrGxYbHpt+4VJdW1iw58YnO00Z2LPX9W\r\n6QwiBKGu1oKrG5nG4PegnFNcTTzA2eBDtaDoTj+Yxw/1DJRaOcsL+g5ZeVdP\r\nRfwsCzuVrJG8Z7KfBfBbNL9KpeBCMNS1E0ioy31tZdlMY9GOVo5fuFNaPWNm\r\nuhoAX3RPQhHM4y9Qe8Chf53A64fvzPn8hrRV7b/bO6TMCBETYGQ8QkIdcCxW\r\nRkkVwhdMhaiz8z23udzP5UwgQJefWcTn/C3h9iOyzqSxkZWdZNNujfeWA9fX\r\nHNOBtYDL153YEThW8WwJmtAMKyGdmYIgOfc=\r\n=xOw5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/tokens":"15.0.0-canary.395f1ce61.0","@material/density":"15.0.0-canary.395f1ce61.0","@material/checkbox":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/focus-ring":"15.0.0-canary.395f1ce61.0","@material/typography":"15.0.0-canary.395f1ce61.0","@material/touch-target":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.395f1ce61.0_1665205743466_0.6237307504199325","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/chips","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0acb2d9a6e96a86398c0f5b684545369f7637a0c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e741b5c82.0.tgz","fileCount":163,"integrity":"sha512-SGA1pzBmNDW9MdpgoywQUhIYT71nO/7dctY8TsegbmwCky10ee+lwVIGsUWVipeV6GXuKunR6Ysm7AB8559YSQ==","signatures":[{"sig":"MEQCIEDWrp4Nfyh76XN7YovIjxMEujCpL44e8Xu7nRA6EhqwAiBVjuatnePcDdoBZ2QFTQy8SCLSHFWWCxlf1T+As8eqgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFjWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQJxAAo71do4ncMKVu6hd8LHPfFr4J18PRubLpUd+QKBQJNsUmAsCj\r\nmL7heyneiB4egMZq60xMbQdUq6MBqJwPCeX6ux5SIMyi5ebCUqjChz9t6iLn\r\nFybjCYqsdFUFGJJoj5wKao/SNpsk8f5PhiYonBxyLwZcWgT+WOGe8r9+toKH\r\n0ybev1A+th4D1oLO1stcZBtU3XUjPvHWJk2wi0IErb78b5a4u15ZZGhlI4Wz\r\ns+DOfgn1C+JVd6+e0/Qq3aUKfNL0rhziYc4+u7qCPjicGYCuB68sx+ZRAXIn\r\nG77/kDJ2rLF6J1EghnxpWTIPiytDYjNxk0Xq95BV/WNdU11gZaFoebdUGofK\r\nJ+pFCvcnfUVhdTCUVImaXwu4uuBFbannpfYThN48vpF686OmRa0ZJDtpm/+g\r\n2k5n8oDsV7aAbJQWq+oENch0QVkWqc2XDvOsF2VBW9KUbr8kreu9ly6Me9Of\r\nAnafP7k1lYI4qgOfmL3yDAffw8TcLBtL2Mq8OXI3pbFDPdMB/5qU6SCq2kmF\r\nss4M+YPD6yu9ibAiFFhsTz249RppKic6HcvycULDp3AZft8D3MLGwdvNMawD\r\nu4XJR9ZXzzg9AceBLfFT4kN8BMSMEz1mCsnCAZx3fFX/3oyii3ZSEHFJHCj6\r\nZMX8rbsgzx2usH5XUnUsKnAHqlOuvy8O6gs=\r\n=Qu2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/tokens":"15.0.0-canary.e741b5c82.0","@material/density":"15.0.0-canary.e741b5c82.0","@material/checkbox":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/focus-ring":"15.0.0-canary.e741b5c82.0","@material/typography":"15.0.0-canary.e741b5c82.0","@material/touch-target":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e741b5c82.0_1665423574109_0.18254224035836764","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/chips","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68eaa6f08ea145033cc5414a773530ccef20b765","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.582f3cc1c.0.tgz","fileCount":163,"integrity":"sha512-2cpWjafVRTEGVBU7inE4U142S8EK7Zsa0DM+cSKpp5NgptaH2n9RymPh83W9QZOMrEi5s+ZF1iUO8AzShm+yEQ==","signatures":[{"sig":"MEQCIGdETGw5GQpQkb5Q3pXfw9+f/Yb61ZOaHL0/Wa9wxgysAiAqHL5kGXURabqQbckvRrzxEJjGFN8WUyNxCA7f/vQFjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPYQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXlw/8CUK8qhrfHhLV9IihBHCxmr7+w4rTryFyVfaBh6BmCPaRtZQk\r\nxvjyTL8loynAft39Os1zrmBygtefU216ATSJOIjydt1/GJB8lymRCCb4yuuT\r\nEIxcE/yFJ8CpCQz9Bev706qJXBH+rdRw5pBg1yb+dWnwyFMmAHB00XkJBi8S\r\nG4QOuqjJwZf2Mcdc6cvMFb2sUED8uI5rvRkgubBoi0aJ9yTJEB/Fb8orL7Lr\r\nPUg+fV/FqU/02y0LYPl7IgJnZs8kEC2mpqzt1cqIUSDheXDz6YxEQ4bHMlbV\r\nVWQByHyCA8vBoz4HLAc+UD4FO9kyY8ze5ws8JyNFWLyG5h/orr6lXUgfRO2a\r\npz9H8pDl1XD5IW2A1w3wlG52PIXwvapGjbek0S1bCXCg4MT9N+BLrgh2S29K\r\nWZEbNjXleb+BAO5xjaGEru7Jz+SBLE98j55V7nDPEWtaiAjg4GEvWCuxXf4D\r\nmxDU/sGEE13cbIClQGt/Hmk6gTmb8bNWdVFqmKUpn7pANdHlzuMhGw5XMAod\r\nSoHulrFh3RF3IGEr7hktMdGHklZHGtk4YaXHE/z/5k0MQELbcil2VYtzMQHk\r\nYfOSCAIxGAl+rozfnzgDNSf5xGEZjPx5y5Xu8JvYYqGUK+hLSKE2NYR9b+Ge\r\nT/t0lgqqx962AYGgakHRoplraYU2xh11fw4=\r\n=KzLx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/tokens":"15.0.0-canary.582f3cc1c.0","@material/density":"15.0.0-canary.582f3cc1c.0","@material/checkbox":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/focus-ring":"15.0.0-canary.582f3cc1c.0","@material/typography":"15.0.0-canary.582f3cc1c.0","@material/touch-target":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.582f3cc1c.0_1665463823948_0.325532549290219","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/chips","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b982aeb8f3679dc4c6742c2d0e4352bf0cdb2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":163,"integrity":"sha512-t1DqupGXb1r4QXcnAXshFrmK9gVxNaAoWPuFwLGCRPB5ezcfq7vCIniQbDqaRyqC9eIMwbuCPQkrwgKapcQG7g==","signatures":[{"sig":"MEUCIQDIN++WMzFMJPRv3xD3x9kYrwI4LUghvNJd+1JaxfLIowIgO03NJCIpqaawRzXhhXdSLWJJiYD7ihROpCMNw9ikujw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRq0bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSHg/+JowyuwDbvxt+IJGQXNuTB5KuWMgju3lEW9KWI7UrjBmYqozt\r\nC1ZDm6Rcyjeo0ahoQmqIo1b98xPWbkjd8SmhhDW8ARUJez8W8/mj9ZNcT7Q3\r\nwgaty2CjkPV6kV3/1t8aH2zB+CfG3djS3Z90+m3uxcLXcmWMh6te3zm+rE6f\r\nXVyq+9Q0IJGTheS640XftZPD340FhZLCpJdJsGQW8OfGwLEVuCRlrDVClJSZ\r\nogN8QrqDzwrhH7mImiJa+2Tp7dsZud5GoMVpWAzKNwf7AN2WTjv++aKrqpNw\r\nFvkpcWLoaup9YFH+7+cLmoveM/IvCoJgZ1INR869i67MEmdSFrpcYOn84B9y\r\n4l1m2lkJqWoVfuB57xUoVXgJ+Sc2JnRinEhO52iDBHDLwOHZqM4uoWGs0bYh\r\nBP/WC59IJtTsvt4qiVtZbAMQIcoocy1eDfeEQaUdryXCsKdiB4o2OOgz9yS4\r\nuIrnTG1pPyxLa28tEhfr/jBI4QGAl1EdfDFwsuRR4nXS9XAiCdvGd5kXSsqV\r\nDkiswdgtLAkD7KD9ErRuTbla4ZbaFfidBhEcMDnnry5Qufy5O3YoN8RYi0Ei\r\n6LTV42FDla4CJ4R0PuG26pjnsGf/iY1dXSoglZKfRZ1AKWFDUUuk/hJBhfhC\r\nXfMq+hwiM6FamLwrvdsZc7dd309k1fcuvZM=\r\n=A3H/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/tokens":"15.0.0-canary.b1a6e3e88.0","@material/density":"15.0.0-canary.b1a6e3e88.0","@material/checkbox":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/focus-ring":"15.0.0-canary.b1a6e3e88.0","@material/typography":"15.0.0-canary.b1a6e3e88.0","@material/touch-target":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b1a6e3e88.0_1665576219371_0.4968611988206826","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/chips","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fce7176ac1ce3ce915246ef5845ee0e95d6fed7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":163,"integrity":"sha512-au95Mp+IuzAPhrWqP/33gv9HC534ajDUkhpCvsNslTHtQw0rla6RRHoeL6Vu6OXVRucZAsSV/1enef22fPu82g==","signatures":[{"sig":"MEUCIQC7/9PBRLSd1Rn3yUZsAwC5TpzjUkWntiqNDB/8Z9OFwgIgON/CffICdKnvoifSQZm9/s2RBCJlmDeMpbV/nB6SqGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvKIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMVhAAl9tibXF6TFPJc5uNjVbUWrUh8G5tGKgmtEz7+3/zqpo0pOMe\r\nVFQopNyz9zaFINvuD3laXahKoY99W7TzcBT6fWR8W9zCRd5X4sxYr4txWA62\r\nh0VCA4c6ryyzFbkSxKiXeujBtwPInIDIOEBUWsHjeAZDi5yDw8TBHAuu1rAw\r\ne9ZdFe3vxnVwsoj9N3C2p7FtHaaWieOnmCbKXvVflH8KhCbMOqVEGE2ZRa1Q\r\n1AFowXyU9lXXxVjao/vdQVwrYVEHt2mvo7IDd+H/we1p6Ik9tZwhDEoH4+Sv\r\nSGce66kQtZ+t2qjz74QPYabFFKfNnn8Y8FoJdm5KM8uSc+gyZzQpxROQaMQi\r\nb8M/F3+gQN1PHYKz+vPlLiAzRVWrOhmRGxeYcIaCNIDO1CBgXj5ygGFdwA3e\r\nHs8JvHxtCLmsCNpIJu1vex2owLcBn3jrgK7yiLE2SZnXvpGcRYoUhieJmFMs\r\n3j/bPyz0jgcdrb5ijRNoWG9L/obfnW9Rw4R7DwIiG38xzhmzDxij6/3aHaT0\r\nTYbyfFZaibMQ5KRWHvS1iJuhOnnmTVz0ql6wMjOfVpGn7Yz2H6I5pMBmXykc\r\nlCgi1EYGY5GwVBngEtc63oNzU5RK3bn1F4FYa7P5r2fjICXyi4m+iaft1yMC\r\nzLIc83ev8mBSTYmpUjAW+VcoO79tYFgi9+Q=\r\n=OtFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/tokens":"15.0.0-canary.c9b1a31e4.0","@material/density":"15.0.0-canary.c9b1a31e4.0","@material/checkbox":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/focus-ring":"15.0.0-canary.c9b1a31e4.0","@material/typography":"15.0.0-canary.c9b1a31e4.0","@material/touch-target":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c9b1a31e4.0_1665593992293_0.6054507385048296","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/chips","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf9fa303a14391f901188e502057e6abeb1121bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":163,"integrity":"sha512-b5cq/0xmLd8s6XjGZ+/AkAoaPkxkpSNY13FFvZvqY8MjPmf9tmuI7Ym+Gs1Ph5l8oeve5Pncqem7UVt4stCjog==","signatures":[{"sig":"MEUCIQC7ZvmkDP8q629EIW8l/YxslQ0L69lukAI9XTOw8XbWMQIgHCx1Svf15I3EMnOGDr9nrgtqWt1x5FBhZYMygNBEM5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxP5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPRg/9HlMP3F9CMcF9/WwbNWMU55DRIs9Cqi0C0kmpzFJGyXLzLVMz\r\nbaB7sDhf4mGE7f1FB2cTqgd+mn3bTTJuFl5StwDFtElZVmhDmfBzUFjhfrVe\r\nlPTmcKYkjqdyT123FJ/TO+PpfNOzKsUwIsKD/daKFqaR0pME6t0PH+SV91lY\r\n3PZJw415fty8UnIr6brYvYwA9EZQhzRJ0gee3R/Cs6Dly3aj8BsKsKahO9cO\r\n7Z8/nyYVv7+WkQeelRbI+mk1biiT2CTwOT3YrTuv0pcxp9DymZflTz10t6AD\r\nCphKCzf7JKVk1ZdWNLRHrCrEua7KSm6hUQVfVJgdSY02RASO2HzEL/7JIC1y\r\nZr0mIDVMM74ZS61Si7CCBGL303FYsByFSwnq6WsGjg1OgqN2f4S6u9Z1eBqG\r\n3FKwJ2km9L9PThTzASQj2jLHKHlloWp3wnl9CfG4CNfbw4TJcEuaeBJx0dYT\r\nr4EPX5Dn6KyXy4LA+eQygk5wZcc5Lu7xGDjhGYU5mFHv9gJYUV4Usi2dCK7n\r\nY0Vq2Vlx/6yp97lIbYLNXnEcKiA1ZVMDE+Ly1trGm0A/O5CmFOOAdD8JMfqA\r\nqth1auy/5vwkNGeYchTVeB6Poh+jRx/5h4kwDj0jLuo3K1ZOB/5dSbQM2d19\r\ng1i1UB2w8bTWy5jz+VrrTcc8kpCsr4eIKi8=\r\n=/7wG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/tokens":"15.0.0-canary.13e9b0d1f.0","@material/density":"15.0.0-canary.13e9b0d1f.0","@material/checkbox":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/focus-ring":"15.0.0-canary.13e9b0d1f.0","@material/typography":"15.0.0-canary.13e9b0d1f.0","@material/touch-target":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.13e9b0d1f.0_1665602552799_0.7944268605623304","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/chips","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9534da56d9e36f4cc829f19f3412d2552e9bbfa6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1dc797e7f.0.tgz","fileCount":163,"integrity":"sha512-CP0WaiRlCoHhHBjotZokvSYqJdrxrMjaMwZQqEeyY0ISDvHRGXmIbqvGvylm+oqr/Q8SOeeG/2Yf3gA+twBvqQ==","signatures":[{"sig":"MEQCIG19NfMlAdVjyqd2GedCJGowFqnBbIay/0yTo/zqJq/OAiBp5WzyW/sC6w0tn0QLBNb4LSSRilnZSCAQIDzjwAMlTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS8mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVWw//SuO2Dy0QuAk81pMdgooaY4iE9WTPqTV6BSoxGqd1J74tBmA0\r\nAItlFR7fw3ZhVhgsqkGEnkX9a77aXYhh3vTneyf+znQrXzhwOfTcw3J70J3d\r\nxHds27NstrEbHCBi/x1vao79x1tNM3JqaZ5D15ZDu/aB9xRh0xFwZEbri9T0\r\n4E1QqJ/fKt6cDsnjh96ZgcZsrpHCSGbdCePQH7pka1FZhdONadBbGIrGWnwD\r\n1xLvcc/RVGL9/8zhbKd1VY6kSGHxzC9KFRUUNO1nfAm4mPwjTrI2yl71ho8p\r\nn2MUL5fdVpGiSHE61BWUcc1gbHvauO79NHKldJoonvv9BrwqyVOsyxGusUNV\r\naHdgslV8khHjmKn1r1QHF8QZrRCmAACFL3pTG/qQrPA7gzm5REn0fA2zQ/g7\r\nCDuZysJDvH2yKRY49qhbarZrej7NUcLTBLFrKMdXI8NDt/t+1rItQXvanlf3\r\nNlwRou7VLRR5DYpvlVCHa55CTGNTdXH0t1mxqNCP8LSRFfl4Lo5sUXfelMGr\r\nWIdO6SkXl7qz68w0mfx+C8eZCfAJQb/hUddsnDw2rKypK3fsEcva7D7es4TR\r\npZkH6PSRi7n7dOKmvNyuC8P9ksUnNhhWMsm3kRlEpma0BGRxcIV1OHjklDYL\r\nCqA50/5GvFz67sUEW/K4sci4yZyCcEf2cU4=\r\n=Ro9C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/tokens":"15.0.0-canary.1dc797e7f.0","@material/density":"15.0.0-canary.1dc797e7f.0","@material/checkbox":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/focus-ring":"15.0.0-canary.1dc797e7f.0","@material/typography":"15.0.0-canary.1dc797e7f.0","@material/touch-target":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1dc797e7f.0_1665740582331_0.05975641890301531","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/chips","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ed4009397.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc60f0c2c8c075cb7d0036a4a7182a9fd4dfbb33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ed4009397.0.tgz","fileCount":163,"integrity":"sha512-jVXytsivFp8Wltp+xF1UNBDCZ4m6qV+VMlTm2KKdFCRylBbAEW8tRTpxhImbNj8z8g/XPrTj5wQdoY7hnLZlQQ==","signatures":[{"sig":"MEUCIQCUF0i96Xi3b2KdbRJHl6+/eEXM0VfIYgVqERxLI++hewIgayym9UjbXkL28Lc+/fUDWCLCt/TJR/edLuW96dJml8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZPOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Eg/9E4BQtDqWW04Xy7RKetako5VtmHDNSnY5YLiIGRlLfzHcMA9Y\r\naMPeJQ3Y5KRQrVCTw/szECq3jZLTm3RJHSCeau2TzcBMIMgVdQZkXmuR/Szf\r\ntHskNQJX+NreDNkjGBdIi1e8Vy1fbeF3rYg/qdMuYPtXhl/ZyUswz2IuWFEP\r\nZ5ivATheDjNFUQw8g2vJ4H9cbWDAU41MIMNnmqJfRGajUIgdL7lZWgvE9coD\r\nyneCRYyhTQfmUkgtFAZyl5ARjBAMWR/Enbubp6nucCZyYogPBgK9Es/RUDvM\r\nTKAqew9NHdz4uIxd+pm/gjVtQWrbPM5QTgnRDuner8lz+po7P4WnBY2/B9xv\r\nuOS9IxoACrjFpGCWbt4rVUL6Ze3VW/wLMCPyRPvw5wYRw30p1Vg/5ms2NAyd\r\n+7WT/u7kfjWozG1hXELTpI3XdFwEF3g5LNkNFYFTqCB1aztcsLSQysQP6dXI\r\ngS6SX8xJTCtemephELx7Rp4bW650KGUH2Ga8bfJS3vJCucfNBxHRcwT2seYq\r\nxodL9mZ/B63ousme1OqTWnhqr8P8hQJ0Q8E0cHItX7QA6Q+/q8mEgC5G4QQm\r\nPA91LtBnVJLB0N9QLeiLsumAZ9ncUN1uz/Jb+t2YQK8E+q3PCw+7pPze+1DU\r\nMWJhwvGFcL/eQviuylLfzWALBw/pcQkEcRk=\r\n=7+QN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/tokens":"15.0.0-canary.ed4009397.0","@material/density":"15.0.0-canary.ed4009397.0","@material/checkbox":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/focus-ring":"15.0.0-canary.ed4009397.0","@material/typography":"15.0.0-canary.ed4009397.0","@material/touch-target":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ed4009397.0_1665766350098_0.5863062018221867","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/chips","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3026eb10998ea85a0adab0b88af7ec207ec4831a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.95ef196bc.0.tgz","fileCount":163,"integrity":"sha512-4aYZYbqKMpwKF/0naqPupES7WIbdQHDlHey6rVd6ae4DCwFz8vh/TRlxrwlnfubMvcGH+FxozWv6oel6id1i1Q==","signatures":[{"sig":"MEYCIQCU1Jl/6Tnrss9WmQU3uKSh/dhtDjvjAjpAtaYWS1TfcgIhAPVHW2jSX+eugj5p1vVKazb3H49d0jhmMlDN6Ig8HJ7y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe2AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobgQ//ebpTNA4yQSW6/sMj0VKtjO22CfdAg2YpUAHa3Hetz/70+Kep\r\neixX/JD9wjSg+6zifO3X+lTJPBc8FwzHtad/He4lGFT5oCdwIjU8nECS2Z3d\r\nDU2nllNvKZF8EYk18UkbuSNTdj7qFIHo735+yA23k79IAdXuWuZwg3qDh5dR\r\nQsdK8BnLsR0izVXrZBoPts8zZvjGSU1A08BvHTXKm5B6KoUzqq6oQRPTmCnm\r\nHB6UdpEvNDh7lV5b92n49OvvK1HGMOrTqQUdZRIlMzNg0+gtDTrnjAW1CNqP\r\nHjq+zirKMYN/aIdhrpiVLS/caQ/+dxcnEUR8EVyEH7XlBczr8VnJuwTQVLnb\r\nwm7t97a3SoFdzlLYxmvCjuOBzWF2rOON3KS4n+sBlet87Hns45mBrnFmXJou\r\nYXqygNP/Ns1g4f3Mr/pg8m02/5UIw8MC1UVCiOkod4Y6RuYwA3jAPiNvnT7Z\r\nXFRKUtF4QUQLwYgHwCBdsse8rdqJchi9VrTMgEwuQb75TyxRBvJrRoeToQim\r\nLqYopb6Jwt0See2Ace8X5HrTRVXVTeIt7S6EoYHXS4pkkZ4EfsMqXkU1fboG\r\ntsbOmRH9WZMj2rTR/WmAXr75j3wXFKYwYJvHO7iTSpy//AtMc3lrZlOecA6Q\r\nXAGoViNZAdccbeI/f70v8F7deS5u6gmSFQ8=\r\n=Tp8t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/tokens":"15.0.0-canary.95ef196bc.0","@material/density":"15.0.0-canary.95ef196bc.0","@material/checkbox":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/focus-ring":"15.0.0-canary.95ef196bc.0","@material/typography":"15.0.0-canary.95ef196bc.0","@material/touch-target":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.95ef196bc.0_1665789312528_0.47661574478726276","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/chips","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f0477fa76f9507923accf33274c467500876a9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.13eea1b2d.0.tgz","fileCount":163,"integrity":"sha512-k+Sip1JTD9BiMApsArcyePttvw3VzlYcUis3DfNTQmJ0wWwyX4c5WypU9TuPwsvSky1Ub+V9pwEoKvct+np6Bw==","signatures":[{"sig":"MEUCIQD8vopt8SsFFtauABULCYX5/fv8Si7rWEI1w42rwEfrUQIgYIWGrvBgF0glvYjCC6LICK1Bh64GkJvPcbWIX/SqRtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNGSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXTA//VgSnDKjWeZMBDpPgGUORJ9VGEIWtEPNMvzri9XGSXCwTvjD1\r\nS2PtY0YxAkGERJwC3F5TyHIG/A967nlEVCQJLzHJ9UMa28bsST2EPU7GfUs7\r\nK6TbFDiUBA8rZeQ017y3P9hzjFH6A0aoMs/5+srLffw8b47WZvpM5OFi6wbT\r\nd5PfthBZn81CqiOF+++xY5hzW6mW63B/eFrJCp3vaYfmS1G3SRrmSjgNUfJB\r\nSDqGWA7/Gssc7RiKP2oRhewt10t5GvAjE6DYjfs8rv0F7ehlqQkPtJjB3bgr\r\nomQx1Y+1TZ3XzXbHc5mAsw0WIeuNZIAgIEO9yPQG/2K1Bje1BqD6aqb1ofDB\r\nD6IeWG/7y4rNTbCTEracp+J39fNY3Pur/b5P9ooxRvkB9bCoP6sZs46MnNOL\r\noVYyLmM2Lvu7dcEvL15uQoqQJa5MLo+kGdveoyb7VcKcHodSnAdiomLOcoKv\r\n3wSS/rSt+yhohRTjxrN0Lh3J0023bU4SxKLn8d8vsS87M+s/60bvMXP25CfG\r\nBTO6Kjee+v1nyD+znFBHLffu5m5ooy1zMmx8rPB3YVY9lwA+g3KCjJKu2gqK\r\nN7sZFGohGSBPMOHvpuUPAuH4QNwo+wx/0BOm+8+1dFBkXZOjiUJh9k8SRiNO\r\n4tgvZIKTbWlJ6e6h2UFlWmihlwxDHkCxH5I=\r\n=07BG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/tokens":"15.0.0-canary.13eea1b2d.0","@material/density":"15.0.0-canary.13eea1b2d.0","@material/checkbox":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/focus-ring":"15.0.0-canary.13eea1b2d.0","@material/typography":"15.0.0-canary.13eea1b2d.0","@material/touch-target":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.13eea1b2d.0_1665978769761_0.3479651259126131","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/chips","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5c682df4125702f7ced741af78bfed48fa4a37e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ef9b2babb.0.tgz","fileCount":163,"integrity":"sha512-ZqNCZYFIt6VWozVPibg+VGebcufz3nMiDlQjPkMZsiqj9474mwYOEn1xmvN+eOOKBg6/MY0/PS9AEXdXot+MIw==","signatures":[{"sig":"MEYCIQC2sdz3R9eIECk+VA6IiHzuhMQ8YF/zkfKkwYvuGLF7TAIhAIlWZhZu6jeI/mSwe5eJ98VxbISEL5fKdqsl1eFe1YmT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR4cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY/A//R5dhRj77vDetJWSaCbk0IPTF+Tv6X6GG6l12HFKH/nk5Ar9a\r\nO8gqvpsgRCSmugqvRZY02msIKjXExwEOFcfJVeD6M8Mu028CEnY6FNv2M0Te\r\ncLvjRMjxLFfBsm3WPbzpvESkneDBccvVNiebF9XDXuPuNprcD4UzaatDS2qC\r\nLKzY4uUgvR5Xk0rcl0taTkIcigPhKZogd1LqiWmV6iMv8fMA1hYYVaLb9DpI\r\ne/bz0ToGfeVKMYHTRst5IpbriF3VlyE+heF5eoQuoVVhFw8vHGgpghV4ZvdH\r\nenypvwCDT9BFT/NbCjC0iHA+MwJ+IRDGQd0QsnTKF73LZHSl3eloKvQUCg5t\r\nXTfSJ86SKW2TxTEzrGdQPMC9RODWMSSBjjfq2VIjGrGxPss+LiDAKZm/ysHI\r\nya0VZWn0I53zNcgd/M3krFuq0rrSL+1eWBtmgrtyxDuij0Rmsn3OdcV2lDHY\r\nCUAUEqYhM3ZQpO2RZFQuAKo2oPUBacLvjFWdTsFDWrNOibBL2ygaFCyHRVWa\r\nbxB/BlpYOL8ZxyAWUN1w9gk+EfO8ujXD1RDA2qmbuSaLaKOj0JTbd+RnoO4V\r\n3/7IgFV4v2Uax0TcuXq5jV5Fqhgc+0FnyteXd+rVQSqQOPRl8CBneorgzVZ8\r\nQ7aW/RDKb769F5ICAJu5fxkE2zvHUuu4RdM=\r\n=9eZ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/tokens":"15.0.0-canary.ef9b2babb.0","@material/density":"15.0.0-canary.ef9b2babb.0","@material/checkbox":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/focus-ring":"15.0.0-canary.ef9b2babb.0","@material/typography":"15.0.0-canary.ef9b2babb.0","@material/touch-target":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ef9b2babb.0_1665998364348_0.9380485935806762","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/chips","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2af79dec791c7e2c399f33f83a7517a55f3a0b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cec7fb987.0.tgz","fileCount":163,"integrity":"sha512-9LmEKT9ubgtOs7mA40h4vrmztVVEbu891zmKpkHgUT4SCALEXYwP0MRXHwrbRxs/Ol/ITEXLWFlNSnwyJOcwYg==","signatures":[{"sig":"MEUCIBeVf4sO6oUli0xvm7Uw4HsJzmYOzf7E5aDq+UNgAK7jAiEA3z76sgA4BBTOYj9r7PNlUMzellMFhAnID/lm67acSpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTUeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroXhAAoMxJTOnMa+HpeL5voIKqv8aVrjyvDYUW8mRvQGEu00O72Obw\r\n1M7NneUQ/BTf63Z5HtRpWdg79lqEXrPjLOeA1RBZZNe7Xexp47qWax2NaTKG\r\nXgZuAXH7Mi2zGu2KB9ix9EvqzxexFhy9jqhXXW0yf6sXp1Z60nnqhvHkHvxR\r\nyGnbrxhVpgFAlUCavPlcIakJaludhSLeHGMwthK1W6CnFunmFUQmG24JzFtI\r\nhA0He4Cv0ZgLkjcZWuDD4iLWEWDAQGY0+WPDUSbs7h1MKg/MbnKVIDK5g2rD\r\nt9Vmvg5ytevdmmyQDMt5Q211YZCOEj0h4JmjzbTsR9viJZwmBwyjvHiBv4Jp\r\nrg6NsIlFd64s8UPpgsd+P2f5ZRmJN3HZ1BSJaGiAySMaVuET6qu2G4QKMqsj\r\ni+tQC9EmvwOrWQ7uRecn9gAKP8/ImuBD+9SisTXJRPV5AGLQsf/D4vtcqNmF\r\nKFEFIwurWGJT0OxmkONAJgsCb0XawTywRIj1W8EEGdXwYak6excZR8WvllT5\r\np8zXyC0gyOVAGti00VXak6aSYncE7xJs6ujN+y9ob95GtxZ4x735JUg2jGhu\r\n1lQDBNzhGCi1GxEeCZ0ArhEIpfmUaqog7mtWpriWBhQXcNiqifvE1H/FijP1\r\n/6XJpcvRW+qCVDJTdNoLOM6nn8n4pkJwK1w=\r\n=8n6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/tokens":"15.0.0-canary.cec7fb987.0","@material/density":"15.0.0-canary.cec7fb987.0","@material/checkbox":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/focus-ring":"15.0.0-canary.cec7fb987.0","@material/typography":"15.0.0-canary.cec7fb987.0","@material/touch-target":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cec7fb987.0_1666004254605_0.2580956836734276","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/chips","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac374daa2c46cd5edb77a931d697abe5cb1a1ac5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4fff58b08.0.tgz","fileCount":163,"integrity":"sha512-O/6hsnlBCj1p9UiE9qo5AcWT6tvI6x8Ety69cWv9qlsQRPO1f6N2tXo++GkvVjXY2QTWv+PB0XiOjbciQMN4Fg==","signatures":[{"sig":"MEUCIGvdPxC0sBDCOC37sNZmuYEzsv/5IB6U6/BjODG4JhVwAiEAjRuHcGQNqdzfpf31UMuyw+1FwVctVwYUBf3oI+fc944=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXONACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLJw/8D+s/DwBIFW7hbfLsRbb3AAtw405myfCDOjBbhNBYFnEfZQ4h\r\nsf3LRgZEJ5aa5AjLxQfUvqi5+U+ImEDn/V2DSLP+ice0vqQ71GnvEi2EJvpr\r\nQW0IhtXH9HWAxdtcdICvpU3b7ksuILZpJwEH0+jkTy87NUC4TZQefkyvzJ6M\r\nIzD9zy6APi1c4BxGoAwWaKJcCTJ849T71UbJ0A5geqwF4eJgkjL0WG25blLa\r\ndsMC7zsIpyCxjpWGnk0gZ+rfwFMbzGUag7QdjCFvmmkF7PxDJ9mpaCswJBLQ\r\nanJJThwhLMAz7Pc2vVNImL+8X7r3t7NmwTMBAgIYQpIEAEWFIYpxzqD3yK3b\r\nrkl9aX0ETrdDotc76KYDRUtafVv10lsAnPEV+bJGx5yZ4W3KnToX8WadHQ8f\r\nM9TedTZqdgCHTKmStgsXjAsx7QTHTscgVWLyoR/Ey6vf2Upb4lSc695NLKyD\r\nPyylNbSCvLqZUvo16fIYahvtpjWcjQlYe1bEcKcz4maGXQx1RsJmpZC1Kl6c\r\nTSnRwkM6lfkf6wgKc+cfALnbirwN/8K/cvbIkFmio+bGMRZ5D9yIuzWQKXfC\r\nc43wNjogOwMmKYQc+EuLJPJhbeY8wJNpvCd7w+Fd7WU6XukizdKQ2epdYZ5D\r\nAJdMecOjmWnMCZD5b1QuYeXRld4KGsN3J38=\r\n=sw99\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/tokens":"15.0.0-canary.4fff58b08.0","@material/density":"15.0.0-canary.4fff58b08.0","@material/checkbox":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/focus-ring":"15.0.0-canary.4fff58b08.0","@material/typography":"15.0.0-canary.4fff58b08.0","@material/touch-target":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4fff58b08.0_1666020236941_0.16162401451220254","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/chips","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.587d8f871.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"453d4e4e73aff1e0545aa8408d82dbc731c1d75f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.587d8f871.0.tgz","fileCount":163,"integrity":"sha512-Ht7WuNNngM+Bc9l2nPn884J1gFeaSOjhAtZQ1lozirkY4LUYZjUiqdpgDnC6I726ndEWqKdXf6/SzBf4AHSrPw==","signatures":[{"sig":"MEQCIHNHaDy0ebXai1OvAKFDpJoc+1BfCzJ8cRCq6et7GYEJAiB+b3R7Gr7vM+x43hrv+pLYYJKCfp0iFji7KXW1tQpExg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXubACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI7RAAnkl8XgHeTgUR18HGCicpj17GGJrq7hODyEobqMTepPEetSPV\r\nNWsPcE9uJMf5XW0fDe96pWeA9aODRaBMCgLtR5d58FPxETyuUu+xdUjArZoC\r\nma3pxchjWm+D6hQ6ALQF7Nhx6pxOfNj1osY3MJehhH8RIFmKznIis4fPV0zF\r\nIWVjoQtvzV5xMv1A2QYocU3drKBTc1F4FCkBB2e4ndxoZk6K7lNQx5Bkvz8Y\r\nTl32kLSnurgmtZrZ02qyP9VizvJabnasU1KmsHdUaRk91RynGwZ+YGK728uH\r\n0E1bE9b+W6L2zjLV5KL1wku7vkHH7Jhsrv/JzdHuPHtiayOMmgnmwRDCw8YS\r\nUpYt9lbnP5beJYQRTe0CEROf2+4FF0oNFFh9gNIIfw3mgfS1yBQHfG6j9rBc\r\nJ5gZ06bfZZj78iXn74aBDo2NU+xSA7dsXE00Tx9lDRSHSeute1gXCG0fyNd2\r\nBzabDMMJ6KMGf1LNeLx9TMwekHxPxqZrNkl3G6Bv5ipsQTGi9GW1URk2Tn6E\r\niLBUJhZ+chMnqk6TGgtC8urXTHDZ8OlDPndGuwBZJp8/yYgotkrn8rBFLk+l\r\nUmoOazXjiUgbD5bJ12rBIhUcHa2nQsfAZiSd1KdtN8NpVRtAAyhUY3THLljM\r\nnnOrv6D0k7jPSdN8VWGOnEQ+OG4jkSgzja4=\r\n=JRZt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/tokens":"15.0.0-canary.587d8f871.0","@material/density":"15.0.0-canary.587d8f871.0","@material/checkbox":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/focus-ring":"15.0.0-canary.587d8f871.0","@material/typography":"15.0.0-canary.587d8f871.0","@material/touch-target":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.587d8f871.0_1666022299530_0.1976528280282237","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/chips","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c813da5263083927e53afc0c2ad62afcf6aeb024","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.edf4b98d0.0.tgz","fileCount":163,"integrity":"sha512-rvI/rFKiHXCjq0L+4qXZQC1ci25Vm5Si8Xf0W/ByQrvs4TStxwCzROHjbYXZ+FGwGiZyAPnejXI6aJggDnsqGA==","signatures":[{"sig":"MEYCIQDCHiN33wqliSxYwPQOTiqiGmNDRs/j/LpHoLAQ19iBPwIhAOk426UdzH9K8bHbcGw1Ib9kh2I0b4Is3w9E1mMTDs/q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYXGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBwA/+MLjfWfFR2BPgu/Fomk4Tzwa1dff7YPHYmmKujtSvAn+VjfGY\r\nf+oUWEpIKkCoyvNY+3hvrOSHTKejl0oC0RX345bMEGNRwKf/R/UV+jEo9QLI\r\n2DEenomXfe8AhvE+9x192KSQ1qgQxroIal+1UqmckaFwOtBdAtIEN4QRG0yD\r\noQpCXtscTHpF9zF8//GVfxvsjs0Voyo8z7F+VqhwOgLcbLMiBEbijVZOijjd\r\n/ZKXyRAfsgs6oORb069jWw0iRbHT26+GbJJLL3PBFaYBAZkw6SYOoG3JpJbI\r\nH6JrlhPGsJfXDesUEawiV69CdjKVQSV1ioVHYaozpB3Nu58qGfVra1Y41w8v\r\nWudIX85drgTtDlIpdhyIacFM8OEgwu/7ESEsctMqKF7Bfk/ZTYUlOocv8g8l\r\nFlfQ/rDSOsWm2EomCajVjYYDVeEAdAyXfZWiml+OUB3mRSUD2t69uDIxDzSa\r\ndRq65LGjCDk7koshh9GGiOuTN//CFHks9R+1C53KNFK9rWnyXNLrUxHbvamT\r\ndCJksjvBNguFpvEfIuy+Zp8ICh9ImqXU4MMNhlPWKs66otaqtS91k8NX7yUc\r\ntfd53B5Rc6ZayRyK5tyyirei+vMoixqN7RK4IHx6qBu6YqRmMAJVkFRFw0pn\r\nQ+DeQfi0s6IpIOoU+VZopEclM7K3WTx9GIw=\r\n=S0i5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/tokens":"15.0.0-canary.edf4b98d0.0","@material/density":"15.0.0-canary.edf4b98d0.0","@material/checkbox":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/focus-ring":"15.0.0-canary.edf4b98d0.0","@material/typography":"15.0.0-canary.edf4b98d0.0","@material/touch-target":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.edf4b98d0.0_1666024902231_0.1124008917558037","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/chips","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10b2c418a6106e318d1fe008aac3e47ebf3095e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.024ac5f16.0.tgz","fileCount":163,"integrity":"sha512-C54Faty9xDw0SJp9vQtJy6q9s7uh0xtXNsbBws5MNW16fVm3i6HWNE6drq4rXQIUPrxa160+vc+oQwq50M7hKw==","signatures":[{"sig":"MEUCIHJkZ56/g+l1BCARyVTNYYBFXASDSi+uSdefp4nmah58AiEA8ixUlru8dgM2XonZtDjXGUGe/8bYlMUBEo2Z8DVg4e8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdqYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNFxAAkoNDAAuqI9dWEtb/1GGUWpsT227LYwziYl6APtiAmsnXypZl\r\n6PD4OLj1ipuVVTi3BC/BsWkLmS6QuIQBgw0kqhiAcB+MDOD68O43XyX/HfRr\r\nNgBS3jU/CsCNg2Qf8+Wql+XbwyuQfpBtMnuV0i5mwM/w7tMmAXB8aaXbXOoI\r\nCNKz7LyIwSVmwrZD1a3jvio3L53f5koHd9Iwx5WWVShr3Vd/kuLU5HG8ZnFE\r\np4gcGbnLRtqX6SlEB7cqSMwvTgHlc5BYoOVsqIIJ7vmXT32cehMiib/vyI73\r\nhm52KPBYHQF64Zv+xGEBrpWyoGB3AdePx3Y7Lr9y0C9kF04ExrV1FEZkWXg6\r\nYbb5WTgsjvOVX1BaoF04AyvzpvITDA3zXcX2crw95EpQl+8VxdV6H+pMSFy1\r\nm6a2deF0cWGVzvcN/ip3XuQRVIGU5+eu0adEduQrsaN+jFYPXigKKRnQvbK9\r\nmwgL+Lekw/MyLMOKBLyIKRg4lGMmGF8g3yTKdE3C0Nbb9Jm5YBegDkzORfrl\r\n9pjaKPaK2AsSs9L2HO3BY71w47n474qkfIGIxD44fx7bDgR1zSRwgcJ4QEWC\r\nOlar8HyLeK7/I3YDDT5assWFwK0MqAAZf38uGzHbIuL1zc/k0vWjLs8uuivr\r\n4ALsxHdmOwLCP0+4VML8m/bbE50IBCwvO5k=\r\n=ERk7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/tokens":"15.0.0-canary.024ac5f16.0","@material/density":"15.0.0-canary.024ac5f16.0","@material/checkbox":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/focus-ring":"15.0.0-canary.024ac5f16.0","@material/typography":"15.0.0-canary.024ac5f16.0","@material/touch-target":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.024ac5f16.0_1666046616569_0.4643807685011505","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/chips","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2637cf08ca39d887058bb79af71b0289c3210df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c8bdf6144.0.tgz","fileCount":163,"integrity":"sha512-LC8ZD7Cga7dtIrIXKocQ3A/ZHhahgxgGOLNJqx5LVzzdMh6a3vIFa0+qiaA99M7fBPPPoa33VjZq5B2NCFVZ9A==","signatures":[{"sig":"MEQCIAinK6vsVrewq3amzRVP2bJ4OuZX9pvmTCUMiwBdHmAHAiBK2tSji1+4zRhbg7hqIFGe3yfsUcvhleZsJQ/t08w4EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu9oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzNg//SS9rzMxW2Gomkje37tMWXdydMOWHfCMI2g1aG0/Sdfr0X0VT\r\nwUok+U+AFaB/bAUSdyCKyGJKbyVO6onHLrH68Pt3OLdmYU731Hxd4DiJDRBX\r\n3b/wUaAUjNyMrn1sySWZI+W6Fz7p4tcPWBOKzE2jeWHfkX6DGXDdF2CHqHvB\r\nYYZYxkz3uoBZHCLaMSl9zyfy68Mj5AEIbkKX07F6NYRlXG/M4QEaTx+wA48y\r\nz7Pzeak76HItdOi2/aNjC4saBH09At8lVm/LE670eKXxebcY4D4a0zoDZHf6\r\n/uXVM7wBu6XXQksayx9u6p1/yjHCtPaqC7TH+MpiosGMGriYueBv/6HnLE4Q\r\nu+RF11IfoDhHdzC7z5dfrS/tX9+TOSTYqig7/OPovSTJv5NF+mBb14FXeUen\r\nJEMaoYutpfuStWVinrUMllsEb5OuGCRuuO66CMNjydb5cukNrMHG+dpDaKdm\r\nj/0cu9da5q1SYg0VqGzLBRQQPoMI2lm1NcNd8ypNBEbbzztlodFVNvuJDMoL\r\n8QXhshPFgdZPv3NQKC9dIs/5pxAxdCl0Nbx4v0OD4wcLmCqRiweNiZq3DWTz\r\nfmg4H36Z+bo/QmKDimWACEj/TvxbawMeBcFjALwO6h83ljmf7VIFuQKIw0vM\r\nxRKj7mHwXbohyOQz8ewi7dvngAZWtETpWxM=\r\n=CaRb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/tokens":"15.0.0-canary.c8bdf6144.0","@material/density":"15.0.0-canary.c8bdf6144.0","@material/checkbox":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/focus-ring":"15.0.0-canary.c8bdf6144.0","@material/typography":"15.0.0-canary.c8bdf6144.0","@material/touch-target":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c8bdf6144.0_1666117480686_0.4825233275399414","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/chips","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.bacda4885.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99fcd52aeaf0dce41273e5f207b2a98909b8b612","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.bacda4885.0.tgz","fileCount":163,"integrity":"sha512-f5+mQ6kL8YKx3OxL6BglOnSLZibxxw3t4+J/Tk83SjQplcxEnW8dudpuP6YLDqBMGufX/wwBFPODD2WwSUo0IQ==","signatures":[{"sig":"MEQCIEexaWYovmWKOYn+kC2dAE+JnZGd41ID3qoZkAzUwjNuAiA0ZEDvNWztk4vtUg9xCxwRZIQigG6X7qfy6jyCVSBdgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvPzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZtg/+PmC6LdBJj/6PcZODfEC8I8AFEZFYBDws4zDAI0FUcd8tRq5f\r\nRVf70UYh/4Su+wK2gTyZktJ4YgcI0m1sBwYe6Rl+Yruy+3ZYyciYae9htoOK\r\nQBXeqAj2sZFCqeP/u/Ge79cS1XOkTZHkWDh9y6zGO9vj9MmNwPpoNl8r3qpJ\r\n3hQ76KgVmQD0Otxd/9KsL4iCw7WtQXq/siRhST3bR0imLtdgotBj0IPh1/JN\r\nNahNbyF1NmUlFZGHjqSkPIwTjK/GAH2ceMI+oKeR3vfgNHsXmFyvAsbbeDxG\r\nwhvJMjJKGjXquMzYsWbHl2JbbsgpnaWxNNtcvuLDFipHZ/5ohGz7CP4KHdSk\r\nUK6eQ5wrLLP5LRnCAVJZeKTMwAc5P4bTOjDs2RVetamNtKTRGkyu7Tw70bKH\r\nPzmDJBxk98Np5/NFazXcZhYQ8nFKI/4+IjbNVNj4ZV8Fx8hE1jueiuxdt7N7\r\nPFs2rqzadsonoqrvRIqB/g/4voPd1jaAsWIhRaJFaQaUXO1RKP73sUizU+99\r\nYS0IxDZqzXo1brBsMSsRGuaxdfFBDHvBxyCmHdg2/YbMoYsuhVAei5a8YeBf\r\nEV0VC00DhwcY7mUSsUQVuFbFW5JbzWn6RlepdqfsWVtkfnwRIdOvTzIE3tRv\r\nmVnbUkr6uZhMbTN4gGTRikRA9l5bZTK+hf8=\r\n=c0TU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/tokens":"15.0.0-canary.bacda4885.0","@material/density":"15.0.0-canary.bacda4885.0","@material/checkbox":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/focus-ring":"15.0.0-canary.bacda4885.0","@material/typography":"15.0.0-canary.bacda4885.0","@material/touch-target":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.bacda4885.0_1666118643518_0.990410384328491","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/chips","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"357ed005cded5c25dcc8019c29c0548b42143a24","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.92b2556cf.0.tgz","fileCount":163,"integrity":"sha512-cLiWTIsFf010prCQlHwQH5fjWa4PEl1EFMemrrMGArl9se/noj2JA1GPICmwqLUvcRI8i1jxjR8UBNBV46cqPQ==","signatures":[{"sig":"MEYCIQCwUeWlQpeu4oTWktN8QSE/1K+s2v/Hs9oq1Qp25r7dVgIhAJwIRM6HYLB7S5Lwxt4d4KiMlgo8HfPDrH2f2z9Lh8+Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT09+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUWg//dTulz7jxUM747LmW+gBXAFdc7TUM5TJnXUrIuZ/ZRHmKwx+C\r\nRKIwlUWLo/JA4w1eXrsME2bgtuhc/+kqEACVIVHrppGs0tKml6b5GHmWulky\r\nBVv4ZiM/Sz+qAKWAT1R5/mtqR1g+ijYfNCWDOMYRhKhhCdiLd6fQJ57rHCJi\r\ng0tK/p55dRlTn6yQKqMp5CXwvcKPeaujSd7n0NIXjtXyq4iSPmFZ3VmYepon\r\nFBd6wrYiJnWgU6Z2Xlhzm4Y9Ym3FVZl08JUgGgfx3uZVAT2Q5IahKEG66VH2\r\nvCr2TJQbpQHP4RSFZWTtE1iKaodpDbWVt7yr06c9lpsAde7W26xZ4E/vyocZ\r\nSqCz3C4YjqYQfjPBGwl6XDhbTuSKrrfHt88nT1qDsKa5fdoxtbylQnjvKJD+\r\nNLdAqkK5a3rsZQddGM8fjaNAGLXNUGGE9BlcppX9fORflUGZAbJYxQ6LCvIG\r\nyRYiG/5sQdg0WXXes/ie+weWXN+SKLaTgY4UU9lyF3XXdKnVMlwjQCE3DYkb\r\nncq4UNgTJaACx/KQbWyZz5j54SCVnKA72/58o2l/LIA97uPN0zXFoJ1B8DrK\r\n5TPiHIpWITLX7j9EHJIAw43hgsfnmIyvi/CXpgAeEoK5zVyYBS+zyMeh45BJ\r\nkdFUvNS9SCqHjkcSkVeX1tCcP8DLKlF0e/Q=\r\n=p6Gv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/tokens":"15.0.0-canary.92b2556cf.0","@material/density":"15.0.0-canary.92b2556cf.0","@material/checkbox":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/focus-ring":"15.0.0-canary.92b2556cf.0","@material/typography":"15.0.0-canary.92b2556cf.0","@material/touch-target":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.92b2556cf.0_1666142078596_0.7389273185761449","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/chips","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cc804509a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a749b783c8f55d9f8f0715ee42ec6bcdbdb166dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cc804509a.0.tgz","fileCount":163,"integrity":"sha512-Rc1+EQy+CbJJF2gKLKDIzp9PqBbvThNBJt7KG5BvC1wX59TC4UTX8QjMLNmCt0yPAo9khjoEqmA6DQEWAzPYhg==","signatures":[{"sig":"MEUCIF8hgZHFF1Xqp1nDyzuV9yzLif9X/hR3DBOCJ+DWRNAJAiEAm9mgwSXjO4wZKWTLC946p1vNZvCDdL6G+UMjlesLFgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1BfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOQA//QtuuCRKLqyb10aDZF24L/Ev7hDKjGhZKI4kSZ/5t/4kX0Pn6\r\nCO8KwK+23lpJ16Igwo5CNaM6EEqCHfVjMYj1uRFcdTRdfezwII32NuvWH0dt\r\nMR4+QPrpUKDevhR7vhZntPEhCOnsL49LW9bIvew2hKWlVhpEe4hRsgP3o9dK\r\nL68dkTAZ+j9f+q0d4/fjKlMM0MP+8d8O4w05o80aqn5HW0+xIiDfZFLABAs9\r\nkFC1osJCCfKmESF4Lg32Mxt/9E0FT5znk17SqCrp+s57WABa/giZhSBFefYU\r\nCGaKgT3On4HgOIuDx6m5fB3sQvEcDzedtuEYX+nt1Zd3ry8IbMzHIaX2zYFy\r\nGbtpCXYoE1f4td0r5xPNTmTsNP4BPEZ0/AbtV/MXYUjt+BpbRFJLerBohVeQ\r\nBu35f6rCTJZbIP3KLZ8/LtFN0bXV0imGkXkTmVZmERzGM16nXmDUepSJhbY0\r\nJz3V3kKu4wRHdfbcsKKFYtuS3BsDo6atcRXbjrNhO4RIbGDmGUsDHBhOSclX\r\n8mrsi4z1ZqbRTrzK2HF7sQSNu70zMWW75FRjFbilTyu/7iJEbKJaUXPDaofP\r\nZBdkcLyFk6O8fjbvdi2EAoCKUKxkoqpeZdgGSCjCH+kJqQZxamnJWNidKT36\r\n3olJPRREP4QcbEXFb+B2BM7xn3WDNB8WaIA=\r\n=T8Cu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/tokens":"15.0.0-canary.cc804509a.0","@material/density":"15.0.0-canary.cc804509a.0","@material/checkbox":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/focus-ring":"15.0.0-canary.cc804509a.0","@material/typography":"15.0.0-canary.cc804509a.0","@material/touch-target":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cc804509a.0_1666142303358_0.5502332739945366","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/chips","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.982bedae9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7abf8a9cf5c8bd5833b5441ffa290f55235a3c88","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.982bedae9.0.tgz","fileCount":163,"integrity":"sha512-S809MYNq/mZCjxusY4wSsO5rdW/VWR8blcO5upZp6CawGxNCNciELPNvsk0MHszrZBmIIAjV81WdpkDEdiA2kw==","signatures":[{"sig":"MEUCIE2jdrq1IozymfCDwGFi6wprjONIcRoK32nMzimau09mAiEAldfqtMZFQ+wNiqV5sgtAEVPVC6ukBKgRqLPeriOWSvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1URACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/LhAAmvfHhNjD1W/1UjMsLklHyEVvtGYWTwEQEAUjAQS/DxVcP0U0\r\n57meNPNrdf2JFM3D8Z9LEnLynsps1nINgeSADeBi5UTLtei990914cHlk+it\r\nsi/pyGJUWCXToG0SV21nYwEfEe0NL9VmzpM8nm0tgAYZf9g9Uy9NOx7c8xBT\r\nHmK8Y5nw3ZWsAn6RwBDqV81uT8F9D9Rt3coI+p4Dy+shsdmY5XOiQlq6OV8/\r\ne5mU2RbwBMDrw7h1Gnv0n+Kw4lMgprz+3FQ1GbpNywlLt29gfJ23UQ2dXjCB\r\noW8jBlkoQb0B13NKmPHA/lsdVM+BSA39ceqx3qne+VAWLcUUut4DkUSX/Vdk\r\nAqrl+egAE0r/AfL9rduY9eNB4r2y2T8LbblnsohyQVdkrcL2rmdr2yau16yr\r\nQBk+X5Bv79RaaZ1UfwLifa5y2T7uZ9s+Ls/pekmxXhpCa8xgvSML+in7iJ32\r\nWUgY0/3Tqi4nNrFCc43y0gZiLiQ6lRF2fwc9l32LoNMBHbu+2amvMKQjgpTk\r\nSPUcVwp402FJyDlApkpzfv0AsEwad74L/q+r6XunyFlTe9CddZ3HysMx0pVQ\r\nkuU/Rpoo+Sq1Nbh4CnFH/fCr0EJT4hCF1GPY2CaH0aTnqsmW1HnmOwn1qLkv\r\nhD+Dr6RtFNshRxYEw3RYMCdXChPWlxtH/wA=\r\n=yy17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/tokens":"15.0.0-canary.982bedae9.0","@material/density":"15.0.0-canary.982bedae9.0","@material/checkbox":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/focus-ring":"15.0.0-canary.982bedae9.0","@material/typography":"15.0.0-canary.982bedae9.0","@material/touch-target":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.982bedae9.0_1666143505368_0.24087558434701162","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/chips","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b4daaa114c38ac4244873daa36d051dd8b86230","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ee40081f4.0.tgz","fileCount":163,"integrity":"sha512-Wq3dMQNj/dut2fyjlEYU48MUTgLd3VKuHrKsuMjGuvwN1bc0iSOAH52ZQDPXxVUXedyXTHGP+LS5uueZ9/loiw==","signatures":[{"sig":"MEYCIQCi0uttsd8debxqimXgn1mEEttNq8ferWMundOZvRKzmAIhAOiWAiM8HAiWGWhnxkEnJ+gu1K8AbI4Qgj3h9kbzpE+J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFpUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxjg//fRJsme1bxa88jjA5O1Q4R7ZCVLIIvHDckhIaiGXKAtBgZ7aN\r\np3E/Lj6iPz2UVgbJ5C9shaugLoOnapF9imPwRvlug1c/oMwnHSyhRupObO2J\r\nG3EtOM0qhl/idJTcseLND6/NZcUAUwcYItGkYKPbTP4qx1Kc7hgFDrQvyTKq\r\ntv3ScDXo9impkdgTAHP31SJWDWY+zMWfSFNrMt7H6rm8hOKI+5CWyDmgG+qT\r\n93emvaLObAJgjEDUOn3fXRiGIbbiezBbJtMmspwCvLVyPJTQRgLAI7PkdFal\r\niFd4qLo2MYKLgUYqBco7WQF4Ca7D6JNOaTolv9/qCEINxzLObuosblnCNTYB\r\nrv1MzAWQAl/Fo67FJdlNldqge6AmBoDXYP1xd24hE55NsRw+lfjEFr+s6qhP\r\ng9POJyfdVfQ3EY8A2oHNCiv+QEaV/l1NUMkgUptElKpAdqMXb2XHSXaEUK3S\r\nGP3oA08gIba3sdJ7wKIBdEzUs+ouUDboTBV+6qvSWa3HoUuAbLU5o3WulRbZ\r\nND5TDRBowVx8KF2nvV0Z1n8G3xOFThgT9XaSuAknutRTeAWx3/frFCBerkaX\r\nOtV1rI0aFvGRVQRrxc3S15Uu7bJaiuTNYcgPVhTYm2zzBEN89nTMP3oi4jzZ\r\nSg4+xrKJhlj+RDQsXm+lNz+ULvQ/OeAxAAY=\r\n=gDrq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/tokens":"15.0.0-canary.ee40081f4.0","@material/density":"15.0.0-canary.ee40081f4.0","@material/checkbox":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/focus-ring":"15.0.0-canary.ee40081f4.0","@material/typography":"15.0.0-canary.ee40081f4.0","@material/touch-target":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ee40081f4.0_1666210388407_0.14101832963005934","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/chips","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74292726bf2e19207dd9aa4a837a7887d55c2824","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.98f1b54e2.0.tgz","fileCount":163,"integrity":"sha512-f/X+Af5UxbMiX2eh+AN+pe19pVvFv9ZvPLkNYRknUNVkkk2gYagEyuBWYGn22YFkZE8zAI2MFeaWuctKJ5FEFg==","signatures":[{"sig":"MEUCIG032NLwZU1Zh3360j6JIs9t3HP6Wx+n4mWbyWpitaHrAiEAiSgpDec3Q7Wr2nyYYeWKTk1vzcX3emg3jNya2uvCDrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdJ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe/Q/9FzeJwFUZ1SRI+3N6+o+SlXCudQTMbwvEymRu06kttV8xtrie\r\npwXAW6c+vsTu7+QPbl7cNfC126j5m98IeVFphRom5E/rbfGR3A/GrDWlj9Z1\r\ngkTVdWD8wDvVPipwiVuMYjNic68v9bMZhOirGg0KhHt8L71d1jApWQSKE66f\r\nYkxGAfF/ze8gakYZcFKefJITmHtbxH4N5rIVkNF1aeHh8ODQkVhkkcdWsXX5\r\nsQrDDZEB3fo8VEmxHhiFImuDbN8Wd3k4rsnuSc+dQf96UrnKHTo9yGp//IM8\r\nX7btYA+pyW8vhbR/5pUyME1f58jRaPXzu6AACj95lPFgh5c/aEHV5X3LICdy\r\nV7Qr3jLJZfbfC/9qI0qc9ziBnvjjNZBI1FZn+Pwveg6TFHrJcyWPt5i0Dvqv\r\n73xRVicFQPZsSLjbXlkWEKc8qGCYr0Dut3gRxa9+KQN8f4W2lQN05i7BIGzk\r\nlnkikwxy1yyuwQOT3lYl76HA0y9gEVbIAqh3SZnax6WpbRIHVxaB2LszFIp+\r\nsJDo7TmEFY7pJ1wguGjKpnzWq9E8xRPBVq4udcJwxtrX6ayLy2I/VRSmilaY\r\nifwx8nbQ1CRoi9+kbK2ZF+dAbfqAZ35eIrWpnAIiBvmv0nb3EnBDoJISEjXI\r\n3jUdRb26ZqsGPOuSL6HYr4YYAGOPOfCxGQw=\r\n=wa4r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/tokens":"15.0.0-canary.98f1b54e2.0","@material/density":"15.0.0-canary.98f1b54e2.0","@material/checkbox":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/focus-ring":"15.0.0-canary.98f1b54e2.0","@material/typography":"15.0.0-canary.98f1b54e2.0","@material/touch-target":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.98f1b54e2.0_1666306678876_0.5277858151234931","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/chips","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca1aaba4a0dde17bc2aa4c220a5cc73e3a6d3b45","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":163,"integrity":"sha512-nZlu3JoNtr/faFDo21Gwy9HkJsDny/0okCI/kRnl2f/vZ1R4WEnDlis1EP2zuIz6hFw1jMJ5MgZ+HTg8eBwPAA==","signatures":[{"sig":"MEUCIDooY8o9A2XtGQSRV0jZFe3LA2O0h+tO/q35+WAeISjLAiEAhPKRy24k7YZ1V3NBAuLM7kTLwLxmyM4MnjIcBhuL2PQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtG2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG7A//TZKVqSb3XbLkkKuTJXBTHBNUf8wC3GfRSKUZ4JtZvkCJQ8qC\r\nFoGiqlE+GVt+6sKUSiNVdqs/YZ/11Eb7Xdd0QClnzfm3jxAqjBj/mS8yJA7f\r\nnc289qNHGvPKxsv4b6mVlSjApGGEB2q4vh39yGXE8GjEiPIMb0HI0PS8zmq2\r\nJfFe9ZA41UdaTN6Da7kRTKqieaiJUQajtvfP+B7bUHFybkK025Qrl4g2uuiS\r\nCdxFOf0REoyKY5G9QlMoa54W/IvydfWziBpQ+zE9gPmoFUmCK9hHcIlNSxMs\r\nkOIV6crn4xK7UyzPFkJQMcEi7IuCsMSxeFNIqUjxHP6rP1Hx/9zREQhjeyme\r\nazurxp8w7YVefUjQ1xjCS7eD8ojCD1gw7Vj7y3FZv5kCXJK1zsikWRmDhzJj\r\nkryyJ/Fs3ed5sF4qQxU8gD0+4yIsanIZm5fyW4l/662j7CsHFfZEUJn9bwjw\r\nGK5PO6zSttfH2tg6xDMSffvauENlhdaiwRYNmj10hf4E2b6a6yZLKzWY6s/b\r\nShq262xewvz5Qok9yU3dy231b39je097eddbVx9X82Ls8qRr5BnpTrYnRF3P\r\nr6GA0cDDOwFQKW/zVc03RkKMdeajqcrxCC1H/XBQ8/FS1QJMptD2xaoixsrC\r\nMdgQTjabaRtcxhrCviWfKsB2UGsCyfpB640=\r\n=0Gl2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/tokens":"15.0.0-canary.e74b7ba7e.0","@material/density":"15.0.0-canary.e74b7ba7e.0","@material/checkbox":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/focus-ring":"15.0.0-canary.e74b7ba7e.0","@material/typography":"15.0.0-canary.e74b7ba7e.0","@material/touch-target":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e74b7ba7e.0_1666372022501_0.8828444561488122","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/chips","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b02daa37a3177b76b3c1985a42b0285c1bcd71b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ab55c07d2.0.tgz","fileCount":163,"integrity":"sha512-xukPW27eAvl8e24vVlDhEyfGFLIYTnZrbt1qtSLepLBIhJmlWN//wWAocrJQvy5B4Kc5cF52G9RqGfDO10G9fQ==","signatures":[{"sig":"MEQCIA2+RL+XQTOZ+MBj/G3Q43zOVVioEZO35KrxQx9/lIKbAiAxyDBNlpflcAzictmGGnWdXSX+Ogawac5ITvyPLInRvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDRnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwPw/+ILuri6ULtQK8h/ZHH05GnHfFsY2eOoRQgFe4EqmLMByueLja\r\ng4TWyZguQ6d8Tn0Gd6nYG/kM0jJaJyRFgbpUDpyR6SbcyHg8Fqitumz/ybkb\r\n9jamrgJURxrDzNWr+VlHhUlPUDC5d7wy1Irtsc/TEIbpiUnDkzf97UpBn0F/\r\nGP3WJUAvAxywAdX3d9L5xpW0L62d2W9vASzGFkjuqG4yCEkVVyTJrpCY88rj\r\nb8g45sRh9smluLjuFEtEQ4nQ8AiWKoqZ51iB+h+3onUzku3VRbPyQzgIowm1\r\nBSVUvTnC2HG88RYrZeesSQ0AOotl+wpNQ/tf4zIq1dOi6/b9am/VGhpoqD/7\r\nGUZie/LigjzkEnneXQ0ADlfloH0+vdQO7FCnBU/JyxNRWlTFnsc2XkMRwyvW\r\nxmUh3XAa4ygUNo9w+IcMIxnj/usWVERmc91Vc1xcjuwczO+vGgYrhXvLbjbi\r\n3S7SpCybjOu+q0AZEc0+qZ+R6WRHrrdNLSvezCLUsyWdqxfkjUrQ0lHZSlK1\r\nSLpfBmLhR6EjjrcDk/VGW5urHP/Y4XEsu0sm+99B3WlJJ5PyzvGrVo3baHzw\r\nE0Q9rdQvUITSR1Dzw/6bORXHGRWUhKeW0yrXOwIqeB0G8QDdxSOfc+XpkZij\r\n9HNnHPNfLQ4m5AH028D0rUzgj06h/dW6Zhs=\r\n=KAOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/tokens":"15.0.0-canary.ab55c07d2.0","@material/density":"15.0.0-canary.ab55c07d2.0","@material/checkbox":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/focus-ring":"15.0.0-canary.ab55c07d2.0","@material/typography":"15.0.0-canary.ab55c07d2.0","@material/touch-target":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ab55c07d2.0_1666462823203_0.7781822918310772","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/chips","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.fc539db34.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5298c2a07db338cd4ef5dd6250ffe962832129a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.fc539db34.0.tgz","fileCount":163,"integrity":"sha512-JyG2Qb+kwY6JRbozgGRu+LfdxoyVi2GakhVdyojAhATv480hzXSMZiQtRqy20CDt0yISrclo9OHMlLvHyhB/aQ==","signatures":[{"sig":"MEYCIQDZNs5vjKVmwo4CuN/v48YCaTrbXtDTiMxeISiP49L+6gIhAMGIhdQ3mVeCfTHvpE5nYmtuSMOjw4RPYKx5aQPz/r/P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuDKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV4g/9GclbsRdeSVcuT8/yOSbKRHlfqRHEvRNYaoNei2bLgMSr0zDk\r\nsMtdIielqIl5ths6eMQVzyjvMSJAV4EhfKZ3vKQwRFLs7AqJmPrtbPSaLDk8\r\nEK/e0BPKNdNd53uHFub4vHjWprZbccoxFigAk7vjk1L5uWaPBP3BcHDXdJY/\r\nCUf+88MeI+XXmXvesGUP1usUyFiENM5TBdXmnolm7Tk/GR2tf1I78zlyWLyb\r\niO5SGx7/McwkqnUyuHXia+4FaUerdHCIoDGfRcFhUHi6ZaXUcCteo2fWOaNx\r\nPN5N5ryIzAzli1AfHd4DPQKBZ/CuSmi0JiUXoZ1I22zv/569GKXo2M5Z9Y3H\r\nLnSUmZDK+YUvcoeGg0/YiYsCCaT46cSf6IpfY6W7cGREWST0lgEf7wWmHFLR\r\ndCdU+SJBjx6UJUnddaXzB3/wmSi3Qpwm0Uj43M7+GSEuFVVoZ1qa9PcOXwVE\r\nNhSfYkxuVSNdz1VF3SHn4ctP7U10U4oeHVuXmIDGstnx7iqrseXP3q4EdC2f\r\nuVLgYMMX0UFI0B43pOEyqPbITaQJe90GfTwMi7gvVyS4Q+kFzFU7a+RbaD98\r\nKWcmE0WOtV8v/K8OwSMFtDKUkPnMGPo5XbF0ygOL8hxhtMK8a5HvxmZ2W/ZL\r\nYPAEzpjHICRJEg1dbj2mwOZLj/lDxcOzeZw=\r\n=AySZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/tokens":"15.0.0-canary.fc539db34.0","@material/density":"15.0.0-canary.fc539db34.0","@material/checkbox":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/focus-ring":"15.0.0-canary.fc539db34.0","@material/typography":"15.0.0-canary.fc539db34.0","@material/touch-target":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.fc539db34.0_1666638026299_0.9380083227697733","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/chips","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ba8689948110f740862a9b0dafabaeec1b7331","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e340b04c5.0.tgz","fileCount":163,"integrity":"sha512-D6P4iHWWKHQpOuPwR950012S/PiyyffvMG5+YQ47wsB2LvhKazu2/0YFqLt20TTAHUCD3uxsgo/oQJUUI6RuDw==","signatures":[{"sig":"MEQCIEC94LPtib6KDSD6dV/cRrykypoq9eXpSRGiB+mB+GJEAiBiyCSmCrPqqHU3gmkCBHUel2vKIF5u6afo3Rd16sI4XA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHVKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxKw/9HKEX6VTLzxGXzHhYTpcb1/vQqEb0aqK9vEnPWsE2IoGP1ViP\r\nF74iM7ZsWUkNPtTiCZgEuN0ZcQcijGuOXoT1r2eNzi/isEh9Z9MQh/nkorfL\r\nUs3n7X3p+BvmwQl0nXWOofoKmfM1LeZs9iFtV1vOpCoiuHqKVt9YCexS5RZx\r\n8KQtJaP06jyDOv/PQ2Kx0uUiFjkt7jUsQ26qbRcgHINvkzpDJdF+YRi4cw2C\r\nKYZwJqzt/szZTUw1OynI+VhAcZLVTvcGiT8kFEvp2ygh/d0FmAs7LUxsfcYB\r\ntTPA+MmxS+qDycJcyHsp+KVui6l3eiFXh/uz/1+6ndROT8cxQF274hlAvr5r\r\necyv9GpzFcZTHbTLw3zUwGMGgYyYIgbjQ9kQZCdc7P5w9ipMucS1qlx16vBj\r\nVEIofpOurSu2Lmsm8kY7BMoICFInMoYaaadZMguEPnmbmH4UwQBWjT43nzQR\r\nL4m+gNWTvyx47ZFVz19/deaX0hhzUdpg99uDKAvlv3Td52iNoVuYYM4d2kwA\r\njN3H+LVYCypUfdfObNaEOi4I49DVC+zSlcpWogiGa+qPHXfM//+WWrYONF3Z\r\n8KDw5HBgfCsBlCZk09+uVDXz91+UbTwnklJtgXCNYtDU1Ie8RQxU26iOSCJo\r\nxUoQ7IlLGRY9vxew202fgOOSN8BYyCVrIWA=\r\n=YiTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/tokens":"15.0.0-canary.e340b04c5.0","@material/density":"15.0.0-canary.e340b04c5.0","@material/checkbox":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/focus-ring":"15.0.0-canary.e340b04c5.0","@material/typography":"15.0.0-canary.e340b04c5.0","@material/touch-target":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e340b04c5.0_1666741578063_0.79500192119407","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/chips","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"914e77c1522a50ca1dee3f6b7ed93af2f7adac95","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":163,"integrity":"sha512-e8lLfqMWzSSMPV5QD6vrvNsJJtKvF1SLoJxqF635CWBA3uDC7JDHa/42n2hbMaRMWKyeFPMfu9TDQNH877nIww==","signatures":[{"sig":"MEYCIQDRC7W0cKuW04ijW0ov2Pjf/GBxaw4vXljksamFPoRLMQIhANUuMLnzQz7JYOsBn7l5zA8Qaukvv+eY/QRlayMu/tUE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW8LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLgRAAnpiCUUiC9qLzGKa5SVxpzN8Dkf+D0rJJOVDtcjrOhSpI1rS4\r\nlGGf9xpHtuQmqqjdhER6uFIMFWwlLK5N/oR3iWOJ7uUDRWZIzyh/fSpMjz5s\r\nu0G+RShh+1BhOjAe0HFlkTQvsYZbWHrUIwHAMCmHhfWj98v7omubFbmGPTh8\r\n1l2OrcN2WcOruFFkTNYa/gi/EDS56++AgOTp0wKrl1mfWcLo665+Wde1nIWi\r\nIbr574upK1mf6HCbpQba6H1T1BR/rVbYnvbyf57O5dqCj6Luew4lJPma3izb\r\nclMCDL4xkCt+rLovXMNGXi1pINP3Mo/ou34zRgkbzNzw51FRYqwUHvd3zJgH\r\ng+KiyTJuqmo+XKU12xeFw5s3JvPbpC/DAj8Aqw2dQ+cBMIcooKkL2e5OwMor\r\n/7sJA9NozUWpYKc2wziA71bDEyp3zm7i0anfezlx3oxAizKTo5zLJFnAI173\r\nMxT5eQ14jP+u19tMDsPDzno0gTthBV95ppojTpoO0+uQomPs+8RguWAAwjC4\r\nkB26cGT+URRdFcoli5fqEKzQa9aAvNM/y8XayMwdOoXBonFrS6dhglCCoGoq\r\nq97xkavnz0RG4347StEtNSZDGhtIacJmsBkX1AMe9gHu7KVJR68oPhZm4UP0\r\n4GyerwGmW0PcgfamgOGMWYHv3LSKONJ59a4=\r\n=js/7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/tokens":"15.0.0-canary.2c1a8f8fd.0","@material/density":"15.0.0-canary.2c1a8f8fd.0","@material/checkbox":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/focus-ring":"15.0.0-canary.2c1a8f8fd.0","@material/typography":"15.0.0-canary.2c1a8f8fd.0","@material/touch-target":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2c1a8f8fd.0_1666805514974_0.6211842939180738","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/chips","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9aa3add4f6fbd82aa08b8db08a948ec97351e3d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ecfee946f.0.tgz","fileCount":163,"integrity":"sha512-iVEAM7I5AD5nYGdD0JeSkT66b2vLWk2TaH+DElwTNoURE7A6llRcWPYG7muE6+4AbWOXAI491B+qzAQqpJJHnQ==","signatures":[{"sig":"MEQCICeu+vsX+cJ/3Tz40Nj25rxlqIh3PWldqUNWV0uCvPFlAiAjvQbNwHJiqfvZR1PI6+0R6DdViFuRSq1FciPLlgRjFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZWnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqneQ//X5pkRIv3QVgrhPDobMr1afanKNIcmNmnf6F377sha+XYV9F0\r\nzsOiv82rDRrsVDpo5FY+D99MoLmQhfyszBuHuF6DqQC46MncYix6MUBO51hM\r\n3kFwJwWll/9SiaJ0JrUQow0yuN8/9KSBr3AjC+uV0a0nnGxeHvLApe1PTkRB\r\nQMb606eczmgBysS3ih+Zp9VL/VF0UIfseSwT+zRKpbnyUOSuYGI9I8PTsrof\r\nq5pzfoNa1EiEWSo11lw0DRGAC5751vHaWP8GFaHsbsPLrfZlCIClObRIZFkS\r\nwWeMOBk1eLoxpXP5axWGsBF6tPQxecP4YvJaop0LqKcX2r2gcKeQFMwshhs8\r\nqCDei0dN5YmFGGF9Vnl3S1R1pcrl5j6LFkSQBqXA4qsT3bBX5fqbVb/EODTr\r\n+DENe159mZJngEkoqMqFfEjFAeMgq2oD9WpNQnOkYAsr6qZQfYTEiUufhkl/\r\n+Ab0r35f06DHQ0qm7tNSbTdNl6iMOksQLaWeR1LodZY1slXiefDkQyE1cNmt\r\nnK0QuCxd5DuT5bgDZs91n4J2FcE4lvbBmegBlrO7nkob6KOESxIQJpiwQmXY\r\nQ3oYh2rBkLc3xDuO0Sh1nj6KndrpgE+Z+ePkoLcDaX/bFXg6WaIRrBmxSGlC\r\nuI27/bsRfhVOcB0XdEzwdjBZwMWL2wLgQXI=\r\n=bbFb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/tokens":"15.0.0-canary.ecfee946f.0","@material/density":"15.0.0-canary.ecfee946f.0","@material/checkbox":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/focus-ring":"15.0.0-canary.ecfee946f.0","@material/typography":"15.0.0-canary.ecfee946f.0","@material/touch-target":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ecfee946f.0_1666815399204_0.8815933991817624","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/chips","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54aca21d275fda2f24aa027173404ae075f4fa3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":163,"integrity":"sha512-GTljsZC9MogVccFiP8MAKM+t91UAV+fv/tdEbDb8iJiTMs7JRsnJwGG2+NJKsWyIh6I73sPI1uWDbWMHHNFRMw==","signatures":[{"sig":"MEQCIFdOz/Kh9VvcIPh4TCzjHrPacegYMxJhCCM7ePuo4wkaAiA6FzDIw5N13rYEEy4D3LDz7IEIxxPQZAOLr5WQM95yJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAb5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp93Q//YYTKMBnX7jX57nysQYACuTuhwIdc2Nh1L9zwM3TTcH6iM1gn\r\np0R3yi+omGdGv9qogFI2jet2plXSKbpPRfuDagxv0LawTl5z6uxEzuKNvtPm\r\n9bbgNQFFt8u2fx6yh5Ol3Ho91EwRNFi4tLZFS4WnMfj4EVFC1ZA2KZrYS9Yh\r\nfr+0Hv/9qIaH1PX4cimc7jrfV2x3ZF+Rttzls8zaAr5au2MXIjr059kxWCxg\r\nAufj8KhU98MRM5uLuJoTxlzFYOBAng2oZJAfB4nrwgaJAaRlmt5d6idbFXq5\r\nwi1UJWRQUT3XFExVqxrDM8eNNqEsA1Gab6ohOKmbK2CgNG4bgH4E9zgzZHDI\r\nz+aSTF4/WOijy8rcA7DbnYIhDmuwOuYZoFl+480vL38HXNkyUkDa1V+wVKUz\r\nq+74bqqxG93KjB4raqhxDH7kmEvjof+o/h5BY9x1DXC/eeBYO1N6CT4funDF\r\nZsx6j5WEaMxyGil1vEGz0Br7zCBi5HlJ58GeUzGiEtxBVvVXtQKUzYuK/bFO\r\nCT3SRHlZOqrGWrvJ4jTeTXlwBqKdQ11OHnmAMaCpqOL4LXTbvNM05Oy/9FS2\r\nr8Pr5vgEFyx/+Qnk3NSkhWzxouDNf5zS522GhVJbLWXyBW0e8eWCeuuAwiW2\r\nsT4B3Czmy6s2UpRI3GE6jHl9Aq+aLqfh04U=\r\n=kfPC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/tokens":"15.0.0-canary.73ca9dbb0.0","@material/density":"15.0.0-canary.73ca9dbb0.0","@material/checkbox":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/focus-ring":"15.0.0-canary.73ca9dbb0.0","@material/typography":"15.0.0-canary.73ca9dbb0.0","@material/touch-target":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.73ca9dbb0.0_1667237625132_0.9795850077445829","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/chips","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96599fd45076b48746348636bdaf8191ac7dd887","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.357f2e5f1.0.tgz","fileCount":163,"integrity":"sha512-PvXtSHzdNpOR+ZM0EsU0s5IdjO8WL7UJrmNAZhSOuauTNxw10VRD4OqCHuLtT/Vb0IpEKQT6i3hip70rqdsORA==","signatures":[{"sig":"MEUCIQCa1F4nzaupw5fbqtcpCAAT/R8EczI2UZSFckDwyJZBmgIgDCj4RNmmqMshN6GjgAuAVOvGj6udHYOgdCipLVCxmMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBkIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmri3A//V0W5xoW/cuw66jh7ot47K/YJL93K7INZ3U+5KOKrDCfSw2nQ\r\nqH/K+uUqgR2NsPCpZVjLixaJHF2327UtN7ae0rTjQHmWiABej5jQFS0ND+Pn\r\ndmr7GqRGyqgH9TERy/vpD6oF2nh5kmh18KZ1MyNz/5khax9ivjasxrP5MsXm\r\nxxfrm0CJtc/H4EoGZqCKkngfrxn74O6912ZQgv0j3k+ww2ubNs+ZZBwagAnD\r\nE9dr/JBn4AJRa9M25zmLQr/klTlCUFCZCaAquRQG8RX01I7OIbCNut0Npv5g\r\nDvfBeGDeY11IvZCU9LsGGdfOmXVk4CiPJ8SJS7A4jZbdmXpNPlLdFmDf6g51\r\nzFNfrr/osqw8amLSTbSXZtthiR+1ypm4+noLTKlY+zA/2LbrgeCoyzQimIpt\r\nO2EB+bkqxAuMRMDvd+Va6YRH7C0AqRbLVowqZIbLSdM/cI2SQhdmTk4J5wYl\r\ncfl5S/U0WgdhFQKBS+9SktNcwsyVVzQPA0pItWVSXPTXwhY9PjRXsYgR5YsA\r\ntQbxWU8LAZPT1zh/G7cM+tvT50KFXXtAynybjyekEyaH2u2UOgl8dH8kesIb\r\nLp42OPWKV/deqJKECClhFXTn3mSYxPhJlaPelMJWDHU5lDCP46MJeYCI3eTw\r\nlWgrwbASsuSikfmhcN/nOjBBC98O2WSUMVc=\r\n=D9dc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/tokens":"15.0.0-canary.357f2e5f1.0","@material/density":"15.0.0-canary.357f2e5f1.0","@material/checkbox":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/focus-ring":"15.0.0-canary.357f2e5f1.0","@material/typography":"15.0.0-canary.357f2e5f1.0","@material/touch-target":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.357f2e5f1.0_1667242247963_0.7038771068246887","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/chips","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a8ccb2af55eb7b8eb4f92f3b6b5b12447ebd238","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.eb103d4b5.0.tgz","fileCount":163,"integrity":"sha512-iyID19tF8qPHhE+/q2ZFoJpAHVQRnzqSakSFxbYq22FY1guYqwwSJEGO6KcZ2Rdkk6F19cizc/JNHEmjnQ7+JQ==","signatures":[{"sig":"MEUCIQCLlyiD61y4neuUkOragXOaIypvdMf/SjZLPEWYjP7QGwIgaxyYJ+mpCD0sh2FrvCUpYXn6YwL9c00QITx2wZ36M/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCi2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE2A/9E8YRzPFdpfT2oOizebObgHBs4odsk/xXULNnsh+Gkc74nz69\r\nGBmj2+EE+6v/fPT7g2eXyXXRGIFTQuZO9DjTj8wpjdIp+NdV5FbuRPJoYCSv\r\nwa/mBrjQI7zH9WaqohATtXNR1vIlyFf45XM0UTdCe8o0IvBq33JD/perpg1t\r\nZRfd7FhS/fD7vC23UD12+UAqA4j71+XQqdQuBRSI75oITu5NZCY3BP6vo68S\r\nJl++QTeYs9fx6jK/fiSw0kkQyr1DKznBzRDFnBTBSpnNy7QUAY6TvevhG3RC\r\nLqhn9/WOF0sXN1wkWgv6C5AcKsUCcsr0f3h0MbVjMQbNBNshSfZkfKv6Hysj\r\nZlQZG2AknauAGokKrqWupwZBEWSIIqmB9AixB8fNxxHynqSwFsmNX90l9z6t\r\nsMGFkAk/9L3Qdi0oSzVksSDydLZu5bG6rt1CvV+MJMQplEugRX+hU+cWiKon\r\nfwrNFoyBphOTZP46xO6X3gOQddhqAeRNjTP/Um9lUh0JZhcNcIrrhowN/ZwW\r\nblI2gW1TSc3P9vlKCIfzcyGNhvtNtXVt/UiGvoJn5Jq47SkNRjuKU3LxP0Na\r\nalindCzidUK4NOrQ0nv+ZXTp9YYws4lXm7JmxLMeWEnSxuVi9FPl9KrNldnp\r\npl06xNmKjn3vLsxOxB7F11/T7wsjc/5R7x8=\r\n=1N69\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/tokens":"15.0.0-canary.eb103d4b5.0","@material/density":"15.0.0-canary.eb103d4b5.0","@material/checkbox":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/focus-ring":"15.0.0-canary.eb103d4b5.0","@material/typography":"15.0.0-canary.eb103d4b5.0","@material/touch-target":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.eb103d4b5.0_1667246262371_0.3403281823033366","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/chips","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.af5f01223.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30147f1f545e3eacef03dc8d5678bfd4c9a8582b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.af5f01223.0.tgz","fileCount":163,"integrity":"sha512-/zpvu8yMJQd21ese02Kbf6tj1+tUAudB7N932Wf6Wn2ZpKqeLi6ovQ9p5kcTpgfTtyljlz2VLkjkZ6URxSWx4Q==","signatures":[{"sig":"MEQCIF+CGf7qPnkE81qqKj3fj9zOqzHcE+BpnIbQcyaTBsP9AiBrH/aS3Tqx3LX1XHUso5gxllm9mUt0pQEUC+O/0NQnnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWeQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruAQ/+OX2NbhZ3FVk7jHYc19TSwMipKcvMBeVxdmN0oNBdbZu3cQMK\r\n7kewQ4u8MtCorpBx6yQGiwWX7AS3lgaV8vMMAJlomKDv1gevDGwr4J/wndpo\r\ntWhAp5kpWM635VU6pcG3pzRvgy79nU8sbSLrk7P3jhxCAEBgb/5rBo5Fe0jU\r\nXex23lNxIrkMwxtWy2L/R1vJ9bp980E1pV8tW5xa1duhvs4HerLRJTbDfLQG\r\nQSEs9RB0C4z2aJpJSiFrEoSstKvbTH0IEC4+6SFyToiAL405ukkVaLCj7XBP\r\nwNXcbdhhQ7ADN+dzM4xwUvQ2NmtwVGNiGqvwUXPK3jgCCfIBonWpCtwi6KNr\r\nMVSp8Ule4Gn7Tlk7T0ytto+iO8DzQqkAt0eKDR5/Td/69GXajGkwLTpSt7wC\r\n5bHwzzi5RF5d/FjSW5J3N2yImOpJkSvab11vbG/H4bRg+shAoOgYmuURvhc+\r\nEnH7yBoZOPBpW4yc8hSJIJZbar3DRcDdO8YlWVdPQbPAiRZykyuJ3BEnzqBc\r\nqpZm98cXeIL7xxpCJWTIxavfP+abNU3Ss//+MHSX+z7X7tC02VDxh27Atl8o\r\nkhbc5nfJKh+X5PlwVGUeVdd5TamM9bqcDkgDIwkrEilF8XsVAe14/mnZSPJX\r\nOsdVqmPnmLIpiCIBTGrDBmWG1B7jQxpX+8c=\r\n=mSbl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/tokens":"15.0.0-canary.af5f01223.0","@material/density":"15.0.0-canary.af5f01223.0","@material/checkbox":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/focus-ring":"15.0.0-canary.af5f01223.0","@material/typography":"15.0.0-canary.af5f01223.0","@material/touch-target":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.af5f01223.0_1667327887661_0.3001781913126951","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/chips","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.58733ef41.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e80b6f44e1864a395d9260b58fb4560a67cde1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.58733ef41.0.tgz","fileCount":163,"integrity":"sha512-JfZukTn9Sjqn47LEEnxola+hMdyueL6oH69PFZd50YWYEdI3v0XyMsKWSML/nU9+Oh4aFt4ZvC/V562suoEBsg==","signatures":[{"sig":"MEYCIQDTft/YWKRM+3xdw14AFrIVzPU2hZMLbGbwni/cE6f/fQIhAMoRJI+/zeyNlfqtljQioMHF91kiKe1dXAxCJKdC3tB2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrLxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqydxAAg3Jr6s/jvgUTV2qvqBik37s6wDNSw1xyuQpgJVgzjFmOSScH\r\n67X5aErGbuBluAekQuRcmRPhNVlq16W/WMsYK+PAuZNAj4Cpxzip07X9vkHc\r\nNU/lHohTHuB9BGhIg5JqusRdGJeKVZfZaJH30oyGNPHYQ1Sh7eXJrqHPtN0f\r\n8tCWvQw4wVZd/6xB+8lIMrBbjhKkTGrU5fu8PWr7vDQ9wAgH/r40P1dd/tke\r\nZKJ9F0hUViF47M0ihZbE54ZjJ65rtATbwQPKys4w/XpyV57c9a+RzwIcFf5t\r\ntIK41a2r8lndgTXijUphpdbI3/6psGf18/fWcFQpmY2069ns1o5XClWMtYix\r\n/EgQsSq9IrGufSEDOWNkAeSPKt3S7kGvyMfkQbwss9axzr+2BQswC+vF6LPM\r\nNtZ2Qspi5AAk8NYAJtwtLs3PmgFebt7QLfKe736wtCGUMraGsziynFr21Y5C\r\nHWGlQMIUpOlcmNiPtQBfUf400TXXsScClrbWOfq8Htx4BAkVvAH8GgvtaFhe\r\nBR0OLPNyGVmyJcR3cHtRUEipuMFeziAMsm/iwAVOaopko23x1ZJadH4iTPx+\r\nVeuVv+VP31VLGvQrOfEcNMZg+WQx0nAp0cA0YrHJr+TFQ4nzG3cwvou+z8Vv\r\np7044qrJKCEk/lq9y8U1otruBdO3urfQZIQ=\r\n=67OO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/tokens":"15.0.0-canary.58733ef41.0","@material/density":"15.0.0-canary.58733ef41.0","@material/checkbox":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/focus-ring":"15.0.0-canary.58733ef41.0","@material/typography":"15.0.0-canary.58733ef41.0","@material/touch-target":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.58733ef41.0_1667412721295_0.21681189770027753","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/chips","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.909b48215.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce9df6a432b24aceff8ba463593bdb2b217a4b39","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.909b48215.0.tgz","fileCount":163,"integrity":"sha512-XxGJ9BQUNkLs9fLepw7K8LwJiBrGyh65rgZQDOzZ2zG8wmNfOBvWqpv+5nWg3S84xriDaTQmzp8P0dJ1wXUFaQ==","signatures":[{"sig":"MEYCIQCRVnj+6qBOg0VOrw2LO1IKITjPj+0Mf/j0UVrEYW5TFAIhAN/XMY1KCeA5X7QVuBM+0IyBu+F8blXnok2n0hFF408M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz7pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLNw//WfxkqN8q+el1E6hL8s7IsROExBtarb6DxrhJNq6UtdPjcxf9\r\nrpKj0e4BuGq0efa1aaxnmDlNziJz+ViMgwnBYZwHdUH7szEtuppHvLJn+8zA\r\not2gbbJdIBdPe6BuGDR80x+Oa7KJcuJtrB8clKUgZTzY2oP/+0B6ib39qchr\r\n7m/fVvEO1SOzMsEXtWTYGG73/O/Mx5A12lzobJmQhhqQkTyZI51NzpFqoEz0\r\nhf5bzDBQmD9IMSSkpYeyRVkg1S3shOKh4qILysbZnDtBdoJD8bHq/dNHBwP1\r\n0bhWWsHA+viuCt5lT+Si8cxV54U2n1cSjrR3UjVMmt5gniBxkp5/RVjRHOEt\r\nWn3AKgl+HTTL+krIwUOl8tNhY0q5WhloN9R4p9/MjpfP91qJfTDvkiW+rrv4\r\nr+SYWxhle/EQt3L9gSmobVMN2D0PGoHSshL9qYkEQU5W024GPw47KzImPihz\r\niG/ckLH8uvVoVPgqJZqfi5sXUWZgr+HJV+Q5QQ9ErJC+D6MyJUMKBwpAc36J\r\nNoAHLNTyFGEDDkJL82xmIVnQOrtx7i8O1RwxUzZck9yda6G0j6HyJC4Qrh0r\r\nQ0ZZ/HWlNkgpsklVJ0rHGmXMIDfBZB7t11jHjSXo/1KPDU/85Vc+Fcxkl5SJ\r\nQaKYTI7CTVgRwwMDjvAJ5RDd5J/+AG1tqVY=\r\n=Gfkv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/tokens":"15.0.0-canary.909b48215.0","@material/density":"15.0.0-canary.909b48215.0","@material/checkbox":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/focus-ring":"15.0.0-canary.909b48215.0","@material/typography":"15.0.0-canary.909b48215.0","@material/touch-target":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.909b48215.0_1667448553552_0.47089354254426463","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/chips","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afb0af7b30f521a2d86ca73e5dc812ad7b8eab70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7f17127d5.0.tgz","fileCount":163,"integrity":"sha512-s4xfspLDBKszvKn6qb5GBISmBHx5sB8UGiWUDUo3UQmSLs6frN5wheQ6Mz5wqiQ1s2K+tieacRDhWnFQhB1+0A==","signatures":[{"sig":"MEUCIQCpIxyt4gUrI68xKWW1a8iFoaGTxe4sZkq3n/V+NypJ4QIgJnZbVW2rFm14zhWo5MgyO/p9gRwGdBp0/2OvxCfXhpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAZtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH6g/+IwNEPjM1dSLCH6s/7Dvjaya4D270ZeDATO8ITgor+3cJnFB0\r\nxi/W2Obs3YS3imVZ20G2Oj+HOT4wo1xxetsx22C4CUbMDyxn2UF9M47jnNv3\r\n/VTbrsTpwzAKyVgJuIfJ7wdURFe2epAyJSfz8w33+vR40Z3MQ3YZKw5rifi2\r\nqM7Xrdol+pntkvZocuHbeSn7YhUWHDM2YdgZSGYNl2m46Sb9dyEIh6meWhkk\r\nmkKbRzAoMSrGHCa8p/n8A4lzAmohdlRXdPxwxxxVEO+Vy53FyP+LCY0oP20M\r\n9kd9cLIDmqeRTDdZvXpwcTmhAJR/NP3nqUPELklUtymDLQGa4w4wxCKp0i94\r\ntcu1pt1wQNZct6qXDytJwTiRuwtb3CjlvKSCX8q80ffxZBE5+XjirI+T7OyD\r\nqZQYnFHI0ygpCnUREKPUnSkfMvkmKXgr5hC5I1oMPyCOEvEp+iEApdCkL/mI\r\nM4+q7Dn4nXxoLYgP2Boicr+TMCRrHJBtJHDwq3hPF86HmCnJF/MvEZ2K2tcy\r\nZpRA2EnZUsPG9h9RN+1F5S93BQMBwD+ybMrUXDHImPBvOaHEnxyQ8ANdayQh\r\nZsqJstXOrJFI9IkAqgq4bCellPBxmczd+eXy4KtY+SGeKDVaOqPIS0Uy9d41\r\nz0Wtp5FpS2Xm0e2JCisQlRLIqJmd6l5n1x0=\r\n=/SZG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/tokens":"15.0.0-canary.7f17127d5.0","@material/density":"15.0.0-canary.7f17127d5.0","@material/checkbox":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/focus-ring":"15.0.0-canary.7f17127d5.0","@material/typography":"15.0.0-canary.7f17127d5.0","@material/touch-target":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7f17127d5.0_1667499629015_0.42620898964570153","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/chips","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09bcc81c8f6b3cfe8d322b38c33e0aa70ee9dc8b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.da95e2a05.0.tgz","fileCount":163,"integrity":"sha512-kQB3hmGgawmPya7S6x1SdEROthtQBoGhufC1VBjMmqyV15uiQ5pkabsWD7m2AHHoTqpR2kUC1zn3BhnmQU/rQg==","signatures":[{"sig":"MEUCIQD9gW5qg+lJ68C/WDVoDIquqS9XimXXm3ZKgjdJaNO9DgIgYMvVGbLf3oQbjMQAxZI/2cvmXMWdSZIeLcE9gQbKABY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUUmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC+Q/9F39LCp7UT/pCm6j+ksAsVGhSU2rqZeoPgUroQGAArxvDRa4X\r\nPSQP+YjlgYsQadr5erP2HsSRkpocdYxUIAPBG0nW1Q2P8R/Xw8jkqSkw3v52\r\ng5tT7GXIQz1Im25Pv5KrbtaEJec0f3uwOgJ86sAY7MOnvs184qoVygGu5ZF/\r\nzBhAeFjToT7aq0ZNQOY8CY3BwWu5XA6gFzrAqSybTVDTeWV7LsT54eOnRd8G\r\nZ+nXJN+5hmuLnOeSPSKIzWY/ej12Lmr92D221HthlLBkJjLnvrnI92GtHmGz\r\nIGA+AWhvL/GEEUnuKJnXVZuPInHC//c6Du0ngPOf+hSCSexiTv1hoUDeYZiv\r\n4PDVU2L8PPMfdugLlWS8PozqlK33se7Mwv0EzA65zjft0OTMOG3LluYrqqXN\r\neAKQecVOVMZATyoQFiFRTm2gyI6Yj6AVGIQZvdMfqfV4kqBg0okhPkxG8aSR\r\n1PeihIOwXrzYr5rOMqW1ikbK81J/zo32vvc31Th/bLekn1ng3KdGfFhcLANV\r\nNIslei+W2yX7gJ9iysuoOoc7bbrxsXxT0u+k5m19Mdb8b/MJWiqGHF6ot7kd\r\nA07RwKskoNtjbhu+b0Pr7MqPGUvRP5rQ/5GfopJRjOX4PtevBQ3uc9EGBDfI\r\nuh/A9DFXIPyTHdDVoRdmODt0Zfw2VmryemM=\r\n=4j5r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/tokens":"15.0.0-canary.da95e2a05.0","@material/density":"15.0.0-canary.da95e2a05.0","@material/checkbox":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/focus-ring":"15.0.0-canary.da95e2a05.0","@material/typography":"15.0.0-canary.da95e2a05.0","@material/touch-target":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.da95e2a05.0_1667581221924_0.2783216863593536","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/chips","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4832e2750.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1ab08d987c2d1738f3bacd1c3238b2b6ea713c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4832e2750.0.tgz","fileCount":163,"integrity":"sha512-gbfWuQ5iCnj+7pnWDPxvYe0+PcX73oCNRw4Fy9s1+zW0m1JyfcyoKYZ2XKcAtNkR/6TeqC6hQ4d9aoad1EH6RA==","signatures":[{"sig":"MEQCICJXVA8PoxcuyIWHK4nf1os6bxIMi0CctxixJXPw1In/AiAfa433pnXZTyjiMUWWf/ZAxLscYxzglG6Vos7oP/L5XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXztACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXSA//dKi2iNuz/QdfThzGVhEdY5Yjf3wOOfa3M9FD4djcQ28OB7wl\r\nK1HxxpugLZAWqIbXVE8ravIpeZpSOs+iK/GNXiU1J79ktVcWKEb/f+vhWqSc\r\nJ2hr+tF87mLZW/tg/Rx7UBrbJZW5UkT6Y+LtRhEyYrL2YOoog0AmlDH3/r1o\r\nXzEO+IUMqO/Fy/lPFZpUhTnS/UIIxpBeFO6ksAYznR4qweZ/pLO+yt7gl6E/\r\nhdQzgJTF1hFTK8Vw/oI6k6ya8g/9y5eVD4eQ1AD4T04YgmQft3js5wcWiIFz\r\nNY4obQKckkVI4ORRZQ/vU6IrAplKO+m3KhhS+zQqf/gVVeL+7USz500/LwUH\r\ngg7x9f5knFAra/FNjjgf53Mg9iMfu/m8kELWGLXa0+nR0QhaAcSNXw9LLcAs\r\nwYTMPIvxYAa7pO8fA9uKO19JRSW+KAte2aYy20hX3JL/EJgAOC34ajx/7RFu\r\nf53dOvUJ9yJmpPJWeEhQtscWLtCjTMFqVaVUg5N6iUDnQEF8hEJCsFN6sIv8\r\nVW/7mNda0OA3VUhoC7PwdmqKxU12o/b2Sczay7lNZccYgjJV+J8RYQ0Gb/Mg\r\nV5vwcr4yS0KwLA/8JV2XTSE+A4hMuD/Gsk7Y1BHftUriaDmtW2hwwmm93BH8\r\nHNGPp05qbyJ1iL1lezgN351P+Wv9MSj4PjM=\r\n=IeBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/tokens":"15.0.0-canary.4832e2750.0","@material/density":"15.0.0-canary.4832e2750.0","@material/checkbox":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/focus-ring":"15.0.0-canary.4832e2750.0","@material/typography":"15.0.0-canary.4832e2750.0","@material/touch-target":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4832e2750.0_1667595501529_0.2561426462284089","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/chips","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.215506426.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e701574262dac5881a8fe3075e823a509707e2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.215506426.0.tgz","fileCount":163,"integrity":"sha512-7pdynP45RGGwAhILTYvqrMdYFAYEtCgP+7pYYeMXXPYAlQmK59gwHzsGBMqFyFTDxvUILHJ2eMgJdlaDgZhkwA==","signatures":[{"sig":"MEQCIEXtLZGD1Ag9l4YfpYwcK/C70oEkTM6yPQTBoaxlQL2IAiBEcF5V7NMOscRXXVAf0kyNUZzdyCBEMr+LLQo4KJs7rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbdHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl7w/6A8Vs2L1ro3dA0/qpzpe+vjU0ju4UWtvWkI4ZWxFasUXJDOfF\r\nWErrevh3cVJHwm/kKI2TUn701qQ1yIBaZmlXBwBhfsMs1IKGhnitLpu1dp8W\r\nNCAal4p4n3lnhvqDcMqvLEC6BmjU6Oxbr1PcKzsoVGIih+2ySGzGgk8aEVvc\r\n0cfPXhMA75cWrjXdUYLNbGw4simLWMwh4ogUtPZPVuKVbnIy99JO3ets75zP\r\nE9d6No3LgOUnT+DGDLN+x8AJde1hEfWd40dGpaB8/dSvhxCPAqBppIX39awd\r\nwc5wvcPzXujPZWj2KF3QGK9O+JCzlQmKA/c54aRgExbK2TKNokaQ40sve/P9\r\na1riHoKp9fX2VK1W7Nt13LIzp33o3s+e/cyDtT7uH0BZqZXSn98Mp2y4pRaz\r\nEq7Gd4R4fiKuOGxNcLlmp37D68K8Jtj5T9zHoCiYkDRBBljr3NooAmYMb+SU\r\npKLENImwUteBnyUwdAsN+3Tv4A94euA66sDGCTds7EMXVscfSx7TSY4+zVJG\r\nnBUNTNoxCCv5JcUnHAxY1QrF5R5UuMWgtR8LCkbZzxA1rviNmvb9AbHiSseT\r\nVjx4vGgpRn3sIBHR34Q/KFB5PGImxuA3gFMabISx9nh5kl+cqutd2GsEHS76\r\naY+rDtDd8iNxA2NIGwr3ERt4mufwzfV8Ajg=\r\n=mmYr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/tokens":"15.0.0-canary.215506426.0","@material/density":"15.0.0-canary.215506426.0","@material/checkbox":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/focus-ring":"15.0.0-canary.215506426.0","@material/typography":"15.0.0-canary.215506426.0","@material/touch-target":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.215506426.0_1667610438690_0.6096332590393134","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/chips","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4cf917476.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e59030c5821f01f09cc24f507df9c37eea3b258f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4cf917476.0.tgz","fileCount":163,"integrity":"sha512-bjTjw1KcU7hKParlE7z7SNgbokbQz4T6o/+inn6+RmDw5EZY4HlNkT82weAMxQjwMOqyFs3bF7Gw8ioKac2vgg==","signatures":[{"sig":"MEUCIF8ClroOxGB6CclrHCU2C0Up36M0uctUIgpa8kHG1ptpAiEAwQ9GTrD3BDBsfnBuRLth+pQxQ0LMuF5t1kQenPEgNDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqXiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmorqw//Z0huPLH2xgD4DWSlUiX6ghRjsvmEzu6GGtQKXMuc6TssIe8W\r\niVAqEcj4JA4jBkkJeutd3S2a0Q8Hiy21pmVHQ8J9XHeqgTGjKkLOWWH+xgxk\r\ncNLMS1lOEb0ItWU9lfdnJMQ3xUZHPVQO3B2TLHBcEUpwXj4nQfmWn6reNkpY\r\n3jYjrSM7qPnA0+u8CZThSwWzd9L0P+dfGTf8gzKCOWS1jB6WlcD63AOg8Rwu\r\npzJyKR42CEoTYcpdSLdQuJIbTVgbGwzr3eykYzZ/wHOBXzMIO1KURIj3qQ2n\r\nt/Bf1l0Y1UXvFeFROI71oHntbNNx4vYqnMIxoa1dKhFCdRcUFZbQbRAM4mN7\r\nKX/WHs5tMktz4DRsTJTqVVWyTovvTVOAYgsGzXGzACbvYxBSn9hLzI7NKjYR\r\nAAe5/LWuqqd7yiw2pdDAxokiX6hhL/AUHsL/+kXkKGO9b/SMedwNj+GIezDm\r\ng7MHV6DYY+kUtT4cTlXGIZRljmad2NIgg+3DsIVtCpyw4kYwaqS19LliuLbs\r\nCMq+/PGWDhUGQd8eYYoSXVTZNxuTorVgRa3RLp3ZI7+sAzFfxaBV96Y6t9IN\r\nKhy5h4r9wlSUqbdM2SYdbxT1tVTdc09MPN7E02bDsGCqPky4wf0r4B5PxLb6\r\ng83xy+aKENE0O4eF9D586EiZWM3KuNnFqB0=\r\n=BQ7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/tokens":"15.0.0-canary.4cf917476.0","@material/density":"15.0.0-canary.4cf917476.0","@material/checkbox":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/focus-ring":"15.0.0-canary.4cf917476.0","@material/typography":"15.0.0-canary.4cf917476.0","@material/touch-target":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4cf917476.0_1667671522205_0.4638546278220892","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/chips","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9000c735cd645ba8a3a8991de9e1a78c11b9c35b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.eef14bd32.0.tgz","fileCount":163,"integrity":"sha512-TE4ef6h1jumpyM6NxxIxh3wNCfiwjQHPWT2wskQnjtDZ9PoOlgoMqokVO6KvfvGuidlhQCPza7hv5Jch+pzFZQ==","signatures":[{"sig":"MEUCIQCfaUpLG60glhRZ5hLDTcoFO+0+8PyYfB407QNNyQWDRwIgJn6QwxVwVA/nzT8uWCDH2i5wOluFWhPZZnAhAPqrdz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+4dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+3A/+OckhdqlsTndCHV0ZZ+YaWeAhecBVXjTthQuMfH3OU5sE7VW4\r\nRYlP4kwe2B2AOr0icRJXdhafTLdRc+rX8OL/SuM7uEFE09KOvzl1Xg/UgTVM\r\nckULK32TkgyHmhuXmh1eZxhnrzQYtCeCZ3Jts01JyifQqLYPMm9fKeqMvEr3\r\n20YbiBUtcAv059zi0E65sV84NmygdC7g3CCLxmcqFGiSQqjcxD5XgZflLpLr\r\n3Si1zXVw+rzRiZ+R3fB7N7qmNY+i+CQcKaTPz7tNNHbr6LynCshookFvhxCB\r\nfq0lbidupdiVqNQW1AinSxM4c01dporzLpuezKufvrt984vUdvxY6l8CvDCg\r\nI4oNOWwgkVflcGCAVQG3nAzKCx7eBOlKyNvF6HjBWkZ+i86IUk6OZ3MNhMJ4\r\nbmTtdo/+hMmobqNrDD4I6uwJWilqNiF7qEBrhVSYBOU31TWx+ssYjWhqS3U+\r\nyKmlzanD6lXlVUrUnm9HmSAh4ZsLouUEiZN2v4/ta1hoSK8X5m7XV1CcdmpD\r\nHrXmpF16UdIz7OXvUIEq35Uiv64Alz8oniJlthMVnpGtaq/rf6VmAbFacR2M\r\n8nIbXuMTsIl0+98gnrbQh6EegU7v6ELDp6u8CZ0tpVVSBmz8Ttv+84YL5UCP\r\nv9EGqWC4c42Gzb0VFzG7j54QMU5eP0ZVDBE=\r\n=ZSOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/tokens":"15.0.0-canary.eef14bd32.0","@material/density":"15.0.0-canary.eef14bd32.0","@material/checkbox":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/focus-ring":"15.0.0-canary.eef14bd32.0","@material/typography":"15.0.0-canary.eef14bd32.0","@material/touch-target":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.eef14bd32.0_1667755549662_0.6900691821075298","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/chips","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a78a3086f77be98a5e36575e679d7d4befaa996a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6faa29fe9.0.tgz","fileCount":163,"integrity":"sha512-bHsp5anuAcSRvjEWd1D1Hn06pMKIIzzjju9CCESgK+nbctN8nJeitd7Gk00sMc7wdZfYMO8Cx82STQqGbP1C9Q==","signatures":[{"sig":"MEUCIAiHHRqryNcoZ6hYhEjzfFMmZXk3ai5RvuYH/NrlcIGdAiEAmh46mGDDZcxtJNYLR6PcEGmTV4HwvH3as8l53tCOTsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHggACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpLQ//ZqJ/FxD2LCkzbOnxnNHJuiUluULgr80JDlOOYQxtz/Jnt5A3\r\nrVEDJiBn4ijI/Bk1xTpdF6d/Hznpi8F+P1eU/ofy2WfjgOyAW7auZRp1pC4b\r\n2bI3Znl8AMcsSJcPqwCRm7idLf6MIEyyrUqCsJGBNvYXK5wbKcvcNdy4eeuB\r\n6XpOsTN0jTPToeTeYiHZr9bmkiRKPIMp52KCWnIzjin3ErSvYO/HsFp5YUD/\r\n5YWUFOw6qATWDeozcnwayw0pqIavx5Nvaeh8ZVy7pp24DYmvAq83lrWS3fST\r\n3LLmU48aXUdF4/99SfyDdZ1N1GY7ab++0X2D11n6ZZG28mi6JaC+iPjx/zGz\r\ndA2ob2elrjAn1ejbeKLHmsan6+ZYujPn4/BSbbl7SER0gbx9FAPaWFeXQleM\r\ntnfIMyCGTuq66FbKM8ZA00ohejP8qrMg6cqidAt10hKaK98umWr27jodaMhi\r\nkrQR3G2bvw+ULHXyxpyYfPOWYJz1UIDDun+NRg55bT4Vdrx61av7tQpeud4f\r\n95f/S0Zns0JSzp+Gx4AemcnFGlaytVcQTtaNzk9eRE5wX6tLh4tDqk7Tsv0R\r\ntQv62KSUFArYjWz/S1w0ZvxP9VrLzOLYf6P/Zp3So3sFtQwbaSgDLJvg5OcQ\r\nJ5WdHZdYfs/+qSPTr8VKmVfYMZrhXA/wL5k=\r\n=JtUT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/tokens":"15.0.0-canary.6faa29fe9.0","@material/density":"15.0.0-canary.6faa29fe9.0","@material/checkbox":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/focus-ring":"15.0.0-canary.6faa29fe9.0","@material/typography":"15.0.0-canary.6faa29fe9.0","@material/touch-target":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6faa29fe9.0_1667790879766_0.19118818622192646","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/chips","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.9af09b967.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90226bfc8734affe24c0cb832cc30bfb705ad0e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.9af09b967.0.tgz","fileCount":163,"integrity":"sha512-Q8GtgB+I4DbVJ/XAvKlb9JXpvehlRsdw/IX1gFeLAoCWBjGAJYgdd7WakGrJOC1enMiG2U3oJetmKB934LUQMg==","signatures":[{"sig":"MEUCIQCZval99tXboU4LRkHxFdalX+eEOOw6CoBwek+M5zxJCgIgAXzDePLwfKQ7Rw5ixc+XUGWXZ1y/qYeCoFeoVGytrxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU52ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6yw/+KFZAZCLzFsnZmMiSTwlJV+XLl2jShxePidRw/JN/1MH5Qunf\r\nJRLIJYdM1p+fN4q7iU7Me/XhvnMIJ5uqaVeUp2n0JyEJGbK18Vy+YTHFmst4\r\nEDZxMT8hbef+hCvQsXy1ioXlnX4ppnnmFDYKU+pgGim0tBLKnI46Vfhdt6gZ\r\nnSRf14FbyjKqaRdMJZGIDbqstAx5umAbXrgQ9bAR4s/JKXf1EHAqZuv2ZCiz\r\nZj5QCN+8gYFCwgOfBYT2/4z/zWC7RpRcXGSWYriP2pl1FpUS2GroeC1pWVbz\r\nlnTjYQArhAepIn/3wgXPl3PS8KzwO07jURgLbWCkv3tUcyCJkpe5IoPG/82p\r\nB019F4AiyAPGDYkvtckBlO1BJiIzbbbBpOnWwe8of1xGyu+OSWJ7tH21Lk3R\r\nbCGG9pUFQG8OGm566NbZ5INlhTdw1skHFuvvH9flEQR0W2/ZavgrgxDyy4V4\r\nzc2DWNsCS8uCf89IL4nCSJLQf8mRwi/ryGSLB5eJOQl9mPDM/Cib1+VEsYuD\r\nnHYkuVvUnXf0n4iu8xjltdyDyeYPSxs+h1q/1nDmInCY1Qj25SbZFAarUzpN\r\nrlD6mNVThZ/W/AnPmeYV11JdaFnE3ttLpRPzhvuK7Joc+aiHI4FA4B4oZrTP\r\ng+h9dJ1/slwF80LYe0gH1iEPoX0BFr8suVo=\r\n=nAtj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/tokens":"15.0.0-canary.9af09b967.0","@material/density":"15.0.0-canary.9af09b967.0","@material/checkbox":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/focus-ring":"15.0.0-canary.9af09b967.0","@material/typography":"15.0.0-canary.9af09b967.0","@material/touch-target":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.9af09b967.0_1667845750313_0.5045035272316569","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/chips","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b57b2c17629eb20fc4e55957df8b8fcc8eb3515","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0f54fbb93.0.tgz","fileCount":163,"integrity":"sha512-yI0CDKEK3yiyTb4WQ6sY9yH5JKgwc+yYzZ6sdVtSNnYKQ6o88yGfTxtNqpN2azeKvtn+9VAK3NkKlExU4q0dKA==","signatures":[{"sig":"MEYCIQCqxhh0ADP3+n97YF5V36sWpGU92A1WNCVW6zhL7VABFgIhAI53rmiqPR5OggtBs2vd7QV0tsBbD4KyHy5J25WUzrLD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatDdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIwQ/+KlTHRjCWsmBtyDgFkp9bqOVHDsJhIrAv5dfxJT8guCtjaaEL\r\nslo/m6BPMvhVuU+zxh7601GjLp55lHYbebAuh6NHq2mKVBDtSHn0YGUgUDsf\r\nmt1y06fRthOFIh+6fKKVValPJJ91uefQoMMCY9ZMflpK7L5qJhJLVOsjLZV/\r\njAn1cKrbyXILK1w6lVVPAhf4BZxRKhcRYWzdIF9XG2f2pc22TlJUWyDwvGMx\r\n4ckoncsuuoYMJL+pmJPbqxH4vnjFjjyRFedqP6UWZ51vXY0wk2T7W/sZaNVn\r\n6S9svEDrjyay9f5ysdqS+CRPtNo02WzxiZQaWexaQiAiBI3YZ/p4QpqDGHjL\r\nv5acaNaarF65WQ9vVD4cfBCiUZ1Cmervo/peh4UFJX0zRu/3ROJP8v+KTn3G\r\nAQZQM9McGAouJMxV+ELdrs5746SG63yWbmAeeXCLaH52g7Ys0BakAHlBBkc8\r\nOgA+S3ZiOwo+Zx3jLYot7kBejhRegbMXwLYAVSC3KvfNi/XMaK+XB5OAi/gW\r\nfWuS2LRC7cAdq8sow/DKCcbEi35dNimBLXv429gtQRFCUgtFMRig+QNYFkkH\r\njf48JiPPU/PpinR07P7pgtRcofldyY4f4E42XdMRo5w5gjO5sOL0i3eKL3sb\r\nR9k0KxDNeWYdi3B9k9nVQYu2KlRZUmOEO9w=\r\n=9Kkr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/tokens":"15.0.0-canary.0f54fbb93.0","@material/density":"15.0.0-canary.0f54fbb93.0","@material/checkbox":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/focus-ring":"15.0.0-canary.0f54fbb93.0","@material/typography":"15.0.0-canary.0f54fbb93.0","@material/touch-target":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0f54fbb93.0_1667944669088_0.060137905857116314","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/chips","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f337307457a715278c10f960d8f424e69085245","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":163,"integrity":"sha512-Ks5n1TvBh6pgLvHoLsF52SQemjSsJCIm75M1pEeB+OIKP5bcYM1FjLF0bgYMj0yVCifcG0OIq77RAqEQ6gbUPA==","signatures":[{"sig":"MEYCIQCmA7hUCPMuxHVdM1UI3+t//U453qu6WiHSt3XywyOgswIhAPubbsOL5JJuY39FoVCATlHtObcIVkT92ju3tgeeIJRb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaypJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH5w/9HrCNKroqJLZu1XPvSSOG+4maTG7aZ8Ko5RsclxI4KKUvn0PY\r\niDhp7H6nX9tRjpCIOHhA8wUDTaZHKzpYwqtTZ92rBF7wu2WHlJvkks/u1/+z\r\n78JK6JSFcWhiV3/idFcKN3W4DOIrP6Y+MGTT8/YQFOVLYBiyXW2vt8wSBKu+\r\nZrcWzBWm8A2DVAC75rBUkGBW3zew0rUjl5176hNLCpFu+miLTaKtwtZwpRpK\r\npN4mC8YMB+VzhE6ed1Rb3z33pvKvyf6zm6/1sRrJRJpb69HWM0VUfVyoREcj\r\nOFoeRXETeZpXq58DTf6kTjQPA0DTf6lplJNBndxTAlo8PYxIzcKEJQSOGKCm\r\nV0rtWF72v6ykRvH9qsUW7VIBp57PdFUcFAA7e31xSPcRbzS64dJmolf5qnvg\r\nzf50QO7OlI+iEN5dxoTFP+5tdTxz3pzUO3lLw/WEmVCsUS22lmbAj+zN6uuk\r\nPa1X3XiJrtcdZW2RP2zauzaze9pNpno0rpGKydvuAATPy/2meU5pzr8+OEFN\r\ncEOxjpgxhnUWHXe1WSGIVXac2LtCYsWQ46o/HtqvFTFPMjIv1xVf9UHaAvgO\r\n/Bz+lt2n4zhhxSjsjurFeWccf3oK0c5DNtfEzcv6tiB/17ADwP99Svbt4a8i\r\nS8DjSXyokJvWbrXmzomHmTw9siCJQ52e68c=\r\n=DTfB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/tokens":"15.0.0-canary.a8d47f9fe.0","@material/density":"15.0.0-canary.a8d47f9fe.0","@material/checkbox":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/focus-ring":"15.0.0-canary.a8d47f9fe.0","@material/typography":"15.0.0-canary.a8d47f9fe.0","@material/touch-target":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a8d47f9fe.0_1667967561134_0.9583577672952741","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/chips","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deca2c281abc9f6a8cde72bdc6b4efcc26ecdd65","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.66a1e75e6.0.tgz","fileCount":163,"integrity":"sha512-aCqU/uK2kZLAOgWmxPR1flKKdA1Bq6RBtzLA0VDbRSVQW1cnMAb2PCoUDLjcCYeDeVM77EceR7d0CwwZOA1fJQ==","signatures":[{"sig":"MEUCIQCDXMrpiQqWfH/H0reYFlXZSImNvaj6omHl7xx6sjO+GAIgM7xae0/rEUkK3GGS1JXTxMWq0BQKMNf1c6MMva2lFhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3SxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8Ag/+MuPXW5H118KIcjFYV/jgi1USszi0d0UfyXk2H+EhYvnVvfo5\r\nmpFTmclhLAFwwY0vg6qgDVzpTaMA8LRtFby3A5HJZ1UDeMVbTtmHbGJ18XGi\r\nN2YnUWwTXlxNHeTOeldtMR84VfLAxZOXt8cWaKzLG7iI2gF8bWxnXTj3HED0\r\nQFE27RRRjFotrp+QrDdjqKNvDOt5cWrp7d/nT/6AyuLeOtn3SyTojpMihe6j\r\nuv/PO4CXpSf/mbP4/yYGvhsEPwnBQod+J4l0d69SdovqMDgLeSHZrOnnxdXo\r\nbOo1CmdfF4y06J9dDzrizrqjC5Q/rEbVDhRhFerICT5XN1wL/cnH6h1V4Pv8\r\nRLwRNFjvawf78J7y29mAtCIoohD0snKOM7lGWqplEKv5gh4S7cR/7HwkiFSV\r\n1NHW/csVco3CCx0CimcOzT4E480+gw9tcdz2kM8EBrAfTNhedpSXw7C+7jJB\r\nhHO9iqo9gYpYocXKsA6Fqg5qbfgRr7WEr/t3EZEY6D3pzAHFzwvNTu6k4E3B\r\n1cmQ3msNuUBYS0qcF72Slgp0nYx5cP7yxGQyRs2BzWpX10btRYUfrR8/hcfR\r\nvgVfVuZLC0U4r80KLB2PdmODBjgU79mXIDMYdPcGc4Idhl2Ol6Kc3CkKEz5J\r\nWt5WrveQaG926AS8VTiO+z+duRxxHWUtv14=\r\n=kfdU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/tokens":"15.0.0-canary.66a1e75e6.0","@material/density":"15.0.0-canary.66a1e75e6.0","@material/checkbox":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/focus-ring":"15.0.0-canary.66a1e75e6.0","@material/typography":"15.0.0-canary.66a1e75e6.0","@material/touch-target":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.66a1e75e6.0_1667986609300_0.056660852198626266","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/chips","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b22a8b257eab1ff3212b797a6d9bc5b4a3ff7e6b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":163,"integrity":"sha512-hgyylQeJe7x6TEfVr1YNxNO4ndm6WrxyBhjUSCxEYBAMt4Pb+iD4TaD3V4/0ImVaCz6kS2r18Lp5uHbzypvd+Q==","signatures":[{"sig":"MEYCIQC1YHXSzvYbNFoFDZLDdjD7mdvu6r93q6m01QKR2sMNVAIhAMBrDoPLpxwSABio7eHiy0a8ggxeEvVI0ac7kQeDEYy1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5T4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/9w//SJXs7xCfs8SRO5+g0vnmkE5UUvhxCQn2Zrn83kBUPCzihnPK\r\n7So6+A+8aWvkumd+bdzE8iPTVdq+rLdKqEt3Bem8Y/kSAlHVaOQ0m7j5xyLH\r\nR+mKVoPFU2JsATO+AaRbim3Fv9I3FfjQt4fqOksAf5ZHhmvMO99mM40ezRAM\r\nwazohRh0JqpYuot48JQvff/Q9QSng8TQviJb+rPHYsfLyBYEwXC48RslheZg\r\nAXNc1VQzKCuwP+Szl7CGcEqKPQlAZOmB3PXhXTHT6xf8K1HZBh8GT5WgfUxa\r\nLPiRl2Thk7EaCr+Fgx1IwXZ4IxM/HmbIJB8xyVxsd0TghBMBCvqqAZsyHVen\r\nml3K26adpwIOPaRbDVrxtS7itdjnGSXFLl9x3BHPspndy4+NTkxEy8pz4ejq\r\njmQ8egQGmqApHtFIaYfJUZXFwF9NAQq88abNXmtWX/8sVyiaLNTTnVdMXx3G\r\nHjK8V1g78urVg+tXTITH4vlxgkbFauPlNu1JNnoUD3Pnu2tiZGeqXmJTguxP\r\nFBMjfscMQf5z5OyYxIF3IGTuLn2gcf3qdvlTkEKpHYG1/qyVqBnNnNVlBRRp\r\nhH65Bi2fdE923r3/bjnrYg1aedbuTKB+btht76/7ihcqF33RV/sDEL9dl39e\r\n7oSau7FXN4a5xQYNQv05Lna3wNe9mJXZF6M=\r\n=neAI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/tokens":"15.0.0-canary.5e5c2afc0.0","@material/density":"15.0.0-canary.5e5c2afc0.0","@material/checkbox":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/focus-ring":"15.0.0-canary.5e5c2afc0.0","@material/typography":"15.0.0-canary.5e5c2afc0.0","@material/touch-target":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.5e5c2afc0.0_1667994872374_0.1842606563321525","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/chips","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99f77a92d82ca7804f5d85a405ef2f7d10cfc21d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.3e3f43359.0.tgz","fileCount":163,"integrity":"sha512-ROuQXo0rdlV/AVZNdoQYl3KaUlMfYOVtpMjP6+8m2E0JkoSRa0MuntKvuJXJGpI8IKKP5E5wvQKUpHQK36hKCA==","signatures":[{"sig":"MEQCIEoBVP0viP68u82E/3MaFkhqWeOR21Y4jLFMg8JKfvIIAiBComoi7DER6UW4xpFnrILF9ADNDbNcwZYNYlnxtWIAOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAe6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPZA/+JlzMtaGxOLyZKIwWWudF/C0UfatKXts+aJOOLFZZbDbx4Pw4\r\ng49dBGXBT5tFWNeFG6xnl9OG9DbNJuvbVPyOGNawMzXoVW8LxJHxF0xe/Wqy\r\n2XcC0E1xSOZyFbRJ0KS8b8w3SctNuSvg3TLz7iVZeKz7ovB1710jROYWaR8g\r\ng9I/CJjib2O98y5qaZU+HcY7Hm2Io+IjACSK1lqltO1C7LjAOKBFCHe3qaj9\r\nSe4e+0fxgKgl5O0pEGUM2/zNfFnpXhZTIucdk33C/Zo1Espzgzfr9SQxN5u7\r\nXvyN8C5z4+Q18YFPM4ISMmhGLbIeDvhHQ3/jtxgqQNAW8NnfDDes1nxuUHFx\r\nH/IWxq7Cz8s6s6VwRsDEjXnV5tSllbqDdOnQmwBANtoI//+C0adAMrBEJ5TS\r\nm0mWbcVk95BZsB6dLF793JcUF4bjm4dS2zPhU2BV/pZOqNLrdLZcySs1V10D\r\nJg42rGs7I+mYyy72MLheUXa3e/XpwJ5cmBa+j2sOo6S7RYr8L+KPPqpxN0OG\r\nxesR14YLT6fYhpXeMedFmoTpy5H17pkPEMIROWx99Yl+nBrgbK6OkBsWFXK6\r\nqygPQUx1iI6zk99x7oUgJB4BcnUeTLPdQPKhSjsPuGmNKXdUWi3aj1NmfuW8\r\nwP4N8az1MTYLg55aPCQ48qXA/vT/2VmA30g=\r\n=n0Jj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/tokens":"15.0.0-canary.3e3f43359.0","@material/density":"15.0.0-canary.3e3f43359.0","@material/checkbox":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/focus-ring":"15.0.0-canary.3e3f43359.0","@material/typography":"15.0.0-canary.3e3f43359.0","@material/touch-target":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.3e3f43359.0_1668024250205_0.5342696572353458","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/chips","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c87cb6fd22dbc95fa54f93f36e8f650eb362c23f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.3f667fac6.0.tgz","fileCount":163,"integrity":"sha512-FeO9KGaevRm8wzJgVqv2YcU4yt5WUGKb0MznULRxIX+wT2AxsxFKilXMT585MaxHuzfolcGXDy7ED7dUhdG70A==","signatures":[{"sig":"MEUCIDOeb4CSDUyCwdOt5BndiszS00Djk4Jc8ToHdswFGANvAiEAuux1ugbVLfQlIKA8fGnEKP0ya5pBxp7YNMDpyKNT/Xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCSfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrugA/9G4n8qAh7Th4geR9yqNeLUzAQEnZ+rSZxT++V4ZPdmX/gRbnJ\r\nJr4ilPni1ajYNgw/1b+5raDx8Wdw5RfRsoZrcQyECLymxgqgUE9OBWP5Qass\r\nxnzPDeb/FCDV9vpmTraSvxLzdc20vttzsJ/fOzQgVoT4JYXwxo+Uw9jko1p3\r\nHhrmqRK/dSlyH4R5wodhISMmKgGOK77E2TOpEP0CfIuImQcooWMaJr6z//8i\r\n7gIlDjcG15avp27yfWj/1s2iId50mdblfYPithIKbxp5GZPmCpK1DsEUnzN2\r\nqb+zC8m5IKLTtpua9YxmXSIkkb+PnVR2eP9Bz3pPBINSktO4IvN9d2JzaAa4\r\nv1Ml93k4Ho3awSaLU5NtSYKGp9FlMdOlEkiSgFpKV7iYj1wqusvZMxIlhJ1A\r\nF8bHpbGUy+bh2H+kNEwR7OnqMTEVKlfzOaqPL5eqRE1j6zCF8th14YmLBcpB\r\n8FRgL6yTqqcGmlqzelVtx4t80W3P4b4jsT0weFm4godDuW7AgxbXpgVHfkuR\r\n9GN80Z78lP9VXZznRl0PlGz3OUWRtvGD9WiMkhWWL+Oo1SmuyMOE9JYdWXr0\r\nppJc6D04ypLc0p+yxoLWtAjGq2R3YZU2LMeHW3DQo6IvhZILkRbDsHBh6M30\r\nTmAsZayqMoCr0x1EJSk0d1lE/Wyg3V+M46k=\r\n=Gq3x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/tokens":"15.0.0-canary.3f667fac6.0","@material/density":"15.0.0-canary.3f667fac6.0","@material/checkbox":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/focus-ring":"15.0.0-canary.3f667fac6.0","@material/typography":"15.0.0-canary.3f667fac6.0","@material/touch-target":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.3f667fac6.0_1668031647101_0.10146764541753783","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/chips","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9e404b13913dee8db674766b6544ef81a697ff0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.faa28c1c5.0.tgz","fileCount":163,"integrity":"sha512-8PmDVKAWKC+NfopjcHZBhBR1a6UQComNzm9PtDhDKnlnlaUpkHvF6jsyyPmANgOxyVBnVXbMYQokBvqoEwIjkg==","signatures":[{"sig":"MEUCIQCNvhXMU+sxeKW4620Fr9Fqkc7tLK8Vs4pvDmha+lMxSAIgJ41gV/T3dT4A+tdgyRe/+dX3fLbp+FiGijk9mun0nVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbno1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo63w//UNUXqJXqOczICHqlyimODTFQpcDAFQrABxRsgdn0Wzcktmfh\r\ncvGyi7w5Mt39PvF2iDCcxL8+VsSwU8ZO4T+ipRKjNVOGy1F8Ckk9DxpEQXBN\r\nvAi20widlCH04AS+b3+yXdDJKLWDbkJfrwmjNNUJ3pHdLWiS7ghVRbDcj7kX\r\ncZDFIyVcRE88gbz7u4oMSKaqiN4IwwAJHWWDzXtyaykKQ8soH1dVdSsyJTq7\r\nW/IJ8ex1VuF7sxY5Ei6lMD4bFtPhfiIcx9OCPLccAZzZJFurIOmSlV5JuxNN\r\nRdppGNe4FzRNMdS2a1gE8vlhM5FaqhA//otUYsA1qYJVecHzcVAhDqKY8nIR\r\noMpKMzEU9erdMN4InBtmLlXb01OpFwxlbw3zay2q75KrAiejYhqQuhCAklV6\r\nkszNx3fgK8V5HfpUHG7Y2NcvJHPI6VoaBykNEpoyLDOxgXkjuXRJnhrZOAPm\r\nDZ9k/Gz5TXSOSYj9Js0/aOUlcMoEKPjlSrkxyyRL9dV5YCl+aC3tqqLsRYgm\r\nFc3WkMRKrcRUcOTsRQvmq9CvhhzoYp2byFE+5dJt+JWgL9bHDy1g3ATmr+u+\r\ngwRcUvM74kIMkg+AQXCwkgYCFNzlntE053S+mTIo+vZK0CZ/rkgul+F064eH\r\nmVn6rxhhUWeEAMafhVVckS5gWyvz/KtNmO0=\r\n=btXg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/tokens":"15.0.0-canary.faa28c1c5.0","@material/density":"15.0.0-canary.faa28c1c5.0","@material/checkbox":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/focus-ring":"15.0.0-canary.faa28c1c5.0","@material/typography":"15.0.0-canary.faa28c1c5.0","@material/touch-target":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.faa28c1c5.0_1668184629482_0.9667134263570956","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/chips","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a868c7866.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f08daed4c8da776ed13bda66786115c54e9050e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a868c7866.0.tgz","fileCount":163,"integrity":"sha512-o47nhSOeOUPxuxgelrh3LgxKwcg+dZuM6Uu0D6ZWTenQjz5MKWebY7EYC8c6Pzib1s2knX4D5xWQdJ2Rfie/fg==","signatures":[{"sig":"MEUCIQDQc3cmnP2B+hruoT74Xvio1OkfuNfxbO1aM51dKI6g/gIgUoBRlcUpVMDshY4C9nXVcm068DMfMFnx6OsKj2efDIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnphACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkpA/6A4+e5rGZfcSOur9WLjb2ZdPaehB4PxiqFrLEmtG4tkxnJuN3\r\nffy68rbVjaClYP5HyYoT8lPiokkfd4v55nB+7SM1di2gXDejQf8GbMwqIO+h\r\np05dqowL/7U9ZTSxwDm/WMb4oLNpLnPpNV8Fwxa6Fg2N7KrpKMhlYOIhfYIS\r\n5QNcaUKSsHivEm2eoDOl3yZ8ACOjgE0fSxu56dsNGA7fLYxmWXYqhdZL8X5y\r\nLvga9N+jH17+nd+BzEo8HM8a+UtHuyG/2xtJDCLAFsIJbd1EsbUWcKOa7Zbu\r\n5Cxf1Rdqlr4adDp6jy/dmNEWQ+O1rbpmd8NgM3nyiaeacFzY9i8fUqkDCZQ6\r\nAzu4jsU5LEH33M1stzeFch8eaUIifRTFfRl3twS0aY140QzsngTSojPfi92U\r\nyzWeCuGr7B09EHL8QREsfJxW1oQh2jjVT9H26V7d6JmIRWwJmTqnwVUEqU4i\r\nqaUlm8S31ghaH25uL18MXEQ6Vkpw8S8lsvBxq9Tg9LHq5kde4RX6d1vkOrbp\r\nGZ9o3+/ixQSQF//7ebLuQSqTlCbJiCE5DXXIcfrJOIs8NsEhW73myK6MK3+5\r\nY+hMpxOI9GPC4nrC61MvrwPxp1trshCjxhxBHlpKJqtKP8SL9AnHrfmi0yi0\r\nlCom9qky5tVKwgg1XjTlD7LRIz3AeS1jPZk=\r\n=j37l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/tokens":"15.0.0-canary.a868c7866.0","@material/density":"15.0.0-canary.a868c7866.0","@material/checkbox":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/focus-ring":"15.0.0-canary.a868c7866.0","@material/typography":"15.0.0-canary.a868c7866.0","@material/touch-target":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a868c7866.0_1668184673449_0.691905035798327","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/chips","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f900a7dddbebc0f8a18340651da454779dd6f85","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.602fe8efa.0.tgz","fileCount":163,"integrity":"sha512-rwmZydxfsLGGagIlOq75xq4C3sCVY9V9CLka5UVaX6RaLBoGSzUqZOByRgWb9dQf7JxZ2E2wPZONsYLWi5P1rg==","signatures":[{"sig":"MEUCIQD+pDQLpWwV8IvuM6ygHmZyyIMrAlTHFI4vYMZQ4FhxSgIgUEs5FKAc68wQrIPrgt2oxpNg852olVTwRDFOH+FdDhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboKkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPaQ//Vajxs/Yo4ti9NwR3kmfBGxLCm32flngdGq5fWxzkfXwEtS7/\r\nrTiD6za2tuaXF/NvSUo9hf/V9yehsMFbAGKJRq7POEpkn1NVv9gw2HRHAUCE\r\nZePbesh8Q7nlOQanz0AjbxG9m08M4HNteMFDEh8y9UXcILa1rNhK/HB0MGje\r\nmN6X2mDzArFujqmg9nv4vPj7kloiEWQbIJv9UM7WMW9mXgsliJpXMYTd9cr5\r\npQJPlxtWnjIbfLPOmZ3C86NU/rHQSCOP+/ZnUjUWQgK4Jw+2Cj0X+5OZCa10\r\n9wBxyb4fG8epee4V0fdkiuTnWblrKSxTHwAk21ow/vwfu7P4yqsa+Y6De2Vx\r\nDnjpcibH9W+zqJgqpmDJyTQpQ79LYbZQw2B5t1QfZYPpoo3IvWeO8xU4412Y\r\nTCGP2vsS2q0iYCJ4jdrBJrRN2q4srOe0NjoArWsEEg9B/URsTW1jx2oiC/RX\r\nP121bO31E2P8Jd+r82QQrwJDLZFLlXqS9yWxGaJaT41pFtPpml1qVVdVHeD0\r\n7HFrG2OOUnPwChR3VWf4zqgTFn+t9m+w1Q2ne8cr4yPTm8IayDMEMkE4Q9IF\r\npMITb6hX4CPM5YAV5aaiaGPUXqYuAvD5GFmRiXe7JA5lg6KMt12+SAY5bRS2\r\nM5XmXkTMfFU3KmW43HRM0DMbllhNk2LsR/c=\r\n=qePe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/tokens":"15.0.0-canary.602fe8efa.0","@material/density":"15.0.0-canary.602fe8efa.0","@material/checkbox":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/focus-ring":"15.0.0-canary.602fe8efa.0","@material/typography":"15.0.0-canary.602fe8efa.0","@material/touch-target":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.602fe8efa.0_1668186787750_0.5165451026213326","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/chips","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.558c2be62.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60b3e0420a765a1b834dea633908fb0540c2b9e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.558c2be62.0.tgz","fileCount":163,"integrity":"sha512-srqhgJw8EhYf1Z5euk8TnSIwfK38ulI/BrD0rIkawZQjkKklaMWlnbrR+NDgyAzGeEPlzO4+vEq+PQrojLw5DQ==","signatures":[{"sig":"MEQCIC7uVLHX3hQ+0PSDqENVimY4qSLNRd0H102j+/XMYQBMAiBAimFu0GkrhyFfLpUIer8gietETxZvAVe7DWpOZ8ai8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtDHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIPg//QlW4AKI+CNoX1zb18YxbgrsUPeAxet/s+KnB+JX7WJU5F+Lg\r\nDg6sUNOr5b90dE18xDjfVG1ADGQK6ZuJdoXimcja9TbkpCxwvGLyBiIXiIm5\r\nE7jTMJF3mP7frnZznH7lw2ECUhND2OJfRBe7LNcFNxe9lqJsUhxgM4fHxgYP\r\nWFDRDJAEKVyJ7q9BARk+8vl7XnykDWi1jpbLJ+uLK4Adn4Edbyaxcr7FszDz\r\nfOhEB/k/TRO8bX5L4UpIOCI5kVfvbhN6LAuZB4w78DG1QqQQmg+O5jHopEhL\r\nbsnU/yKC3r6ZG6vELejcCB2YN/m2stwaEgVDpgK4NvPHy/OzZejsnYo6INUb\r\n+dxaRqGMuPGNYOYH3KxpmMhouO1rk2vxjD2eiMGB9viBmtbv/EZeCqm0KKIU\r\n7NB0HII9k1v3auQHzmTDKnIcoTgc4HMjjZJaia0At+QB5fVxvO9erIgXrOtT\r\nre0lQbObfYtIyYnR8ELiDBO9hGgu3NE5Yuixv5Iqd/DyRBehYSzRx1LDcD4M\r\n8vC8p7kd4icF0UKFvjBQfrR2pl1EG/bvvuRIhJ63NIhxixkECA+SqNRRqoDk\r\niesJn2P2H80EGTTAoHxDeN9ohP7OfEet1OF0xV5yz4tblJ6SLUpSBF9zg93o\r\nHsejV6dbIbm0TUjiMIFGAwzwGVwhtpGpG+g=\r\n=Aqo3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/tokens":"15.0.0-canary.558c2be62.0","@material/density":"15.0.0-canary.558c2be62.0","@material/checkbox":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/focus-ring":"15.0.0-canary.558c2be62.0","@material/typography":"15.0.0-canary.558c2be62.0","@material/touch-target":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.558c2be62.0_1668206790882_0.04636423394322353","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/chips","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c944f0f14e811da05af0d9d9bfe5d543a478163c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":163,"integrity":"sha512-TiEdNCNsWAVwIZvHJXuldI1msVl64OsE3iZekNggCo11n0TrL0Q0gHFQUra8ZXhg8WX7Ho5epJoHtA3YwiODDg==","signatures":[{"sig":"MEQCIEEDTYf+FRjdH8RjUEyyBdqOTGg7+r1DCB8ueaM98c3iAiAYp9BXjH8S4LzOSbU28XZL7FuNMPKBOLThW0IjZLWoUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmX6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUpw/+N9Gz9/tZXWYqqP5e8Jw0ExThwUKT6gStpYmoDFUXkwHI6vTa\r\nbQsNy2nPLCEeb1sjWtIMUh5qSkG5aLMiaMQnRrOVqN93bNzRGHpj5Itv7GET\r\nXq4JCZmZlifm1DE0ftRdbBCYhUN+akItMvDeaOng+32WETuVqqDOJvDn/PAN\r\nGhScC7qS49dFesZ+4U7AQ8l+VsKOYDwIc+QH0gFi9UuLczOgWWdNDptszhDc\r\ne+vH/xYl013ik77ZXJkV+gefYJmRRJbE06xb7xrGE5QHpfngV1Qo1dvjqgu5\r\nHdxT7aQfToTYm0RMbpsfrzehyMZqgrCaasvOZ8huXFH83/25YPrSDJrQuFBs\r\n/STRnklg1ktgpr9csKzRh7RTjfGb1kFci5SmkwDl0SIr31NjTFrV/KGJ0NM6\r\nrbRYe78Esvrl5IX0sDlUmqL7OmNxRQ9+VV3tEwuK8mFFLI3K8kZ5/wz1qHMz\r\nuNTGG8uun4wujanzIOBlWJ8IG+V10kE1V8zJYgLpHY8zT1E/bzEqtZo1iNhf\r\nYTuPiYMKB0ZRw/ekT5n2dCFl5N4PTgSBRMto12bAzB2eLnGaDzcMmVXrfSTs\r\nKsJhZj/3q+qkI+i1jw6hbOzrkIYTnU8DzPChINHFBqXeF6EjKws9K4OVn53X\r\nbj7JsL4n+txV4GsSZId+T2muGXEx3GwPISs=\r\n=FDEE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/tokens":"15.0.0-canary.b5c13a7a8.0","@material/density":"15.0.0-canary.b5c13a7a8.0","@material/checkbox":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/focus-ring":"15.0.0-canary.b5c13a7a8.0","@material/typography":"15.0.0-canary.b5c13a7a8.0","@material/touch-target":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b5c13a7a8.0_1668441594615_0.03368649140294244","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/chips","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69450000e77e54dc25005ba45a3c84904a66afc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a6e1c0702.0.tgz","fileCount":163,"integrity":"sha512-8Ybvqjn4+jn68Pv/a7tmxkzQTPd0YN8wPsH+ngMGie1o2Vh3dzZtD+E1omTro8uFBrYZ8elM3Y8UKRo/QCItYg==","signatures":[{"sig":"MEQCICSGBiSP9Y0XMkDbu79r8Yve0EMOwGT53hIMbUcEm2C8AiAYq2+Jkfs5c9Q9Bi0RPmtHUbrpZ2Uryi6LR8px+QrFOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnq2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaNA//eLgtQ/FX07nF4lUXYN2WXLH9dg3idBEYfngoMs+EW0Q/nMUS\r\nIFYK4IAaPsfiNY3FG9haugYLNAqaORCeUGoAuO6rTewToNdAPNYCd5+XBo5g\r\nbpusd0ZTpFu9U1v5TLsR6LUrrb5PYdMLIbwEmQnaWKWe4Su9fu9R8gYnoDee\r\nS73+9PlkFUn2yJGFm5J5slXQfBFCBsFNwVN5XWNUOJAQPASC1MwN6pUL6a98\r\nH8uBwOqL5oyoeXRJKUeqr8T0YsBw0t+QSh03KvNYJ5bJlaGmQTySTKG4Uy2Z\r\ntbC/NAuCi5uyATLDe/REBBYspFqPNV1M4ORXSfZLpB+jlVVKjnAmVSQvJASU\r\nfCKIneBtdg2R+2T3t/eX7EEe7NQ+S3nECwfw0rwgn0Y9CZJsAFL9kDQ5meaU\r\nCXCNZKABmn6l3LKOE11PvKLN3AliPCy/lk+k1MnUT73tikaGB0DwGm4vo8Zd\r\nQQjm7uM5QK3whLyGFhE8Oiv6PPIKkARrYWrEhymHOnPjGv06zH3+bJwicq2i\r\nThurA7JaPU2kIYNE6q5wcLhBukk5v9pb6NWXfpnWzwvTfI6D10kZ7ezrkCEu\r\nVKU0dXiyNPGdjPPgd4OLeDR7C87yDFuXhWbNjWNI5+aCaKjGLM2pO7Ds3sX6\r\nloW63/I9NvecHsZjShi5ZDR2HNX7iWc8Wk8=\r\n=Qta1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/tokens":"15.0.0-canary.a6e1c0702.0","@material/density":"15.0.0-canary.a6e1c0702.0","@material/checkbox":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/focus-ring":"15.0.0-canary.a6e1c0702.0","@material/typography":"15.0.0-canary.a6e1c0702.0","@material/touch-target":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a6e1c0702.0_1668446901993_0.663040211246807","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/chips","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd45f790b89efc9070d4ea00b9c79aded8ab7102","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b6f8a06de.0.tgz","fileCount":163,"integrity":"sha512-Gac/GI3WuO5EZl2qcRB5OH07Dsv6ZVY7A89UkD2v3sqG/X0HG86q+Jcy9D9+Qh2V01Xc7C0Z0W2z2VvZd1dG5g==","signatures":[{"sig":"MEUCIBdGuOHRS30t52QfduXYMsbn3wZ6NlbSc1mnNF8eYmBAAiEAonuEv0XET80OvwrplkZVyrL1kMYXSaWkbTlqu2p6Yls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1wJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNqg//UMGxyRI5xjDwOq41HAfJHY7eNMqRaGY2bJ89rKaLoWAMuimV\r\nT8Obdt4Ak0YccXlItQjPkvUFbOAgK0Pee/qk/tF/VUiJMSO0+2Bsr3Tcywxp\r\n5F8krS7gf6oINSrY1Or8rT28BAMzUXF7POe1ayuFj/IPOiuaaLDZ2XZM07tQ\r\nXlukJW885Cj5J0KPXw7rhnEMdo/gLGlpN0HdN7FMnTuyl46jW7bQF7pNZ0qi\r\nw0aPgk17D7shFV+VbBxt1En637lStnPeM8zv646LigOU8cJb2Bqq9q6DgPlr\r\nxyxWYyskPmkLh+mbppmiYTf0rRJaT2LBNxU8kl7dcGPEN9QmqVVeNv8Mqqse\r\nsRje/ZCPWqa1MxCMGZ4SFqZn+sRFNnjqv3HAwu2ZeQ1nm3CxpSJXtCqH1vO0\r\nUK/eCHve4OBz2xgGFRtP3Ao69il8iz7GQHtScdhuNOfzPpv5AQuMmOzM1FjZ\r\neP70kRLNg12e54waTk5tHqQKg8fXujEKYBG6NQxF40SNaOgt3cgwUqBvxach\r\npkIzcVV7THZnZcFnGIvZhV/hYVnfKT0PISPlMcXDB7bG/lJ2xOLYskVY8DAs\r\n8EEl9ynOzhqxfpl6XjStmXgeyid30t3aEAYynIEnQ4l6UMUM5qi71ybMx3Oi\r\nKlit/SITo1Gi3JUxvP1x7T4sgloIg6HofB4=\r\n=FaUI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/tokens":"15.0.0-canary.b6f8a06de.0","@material/density":"15.0.0-canary.b6f8a06de.0","@material/checkbox":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/focus-ring":"15.0.0-canary.b6f8a06de.0","@material/typography":"15.0.0-canary.b6f8a06de.0","@material/touch-target":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b6f8a06de.0_1668504585533_0.2131676296431151","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/chips","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e0eb57917a9dcecad957fab11869153b79c7564","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0163f3ba5.0.tgz","fileCount":163,"integrity":"sha512-z2UNzkuic59LD5c3dwpwniWfXnGR/VDufg8Ld6vhzZlNKP0YCtvfDYrK0tO0U3V8P2j4gdlrbYZb3Fjy5BIBCQ==","signatures":[{"sig":"MEYCIQDKa2HAhmzB2z1WQN6g5HSy6TaORwpL53m8IxL7dVAwvwIhAIlZLll4FQi2/PQUQq8QM+doxds0tLr7K98TgTjuHzmF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9RxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl/Q//ed1i1Ogw9dRWaSSwgdBp+q0JRL6O1fYYGYdZv0JEDmuNkxW5\r\nCHasjqL0gVwpeGUM6rRUnwSOV3fw/LgfX6fQe0CTgaFypI2nkUGGqg1dqKz/\r\n71Gn1z9ebZGKO2Jukf4yVWJTrklUC9qOnxX3Gk+jtRqwDK/E7ymk/n3R8lRT\r\nGwy2J2mwGLtJwMLfhYNr03sDZsQKp1Wrc3GfD4VsFH/Hf2ChahvMHe5VXInP\r\nn5WDj0AwdwAC5gg+UGhl3ztKgD9wRsJp21uQHz4VdHyBiHDsnwm+HC0VAkvY\r\nv05XR90LSCYvxUXka502lc+QsWYecnDZ7imop9Y9uPbeybSfuEdru9/56Xrd\r\nCVKuW4IyfPUAxY4YclmD+eEaKK031kgQLLtJHWkJpd6Lu3TA6t177JFiTZxW\r\nJRHK2EsA6eeBUtbd425BenzeGG0vebM8D9eckbb4PK/xTxykoc4mpLGojBmg\r\nw1ReDe5twg8MCovyotO9FELXkrztsG2E7PKRfBwTGytGjnrhBv8ZXUSwcSQS\r\nPN9EQkWTtYkXnw6akRNNJ46NoRyIzMgRZbKqETPdcE4pIKUMdtOFAuwcOrWr\r\nR+0/V15vl6rm7p9ZmnVV215B+LRyd/Uy/Ih7lbqN5ELFnmfzWEsH+zC9jYyX\r\niVsuAlVXit/b8C2ixP3m1CaWVoiFXedzKvU=\r\n=yleI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/tokens":"15.0.0-canary.0163f3ba5.0","@material/density":"15.0.0-canary.0163f3ba5.0","@material/checkbox":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/focus-ring":"15.0.0-canary.0163f3ba5.0","@material/typography":"15.0.0-canary.0163f3ba5.0","@material/touch-target":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0163f3ba5.0_1668535409548_0.6360157192131703","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/chips","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b492cdc0e5e0c1553a89aa486c7d1b2f14cf41f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.66c5cbb94.0.tgz","fileCount":163,"integrity":"sha512-1+A99fj34ReTf0AswUH78UbsL2x/Nb+oUXhfc11pos5mFCQuByN9ym2P41UtaS+qZU/Vq0u9+F6+FjlwYtNhlA==","signatures":[{"sig":"MEYCIQDNnYVYf8HL8lice9AO8FzfjXIAP7rmcFkAh1Qmk9Fr/gIhAK7YvDygBYZOodmWEYldPsl58pL61KrLXvfULBsY+Evl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+kSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouFhAApA5626I14G69I9a1u09NjGaMlihRwr7cYFV8KRCZVKjS3tnv\r\nQTuiTNkEE5xGKIWxmCI7X1riu9F4UOe/jDqMdGmEE4vp4ixrLvMWPftZEnpp\r\nMGEdbo6bvBOJs7wx7pRWnPCg/F36glJk9PEDrqUgD3btKCjVCSuJFDK9gPXI\r\n6vt+rPDonkT7ouqUy7a0hd7LDJMOrIy47EyehT8j8SPhRb9ZCzbURLB2C+0W\r\npVsLt7a5Fi2OY6RYOS2GReg7p5e9zpNlcv1iJkewN9z5vm8uipEw93tAzEqM\r\njX6I6oehIsLJIt/3Lwq13qEtlAi04CQNvs+WDNFvuC6CiLCY/w2GL29xMKdF\r\nfSFeW4juJVk//V/EPpA7q1oW1k6SDgaVVtWUeFaktWR4G6ReRvV4n1x5YlMP\r\nTAk7F7mo4LCtr/gKUUs0/4JYH7sfdznIoZAsQRO7sCG8as6Qg5MJJd8HJUHG\r\nrQ8cG66hXpqpZZbvOag8+X8ZF/+XUVuDxIAME1qvcl0oRl/K/DELgwBpHcwv\r\n/KEfm818O9awwdBSlaVa/zU2ksFHzKMbOdftLZW/h6yOrKEo1PzIzTwpBpx6\r\nRVuT00y88H4PPQJ4+nR/LebVLCvLPG0k/8koK661awz8uMDNXWZjwxMk5C5n\r\nrIy3hvsQdlVdxF33Qnkv6YBNr9cLqQhFf8s=\r\n=w6m9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/tokens":"15.0.0-canary.66c5cbb94.0","@material/density":"15.0.0-canary.66c5cbb94.0","@material/checkbox":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/focus-ring":"15.0.0-canary.66c5cbb94.0","@material/typography":"15.0.0-canary.66c5cbb94.0","@material/touch-target":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.66c5cbb94.0_1668540690446_0.9660666239971258","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/chips","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b01136063.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce1e47a5362cd557ab9c8b766da9383c5c19566a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b01136063.0.tgz","fileCount":163,"integrity":"sha512-g1G69KEY08dkPO5sCunYsXZVx2gIZAF1tH7rkk1f88JQurXKyuEZ5tkyxiZHuxajzDi+c3J50ItJ9cVeqLZtXQ==","signatures":[{"sig":"MEYCIQCDjZwWRDkhLZ907NhcIBtsCjp9EGZURDYMRQQyZmXH7wIhAMDi3qxc5/Aw6a2nxDSROqpahYeHnSt0qN2IwDwqW6ZT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCwLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZrg//aR8DA/836t31fxIR0MTGWOrtGxYPgJyDbXRo0pfrOJvfLnuc\r\n/r3J7mETBvAydE0YiWyXRShrGdzv0vXzoAVMl3q/i4bC6fdMZ7I268/2Pbzk\r\nTOAnuG2qhvi/X/WcSIy6BjbMNfC/0NQlnpY2FRUU8HPhRugvpIs1jp/DoVUl\r\n6FkPt9rePJ4zbKnwfRjkJLSTXPpIVvLn8qy5yx8ivfr05mMqDHz8MRrmc6CO\r\n2a5M9qJB9asEAfwjSvlXOwXuIBxQco2mKI88iEXHcSsNf5peEzMizfIhy1Po\r\nfYYIHYeV2vlr6ZE0+svpfq96Uup2XEd7G0XE8pum1Ou5GyKFkzIAt4/2eI9u\r\nXVaG3xXoCQ2uKwN7aKd9AkMrEaKvik4vBFMaCr85kEgxW6P7Gxo7ZGcsbABl\r\nMOFR1aUYYOmdelf9GkMsQBfMoMeRV6dPrd/s7nBQfRHOnx+vSon4FFwGfc/6\r\n9qxS6FEObJ6ao2NWTAQaMY8WDpOvXRutn1PPQOX0YOgHKKk8hezAcwVc2AJ4\r\nJgaaKbpCXfNIi27WOYcmMcZyWvCW2w1btf2H6G4KQSYUl48CHNNHKKdNVwVa\r\nkl57+YK3yunRn9cOAXUAHCNk8KDtDwq1d17IycJKfIb9026noPK9PNTcqct9\r\n/k6LSpJNGHkvPyEWEepkbYplRV7myL09AoI=\r\n=aen5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/tokens":"15.0.0-canary.b01136063.0","@material/density":"15.0.0-canary.b01136063.0","@material/checkbox":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/focus-ring":"15.0.0-canary.b01136063.0","@material/typography":"15.0.0-canary.b01136063.0","@material/touch-target":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b01136063.0_1668557834657_0.09341661582156613","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/chips","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e53622f49ca542e3e8fe59ee011e374bb0affb6d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.01da0cabb.0.tgz","fileCount":163,"integrity":"sha512-837iNxX4omUnX8iLGIMmW6ew4HK3kBwahgp4H+8/Ew9WFlQgKV8N3bjq3kcq0d6FVIs4xucGM5XsKnYoAyc42g==","signatures":[{"sig":"MEQCIGYGc6m7apY0lHOQdet943D9Yy7kif31HvN/DTN1RGEKAiB+QrTiF1bwgXRsEFXF68GAhFg6lSoNQcUisgfw4ESt2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKoAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotjA/+JRancmoiF/FxoW6m45qkSpTcU7rc7ef0nx2KORDYJnEFiP78\r\nBY1igScHPUZoGfN2EpoyVbc2IIkKaYmbYF1wy79mKiot83RTNa1i6yxpzJQF\r\nPPqpWjhfxSFV8HUnpID9qvMZMyUQN0gXpxgK9woEqiTVGwzPqMLqwNaJFJfY\r\nc+uAbGPJ9c+PTp8HGRTiUwsQyKTWOoaYYVTALCuJOUIKTwkKrZsEZBWMZxh3\r\nGpSNld+MY3zF4HV7agp3ReZvLd0Yj0iMYJKcC9lVQqAVTQhkPgonFcNM6Wp5\r\nIMdLHKikehIcd+ZP3wt27ka/MM0H3pIfz/Eznxjx/wlwyBEv2hJYHpMNnBby\r\nM48Mo8S6QAWDcPTAz0+7027XUvAd7IMYwnqlLYziiLAC9E4SEOwEpSO8T3ha\r\nigFUgeFw0nIopzKiS9ZZMiXBq+KO4XhtVPIS9i6DilR0h6o0h43WPxeUOjvB\r\nEV07nXahQduUAhRs2XaIMxpJcho3XZPLqtsuLyteQntifPcYQOrGkhP/5SwA\r\nzg4ad9dN7Df0UMxedgWhrzO7IxyeOgq4uJHqWmXjHuagtb9nqAAPqT2VUYbU\r\nUVQuCKm0QDtW2AEZ+0JHqb9BgQF8GNh1VYNU+dYXX0APpC2uBpNs9JSWdE/j\r\nvKdQNWQq+LR9HrFZqEOXSOA5XGpYOjqsJaU=\r\n=IFDv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/tokens":"15.0.0-canary.01da0cabb.0","@material/density":"15.0.0-canary.01da0cabb.0","@material/checkbox":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/focus-ring":"15.0.0-canary.01da0cabb.0","@material/typography":"15.0.0-canary.01da0cabb.0","@material/touch-target":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.01da0cabb.0_1668590080396_0.18507424313063114","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/chips","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4ac393164.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb3c860c135fffb1c2ec6e1addfb72afea58700d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4ac393164.0.tgz","fileCount":163,"integrity":"sha512-29RhU2O6a2S/5q9/Er6VAngVTeRBVtgoZ2r3VC6ntNsiXFCpGfRmYXC22H125gHNL3GsBD9aL1SxSFy8ITU9HQ==","signatures":[{"sig":"MEYCIQDlU20YBzWO/KrBQnWVJfWKLjK8BM4HW5Hpb4xh7MhbgwIhALMEjV6+yv0dSKh69IZ3ObvZUJrKcf5zd+KELTKu67Co","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQz6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxjRAAij7OwarAaKJ/ie3/hgA9STBIAqrbVp5br8w0PHUkI6CjPnpg\r\nsCmrUrxZ9wa8t8wUobRS5YUk62xwysgRstEhM8usW+lfTQNOpMefiobSbO7T\r\nlA8wJLjXORAWOYEGqWL3N4zuQh3ya9OPa2VGPY1FXOSTZngqoB0ubqEJqzt1\r\nrAsD5XzxOJe96rMffRL36MfxNwRziR7v+jsK//BYgoctGV/94ANIT8lM55ik\r\naxPCNOv8+fAnw2hZ+7Ut6lAzjywkMoVUR/8aJ892Mn/V/4If7KMVJ3r+u7b5\r\n3bx8aAk3OOLyKA1xurB48H1kyqgIZFzK1hDmaprkvb41w0lup/63W9by5cs6\r\nEt6fScJdd+tOqgiKgDXk1yI5YTGA+ImP4SB9fZrG720upJrHmX/VWc2wLfal\r\nj7L9US2wyjK+99FqzTT934uhSMX4I1BYzjtm2n9r6w1xYrn0C8cPPTyeK9MX\r\nYWZp9yj81rWzL9FVVAJTgFp38yZkHQE8Dmetr3/yiVabhXV0dGHFT966p/Jg\r\nJutygohDQB5jniesmUyTZNHlbiLI3w2GuaSyip6SSBhWiL4n+7eEH8wtCaGG\r\nCz9i5BDixSS6WvZawUBHyMEH/NVjoJNviYgc4KeS2aQloN65ziuaWf8Vl4oe\r\nMM1RhX/+s4ToLmSU5ot31qDvNCvQFQbB8UU=\r\n=xW82\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/tokens":"15.0.0-canary.4ac393164.0","@material/density":"15.0.0-canary.4ac393164.0","@material/checkbox":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/focus-ring":"15.0.0-canary.4ac393164.0","@material/typography":"15.0.0-canary.4ac393164.0","@material/touch-target":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4ac393164.0_1668615418522_0.823338670555084","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/chips","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6048fb563.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"622ebbc65b019547cfd336aa5cc4cb5078d79814","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6048fb563.0.tgz","fileCount":163,"integrity":"sha512-QeuV8uGmA8d60G4H8KJa6n316LMJL5EX2wXRjS/IdIVSZxi20xiUBQZeAPT5cnsZSHbUn/Q75UzDMiK71XsvIg==","signatures":[{"sig":"MEUCIHaTAqZIL0ui2dl2f0fpfCNGbPhJEKMx1gcIkE0mQUhZAiEA7XZJr9Znk+gQ0MtRZzaELKIt8QJy1pHW3Q3lcBQEWa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ16ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiPQ/7B0mvIC2bYxtRLFlgtBln77ermMahZPyhwGeWC+jBmG1N5Im+\r\nxHWixT5ui7yC8e7DWVpt0BpPNtycgIRixjK80toVZUkj2YN3623rVAmjiFe3\r\nAokrWaSeNeFSjVAjdHQGJMO4deSl90VV9wZWn+hGU1aru34tC2lDFPZy3/Yw\r\nfVQC8vdIP0cOvP/V870DYZDvda2r9eMGi8KuXf16LVLKVu+NJ2oPgBWA1mQR\r\nQUfrVvTwaV8dXe5qjOERqwan0Oa/V8MlzhUAZJxr8hZZ92pulrObdAqFKikJ\r\na1HNMGAeiGHtV3x9NJ/TttGnQXJC3z6Oz47DdGAQqWgCPKFK1YWyoall3g2y\r\nym/b4Lg06lYeXq0utmyDRISELnaasuTmL9QO3aIqtpUkfal0MoMYP3Ol1qgO\r\naXOh0ayAv0IQiu3B6BIXSeybxeeX1d0d4eLWhoRiV+PjuypttYTH/Mp0QuoZ\r\nnPwBBTNto741L1Hr+30/IgmlFWNDQtERIZwcnFBzwQA65dko6+FbUGiKw+7s\r\ndTK4vAmAU5rg+NrMFI3idAdFFhPQoSjjlN4Ab1T22UYukTRiSpFm4CJEOKOY\r\nZ0x08FmN+dwt4BiJ2IsDPi0012fyqn8MlB3XORI3/u1U4c63waRLgizST9t9\r\n8GYEQR8AKVAkIAk49REVe+AHcRTNlkdmtLM=\r\n=d3eP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/tokens":"15.0.0-canary.6048fb563.0","@material/density":"15.0.0-canary.6048fb563.0","@material/checkbox":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/focus-ring":"15.0.0-canary.6048fb563.0","@material/typography":"15.0.0-canary.6048fb563.0","@material/touch-target":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6048fb563.0_1668615545861_0.7110903238464545","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/chips","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd3f1e7666085eb60f7aedd75c5dd272e0890f93","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f7f56fff7.0.tgz","fileCount":163,"integrity":"sha512-5dGiP4s+9qVDCStAqcfpk7djS9X8V8HHQXPxp9Zw/Jn+fMZJwwJwbTDX6o3MXbdUkbTBgfxtaaGBm8aKZ7GXPw==","signatures":[{"sig":"MEYCIQDX6bkcvdNihHydbRbm1tMeU2+/IXrpLm65FkebcQwN/wIhANQrPLlkxHZvc1k7kk2AQhUsZekLAdTPHjBM5yZwFqXf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUCfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozyQ//YEEq5NLl5nYjARiQxdJbkhuxkjQQgT39KQf7fn93W7aTeteu\r\nheU2s1fAgYhvmSHxPryfbq2f1X5QH+dUdQvuzu8jrWYFRGckqRMdxRxejo28\r\nbm6aakHDColIf7b0p95Tac9vUYGtwzKnD8BevKdwPRLdsxqAV2D1wdq7CaPg\r\nw5w5bvV3AC2uUGd6JZQCRtGtSMBhNu1irZyxycnERGnJGkn2/92qJEbL2sP4\r\nKOFYLk2B2MwvFyUQB3pnVyDzboqY99QyMOM+tRxZWbtI0qFHYqf+C80JofLo\r\nKzxuzA9OncaMJkQl7YzfSZvXz6SJtTdkM6s+v/ov181Z9V7YpszsVa/Hjbrx\r\n9W5uHbGAWjk6q3dBkJcy5h49ZmR7LYU1qR33Eq4VbfeWXghzCNNbzTys0a3L\r\nSJ7R0JyURhBtikKd2kN14fTwSsfeFJpzSfcGzMPntBL7qpKZZ2Yo6hg4P+0f\r\nOp6OECpFISD0tjkT8EjM9u/NDR0RJQy3vcT/o3qSTvTEC3lSh5KbS55lW781\r\npvkTnfRbKXvH/S4SLLkgQsfUAgfOMKbnRYwxIgrwu9Z9bhhdNRiBE8FwIFnJ\r\n+SHyS4SpP15D2OB72ovqH+swsxDTc5Bg4m3aVI1apYGRtXe3FgarvykUG8Z8\r\nQH0MBzwJa4x4I627MHBp+t/XwwjX29p0TBY=\r\n=tP6U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/tokens":"15.0.0-canary.f7f56fff7.0","@material/density":"15.0.0-canary.f7f56fff7.0","@material/checkbox":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/focus-ring":"15.0.0-canary.f7f56fff7.0","@material/typography":"15.0.0-canary.f7f56fff7.0","@material/touch-target":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f7f56fff7.0_1668628639478_0.19329369737013313","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/chips","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0840f64ca501b0dcca1204df83c3a320b48c4735","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7c73f6134.0.tgz","fileCount":163,"integrity":"sha512-5LCUzirD9/IY9CXXv14VftOc0KLa+rb2oLdXrVLsjbx51iHe2XJHQ2pvcL/kGyXrN9Wyb/7vl0EKWT5ThT96zQ==","signatures":[{"sig":"MEYCIQDYVD11aqcl+oNOMD9q+ESOPgMmd057sr9KvM1/W54q7QIhAJ2hKV4yyAcPt8pmFrTXLdxvRIN7kJKVvIeKDe6FELib","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUGUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyGA/+Lc2TE4JgCaFC3xJSP4UpTtB+sEfufK0t8+rZhdvjsfZVEtQ5\r\nodNDz9C9BhE9cM1Xl99gkuDvH2xA/FH5aR2LNtI9UKy6FlGzME0PF04rYSL/\r\npDW3r+DI9qRxtajns8wp3ufuDS+jtEf1np99vZfJe8xEVkluncslyL9g82k3\r\nZyxMSX36X5DoOEjH2UYkAOzsmTOtVNqqfbJfsqLmKYhYBBFFK83DISS+PjXh\r\nBR8gCgK/ZVd58cETJS/dwCgn8hycVYbaHTCazYZvMGwTLGxXl0vjZWuElL/a\r\nnahby45LltvlFiE+sWzKbytPLqBWrf5AJx5ECxztHetbi1+h9RbTPu4bcpMB\r\nhpFgHAWACblwMwyNYnVqnT6RwkZQS42vwgp2n27gBu+M0ht8xGYOps6CD/n3\r\nR1oaJwH1mqp7robxVY3jq6JuGowvlsPnGpFmRCAQIQoCfwp3vmbxWVlwOq1p\r\nhwtWXOvfEl3+k3cVH7qAIRXlB4TOTVBAsDEpx6vBCwN74mqsHDcIeiDozuR7\r\n/Df05ePJH3KIm0GJmGU9Lmt/4b2FaMz1kLzmBQu5jN7+VTVBgo+wnyJF3rDJ\r\niQ8GXjPcN7GhJvD0YKjOhiwbcgYF7sYBbfNEMvcvThZQez93RVmzRw3VeiAl\r\nKjuWF4I71MtiIiUjCUT7PBt1TE8E+xfrKKI=\r\n=RlJr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/tokens":"15.0.0-canary.7c73f6134.0","@material/density":"15.0.0-canary.7c73f6134.0","@material/checkbox":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/focus-ring":"15.0.0-canary.7c73f6134.0","@material/typography":"15.0.0-canary.7c73f6134.0","@material/touch-target":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7c73f6134.0_1668628884062_0.8631492765810229","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/chips","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f1e037150.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ebb01277c1bc4233bb859ae225d974944be6217","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f1e037150.0.tgz","fileCount":163,"integrity":"sha512-2TTYhwVxZkxPxJ6e+zTChOmUyi5VqB+12j4EatedSYfiO1g9JeIsBvQVGSpEji82O90OBvowHNL5gMUgghxxCA==","signatures":[{"sig":"MEUCIC2Fdi7E4LYG0gqO6SUbxqRTDpXqggY4Gcai5elpKG1XAiEAhnE7czJpjll8EzrpDWXRIbWRWGMO/uo+prcNvQp9jZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdULSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG9g/9F2CFkY34bqBHAFNLrTjyR/cEiDgGWf03TayaPdQFi8eCcZ3z\r\ny3gcSZd2VGWiYjIMOlqeAC2VdmdEuBy3wsSk32IVlU8JqpW1UXUsUh9SOiVO\r\nNeJaKe7C4wf5aOCA1WGdfxREm3MHqgfLSNa3fKUwqcjiY0pvNHZEoSJaMnpV\r\nTDc6+jd1Fxp3IKHoRzwq8Ej0Hh+vb1VxCIIlwfWMWy11mBUay3pD1XOuL+lS\r\nQ5yEHaSG/9O5T8NLEMK/Do9p8n8ECFCPeFPxLFN1KgaeEhwMaXxkcnMWXoII\r\nT74tf482TxEWknyjx4ZQ1GUpVQ6GCCoengWxj7GfsrB51mkGv2SkY6H/FwFq\r\nn+gizZiHrNhV/E2G6i228uEAonOVru0Rfx1nhOiXjhlCDOSugUFPQXCbaCtW\r\n5w4zp7qpqX7B4C0CNBRfJkevlKzuA0Hge9hl2VM4Rnd6y6Y6ldWIxqIE8/zP\r\n12a5vefT0ubn0Z2ImE4EBlEGABzu5D9P6UfUh0d9hZd38cC/t10QHydEQVKi\r\nfCjdtnOxXhHIpKFGAbgYlB0qk3mvgHRTQ6br7GLDI71aDYzRJ7SaGoeHBlFc\r\nwbdTHA9trDS//dPxNmaQyyViAjgs1CxziHKJrDp7ovdU4ipmjNnRrIHxOiiT\r\nbGiWXAh50G4VL6bwjpGXMTG9GXo+Q5p5fTg=\r\n=qwWt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/tokens":"15.0.0-canary.f1e037150.0","@material/density":"15.0.0-canary.f1e037150.0","@material/checkbox":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/focus-ring":"15.0.0-canary.f1e037150.0","@material/typography":"15.0.0-canary.f1e037150.0","@material/touch-target":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f1e037150.0_1668629202623_0.6427248321308261","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/chips","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.40b18d043.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81ff68d2a307ab4898186da43009e416333bd296","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.40b18d043.0.tgz","fileCount":163,"integrity":"sha512-iqgh6RDyQ071dpFJDEsdPeM4SIzSwWZwJ+ot6MLZAS0M065WrCjkopaDgVTANkBbl5uqGxuuaLgFRi7EJjmK+A==","signatures":[{"sig":"MEUCIQDmEygWer2EhkWEeiUhzqCRIkFrgKbcwZxuDTQ1NFO2rwIgJ7VPLbrIf0ivTHGJsK8cswSi3EbxYLO468PwUrcoh40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWt4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpiow//UpCc1S2iIQiz0moUgzU7rBBEBJw7rXzgXzABdrEIOotKeG4z\r\n5H89j8d9qQmfaZho8XmEV6RLih7BORlAB5MXM1//6b5iVNmCAMyUau+ClLrI\r\nXiUGqCtX7Ft0Ohu7occul2xBCOWctj40mEPiaznDqMDlx+C+ibaOiP6CaUQX\r\nM7WhQA0umrpgRAzMjuVMH7AaAMPoRKV8EG2nBG3IoKG5WS6s69ZQLSGu+5IY\r\njWRjoz3tS7KLtRF5VIekX78hGOHDpL8f2vxR5cqJjnp6XhHLK49PfJ7MYSNC\r\nDIGYvcKT3f4kl9HcubDl2Y9CyTzsU4B+UJLJFfyxEuu5rO3sRQx2UMhI5ATG\r\nsLGWBwnPsaJFJcIM5oamGsycFWNYgBeqdy2DyrFepTJvsvxmfB3OLW0x9RW/\r\nb/DDyQtXanvMgRckTm4Zh3H/HqbHAOB2sdA1m8kmgu4sQuMr9kiHm55RVwUI\r\ngUODJSIjbFmEljutSQaIGq31fdKp3x7UgViwEGyridZGVQZJkeFWv9hD7tZ4\r\nHBlQG7ZOSxEwLLXdhwTDee87D/kBfqp3T7xNX+95aDQdufkFPEI9WvbnCo+F\r\nl63VBy56v/K6y/5mkoKrDMaJUbycsHbze0drsw03wt3UMwRcuErr/1BV3U61\r\nEZKgjRGavBazdoF3XxAcAiNubOcxw7diUCU=\r\n=iERk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/tokens":"15.0.0-canary.40b18d043.0","@material/density":"15.0.0-canary.40b18d043.0","@material/checkbox":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/focus-ring":"15.0.0-canary.40b18d043.0","@material/typography":"15.0.0-canary.40b18d043.0","@material/touch-target":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.40b18d043.0_1668639607697_0.07503101803902124","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/chips","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6763fbfcbd94130642cf76a0c79bb62f416f55e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.86bde5c06.0.tgz","fileCount":163,"integrity":"sha512-6k69uqzILunrOlJYgrkPjg6VJP1Ty7XcGO3laIik9U54FaPTJLRii8oGa6h+5+7OZbAB12QpxDbsK69MZX/9iw==","signatures":[{"sig":"MEUCIE25b9OtXKd6q2ioHrOpQqW0tV/WEr8/HOI0W7KBr0upAiEA0edya0Dkrf4mQqE+oVMZiIAMt/BryeLECfbPUP2yr3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW3YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9LRAAlVG26GSvyP5u0YaW39bcZDSSUT2au+djUPhHJx6iCtvjSZZx\r\nT67nqNqvwWeU0Dafpnv5Kr5czwdZAk3CCxFczaCSWFpmUNLtIo0lfI/N0Umy\r\nzxrC/hs3AD4L+O+Ttle0UjA+AfjTI+XfD1sd0TxAHbVL7cV2OtRdl+rOUCd5\r\nGZaK+4ldqoN+SY8VRpnG+aF6OfXV+riVn0E5+aIUKPasCd2O0TZoU24BHsDv\r\naWYf9JuI+Dvdoy9MjN1jYnsGGbFcQ+1MGF8Lv7qBchCVKMOXMzQjbL+mUMOI\r\nirX6tXH6daCuz0hDbXTRgq8u6f+Vch0rNUSVxezwSQJLYZvr2UhA6VCyc7lN\r\nLWNwVsH94ZoKd7mfhEEfNGru5PauoBElPtPm407fU7W/kFBEZVKxc+Zyuesw\r\nFkVyvRK2exwpc+jf78IRgY+liNFd1aj1u1i+KUXEEeyDNOlNk+yjfBGHhGWL\r\n0FtFlhL41HdLP+mkaM11Q2C5Rp8j519NScG4J34WjdmZNmWj17GZR5Dpuryv\r\n1nhPEejaD4+7KuhLZ6KJMnBEWsad0JH7ZTinCsxb30mAlDm0N0cSgYbTm7hR\r\nxEuTQqKgARKz5lwUa4wboP6lgP4cv20hEE1jQ5rOqC/vmPGS/NQ83a1gW6Bo\r\nlA9RQ/bqkWEBnxeYLWxNIL7V12kFqOt/3oo=\r\n=hPKH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/tokens":"15.0.0-canary.86bde5c06.0","@material/density":"15.0.0-canary.86bde5c06.0","@material/checkbox":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/focus-ring":"15.0.0-canary.86bde5c06.0","@material/typography":"15.0.0-canary.86bde5c06.0","@material/touch-target":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.86bde5c06.0_1668640216386_0.33814593136776927","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/chips","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.bb7751002.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2566250909c54075890c4fdf7260ac2b84c7c3de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.bb7751002.0.tgz","fileCount":163,"integrity":"sha512-d7d6npr2CFf3TMgDh4EZK5n5YxKP2sm10Yla/sEOdSKCYocjJB310EfGrfZHCbOAmd3NmjhEW0eJLz6L+LaUow==","signatures":[{"sig":"MEUCICnTP3dFzaBDNrwj9BOj6QvMP3VVIBZqPZa5E5CUzxADAiEAgjxallWQ3Kpn6zW/5zPBb5ToM50qhLf24qwFcXseniw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXnbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq2BAAnk2DycfA9SdiWbZ7+O2GOPuDQUKApDJDqH+DakkNhGHRVrjb\r\nKEnPPdoSSdGHdYw67svFg5GzEzBMmV8oDa77+eakuPmaOVYzwzQPrUVsR+dd\r\nKF0JlCaDrROynVV7eX6v5Qirjq4TPCkvWBkBxR/VdycmGG2ZU17Y1yTIgo2f\r\nFxlzCrLfIvDlsQztHg9aRzbO4HzyUMBFZyrSmR84qjEWKC5yDXUBLAYRHGv7\r\nXEg6vI4rGXmVSWQReAK2jlEvbhVINRwIeLgfdhjEIdvg42l6iDOTpiVw6Yxl\r\npZ6J3LqPEDN+VWGqpPfQmwailyDtArUICzcC+Tkhhpqr3iAaZO8+gBlDzB24\r\nYdBfL2DLt8J/gTN9On2yYodrRwLhHNI44D1ns6lbRA8J8hE95CxQvw6LAu+3\r\nPHtscMnsJRqQA9VBm9NPRRUMa4vRDaGJF6zBdPfZagan1s5xN2/kkpYy+seU\r\nljySh7SafdHDt5hN513rsKq8iH7FLrjMDtI65N52EKQA0a/3wT2vYxhq3Gn2\r\nEAdchKq4SkctCHoZr5klN8gZJA0/VYC9fF5XSewX7NgVyj0HL+9rotUXQCXd\r\nZV2hBQhoA53uuoBxgW0j/FH9YLZucApxnFpGl/7VQlb/l1vXc6T511uw8YM5\r\nwrnX13RrhAf198XSxek8zfcxpj5CN9Z/qec=\r\n=/OjO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/tokens":"15.0.0-canary.bb7751002.0","@material/density":"15.0.0-canary.bb7751002.0","@material/checkbox":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/focus-ring":"15.0.0-canary.bb7751002.0","@material/typography":"15.0.0-canary.bb7751002.0","@material/touch-target":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.bb7751002.0_1668643291702_0.2714753434031991","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/chips","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ccf35721625440f3a822c1317cca4368d10fb6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.63aca9af6.0.tgz","fileCount":163,"integrity":"sha512-2E28WxUrJATSrOxdGT+mDJDq5s6NL+tTON9SyCmU3qLfqPIbm9hleyLT7K3zBJY+2baduAdY5l4vfgsrUFgppg==","signatures":[{"sig":"MEUCIQCgnUHLT49ZdvcQP42HMiD4WkN6AF0tbXxHUDdUaIJFKwIgVq8+BZeKsAK8TMnu02+uF4EHOJkkb2DwCK3Z9bEkhCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoVMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpERw//QsdLZKFMGiKAtq7ylBQXXnJbzrXCHEDVHB2CdBdfHW/INmBy\r\n4dWUgqIzzQMUxAE8S7eNbtGrpvVUT8kWQwihjkjzNchTVDApGo3Gg8R9NL9l\r\n6PN3ucwW09YXAURpNl/F0IWeyUDEoRKX1u1ULmX0VqY42LLk9BwoUFXYZKdo\r\naEA9zWcUhF5yfv1tMtal2qLUljhhDcREfe9epZvhTWBPmk37ZOB+QeJ7mO20\r\nt/Y1S9DpNmnxhBmlTL9v9K2azLQ1NhTIz2/MjGnXaTUozlC+40Y4e7wgIsx5\r\n+ez9MXjTrg2u7AXWhWbUPPkT+b87vShO6WFFV0fhBnFwnzPRV8Jzfg/p4qDc\r\nGGbFP3R5h8jdiNvc1wGUhnj2j4Vv/7j5PGCghyrW4VtSoKc6rUQtAq3+zLDI\r\nDzhUc7U94MkK020RUcI5ZEVkgjWLPq2PNICGZOerVXWy2NlKaDX5MG8lUDg7\r\nq1We6E95hNCZuEYwSGxoNoL9KZ48xvWCpQkkfLeGaMf+zr1/FHVGLdK+T4nh\r\n+aTTu2aICaSOD+rkI/0S44Xr37qFKYHaKLxnmlVWf2RLj2Nmyl/kiBt4FlHP\r\nY/6bN++tZmKf8IcSglJJwcYParZqKTzVOCOj5kd76aH4QODDB3BAyzSF9LF8\r\nE17iwInsxhNYIA+UHWYFvkOeFjFCvS1sOLs=\r\n=EZN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/tokens":"15.0.0-canary.63aca9af6.0","@material/density":"15.0.0-canary.63aca9af6.0","@material/checkbox":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/focus-ring":"15.0.0-canary.63aca9af6.0","@material/typography":"15.0.0-canary.63aca9af6.0","@material/touch-target":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.63aca9af6.0_1668711756129_0.46763166714293924","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/chips","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54179724581e4ded1b247a67d63b4d4a3f6218ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.56482dc2e.0.tgz","fileCount":163,"integrity":"sha512-WP17NvSUSjNEMKZR8GLKN0F7/gGDC8cvPbpQQX+IFSG4h6Ug3OQAy7ko5N+TiJSbp4cAoe55jJn8AFetmCwrrg==","signatures":[{"sig":"MEQCIEbtDubSRXP1J1X9Fy9TUfMYTFn4RKXXWwHb8Hr0Z9a2AiAReu1KVpfVqgG+DAj6gA3DcAHDiuD+7ovFEctmEMiB/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq4DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdCw//QmFg/0b1e3LHsAkd0SVDT7N8do0cgxH7T/8bdu1a5x3XbzKn\r\nwBZK1W0rGdju6r1zRrSpHJLxNROj+zc0gMElthVyIn4SPw2Nw1j/dfiEGNJM\r\n0BAyWnrcQfU5nflM9to+j7KhUYnDZssmKLnoJNkRLdkYqJEWJSW5/D4WznVe\r\n2Adf/XsultZSQ5LMXmycYoSPQ84dC2m6gTyKZv05zTOH4GP9NQeedwAyZHwC\r\ns+LEkgaDDc+xZCR+VzgYcJodyf4R+sVh54roG8khhPdmiExeXZt+Q4pH2ZP+\r\nmYJa/KfVjtCPJMP2xFozd3PWdIbGs09KsIU/vgUJr6MFEXmTCKHzca53OdnA\r\nxj2n5DTdyQEUI30I0nyZRMXNO2KGIwwhNeMq7Neq7oBk0fLcDs34y8hCRZm6\r\nO+esceLnIs+tD1TxXBHgvL0oj/poBjETd4fLN54/tqsJJb89YATnQyD3Sby+\r\nv/EQxef8RORv1YR2FDgVNaHj9vyRUzz8JhajCaL47kVP8Ken1J7gMNqW3pJp\r\nuM9vrdcOqCUqabNhZ8dg8F5Zq+05puX5qXdyBIAGGqHt8/QRGq5itbaj3Ra8\r\nVXz08zk5qFP1E2ObqzdAL/OSCxkfoyiEirk3O4bMX7bg4U4MlsgecS+MlXrX\r\n0IIRcJFxq665BPOD+A463TewwT598Wnmgd8=\r\n=d3Yb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/tokens":"15.0.0-canary.56482dc2e.0","@material/density":"15.0.0-canary.56482dc2e.0","@material/checkbox":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/focus-ring":"15.0.0-canary.56482dc2e.0","@material/typography":"15.0.0-canary.56482dc2e.0","@material/touch-target":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.56482dc2e.0_1668722179413_0.1386911225125922","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/chips","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.953e689f3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a30d2b13af06a70daf8f0327543ea51a73478e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.953e689f3.0.tgz","fileCount":163,"integrity":"sha512-xIgMkDaVFxS47SbFaNGeVHdrAjMAU5WJJCXDYF+kuqptegxH2/Zzn5xoUmPhUHIaqHEZxH4bnNgOhCVBQZ1QTg==","signatures":[{"sig":"MEUCIQDkrcvxkMcw6VH8PzLxji/rYckfqZR/6zKC6HKwYCQgXgIgQkUW2UHddAz7BAjKNK/zbWPTYQ8gMZGkAe2kpWR5DXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrBKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTng/+PBFj4fB1og9nt1/VIqOgzgt2t5XI1710DlQYR2UcKw55URQL\r\nw6Ezdz8a6tyhqEhT2jtz02IlsLYdA9ClPxgvkMzjZbEKoQe4u0mupdkghfS/\r\nsp/2lcXHYgepNg/IYtPBPtS1ERIcLr9MLhZJmTs8omV5IRlQpW4Sxx90awUb\r\nh0ryejDTRUCwqFPwT++Og65hqS1pxkl2M1jHbut4t9Is5JoDL6L1w12BXkVp\r\nTKXcRjiNCxTlJsGh9oOoHS3Dv9k2olbGjUDjIb6WpcDgWUIJNQwJPrA2mAvO\r\n3tfKzj84PVHF6VhoihU8hgd4TG78lLBYAGoS59gOF/f/P7MOG+euYMbMmwcI\r\nDENXvfdoBsdSJxcit/Tr4B9YK6PaUyYtzGulrrqOqrElZdozdPus0L25Wb+A\r\ndysPgdx7AK3BfRJqWAzEqMzyckLKLtz3/ET1ivib5L8jXLH41G2HieWFYDqP\r\nKansLQu8CKsOL/9yP/qf004IcG+ouk6oq2nke/Yjqsw3CVjKypKHPLvOfQ/O\r\nvYU887naMwpSJO6Nvn9SmCEOJPochFZXKSZMZYFcW5c2t5UrGRWMrxXqMivx\r\nHDFNlLyJADVg2ZiQX/VL+JrYhf/f60Q3NC4GH2brI8b5u9nUnO8YB28XYla+\r\nIrld+7VDfntEdbjBmGBQbjoVGqWPma00KEQ=\r\n=QT1v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/tokens":"15.0.0-canary.953e689f3.0","@material/density":"15.0.0-canary.953e689f3.0","@material/checkbox":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/focus-ring":"15.0.0-canary.953e689f3.0","@material/typography":"15.0.0-canary.953e689f3.0","@material/touch-target":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.953e689f3.0_1668722761908_0.05446495109625493","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/chips","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b5606a793.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64ed4b7ed7340d92926c0f691b7838f1dd0f72eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b5606a793.0.tgz","fileCount":163,"integrity":"sha512-rmvsHCRupzNr0sQ2iSA1oTv+YNmVIfsa+yNVC7chhrRsAua3QD6L7VXM7Vn8XgZL4bZWOUybUpvU8zJM/Om0Qg==","signatures":[{"sig":"MEUCIBa1Ik6czI/com6y52S7ecIDQdshWArf3A8dg+CufQZWAiEAtHuZSZvwZoHfev77lNdemH2eemuMYhUPz5Xvv81x4Vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1zkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpeA/+MvT5MfPTQDoj4ctFNm1u1uRusv8Z/BEVvz7vIgWNX/DcscOG\r\nHqVt8FufDqbyz2DmIf7E/NSntI1DkwlMe6dkBYoaqQQWhvALRBYIY11VNdNh\r\nJCeExda15ANpIKLmuctjZt6A5v36om5IXbzwhHyZf05dUzds/4zs3aIOIGGw\r\n8OMkjalMAM6hzvz5n2W08SiXohcyRTqtM8qX+HFJhJVYL1imeOxCxZd6Y5+q\r\nushlzhaddFFXooIaRkgfQZfqZ8qaWLcg9x0uc9PuZtR2bJ4FaJJ7FjjfkV3x\r\nJEaEYYaYRhGXQzoeWFxQi/U6/YyueOUFBa2pRaggrfgqPC70i+QKyKzTAVus\r\nmr7agv3uI4hPXG8vjFVvm2oPaZ6aNkVhoFmj8wXTYWbN69CZCPR1ogVa84Rr\r\nz7dNTjEZbggbR6tOrjZDInsQatG0l8u0q7ff2GnhIYo2D7K3DfrjlXUHyA7c\r\n0D4/O64JeQiMECANMRtdGw5C0Wli1iKq8CiKo6iNYmi68TFjycGCR3Ku5G+w\r\n3EMqQc2KZpyKRJxx5TmgdN0GVKZkeHRWeR2Nq+/hPpSzw/xo9YXCntssrzq1\r\n2EGG5daWsOkXf5emOgsg6ZlIazke7r/flK+Dj+oa26FTCb4SdbQ65BpMNhbN\r\nYOoSIW4qLoNMAeAm0j0sRR8CD0kUqpAXmDY=\r\n=RFjE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/tokens":"15.0.0-canary.b5606a793.0","@material/density":"15.0.0-canary.b5606a793.0","@material/checkbox":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/focus-ring":"15.0.0-canary.b5606a793.0","@material/typography":"15.0.0-canary.b5606a793.0","@material/touch-target":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b5606a793.0_1668766947900_0.9212748893836775","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/chips","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8c5675942.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afe5271c8ce24663bb6ecb202836120e18ea70e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8c5675942.0.tgz","fileCount":163,"integrity":"sha512-DtmurAF1C4hPuOE7JuQ3xEDbelkqDkTva2JlHVI16XMa7IDlV/EyLhHmXo/WFCUy1YLPcwloUh8GealxzifsLQ==","signatures":[{"sig":"MEUCIQDOCUCrGeF6Q8f3EIAkZkvM7FR2R5nQwV0v3Y0ZaTuy4AIgYk8SHVv14rQWegiNb8/0D6O2Y68nNqU5zMnKFgTmvzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6IXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQMA//akvZf7sOHb83CYnmhz91GN1VQPT+LUUoyR2OowI7+L6H+CkL\r\nV3uqvXaImOPur6qz80vOJwe9AWx9NgiDc78Gx8mQKUZShVZDmiXgrnxtqgGx\r\nTO4KJ+jsh1JJ4d6f1RUAsQhbhh3bIj64ZWmDnTEH4l8R68Q+Yqch4eBYCpop\r\nPwrMrJe45JhQeIz26bbVhDaO4zFCRd/XcR3fcr58YRsIDYlVkSX0/is5xSLg\r\nKIqj6jLFeKHsB19iAzbMWEpvH3M3LV5Nlptgv12fngDf2yjKANrksgMVA51N\r\nbRtYVHfZKfrOwLi3fxqxRdElWo1Un30e8+2V0Ocd4c0n94KJ8AoXK/tYbuAi\r\nm8AY19zmudtQuPy91Qy42jCTK9dJcZE0Lz+VQkNNvjkkWIRL+HLRI80aj8Ap\r\nDtQ/QEaj4EMaax9vxOmQMDv3GCdjT88gQ3+UsljTeblpbWchy9HtDS8RQDtw\r\nCsV5knPUUBpLT5BEl5Z2vldn7A55GrsdIUN5gWwk+PldkmevA8l8wHf8bEgS\r\nenLl4pUvhiQVhxKGZ9vm2b2yWFDbu1+z2RW7suyeRCUurCygq7Dx9gUaGbnj\r\nvOYpTfd6t5qzbXPh0fn+uDPuPq1tJjXvwy5sAKSv90GIybIjnolGP165hMzR\r\nDrPNHsemWL8A1TKGIJzJHJ6AwdVxecvb+eQ=\r\n=WGNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/tokens":"15.0.0-canary.8c5675942.0","@material/density":"15.0.0-canary.8c5675942.0","@material/checkbox":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/focus-ring":"15.0.0-canary.8c5675942.0","@material/typography":"15.0.0-canary.8c5675942.0","@material/touch-target":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8c5675942.0_1668784663165_0.5392749476618734","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/chips","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3be41e93a26794d02d518a1d12c26b5508337123","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.697fbdebd.0.tgz","fileCount":163,"integrity":"sha512-mmUhY6ZsaBpgFoMdypomDtB4p6iXcL7igRnPvTJl84dqBRsYjgQTk11/CrnoHI+sPg7q3q/PmoxiIVc8MuRxDg==","signatures":[{"sig":"MEQCIHuRUoj7fMJxpolZFSwq2PpieYxZCe9sPF+7qoh4zYhUAiBmo/C2K8JxMqLjvkz+p91kCrVU4KQdymGVwtQPF7nISw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7qiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohdw/9H4P49dpPNsOjTbHkynlX4wO/Wx7F66DfFsvstL9K22H4+X1l\r\nnWA1QFiEzd1sjbk6MWyr0TR1B4bfzEQRrBN6ujUrltD/sdygpR7yZ6LMF0qi\r\n6w7pzZrS4kTqzCOYVNp7Er+xhuGKaRohj135vJuBV4GQcaxFU9+k+XS7SsZp\r\nYh1KHYhKq16pLxBiDanmH0B17c384HnRbFTmOeNHom3aFytbyZj+LYq3fd0F\r\nKV298BVeJd95saSmf450LW3nPEvtU9Y/nHNVplr6/XBwasA36NW5Fxh1/yLR\r\nXlbrVIo2/Z3Fc6JYJiTK4ILPyIQQyVR/rHI7xkmZJ9diWG8eeJr7Nwe7fs0K\r\nOe0d0cj7l3RZgyXPwpLzaiEEftVev0FZ0wjGfDS0/03nCuSyogm7k2LO0rAh\r\nq6rWt7s/RzMIMJGvjqGIbDkzM8kSHHUF4H56KIffB4L8w8vd06BV2KtuvhiU\r\n3vyoZJO4w7qD38ljbvDQccXdfYtoXPpRUGR3+FLN2aRsvC8e8qTQUDjfaLVB\r\nWyHptcPUNB6+t2UgnVHlNo5eDUSClc1IhdXNlKFkQUJ2TswlFTd2d7yn//FE\r\nJa3+QcMFlp27YhsN6Ik720kIpzqpx0fTqqIRsugQVmMHFcrI/h+NE9R16mus\r\n3VO9xqAcwyn4NDAnuVGJwG+Kn2Ezmt5Kfsc=\r\n=G+Vq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/tokens":"15.0.0-canary.697fbdebd.0","@material/density":"15.0.0-canary.697fbdebd.0","@material/checkbox":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/focus-ring":"15.0.0-canary.697fbdebd.0","@material/typography":"15.0.0-canary.697fbdebd.0","@material/touch-target":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.697fbdebd.0_1668790945784_0.33390321667177614","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/chips","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d58410453.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a757854c2479dc636dd8113e5db1e5b86a0b5ebd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d58410453.0.tgz","fileCount":163,"integrity":"sha512-ir8+RLnfftoOi0Bf2bXb0iG9F0MIGNu86D0dacKVAOgkogAFyUcsOhQh1F0sHuZSZQLMVpCbBL4jqJhjhUAqeA==","signatures":[{"sig":"MEUCIF7mHmSaSTY78H5OxlZCmsjpbu2VYZPH8wKUpDV3UYoHAiEA5lXbTdVPG+c46aa71kzAKNW5NCrUR4o9ZRKdSYEhoho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9xoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg0w/+NTmkYC5TToOIyQ3aGyGdMkUWBaoRX8K6vKhayt9gEtdJaO1f\r\nzekogc/hbH15rTzB0nmXaYOJMIdYsnXBRyqi94CPc5uoq3LTzuSQUXGHBcpr\r\nedkoSLd4D4MrJCOOcvtLJxMDbZxbVM7Y2n8ZO9Qa6QNwex2w7lVJAGRcmQSD\r\n1AZShbAQOlMw/iWbLxUIvxuHJFeTojBJiA3DwmhgGSMCo9+FqJC04tK5qBLq\r\nvzZr26tZLjsknssoQp9HtzW3lvqDtL6XQRNdlANls/k1bGZIKm+Ajw99tLVd\r\nlMTGvYD7dbnVtGWq8gh8viHZOXlbC9yJ/hWeJCDUq5As+TKcq1lesc5uxEPO\r\nx8MDcC+stPQRmPYHTvOBsNYmchAgG/P93yF5N6+Yxb4/4jj5857WcNSyyzla\r\nwrtOJBbSCUqJ2fAIyPc/JRv5nivlbdt31sWV5Cz/LKqIDASkqn8wALT64LCq\r\nuul0SFBso7PyyyLCJyiyMwXrGGylUbVAN+rc1nskcAB/ED8cDsulf8iSAN5L\r\n12blnNAy7kvI27rqA+ST4pCwKXUlPMWuXc8h75+5MyS9549cL+fAdSN5AC3z\r\nYBlpwNf++thNVvKCpPQ9iq3oIGIgwkIdBoQSn3yuomOunkSuWlmNilIxSxnm\r\nn18DA4JnycmACLLrNrPnFXVVVzciH/F/tX8=\r\n=RqZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/tokens":"15.0.0-canary.d58410453.0","@material/density":"15.0.0-canary.d58410453.0","@material/checkbox":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/focus-ring":"15.0.0-canary.d58410453.0","@material/typography":"15.0.0-canary.d58410453.0","@material/touch-target":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d58410453.0_1668799592672_0.5944832104859381","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/chips","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e3a47bcff2dbfe1b635d3c1f9b6cd4af45af3ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7971d6ad5.0.tgz","fileCount":163,"integrity":"sha512-W8e90cxnERoP/OvsYSSkjP/HEeogYH1YJVBemKfTOQyAAMh3DmetBGdO6Gdf65/Jt7iYrvab5IPn0D7DWoMZlQ==","signatures":[{"sig":"MEUCIF/8voE6Hh6TwgInJQcGC+kSEI3eTvqm7l/XVwLaz698AiEAonRtBbETGIo41L48Bnk4KNE5QNCwULkX1i2DO1rcVaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJfoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+YxAAlH6Z3YyqBN2H7kAILi//TCBZq1ktFH+54jKwOoqC7eN9lFxu\r\nomyDDMSw+v3EIEGV9k7xRSLAHHHzPfErekKKnxyKJa4H1t7stT87ffzAr7u+\r\nsY+GAtDg+EXOgGsaFJjIkIzyatITq1uCAplVWp+r9MtU10o+XLAb2BlB0FWF\r\nshwsC7ERl1SpPM+ZdhMWSOfZStCPYrXtbD+bJ/P9lL97sEee1vQ+DXRVV6/N\r\nSymOJQ3dlFoRDxFRhPHOe10kQqO0eabHaUdBgY0z0GMeG79RZqzKbU7ysoyo\r\nNyekEQlptDA+OyNUg85PJX+upKqRnWpcZw2ld+GNAhx883+A93guVo11/BVl\r\ndrk5pBW0BDiEJJaiebp7iskzbDXavfarAviSQQIMSDQYiuJIpkWRzEzkTHIR\r\nUuuyxbzhtE7i0s+273E1Ox17Gu0Kxt2691Vv6USA56pM79+EEzqhhM/XH2nu\r\nwsSKw3IZI86K69IYFG2PpZL2feH4xDCBG/FraJH04dNGjFrItbxVnyEbjcfi\r\nOuuREXs+VOE0bs1PAca79yeubVVFgetaiqO4D8s/wopk+cnpi6s/dG3v8WLp\r\no/PPJFdzFZjNWNQXCOoYO/5+EUCSb6F+lC5kljJflhg9Eb8UkarMOiYXhLSX\r\nfbN/BrHv9fKqBEhgju8QASI/6DAE2J6KtR4=\r\n=TSLP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/tokens":"15.0.0-canary.7971d6ad5.0","@material/density":"15.0.0-canary.7971d6ad5.0","@material/checkbox":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/focus-ring":"15.0.0-canary.7971d6ad5.0","@material/typography":"15.0.0-canary.7971d6ad5.0","@material/touch-target":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7971d6ad5.0_1668847591816_0.060125857141018146","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/chips","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e062bf7cf3c24b91210e7d44d7d160dc878f16bc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":163,"integrity":"sha512-3XEJ6VMAWsmvOwNXrzrFuiI2a3hUou+V+iUsIdDTZAFWdhejh68icU24/4JkORsLEys4E2cuhVza2WJxtywbCA==","signatures":[{"sig":"MEUCIQChXassASefS8ry2xTlS0jt0suFNJ2Q9XNms8d66LGtIwIgVviJwfCtS4J9OGaCe+AqPoq0am6+/zHZqmC0+b2GTg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1kZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7eg//Vb79B+MXZ6IpKtALSPR2/IyoQcOhX6U0+DQn8h2mE90ZDGcT\r\nRSjkkXi7FksS2q1vyIPN8Ia7tC+9+AHWGKHhC2DAGwfdCScPKwZUaOUz1WLa\r\neXC02XiUqcAZUgfzXvtntI1AjSqxTo8xl6F+EKnwrpqQhKUa9oOIKltClZXU\r\n6IRGwvgcDPjqgid4I6tNh0SeL8vQVr/nzGmn4Dr5hrah4eGExWFB+cVUZ7Cq\r\nVWNK0tbSwEf81GOgzPRYBURkCz1mVDm51ACa8UPpHO9xdXzvusDVGoDxnTir\r\nwPc6JaYh2UnqSwTYqx1d0E0eLYoJ279ztMs6HbtEvGwxnrbmmjg6JHfTnXqW\r\nKjEXWTO7H2oFyxCxNvxDdNgo2p2t0F1LEVFJRPu3Hri9uqa32+Pjxlv/m1YZ\r\n9NBEjMWAzeSQrNItz/gzStXr+uEiummAMxVfUyRDz9vMaPg3EHByjWCw5h0F\r\nt4Mo6id4VROnn6ConDm7BE4Zvczhc7oX/iPcqhxu1ttEYgh4GigmUqa7EGc8\r\np6qLZbxzZXDaNvSaTE3BUsjbiu+0t4fwIKg0o3LdkeX0QIWvpNQ7rx32eC5Z\r\naQprDKScqM1ILQLdrgUSwubhqZJxWA/Ooa3bS0nWmSsb1assEtD09IWb4P9O\r\nFpY0jAq+Q03u7RDqhMZLnttNB0r4lwnDMJM=\r\n=Oh2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/tokens":"15.0.0-canary.a0ae73b0e.0","@material/density":"15.0.0-canary.a0ae73b0e.0","@material/checkbox":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/focus-ring":"15.0.0-canary.a0ae73b0e.0","@material/typography":"15.0.0-canary.a0ae73b0e.0","@material/touch-target":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a0ae73b0e.0_1669028121007_0.1461504160390692","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/chips","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.96f472604.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3862915cec64714f50f855cc9d9daa725f80794","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.96f472604.0.tgz","fileCount":163,"integrity":"sha512-Cf6nKuepD2Dpl38L5xvmrv6j1YJ19NSjoXPLj26QCxKXhTAFQIUv9g3XyVR1ZKgczRNQA9LLKkzjPHSKXerlGw==","signatures":[{"sig":"MEUCIB401bzG2dMR9SBBozPzI/IpU/CTm07sgISG1inph5YrAiEAwoMcstDkrNazCoTpQRb/UFAsyGNn5dEQC0wMvuHSeV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3T1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo4w/+KqF8BBF3Z9LVFC9Ni4wv5LQhJDwIkbl5BeKI0KPCpzckc65v\r\n/S/pS6QG0RDpkkD3VK7lUZAD/mN2jsgVLCO1Q5LggRMET7fOJG7M0Af96e1q\r\nYUSY9WW4hAfzq8jyFnNvdT26sazBncpTnwG0OsQ6c0ppBP8UR1CNBX5Hq+pB\r\ndLcimhnmZFRZsBeAVWTTGwM48/7yudLjq5YwONTSaiFs3vZvbI1RpTdnBcU6\r\n6OXhDMzzDA4nLkzhLuS+HQ1jwfRQcYF945mC3/CKwt1LFOpk+fBdEjQkuy9W\r\nHArlkTRciAq3PjBWSqnZNCCO7VDgBd49tbzNF+b2ZMTV4omcjzJn+y/9V/Sh\r\nbNazcBMTkjxVN4Pb7mfHEBEBmhMJn5kwI98FCdpXPgfekYdvArMhADxKSua8\r\nxELDlA90zrLpBVpVmiJwJ6KyYMHpWEH1+nBXk1xJ7FEofRyQRwdTzO7vEU2z\r\nXhuHEeUD8BwEQ5MjwLAPAbSYDzWEMSa+pk4ZwbooOKD00AKNnlegt6KTmpSr\r\n3HCDA3Tg8KdODd5hAU9a1UurqUgMLbv+eZy7CmW48j6/tp8ZYVH68u/oSyEL\r\nBIql06S/LQYZicKXLPjvowVdJ6Z1rLnNU9KFW3xo9EWVapLiJ75rUdvWuvsP\r\nRwdfwsq62/vqZ0wE3FYPm8RTfitzUWOnu1k=\r\n=6+Qd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/tokens":"15.0.0-canary.96f472604.0","@material/density":"15.0.0-canary.96f472604.0","@material/checkbox":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/focus-ring":"15.0.0-canary.96f472604.0","@material/typography":"15.0.0-canary.96f472604.0","@material/touch-target":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.96f472604.0_1669035253307_0.2492499350548576","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/chips","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b70bc6afdeed1951ce831e832912c61f5fe55f4e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.18b8f31e1.0.tgz","fileCount":163,"integrity":"sha512-4hYiDqmDd58inEP+7LvuiJ1t1/PBt3D/mKvirjiKtEgY6QIVjbxl2RdlYH98MRorwbpbFALltUACU9o/Fq5K5g==","signatures":[{"sig":"MEUCIDsAnnQHXYfs+Fax7nIzh+WCLLRbIMmDT1MZpaL7cz2PAiEAoyfMGEjOXh8HFXicqysWZ+WixRfo6iRPqh0IMRZJaHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6FqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9OQ/+LxRdMBR1i5nH8R7mStdeZLakC6sFEkWmmiNbA8b1fZT/siFa\r\nN7/QpwxlQvs8s/JIDzipnnyeHI1FcqqPkzB6d2s42ROTbNqGoN0VIwB24ZI/\r\nKTijgNOmDH1DZRtDFeJ9ltjeH955cpOQOprTokNmWgp0CxTe2W/BFY8Slqcb\r\nvN0enAFC8gROpH42j+xaFg7++8N7G5aIENvM4QRHxFYLI9VbWZqtHhWoFCID\r\n6e/IrU013XmNr2WwBg0CPqxqWQ/hp65WSOUMhWIEVRZrJSnGWey5VBf1qr0L\r\n4DYviQnfq5V5GAxU1tgmvJ3mtB8fDE498iV8c71n9RHFQVgpvTQNyBKBYnnP\r\nenAGvnqz7Btk/pum98jkwimEigLMl1fAmu4Lb11BNUI1203YKPg40RvU7zeG\r\n9z7iKOJVYiemZBJBpG0r2fZi5x4q5hL0p7mHP85ZHu8YfCS3zP0cxpRhe0Ed\r\nyxb6TUUU8W8isertinmpQ1yWRQ75/lC4ndlimQuy3wH3IX3VV89w567BEbKi\r\n0qxtm0mebUEqffOb81Zx2BHKIYsggMWFJ3oe0Kiz3MWsUMELS9eTsxNEFER7\r\ns9mvpevi771Rkraskksl9kVEulW/4ArlDqOk+5vfMomPTmJvfROuqOa/4UQg\r\nwU/rDFQ2z6ZCgPfJCFd89sB86eQT44TTfEE=\r\n=n8ka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/tokens":"15.0.0-canary.18b8f31e1.0","@material/density":"15.0.0-canary.18b8f31e1.0","@material/checkbox":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/focus-ring":"15.0.0-canary.18b8f31e1.0","@material/typography":"15.0.0-canary.18b8f31e1.0","@material/touch-target":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.18b8f31e1.0_1669046633982_0.9253201647855596","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/chips","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fa4dfe4b07ba2f523e0ec162a9f1d813f0a8b8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.912f33ce4.0.tgz","fileCount":163,"integrity":"sha512-ciZLTPeWaehNRK+JFMG/WhAxMO+E6zKnu/s6hoKbpUGv4y4zB3IqPBPYmHC5jJAEl7eK6/oMZZECXPeh29+h2w==","signatures":[{"sig":"MEQCIF4/zQhluSvvnN29S6SpZ5fwdVGbtVoaIiedEQk5OnP4AiA8R8CTmBd3ASdqWyzNvB2i5GNw3/0fSxiaGnPdWfI5Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7uRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBWBAAj/CVXFq2Gqd0QONJSqjtCQx313Bhfj2qJDO+4owuXxugR+5G\r\n+HNsVcxFOwQTx5yu1a8H5AOBTc6LeMJ4jdPROE7HTvZwYPdAeIQFMyBAdNCB\r\nwuWkEEXTLV9joImwl/AWgYNDUqC/q0adb7dXLkemVPTrNtrp7DvEH0ilXT9/\r\njGSUS5zAjl8hB+2R0+ynhd9Co026ku7ElIHzVsROz0W53+r0e5nusavAM5ra\r\ng0VaA+JdaCjTgPRE48bA0msLpfOse9B0/ulYmnm/XBt+YcU6q7v68aFSou/e\r\noyCaHa0t4v9ADkZVyb32ogDkO0YdHMiAN61RDb3NUrIwvvmrrmr0Rp040Hrg\r\nG5vVA9/RgGDjZED+W0ysBPBHXbXLPLUqtOVLKJBxTmK2Lg4NDRI0Fz7Bwr49\r\ncooF+IlnzVNMxfpVCjvF9v2UWz5BKBSzThft7hEN+CWk/PBZ8xf1L8IuawNz\r\n2t98DGSxa8a+X8+CBYFzW9pPM0Gge2sPO7RQzfsg+jZ1PU8OVXjrE0Tv1+Hi\r\n/xBPa0MWJP/iwZeDucY+BgzRl6dRh604YZhj/+hlE5njJYApAkahSLxIs2k9\r\nvOInYspTIwZkVZMqiADB9THZa/Anm9mcRICDClwvCsAUTEfDFQUsVA1JX8kP\r\nbJtYpgRuU7Gq5vIEwdGHxmu+9GJfXgxcflQ=\r\n=IV2A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/tokens":"15.0.0-canary.912f33ce4.0","@material/density":"15.0.0-canary.912f33ce4.0","@material/checkbox":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/focus-ring":"15.0.0-canary.912f33ce4.0","@material/typography":"15.0.0-canary.912f33ce4.0","@material/touch-target":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.912f33ce4.0_1669053329131_0.9408951772312149","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/chips","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bd8020c37e9dbb4205b0c516796f6a2f5be1ed1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1e1b1c369.0.tgz","fileCount":163,"integrity":"sha512-w+ea9AiOeLmNeOz0vLbPLG4zQCOlHTBW+4ZjlnMlxYFidMB513Kbv7/G1ZC4LdSkSWGVgaYb9m6gVaHhvZdyWg==","signatures":[{"sig":"MEQCIEjLAEBO0u6h/YSqJpQYlZ8maCln812QmmGkOccmJqh0AiBfIPk+H1Ke2SJncevvP+y5eZTmU5sCFECGsf64C/P28A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm4zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBnBAAgyGBJZtVsg8qIrjGmbG4eSuwHg4POQHPv+vVafNDoerk8VqD\r\ntdMHd8BUe6s21hM85PnPtshh+FOMllWWDfTMRjYEGZR36P24N0dPGfZG57G2\r\nL5TAADCeAWVuyGj+guHrhOfvff9cYE2Tmf0gxANenIMZCkU51F5i1MG6p+8/\r\nCOZ2ubVyUX26voM25bZV9QMyOQR0OzgVZtArusnLe6Ehwciww/pisxY8LBw1\r\nN+V1vu7PtYoMKcKVEsz1dXWggHMZfGuU4AeEwLSGwxf8Ufbzyctz6yX9/4Sp\r\nfBL0z0/DnzwZS6R21SLBWpXf5n88V4r7W4KSWJxVucRrfTvdVEqNMawa3Oog\r\ngnLy6669gkB2OJHHD+IPLUi9vWoPYi+NOuCaYI5K41Vu/jnxEHlHDfAUSP6w\r\n4PfSkZ/fzr2nEKHoohXRckybyLMeqSjoKYebqUSKZ7AT60PNHeD4Bymu+vgn\r\nxdhaEGlItJqKT0tzvLriHxvGS1y3NWpdkpzOLgG7KdPCI7YWhiHU/UCLq79b\r\n057o05v2EoGsSWSJ5V91WZhpD5+2JHcVHlGUqCQS2U545z7aROJbmr4ytPL9\r\nFjNWAdD+p51cIg+XRGkkJ/A36uBgzf0N+/YhemmUy0xOKleiZkuHyZokd0Ze\r\nitNRECe0F0fNRnywx/ux9XYWi+/nT8rtXfc=\r\n=rwQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/tokens":"15.0.0-canary.1e1b1c369.0","@material/density":"15.0.0-canary.1e1b1c369.0","@material/checkbox":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/focus-ring":"15.0.0-canary.1e1b1c369.0","@material/typography":"15.0.0-canary.1e1b1c369.0","@material/touch-target":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1e1b1c369.0_1669230130915_0.3272259534438138","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/chips","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f1cea168a71bd890045399bec5fb06f89955866","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a2ec49244.0.tgz","fileCount":163,"integrity":"sha512-necjj+6qupm4PDSPYnAersNZO+J+tGrHu2qJLHnQtoaHDBqp8nXxzdHnXQKvwAYCH6per4BuCQT69qlIHQPBCA==","signatures":[{"sig":"MEUCIGC3oSHE1zhSYyxNHTn7wf6t36WZHj1o7Kv2cQZXwCOEAiEA0EnQXmNzPNNgxAD6MvAbhCEdgTiZZi9ciomPH5zbwmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnVDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8SxAAghV/O2j1WOuzPUZ8JwwHkWn+XVg84oAK+Jer7DqF72BJTj1u\r\nm/a94YgWJV6JlBZo3Qvc7Bz6gJNIIYbXDYNBVpMNUSlB9S3+uXJeOrT0iFIq\r\nlBRUxTJoNsIHX2FXDEaS954bwBLwDBBLVtOUmmvzS2v1GlRXmdc/8cvBHAjg\r\nq12VjGy0FE/yS+PwYfvk7hgB7YEuXIy/W2tLHIcuJyhjKvPeeWRMUn/ZTrTL\r\nPZkOi3I1wC7pPMsEylYSOhquvWq5Pr6CVdRwabda2VCjuDYgU8h02u51iTcp\r\nIeZvO2uTaeo84yJs++4dDDEUAHxCXskPZH+JG0QZYlUvYYp1vjZiAb5l10O3\r\np+FFbYZNwrOjoqbTQweFqOR4M0fP6HM+1rXVyUOKh14RVk8Sgxy42pvyiTyi\r\ne8/etdITnRGH8wNikhoMQCUrzWEvk/nneGg5HMOj4DGpJ8eVofpcdGrJWIrL\r\nMOB2X0lcbD6jNMHKEEi9Tb/k4mJiEQci5XLZbeor70oVLWi227478HZvLX8/\r\ntusUwrHpaN950bMB84Z0Dq/HB181KR++T+iTBu1Ry7dmUqOsa6brecf0/xyS\r\n94rZPz8aGfaBHdM6TGNjlMCbOVXjE9R1MOvcKB3wbEIVoxSMM8pJEcGEsWKE\r\nfezgPZsWkhF1VigYmzmx87RGhPB5lE84Jd0=\r\n=aoZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/tokens":"15.0.0-canary.a2ec49244.0","@material/density":"15.0.0-canary.a2ec49244.0","@material/checkbox":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/focus-ring":"15.0.0-canary.a2ec49244.0","@material/typography":"15.0.0-canary.a2ec49244.0","@material/touch-target":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a2ec49244.0_1669231939402_0.1875425079994668","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/chips","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31e8f4c044618918a4df3cf9aab1244d56711a5c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a7458ba0b.0.tgz","fileCount":163,"integrity":"sha512-K3NNH3of3O3WY6aEyRlRJOhkyEV1EMtY/dzu8eUjP209TX9LCHplgrJ2gx7JvLJ/GBOhv2T6Dx3lqNGFTGFXgw==","signatures":[{"sig":"MEUCIQCIdJNPCgtg5PNIOXcurFYhmNQGzDVL6imGfhW5Xmj/bAIgKz5CdJMEr0A/BIhG03cHHvVKvuLgXFoHtSN7ZObZ+F8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn/1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnEA//b9EKZ/I00jDhu3MPYXkIVCFuymeib10LDjfRE0JkNY4tie7w\r\ntWmOnvFhQvMtFJUCBlWAQR0KmoXCgKYOoyTWaQuFZKjVfTK2wyGWEbFIc719\r\n0Y4CKAfFGUEAWr70xS08qrCtY2Pw9Scx++0rqqT9biEoXirCcBpQ4bUe+85M\r\nDYHCVgdi5Ip4QLNhKgimHv/VdSYPWpGSJtUPsNSMlRjoFA1/RLOk8qGBGD/O\r\nx+Ly7eN0GHswYvjtSEqLAyJVtZ6QcwYnJSsRQh4TQxL1Pw4Se8FJj4gFVjaZ\r\nYAtU88X51/0VWy/Tlqg0N4a1Es4r7VHemgmxhzdt/LHULXchu4ahvnE19yEO\r\nhkpJD/YwS05dHhoGmBvyApMtcX9m/jQ9L2J220jKxuR4HFWPxITxL0FwLJFP\r\naaVVrEprQ0GUGsX/cBBuIiYdNdsG3EV7T4jTit5n75M1Ib+gnrGTD8wqP8f9\r\ngihYy8eyoMnkVVQJbPvS9/wjM/8uox/xhG/SBPu9piGkCSVy9VsG7a1Fk0Ix\r\nuGfejOfvPYWalO9oioLm2n4n9OSOGB/yaHG65QzscoWQqnA61pbeJj3rPBpb\r\nrHmNSFLfpRVpeqOjhEPZ56vM1TMYWyrqAuzTjxKkIf0WxY/TtOQp1UhMxRhS\r\n7dpUtuJ+qbltsjCSRL+NQiMcuFVFVsOEFQM=\r\n=BC2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/tokens":"15.0.0-canary.a7458ba0b.0","@material/density":"15.0.0-canary.a7458ba0b.0","@material/checkbox":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/focus-ring":"15.0.0-canary.a7458ba0b.0","@material/typography":"15.0.0-canary.a7458ba0b.0","@material/touch-target":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a7458ba0b.0_1669234677358_0.15317177492156286","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/chips","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a36837423f346f74aa8c67c3a8e555455cde121","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7c35e5036.0.tgz","fileCount":163,"integrity":"sha512-7XLwRHcPb5Br9jBIxkZlwfn9yX7z3oAW1s0G0B6nS7QBsQnFV8d1qK9cQ+WCCeq6tSM3oDN3m4UvaYPtFvWpTw==","signatures":[{"sig":"MEUCIQD4XIqsIF8QYaP24XZWV9WZGsKwVJSLVDgy4L9lV0jzyAIgW4+DfsA0Dxog9wMhoGCo+9pTpVR7xisOkqEYscAM9aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy4SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8YA//X1sSkwIJQmE8C62ac174LGdh5vvCCSphWViBFEAbTxIgAT8R\r\nXCEXIs9it+anem22m6WV5geqXBy2s8maIjTcijwBdGfN8wMfnUwTUDfGanJO\r\nj8BF4CWaAUX42o8b2zqAcrnoqlh7GGOLUzlW+0Y1e5Wy4nGxIqc661tx3DPW\r\nKXoAc6zhcSM7hVV/zjwqLA6ZFfENNfwr6Itd/eT6C6PLHBYOWuuZOpytK5+x\r\nP8KtPCNXbu4o8hnsTinqVuQvyJFhvUyDQu4rLctMy5teoJEotVS7EonLRTQd\r\nG7gj1uPndlBHUNFsJfyx+u6NIj/EZIw1TFuKEj/FvwwDnk32ssIxRxHfcMGG\r\nsxNHeJnPVuFZbpSWIh2b+Buf0ILXR+8yuYYuQSvcclWlUHWPi1wfKnUk5QiG\r\nS1dCSk4z4YlPZBLUZsEpLPoQBb3E4Lh+JFAZHMnfm2W+s+U4ysVq9BRX3c8b\r\nPesK9qmoJ/m/LSkoG+Pr5H0A1qqOrLNoYWFbHTOlUKsTaxIStUCquvY4XHOD\r\nQ9e+W3AmaUKuahPLvveimrdAV3ob/0rdeNStKwwRV36U4RyMYrXNl0y5yhDF\r\nlN2uww0DHgQkUFV3txK+fUdH9XpYm1ysjORtQM4Z8wgNLJuIi3FXyjrAa3bM\r\nMBtGK8brUGE63/197kYAi4Ew+OkQY5N9GHs=\r\n=CzTA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/tokens":"15.0.0-canary.7c35e5036.0","@material/density":"15.0.0-canary.7c35e5036.0","@material/checkbox":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/focus-ring":"15.0.0-canary.7c35e5036.0","@material/typography":"15.0.0-canary.7c35e5036.0","@material/touch-target":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7c35e5036.0_1669279250136_0.5132962582944518","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/chips","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09f54f90ff4bdf2c985c940330563e31dc742d96","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4356e05c5.0.tgz","fileCount":163,"integrity":"sha512-x54S42Qod9juzXAeBVT2Deo5NEv6ddwNhCL42oGggjtHhnDt+o8hx7Ga2CWAszbrK6DfCs+DtSNiyUUkYuLmkw==","signatures":[{"sig":"MEUCIQDLUva3DcT1S9lrhux17ohVMUcWJGs9hYQ0xhmmKV7EWAIgJyyFsaQlsZaqTxI+tsvnafh2fQpyb9qyCSC6lmmFVN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0A1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlYg//ZzJeTmknBkgEk0cVIZPzzKDN1Ji2OpuQLzfFvbfLzKPViCQY\r\n/3wCIU6OcvpdVqD1sS8qlZ1OUQx8YehawEIoPfBE2DfP3a3NnYH+skosAEfL\r\nrOc7ezDAkN69E/5PDKVlfOxJfViniYzhxUuwuEKsnzCO4Fv1KoQ1Xaagg2RY\r\ncycHveBNreHGw+2XEA3MFL0wEAXBjnk/xxd3sM2x7/MCZJj/ro2poLo/MDOl\r\nNWP3x57ExdgVUNUbh6h6DwuC6kMvMquPjiZUnNyjGXvTpMwPZRZzJYXRMF7X\r\nDhTef79eZ6qGZ4M3jPXcYVdheqLeWZN7p/k7Td8O+H7Yx6bdTGOG8KLpkl+t\r\nTItHM2Cc6uPMQ0IEwYBbDwe3fLWxKXa8+iMpdb+4QWtaU+WWwb9Qw7ui4CqR\r\nfg4l3cEbYdd0W3+D9pIxOZzVSbMOUP7n6N/VqHjhJPr46SMcc2TP+xXYJAG5\r\n34AxbkZ6eaJ55WYi5ui6Iupah8guwy4tv/Wk+eV3+yPIaaaFk2r1AQScHTcS\r\nmVWNLPrgoDuD3ID2qO3oV8Gj2JkMirq/Tqblh+4/YoJ78RC/jSitqPl2/u8z\r\nlTzH1PG71taShWzkPoXoPe+QTw9vycIF/ZF5GJ3PJfehg7X4unUJ1D38RXtv\r\n9CTi55KeFxXTN3nVI2t4DWUkjaWVDXOqono=\r\n=rihI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/tokens":"15.0.0-canary.4356e05c5.0","@material/density":"15.0.0-canary.4356e05c5.0","@material/checkbox":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/focus-ring":"15.0.0-canary.4356e05c5.0","@material/typography":"15.0.0-canary.4356e05c5.0","@material/touch-target":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4356e05c5.0_1669283892748_0.5190574935050432","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/chips","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24f334c5d1784c6008862664bd02741d3b9ae465","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cb605f8af.0.tgz","fileCount":163,"integrity":"sha512-D9rVker6u238e3NuIiMtNJRkyu5PqwyoiZEF8aOdMS6PGa/GkqCMEz9BMPR9R1rZs+DTmJjH96YNumKCgTRlYg==","signatures":[{"sig":"MEUCIQDPX8khYyHA2eemXbZnHLojmteaNfwyw2pTQn7ys8ik8wIga8M6BvQjr5BQ4w5ULdvKlT1A3OfsuZhHbnzqikGqiGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0SwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQphAAgNajZ8dsgSpCThpiuQxHVud228G0os3YxKG8enPqFDhhQ8Dq\r\nWWQxRl2Awwmw7fkrO64XMKURxiSdF8jMYGB3+fJJLELq7lJfT/FRVvqIu7SW\r\nbdXyK9FLMvBSnN3z7T01ZF1Lg/re5pIKOrlKtem/2DflS+Ear9yAxMNjcDWM\r\n1RW/PsCUeuTEgFpoRvct5RaZRHHsPWqvCTJFziFZQ4Lz33MYYKj1NTwhULIJ\r\nwS2TVQTBL/3kPTUZbEzMV2EF6xaa6Lncu02oRDCUGvKy6nSn0YlPmficjDEr\r\n1JFuCZLQTzkIiSXVyboLBEj3IcgvBs10WrPQIrQ29nP7u38TotdQwASS4EyX\r\nV5MqznpN2EHXwkJZ0I/dxhGijo1jZDOBndwHg4dU+ISJbawWqpT+3wTdqZr1\r\n56zCVLeUbuHSfzGgIM01KbgpgON7RwLGbZcnfz3bU0DsRyTkz8X8s/VMMEQZ\r\nbkEZGix5Y6MrOV5mOtdgho3iG3ulv10Z7BrJA6BHXcXgCuqs7gv8mHYNcqwg\r\nsB8XgVX+SfsNxCN1aHbXqIKdqzNe4fQvCDT6CHwvHpSeSjE6J32V/U9xF46p\r\nf49OD9IHVK70DTMksel8DSO8/pV28npqUI56md4qVFuqUzCDN0QXeM6Ip4b/\r\nJT7FLGf4tVeLHv8GSJL+3MVWgWCfQk5D5x4=\r\n=2rKa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/tokens":"15.0.0-canary.cb605f8af.0","@material/density":"15.0.0-canary.cb605f8af.0","@material/checkbox":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/focus-ring":"15.0.0-canary.cb605f8af.0","@material/typography":"15.0.0-canary.cb605f8af.0","@material/touch-target":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cb605f8af.0_1669285040647_0.7027497780598719","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/chips","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22fe1a1716b1b03e1d0d016f1d66e42ca3513dfb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.05fb07f9f.0.tgz","fileCount":163,"integrity":"sha512-wd+N+1MGFEzzkG3Ev1BgQMyieL/VfTiJq2zoXokOUF5f/kbrFPdP38VoIxgh+Sa7GgGmBOsSZJLIL8X7tgzYLw==","signatures":[{"sig":"MEUCIGa9IigNt3KHnTKDdNEG3zVWcnP6STENBdJwgImCGDBFAiEA6LjOdbFetDIZBy9b2q+3sJy3BILnjouYdPlHbDtJxzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6acACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomqw/+LfSaAVaeNgJohiwvWmpIasUdrS/LGojMtlux2EySe42faWE+\r\nCSaxivbWVc/CgeQPpM9G5MwU2p8smoeTgVxAuvy2AAP91TY+U2gPJArh5foZ\r\nwi8TtMJVeIUI7QY5jjw4r67ggI/f30nwhUsQgZUp1x/SeisOja4vQIvcq7cJ\r\nxrj9/WEynStN0QYc6BU23o/iKNTU/0PxWT12a2uv0nJTwQQgMvcFzrYPPbYm\r\ndKCTS2wKXh29bEap/POENilLoJ0Rcx9c7bLu49JUWKonCZ3g02u0QikaH6h1\r\nmh19AgG9lvVm4dijLL8Rsmd+SCC7u5hjNrj/flQDMUOWMUmEbmXpMIF//hqz\r\nqIFlaO3VYNbK1nC0ho11QltKhJZkJRBHXZo7o2rGyCREgkwLcZPC3UqHWIXQ\r\nGgmvR4O8B9Gh0ml+gm6N1K4A4fUnCtDlZOSuQ7Vcj1nm810iInRqEnvhOKay\r\n0mb22KZjHLI5prVYOGCTk1Mx0dpIOE6emBbdg/0frIjhTC0XNpuRtPvVWtk2\r\no0m0AhfxFTCtTJuLYFNZe2ag/9Fh8pvOU980S/gjnL4noKTyHpEV6jeifzVC\r\nh3P7/OnS21Z8Hc/sHy3rzGqmHr8Lz6Sr88nEHoTxb9P4E50xu9OoWQaNo8gx\r\nG93YtI3m1+gwtQIezY/7Xzu3Qj9KMmASy9Y=\r\n=3PXr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/tokens":"15.0.0-canary.05fb07f9f.0","@material/density":"15.0.0-canary.05fb07f9f.0","@material/checkbox":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/focus-ring":"15.0.0-canary.05fb07f9f.0","@material/typography":"15.0.0-canary.05fb07f9f.0","@material/touch-target":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.05fb07f9f.0_1669310108229_0.3027023023011106","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/chips","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a911b386b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93fecf82fb1991bdcc1c85e4eb43d9bbfc6b1514","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a911b386b.0.tgz","fileCount":163,"integrity":"sha512-zTK6N5JA3eNdtbPm6FOt5Sek4KEqJaSh5u1ZVM8QAgYUxGEzPKxdVsUwJSa2+XzU1QA6Dn2xWLSOvgyvNABE7Q==","signatures":[{"sig":"MEQCIDVOUov+zW63U1sVt0SEh26TfSnxcoiVsA2PWpMCXG2OAiBz8pRXzZ+ygm2Eh7BRVw5YuPdw4huOPScchC4E96KdEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOZwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbKA//UM8088UsnAxcP7BkwIqY5ph47jt5+AOJ/ssRj86ii5uVOczM\r\nNvuxMPFV2qmOkD4AqjerKpAQgruQtJvJMTZzKJodrDsB8RADWcFRycn7y9fr\r\n4XTfSTM9JcunUDh8ZaG4411MOAzU6VWbldCFOxU30nDNqfKbhWj2rsstKcxf\r\n+x03q8Gp8N4qxfVo0exC6hlZ0KrGfiilcDSYUvCc3VLKUQmHwl1OBCwD365z\r\nCRThNqFBZoLZjZgBNIeYQCcCxlfbfkn51x+z92pBxFq6s50d7e7B4IvWCZ48\r\na3xuNefta0259qPeqbSCEb0jFpC9QdFXkTXx7jabhmZe3+Y/Y5CbpAUzkXwd\r\nRipgYI6KFvFy6ZTKhtPy2F8T+cgKlcgjRylXu1sbdOtKMmuxFXEEvk1JPR/V\r\nkmQgfJPTA9VVgMv4Zh525mM8AF8Xp+Yz3uAv82pBLsLRFqUQzW7uovDJA+Jr\r\nxMnjsKaCFuQRRDEti9BYF7LxfOUZ2s3y5e0seO931ImPh5miH8yTFnrGd6d3\r\n1c8FO8o4/34LGzRbWiTWDWhI8/bycIryJZizTE1szP+YR/rXz/aZhoXu8SpL\r\noz0klErQ4B+bak4OmkhE3QDV+k2FOTeQVPPiqXvqL2UYbSj2nyI6tTMSJYqd\r\n8saZ6FymHeLsH0KugTXakB3lbPGXwrIn8wk=\r\n=DWm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/tokens":"15.0.0-canary.a911b386b.0","@material/density":"15.0.0-canary.a911b386b.0","@material/checkbox":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/focus-ring":"15.0.0-canary.a911b386b.0","@material/typography":"15.0.0-canary.a911b386b.0","@material/touch-target":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a911b386b.0_1669654128570_0.2168840760913966","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/chips","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c238c77d1a4a47da19e3f72e37abb12fbc5a914","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2aa8050b4.0.tgz","fileCount":163,"integrity":"sha512-z7RBfzKwgFaMim7Fm/Owfw9AjSHAmigQ88FMeS8382GOwH17QY2FS+iDTjqEdmFB0ecKWpigKwhtmv7JIeomFA==","signatures":[{"sig":"MEUCIQCoeN959LRJbMEFJY5oOUojIylPDJjo6jb+VpuaHxJBqgIgU/76c2ECrgKP9PNNKIQAL/xA7XIhAGebs4tNOYb7VfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQhDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq62Q//f2Fc6RBdvDR/EBXAf7OQtvNFC4ZP11EteBUeM83Rdm/tHqxC\r\n0Ojd1hwHFXcIIuNmJXdu5AyluW6fICTvM2NcJmnB8/F6iJ0TgDZzWQB0eZmc\r\nK/krI0yEoxhEQ+jK6a+77BX8cWDocQkvEnXnFNWlqg9gtHYdls6B0xRStSYP\r\ndiIhAu5CHOymkeIxvgeiS4wOJQ0OczdQ8//ZbU7x6Tv34coDUGacEEH+6q1U\r\n2tBPp7Ew7v96sNj9vF8YVAkMMkO6ucR5TfyMv7vd1F8xbR6aufiGsnkkpdx4\r\n/kPyaAFmLPBQZTXQ+cLkQMX83d+SoPWZ8FF5NU+RF45r/wurhbZ/QQdifBpr\r\n0BfItNQ4Na/IpX6dGto7fIXMtp3Q52Lx8dCzDZMMqSX29bat800WLuAX/Di7\r\nv6uY25C+fZ02EJ8M0Ohu27uIUU8Dz7xWhczkQqq5aqcj+awqKaBoNw/x4D7H\r\nORpdyBFyoBeKWDCznNOagPiIHSdA4yHIC01RX7yMe9fw4lHGwTUW69zDvhLW\r\nudA89E0FY+6CTqYlev/7uSGawZeARcFrWvDIFymHAEZY1EFjRYXpoDkehHET\r\nwmlWIWiI3HBSGFmdBzFPeQDClNP0IXaIvn7d+JVPZTzQx/feI1dnxuzFhZ5v\r\no4DKfBvSqmt5ubmHkzWLkL+r1JxkwRVBe/o=\r\n=Rp3d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/tokens":"15.0.0-canary.2aa8050b4.0","@material/density":"15.0.0-canary.2aa8050b4.0","@material/checkbox":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/focus-ring":"15.0.0-canary.2aa8050b4.0","@material/typography":"15.0.0-canary.2aa8050b4.0","@material/touch-target":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2aa8050b4.0_1669662786977_0.25768668057113664","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/chips","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.323904a9f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a62acfa6275efbbc6e76b26664eed9b55f02abd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.323904a9f.0.tgz","fileCount":163,"integrity":"sha512-V7/llNxroT7zholeGdIqrPxbzWXazREkApjflnTvgRhTgLkSR7RYMWlcTgrM27T0L4Z/Qnw54R7RgSWD13JyIQ==","signatures":[{"sig":"MEUCIQCb5LYKn5wj0s+I+x17/r/RaVISPEOEw0/+pDhviFwx6AIgXmRmnionJX09I345LkpL7WL4/OHf9NuqTiyArtgMm9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiatACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzpA//bQi8MxOEET/+Ox4hBT4eByppbgQdmLRAplZIRWmGY/6TbdXC\r\npHUnZjBd0F54V3oxBQRS0//sTBNClP5Rh+ns7VREun9paRJahytMPGQ8aOxt\r\n8CGG2RLeHYe6QH55NMNJ6WZbV4kiH9G62TWto8zCc1GjXvortEyTMZnKziuo\r\nfnukf6awHOQkkQR3B70Px0y6QX+0mM2TIDaw1k85hwIJFuoJQwgQC1t7Vmoa\r\nzqHQ6Km/tjXbzLwVpI1POEI3QlCg9pL+2jBFHbTBoy5Ltl01sbopFNFr4XRV\r\nNzx7edHkAoypfUwtnb60cil7NwwEo0L7WdJ9yYj3l8RADvsKooIL//hJA6mc\r\nFChNCa1BGKDoudExLDrM3vZkAi6SafYwdV1vhBcBvJ9qmDoh9vAYZDFs96uk\r\nH4PNUBO4uQEvWgr+FEL/XoUAwDMBQh5HB5zJ5qLAMiKkz2yuD/Yu/kbu74Yd\r\navrrDs5swDep0izD4gTqUlcbpeRA/exVeUOzgDsxpVjr9E7q1u2U2A/vSvbW\r\nrGRbEvunT7yrSpB5sebGzc/v6o4sb70vfQTlAHA1Kk5zZ9uANH0rO9IyZiAT\r\nVUPEPo+P1F6B9Fb4gP8Kc7ZHJ5i24sysyAaZVR4+fAJhsnIopuDPNjunJ2YA\r\ndAnl7qoCP1rJm6cSQLwtTDxKGUZjLHox0tc=\r\n=Yg2I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/tokens":"15.0.0-canary.323904a9f.0","@material/density":"15.0.0-canary.323904a9f.0","@material/checkbox":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/focus-ring":"15.0.0-canary.323904a9f.0","@material/typography":"15.0.0-canary.323904a9f.0","@material/touch-target":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.323904a9f.0_1669736109139_0.9992489919510243","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/chips","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.168a629a4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8230f087b61eba5bf3680adc92a72ecb0af3b427","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.168a629a4.0.tgz","fileCount":163,"integrity":"sha512-Tfip98HmqFn6glk9IbnQXiZQ8fUVqJeJVxiTO6j07SmXCKRvSGSbmMhmSDZHtowi/TnLnQVgM3YrYP81hOTcIw==","signatures":[{"sig":"MEUCIDn21QxkEqoTqGDSV0Peo4Hiv0Ycjne7QsDjg+0AAkqAAiEAsOp0imqwJ0ZeKGWmKCrZuvcRJb3g3Jpu/LFta0bFgbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjhJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8tg/+JU3urD8etOv4rJqvUEqf9pqIiP56zcII+lhzV/QlT5JgZ5wh\r\nKqqr2e+mV6wy/Q/a8LuZkSWydeqNI6/oby5eywUgK1yVpbQlbAA4vzMbcPGS\r\nj/LNbZKVTEDf0UN+2RSxt/n0GuSsCaqpjnn+iLmHOZDOpJPleI3UNGh9fvqy\r\nj2OHlXOBXg+Uh9E1g8dScL/ttDOwpMFr0hgVJwrWPo7eq4dOZCZVE8w3A2Zd\r\nDJ8FETtRhX76GnZQ7/cvlSNKtBQwcJDP7Kikn4JSFS3FKhtaOiEBnkvo0kVY\r\nSTK4J3iuXAQIeHxQxLs6Z8eDSK4nxpRPH6Yi+1JDR7F83WU0qeObkQGgiexH\r\nQOTl+10DZ7GCm04IB5Sltm86LdfI+oXGja+l3i1gDLvZIb3XK8lMBGfka21e\r\nZfqt9rEFeeyEuhKCfc/kU2xKrmlqOCI6bOfN1UwqcdZLRz9RNlLi3fPA5eg3\r\nI0qCsXXst9FO3d0WxPBy39FXuuebeXlZib2gTQMSXkxAxbzOFqUN9W/qcE/Q\r\nnXzqGBMp7w6JBf2bBWh45Rs8FAeclfPqX4df3WYs2GoAy/cPs5c2GKqANPcn\r\n5wdcRlN9w7EWvZx1Zz892JG/1uyF+0FTZCBZVvDwjw3Trl+yA2DyloRnYLZr\r\nZSFzJTS7VOM9NAFTaNv/+HOPUZ3Z0p2n/3w=\r\n=61IC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/tokens":"15.0.0-canary.168a629a4.0","@material/density":"15.0.0-canary.168a629a4.0","@material/checkbox":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/focus-ring":"15.0.0-canary.168a629a4.0","@material/typography":"15.0.0-canary.168a629a4.0","@material/touch-target":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.168a629a4.0_1669740616916_0.5024675084652073","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/chips","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.65c411674.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"451b917e553055d087c0703fe31a877518b45fe7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.65c411674.0.tgz","fileCount":163,"integrity":"sha512-yNPWAZSkOmjKMj2mrRC64Va2eQv0HbFBiQgh1rgnoRxxrzVmYPnJNAvwQWNIDtIPK1LAqYcfDDgebayEbeqjUw==","signatures":[{"sig":"MEQCIHoj4ukKrqlYGkJSwssXv71Ta04lPw0oPkiDCjYxwLyGAiAVnlnLglYuGPQK0U89tMOxA+yYplfHhbOHhaWdHmND5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkP3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYoQ//ZTE64VvWDYiPhcQHtfLrcrVjHHwIyuP1TLvHlKyuoSb+tHXH\r\ne8cyoTbNftvXpSCMIY3lzAVZ7eMjvvp+iGEkWKd/ZkceZMabKxfvrO5CC0d4\r\nW3DU6E67riPzkZUvA07Wu8YmzGvr8eMfjJPje2vutWhFDnswzLkOeBdi0Abx\r\nx6glFB7mG9y/Nj3TdssJ/mJC1c/0Z2Q/qs/5s5oDMB3syQWSWtfLb15r1uWj\r\nhpqYgJqySxfEgTwf6/6q6uy783K32MAlL2hm1WCy3yhJqW+cV9nq1m8GO3go\r\nnKh4dHwdvGOiH8VRduIAfC2qGx3kvgivfBNuwbHXxyzCD/Zkw13zVDuJUTXy\r\naZsot+dVyrb/8ZwGk51BPmsw6x20Y9FGUZJHdLwfl5Tb5FJlOFpneWLy6Zrm\r\nZEdeBP6OmtAhB4HsVjTGcr8fD5L/cC+k8rTSy59yAPN2xrkSkyVEeVePo78t\r\n+KvQ/bocWKaru5EcnhTVRrnzJkh1Ezoi97zC3+jp5CZNnsBpdQw/5mUVanp4\r\n71MDCMjbPiNTnRJkTq7pkpJaOQhlmSKIQPFzvgt5g1js/EmMT2EHN7ResMJM\r\nRctezdydNGHL6QH6o1O/Ak03QEhlg2nJJqe9tGGwF75L86tAOd5dlTNKAiT2\r\nh8ApMlm4vZsHCTALqdUhjHlmhvps4t/GN30=\r\n=BINE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/tokens":"15.0.0-canary.65c411674.0","@material/density":"15.0.0-canary.65c411674.0","@material/checkbox":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/focus-ring":"15.0.0-canary.65c411674.0","@material/typography":"15.0.0-canary.65c411674.0","@material/touch-target":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.65c411674.0_1669743607554_0.6109395561372482","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/chips","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f778eeb4978e6e57deac361ccd9c989f4d16445","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a86d36fd2.0.tgz","fileCount":163,"integrity":"sha512-oYTwEzqB3eSYBkxDf70MezEiyaBsbVhb/T2WaaJ29N9m+0/UsFkiJ+y+qQsc1oH+aQEu5eYw+RkxMp40u/mW+Q==","signatures":[{"sig":"MEUCIAQq9rtHQsQBZB50v8BMJFGGuzfL3l0SUU+51zUpM5dvAiEA4ZNYIeVyPRlRWxK4H7EU/sDBHFaS/0wNJnXcvaA2lXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrzNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+EA/9HSxjJWJ0tu+5y7eMCXavPbb60zaVxq8tikGCXfpQQl67pism\r\nFH2kIxsak29t5n89r7tsICQFCNWYh3rcBrgbqZ1WqDhqdzNKNYxF7gBS1KBw\r\nIlIog3ULF0lZx+3jhT2jsjoG0n2eLLotX0fj+IV332P52+DeyoY8duAYojb9\r\nLsfStGYLmQ+IWBYG+WV5p2lVOd3rXVeeBfiMmKdWVUEqPAuyHpWBsyWmdSjp\r\nZbVsOEGp+rvNflh0Ohbka7hjqnaXsWrgOGRQRvj3Z6urjSDxmS6feAW3/b79\r\nl7i9QZqFBe2v5QFA6Tzek5W+XtpZsARGRHiZYT317rU/pVgiPGSZx+dMYuvU\r\n6VFnkrSDO9TSi8bdsk/R8bdbTjWzdu5zr2naIpYqx65WtIZtChrA7wOVnNXD\r\n4n3CLsSctPaBmUyx1ypLOVe7D3+GCu/ILeeTAWTk/FUAqK7IlcdUUvEtYGcI\r\ne2VfJKYxAVPBldMrNnIXwfSk35TIQ2+nVReFeLmyQdbMtZelZsQibd0jLfBW\r\nYWHORXInn00Z9sdvUHEucXsk0SrHz6eNv93D6XGzZIGylM0QWztvtd0h0z27\r\nY6bc00YPcks2HqFds3CmLjs/SFadoaXrA8raa/ICJltQZxrGS6cMcVuHJMEF\r\nofSaqDRqiuWgEiTlCt66NaGU/qayOGZouxw=\r\n=0xoY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/tokens":"15.0.0-canary.a86d36fd2.0","@material/density":"15.0.0-canary.a86d36fd2.0","@material/checkbox":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/focus-ring":"15.0.0-canary.a86d36fd2.0","@material/typography":"15.0.0-canary.a86d36fd2.0","@material/touch-target":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a86d36fd2.0_1669774541326_0.7364371948066295","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/chips","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec76f942c2a9a75c435b51dadd4a4db058fb132a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.3a1f46c66.0.tgz","fileCount":163,"integrity":"sha512-1zRi2teLqlhOkVXpPdGmOe78ZPwH+IBZrvUgtXmCjIPz4CzHn9Pv2eQgG2OvV2sc1oqLX4fcJM9JO9zohVFKOw==","signatures":[{"sig":"MEQCICT7yIu7baH6lET0mudGiB3As20dqvYJDZzPPjnty/iFAiABjdmhxgdVkiAbQz85nrS4oFfhbN7mvZa/7kxCwKDcpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0ftACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtHQ/7BFN87ERB70OmKTyV8pHHEREeocvHgAoxJw19G2pdqJwd9PW/\r\notG9w+PWDfEuSMwN90/rNhlBLn7LVGqEeO1X5aASrbUCwCNCYwfWpZ81ac95\r\nK58GOz00AbSGnmo+gYa09GesfdQMMjxL6qext3fiF0YHFljDS2Pi6JFWvqrp\r\nTOlqKsYJqljwEmzw2uewhshm00jPT6xpDKjyaJ4ZoOZeM0llG/p3tdd6a0OF\r\n8/lNWugDUv2ucq3iasUtBBscJV/G1dfil7u9u058T1Bq37VZiyAN8lJIyTcO\r\nPthrE4KulL6HlfIsDt5Y38PdsDJmA8OqncVdSG/RoOweLvqwC+vnUr2CBnuY\r\nyDUhnopTfrvXSGSmID+MZvse/fT70uOHe1IqkCnOZ9387R/L16n7p84XLdEL\r\nXNPUSFOQtR+YJ4I+RhW0Es9UyCNgtmSuTWEoaYao+hL21SBwrdqulWy/gb4y\r\ndZ2JT8vSzHMyuqvWxeV4kPBTPeCozNMunwP6h51m91B+53ZnTXYmQM9NpoPl\r\nW8tMk6rQH16PhUn7N4qH6Sy++oJE+VWH2qC90ADcYw5mR38qSpGOVkLLBXZO\r\nX0C2IWujqusLienT9jRWQlIu40GzrDWqWvSwV4zj7YqFFaR2B8q9ilJF0kb7\r\npuY231LWgUqGxq8ae/sS0x9sOIoGZkYNkX0=\r\n=VBzl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/tokens":"15.0.0-canary.3a1f46c66.0","@material/density":"15.0.0-canary.3a1f46c66.0","@material/checkbox":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/focus-ring":"15.0.0-canary.3a1f46c66.0","@material/typography":"15.0.0-canary.3a1f46c66.0","@material/touch-target":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.3a1f46c66.0_1669810157522_0.782789540771309","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/chips","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2036da87ff46c7075a3d3609b0c7e253bc46f59e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.32d8a9648.0.tgz","fileCount":163,"integrity":"sha512-f3QeMzN1/R1GMalRh0YkBf/beja6MqDQi8BNMJsfrCiaKcXz4Gc29DwSlWjpPZvvfukDwuInmaa291GvQHXMAw==","signatures":[{"sig":"MEUCIAyI9qsuV+jFtan44/OUu4R/bYOTSZEc0s3dI8NGvWEDAiEAyUXuo3rbdC0pSTgPD0Zjbn0pORQ2m3vRJleu51qfHPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOTEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8cxAAoIJ1uLkk5IFTxusoNKrwYqnLdbTv4L0C1JJupmRNzwpvgqDo\r\nTUHpeqH7cFwXHz2eyO68GpvGFHg57rDMiEozv2gLx7O4eqDYzCoOvyQ5kXUv\r\ntDp3PjcpUidDZ37RK8EKA0MbPeMk/FZ7vr0LqhD+mdiEuDdDNeHFb9luyPfn\r\nMH5W6XFkpTraVUxUIwGQOpTzyIkInGwE4klUMMk1lwa/J6Lfw4DX0H8875I6\r\novYyD3SNBYY4laMEvmOH5rs0pG8rsWuEdhsXJ4DV+Rj+F6qnMIzJQRSK62XZ\r\nVkZYQQ2JSsWcZbZK1E6ACtay0II3pesJV5NK+XYZygsXPx3DmlzOqbNsRpo3\r\n6feBP9O0jkNJG/QHOKuLPoJX8Hl9dX1RgwQsdzKBeHsibxQt7TYmCAj7mMBL\r\npJUnGLyLw4Lz9JwlmZLkifBQopYR43WTt7u0eRzIQ+fig9gAbUXxMxYiY+Sj\r\n3/QAqrLMi/4vrti9DzJ+HIwsAXdPtvU9eVllnZ1iTcmHe8Xya123jIQUEihZ\r\nq4vwBUVcBJXfll57tJgujiSQQPdd+uKYKVkKEm95sxN2mB4RUE0NUx3gLr4V\r\nRV1ZmBqfh2OnCUtgm2kYbbJ/aRpdmAmB/r+Kf9Kjia9/xp4JWMD7sWZQtGco\r\nverCtZwQUwCwmql0iaULNe0eDgv2A/b3Cdk=\r\n=K+Rn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/tokens":"15.0.0-canary.32d8a9648.0","@material/density":"15.0.0-canary.32d8a9648.0","@material/checkbox":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/focus-ring":"15.0.0-canary.32d8a9648.0","@material/typography":"15.0.0-canary.32d8a9648.0","@material/touch-target":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.32d8a9648.0_1669915844283_0.7857863044015578","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/chips","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.03618ab70.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e9b1567efc87cd0eb5c9dc0b05d8f9e4d64d4c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.03618ab70.0.tgz","fileCount":163,"integrity":"sha512-oQ19dbD9e+H1KZ9FqoHJdMjlg9WtMhdG7fpzszWJemBq64gYwjNYZQbZWXKmJck03QS/yy1j6CwEmsY8Z0h0cg==","signatures":[{"sig":"MEUCICyZrDq/Vqn6HEeQ3BKTyd4BuXQehnltSOsYH0uTKAjNAiEAmRPYkBaHrH8jM5/8Q+YDRP2OBvz6luD50+rD4OHeVl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRTXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtkQ//bUZHD2fsNVqV2KOUUpvmq83EzOPSbfDPsOI+BuA9DaQOYKzy\r\nSBgX5MSVt2pUqlGxKScTaU4MZaQtRgvuDLDSdnniLjXqos8po/qHRY41flPw\r\nPg4UcW4Y/i7hsynDtltQ3ZYOJhvCdKq6nGUXde/CzxXxH5McfI99YrA4BBk9\r\nzrxFw3WwbaG4AakuK8/gSWE1BSkD80GrXKlCd2ITTjZKwjbcVbhBBdtvUTFQ\r\n/kDdT+HtvjdH8GO02BOn5qV65crJSsmNTwzkUVomQuNCKjTy4zrH8lI0DJ3U\r\nHok7Nc+N4e8bkdKuNBoFvzP4047k0PE9t4TkBFYhDlJaDsOdm+e29L7TDDOx\r\nuiuJJzl5kl2s+28xZFJqVUP6YxMs/dI8nwdKJMoahQv6QbTwSHrlBEn8jtU9\r\n698kb4crzxOe1wiLsKBk8OqqgI6CDxiupYhB0zht0ahtAZw3uoteYqmwGWwZ\r\n418BsnJEqyJ8niu7wuInrXogBCPTqvoJYYSUgSbSy5rzrcbavccjXJ4S7ga3\r\nM3RuO/wypG2ZZiZHb52FCr46ltiZBpPlpEBnOt5HF6BGXRmJ3QsHc9ePcPHN\r\npzTWIjOi3xYJNFIfLba6n1x5yataQ2nNHP9EzgHlDmHH0WeYZL6YESppiGPv\r\nV+6/ahjhjdvkTlS7pgFkKZXilIXN4SGXqnI=\r\n=6/vZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/tokens":"15.0.0-canary.03618ab70.0","@material/density":"15.0.0-canary.03618ab70.0","@material/checkbox":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/focus-ring":"15.0.0-canary.03618ab70.0","@material/typography":"15.0.0-canary.03618ab70.0","@material/touch-target":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.03618ab70.0_1669928151150_0.5789925933085969","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/chips","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.68aaed940.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e92a3867ba2138f30753a377e9c037e5b39d912","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.68aaed940.0.tgz","fileCount":163,"integrity":"sha512-CwoVji1iH35T5TQl9cR1wrmrdeGuqcMRKUmHPjbgDwsXzhoEWci4oLSMnBdBTHnlKuxY2EXu426D+ynktq4LMg==","signatures":[{"sig":"MEUCIQCTpaqWdkJBvzzRDlDOnqzIRUCEJIh16KbwNFTqFhyF4gIgOJGthU3Cp8weCh8XGj57cn1HR1PcGvz6dLK+D6HLJ+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRvVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNFRAAipOnJwkQsyKpgHHFXH1UCOEBx2qM+cwwsQHvdRVPHefc9A20\r\n9jfzzYqZ8j2w+AUxzy9qY1hWYUCQrun6c4ed9l81DnpFXW3NKqIbpxa/xgDM\r\nY4iKtBfB4tNMgSGYL6LP+JwFxk/4L1a5ORZAefsUBsE3YbSbG8TZmLWxe4V+\r\nsBWpmlDmUfhQIzmxOQR38Q/rFHh8G/gd4yaW244CxytRMmBYmi1EdRIUtosV\r\nYB7WomfIkp0XkjOvvxTIQvDVlXogNv4I05zMls/xKRGI63eCjAr7Wm+227r4\r\nD8efVswydDZxOCPU/IR//WlneNHzdzOEcJhcVBMizyfLz2bQuRuTwL0t4PPB\r\nNSb5k+jgpMX89zXnLUu+e2FEjaU8NdP0UIjkoZr5EggWFe89imRTjAi7nl1r\r\nsWfZ83WI3SAPksvBzPlBcxNCgEfauhWcIAcwXSublIhHec819axqRStr5VRL\r\n1Ah+zHhkftPaFnCBVx9OgDumV12pqaejd26SSecSoF69KfsMxqENcxuuSJ4w\r\naq6frlsUeO16fDOy+ROBB5e6orsSQrqhgEbxXTk1U1A0H1BOz31/7VVEUHTm\r\nHGqSJ8T075ZTR3O6lKqExRS2MB0S3TB4sAo4sFT/3HghrRVa+xr8gqrw9uUT\r\nvZq+SxK699ZuQ8KHNyfAxq+cP2bOzUUVXsI=\r\n=q6Q1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/tokens":"15.0.0-canary.68aaed940.0","@material/density":"15.0.0-canary.68aaed940.0","@material/checkbox":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/focus-ring":"15.0.0-canary.68aaed940.0","@material/typography":"15.0.0-canary.68aaed940.0","@material/touch-target":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.68aaed940.0_1669929941640_0.36800871181821604","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/chips","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74350e8b90f728038361f68dcde24e5e78955020","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":163,"integrity":"sha512-tBkp9T/LBb9Ns4V+u7rIfW2zpd6bZ+JVHuiQinKvMgVsiKTyUAsXkmDPjzzBMtVSD/nGBxIyUnQnrw1uJtTGig==","signatures":[{"sig":"MEUCIQCcGFEdHY0PtEo0nX93AV/gIoKzwnLZalNlfVd6uzxe1QIgA7eY3F6rOeId14KAqvFvMU0LklFB3Qh9o+AzQMneInY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1945224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib9GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru0hAAkMsnf6z4apjBXdTt3mX6FOxyLBihGmSZ0bq7CfU6ijtP9ArK\r\n8SaRWGSsQOYNpDD2eJXE35W7m9T92PsS9SW6l4SqsexA24nskcl4NDH9E3Uw\r\nCeSHh9dQFoujy17J47vHeCaRM6bL4d8hXyozj75Dz1nLWemXPxnb7A3DrOUe\r\n+cwXzf8eIyWcwD2oioSmuQD1NOYrj6Mhn7wWlsvCKJpnpxQCRagk1qCfgNLM\r\ncH596qH6LPeNn76IWFBrlW6kZd1HoiRA8/TkQtf0RwceMnAW0iTxKwo4b2oq\r\nGzUX9sBeZUwhyh136x+nj/oNmf1i3crmbBR7sgReL75UGz2kQzSUGII4gu+V\r\nAjEXncnBHDeIdOL5lX2MRUlgsm4dOt2cLN/bEoTZVKlzQGnS2MmLiuJFk8O9\r\nihz0xdaeA/D9U2e3gPSWw3aVmoUrxClTAOzROL9RyYGD+PLhk2VX7RFiA8Vq\r\nrZHDldSNf+HE925sZP7R6e0Z0XF/F7AjkO4FjWuVGsprY0lUSblRmGnbtLKs\r\nkV3A0cN6BkR4oUecJqgPY7nPmnThVcnzQDpWBbZMiR8S9n/8nMI8/ws3B231\r\nPFDof+KxCS0fsBRz7xLPuTPHFgnguLLnaX7uGDPP1H6gC9QNsMZit63sEbzK\r\nGIQvh3pmElM7mr2k/pyDKRcUyOvvGP+WiZg=\r\n=jKwr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/tokens":"15.0.0-canary.f0a0bbc75.0","@material/density":"15.0.0-canary.f0a0bbc75.0","@material/checkbox":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/focus-ring":"15.0.0-canary.f0a0bbc75.0","@material/typography":"15.0.0-canary.f0a0bbc75.0","@material/touch-target":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f0a0bbc75.0_1669971781760_0.573214811905953","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/chips","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e815e6dd5c9c4413c277a1dc2bdc8ee174ae79e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.dd99c8764.0.tgz","fileCount":163,"integrity":"sha512-hbPrytORm8asf8v+0CP9U79jxUdfcyG6UyCE90evRbs077BbwVDBCsWO31OtQ8viUYwxRkJ4yNEQRAqkP57+sQ==","signatures":[{"sig":"MEUCIGVNwzM0jO7/J79JEROE4iPDG9aZ8O07okDNHagrICqaAiEAxH9yEhIwNrFREtAf+rArvycBsZFxD723YhuynKU9Vhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigV1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1FRAAowCDbn34FgxFyZCHbdi63KhLSjwXCIDv5fOzmVsDhpWsrnvy\r\nhg6hmlOxd9+LcyAfJMzxIX1HXNxSLgS8Ng2MXMWeEILX5fSmAA3xbb+2Loeo\r\nh8+nCehvqES7AEn9AnFs8b5AxlgL7jQNAhpqzTNhD8+4BzEBgpxaYiuHcfKN\r\nMr8TykmbzqdTPOTSgQP1NdqiBWpeLwassnd60D1FomrvS/5loXqAhwLEQZGa\r\nQLlnJ/KExiip1kmPshyeg97n98JtT4/T3eiWa9byKjxb8DwCq+ysSLJQPHlg\r\nbL1WmnSyXCt7ERe7+yMOzu6d/hx1OZBflHiW/zp4Me1FsSZWCumkU7TIfMxx\r\nSeVOzpWkOwXmP5sr7KD5AhLPTDZ5RZY7S8XEQo8JSMKoCfP4gyzh+jc8NLQS\r\nCu/HKEYfDyAEEjaQ9Mo8jRQhh9bS+Fg6SEMwNqhbrNa3EFwC0DhoYcLoYvUq\r\nSQWtceYF+dtzXraqUfcg6vDxjyJE3iipOAa4D/WFVGi92hBPLY7HsT9jht52\r\ncRsJjEQ1jk9ph4yhhq10iCjsI5yu6HMu7m2CfuoD9wBR/OjlaYlYO0h//moU\r\n5j0kT4Mf9k8zNglP/6/OcOOZ0iMzi0hDpp1p78+u3CVHxHPlCul9x7Guqep5\r\nAa+Tv5VCQrTrvzS7amUNzYD6vjeJd1jY5Ys=\r\n=/HPe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/tokens":"15.0.0-canary.dd99c8764.0","@material/density":"15.0.0-canary.dd99c8764.0","@material/checkbox":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/focus-ring":"15.0.0-canary.dd99c8764.0","@material/typography":"15.0.0-canary.dd99c8764.0","@material/touch-target":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.dd99c8764.0_1669989749579_0.7009874212857901","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/chips","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e000cb9922b6cc17a8d5ac0e0a6a611c41a7039e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.fabdcca3a.0.tgz","fileCount":163,"integrity":"sha512-hFzkdU4+KhaUFP8d17hs6/1kubtN++sVI9gkOd0I8sjcnTy5AAKOBRNOHJBdkDAYczl+cC4eulPZOTqNliTQ0g==","signatures":[{"sig":"MEUCIF5hpjGO7U+qtm4rvies4l2EWzOUw0zh+OUAgz7fN2nTAiEAh+a4EgUljtsl8aCjdgHAEN0jPN5JVzy6r0kp/qJdxTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihTqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHtA//cB46CJoPRGZGGMMxXZC0b0Kz6kGSbVgS6EuneO/te+19ZLHI\r\nmbexOfQ/o8WDJftkOs0xckEMrjs9kFq7KmYw9+xz90U6QjjWUIl7oNZby4Ao\r\nDS3iStsPEm3VzTmev43m7R1zx+Ch83jo2kPev3zTS6Cvwd7zRgjqE2OmiCUm\r\nL2eP1O4U6RIaXwbpGNtzYlCdceEsc7ukJ8MBRdg/hQfzTVGgyRzY1uzYk7NK\r\n2azvTQUFsHgJQabRoygMIn+4h/HQnFUNZntWiyjcc8NJ5uvPwxLjJs57f9Zm\r\nG3/yaDURgmVdIjPDOqWSSpZ889/+j+p+MjGrPNAZ5ufN2k6YDSnNq5ksiOR2\r\nq/jI3UijdSn8jA+eYudbyZaYhWoDre6T6gjw1jdObV3YpjJz/asV1D+Hyt9L\r\nMAwZ66K0mX/NA1FD1sB1GbPKCZZp7Fwkz5fXF8Mh1Ve/qFL25Fga4rXWScT8\r\n7V+2jUpGFWCtwNfW9/OJTEzOF8V2R342ifCZcs/scGOqmyCKuzNwPltlnTjL\r\nspFFK8bkB8M13JckMlWm7N3X1l8/sdeO7L5341rrl8KSLQuammBUSGktWPqs\r\nnydRq3J1IAUNFpmfQ0T7TKF3qSdsa+FOqryWDMP7S9zZDdjpHNty4BlQXUQ+\r\nzsCjVnEL65NjoRRv0NHR3insTy6TLguxXTA=\r\n=7GUP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/tokens":"15.0.0-canary.fabdcca3a.0","@material/density":"15.0.0-canary.fabdcca3a.0","@material/checkbox":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/focus-ring":"15.0.0-canary.fabdcca3a.0","@material/typography":"15.0.0-canary.fabdcca3a.0","@material/touch-target":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.fabdcca3a.0_1669993705721_0.5167052074335379","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/chips","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c581d641dccaacd7ff7afc22d0a84852bfcd50ad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2d26722d2.0.tgz","fileCount":163,"integrity":"sha512-aFn1wYN8ZgwcagY5hNmb1VA4FN99trzkNHMkdJBN+P/lNl3H+sF5JsjhTaFaOuJ3Si5B/CgU6lRL2UfEOcm0iw==","signatures":[{"sig":"MEUCIAXL80kkwAoZGQpulDGsUPaDjwxRG9Zz1OQoMFwLqcz9AiEAmeWVJB/MOQ4oyLgyYrLrolcNbeK0OGRFAsjqYXt+NLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiieXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgaRAAmCODTd3RLz9/wmLQQ5oQHBSgqlSD7V/e5oUvDAvZw1z5KOQR\r\nTaj5OBadE/s01Im+gBdHiAevPvFsvtZjwIWreHQ7YelGrDr6RR1uazuTJFzr\r\nzeifjGUz77pEMMrlyXY97l/Gr/92VKrq7NsAFFrRx+chpwD5Vi4A+zCrjLzR\r\n/yBMYxHdR6FA0NsyEEuzgq4mYP862fpVC+tUN16nE+31Ygnjc1r6DtHT4IIL\r\n9Hi4YVcwjeIMWqf7slp/xD71l/XVad9Wyn6kVTexGB/xhydq3aFMMnWyUz7Z\r\n8Ivpvn0ZT+gkNTL0MaQJuhvXq7kSY72TCRO4CT+hPZoJlDcixazsY6doq5wz\r\nK4tDwPekMmOROCgR1mz25Z8mGsmWT8h5odvM8avBZX+VQ5mYmONbKFFEOmjT\r\n39iWLuPush6IqWm5CbrlsK0rl+DexFeBe3IGx7obHHlpTZQ4uccvcfN5fVUm\r\niEA4YLx4PnBskWuGsNQwd5Jre6pyJYxKvYn/Up7py4s2G1AWEombSIW15aKv\r\nkwiJvcaOOC8E2y5i83IuaOtmlMdCbga4tPVPWtLggCvaujZtKxT/Dga0amvu\r\nMvyb3SDxvsjGcYBlDwXf4fOskhMyjUWu7XSIrygik0HmqVRehBZiM7RZtF30\r\nawrMsY3PZ4u4tZo9Zw3JufaUg+aabbfNsTY=\r\n=VySD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/tokens":"15.0.0-canary.2d26722d2.0","@material/density":"15.0.0-canary.2d26722d2.0","@material/checkbox":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/focus-ring":"15.0.0-canary.2d26722d2.0","@material/typography":"15.0.0-canary.2d26722d2.0","@material/touch-target":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2d26722d2.0_1669998486819_0.26960565366517275","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/chips","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19d9c44e0595728d6d27cb34ab1866aa31ac2867","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":163,"integrity":"sha512-qKtFQXp5noD1SiYFSMGruF+83P6qtXvWNNDKXAvwMTZh/N2jMrz6CYWBEBX9x2ubUwa7Rmw+iQ8DgyGXXrl5sw==","signatures":[{"sig":"MEQCIFky8ubB9Jbdd/rMVS0pY2EbK6/lOoz0BMw52eip4uK6AiAD8YpEOPJwnY1iNALhAVLPxYPgzj5FRP+aoZM7ipeGSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijlwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS+Q/9FbTZ4CsebOPLgU6I2etzrLPNx/7oIkmJkdxhmrXg2D9dbFsL\r\ny2dAw8Xe+nGRl+vlsUpPCXQkYdmXhsqHfs+EKhmi6rWt2/KERv0/v811UJKL\r\n1NzHvRk79sqIJQFsHJnYVQHk+2VWrpF9LlzObjAxIqo6b/JJJsooaXF2L14m\r\nSpEdCQ/1MMOKdmelcAhcEajaQmouSHcm5GBVk+wn6d+mJwgs6lflfFiTBQ3H\r\nDrnPMhGHerZVKfhUG+vvRABEcSLmGWBvATkL5xhoaGWn4ADeJV4nzSNw48a4\r\n01nlJ0ZHyqKuLMnRSkVdSvEwsPRFVF8GiHde+ZHpgfKhCUSpvPiddVvHLUg5\r\nZWXqsjtwsKbDVX2bDrAshTrvhI9fERMeRsxUj1z4IZh1CJXFhTXBTo86exV+\r\nWF44HOHtE+aPSz9/dwpkx3z9BIWTI0zVgQyqnmQk6KnQAqaI/yjuVIGCErcT\r\nhUbMXTFMs5snA5oKWgiosvOjS/+MaT/i5dtmjCn4xSB3QhvbnyzlW+YzXyS3\r\nv9PwdAgIqMuC3nCybEQ2PmtbpzVtKd/16/o6bDxUt7i+YBRO/MKiUgSohOTi\r\n9kpvxcHGEH1y7Kdw19q7THSEaAkM/Lz3OzFXquxURU88d1PjPJP0TnPdBzs4\r\nfV0rpagptLCEhiptkL36wD8O06sln4OWDgA=\r\n=bmrw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/tokens":"15.0.0-canary.eaa0c3a86.0","@material/density":"15.0.0-canary.eaa0c3a86.0","@material/checkbox":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/focus-ring":"15.0.0-canary.eaa0c3a86.0","@material/typography":"15.0.0-canary.eaa0c3a86.0","@material/touch-target":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.eaa0c3a86.0_1670003056085_0.6337508684795163","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/chips","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d94fa52ef9297c0af9cd2a5909f9b0712cd794f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.79a613bbd.0.tgz","fileCount":163,"integrity":"sha512-UkmZQTAOrAvkTso1l2vyKmedqtJTShLo70REltMTpoJeEjy1d04wmslVAvXOSpbdM01jTg7bEzTz+mhLjP+2TA==","signatures":[{"sig":"MEUCIGhw0UTOd/rGC2lGYBONIHsn+iNuCWUUhKgeSGrN4rE/AiEAmmnmL8MY/EXMF6ii5VFWJX6i7TuILJefU17QKqtVDr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1E1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDJA//cKOKF2pIe+6YGUYrffpCpLs7B9HF65pUWZGjVolRJ+GfBn3G\r\nHvQEF4roIyXfpsfSgYr0E1mzckznQdA6GiEQtN19Ri6i9ncJ8Dz5LDnbUrL+\r\nkoJpNUACBRQOL1bZ7k+egOHcdoPYcJk75SyICxXuYhCqqrc5Ei4Dt8WK6KaH\r\nxmEhobAges3VK7CXXS1P2ZTMUCEM27BpaU/6kJUnMQqJ3yNVCQyyfXXOD12G\r\nz/A+H9oPbbw9WZDHHMqV8l0KEog9Ufg5ooQy/gMsXyD1Gkiko7hQHYR2k6CJ\r\nvOjbzXnNKCDVaLMoRAQ6I3XE61nrfM3haAyeHn2mxoRcozHtJaz6xj+wQlsR\r\nTh6gMEs/zz+58d67S1OoGNOJpUIaBmfvhxf6u2BQQ5vgyJsetkbWOO6jg1P2\r\nz2Na4tbrmrWsZ88j/VdD+M6pfwbXpvPEOVFpL9a9N6RLnzGEDAp3OSBJ1YF2\r\nWXzFR1kfM/NaENYK2JJWG0lfNwNPq300L11Wgomg4Hez87/o+IelMY7Jqm/P\r\nHdMGGhGzh8uvs0wxycYVJAc8rlKTwOcEDiFKR0BbhiwCMhaCYrV7EhLklYQA\r\nP+yNkNfNft3soVpFooutn00FZ6rE4X88BvvW9hr8uGT7l2b12n6GkxyI3MIi\r\nvO3g1bHGIIhNUFzxVQOBi0G67IV23TeKM1w=\r\n=uj1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/tokens":"15.0.0-canary.79a613bbd.0","@material/density":"15.0.0-canary.79a613bbd.0","@material/checkbox":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/focus-ring":"15.0.0-canary.79a613bbd.0","@material/typography":"15.0.0-canary.79a613bbd.0","@material/touch-target":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.79a613bbd.0_1670336820764_0.1606013317773578","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/chips","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b0b3c8c177b5650b4c669201e0e6a08507c31a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c871fe61e.0.tgz","fileCount":163,"integrity":"sha512-2axCv0/Q2K9sEBWaY8gdqdvbQoE5wY1hVG9TNS2SAxE76sdzLUTl42mHFy2b2nq1FFaBbVo69uk5QsNn+55hlA==","signatures":[{"sig":"MEUCIDLyssjoy8ADkUvTAnorg4iIv5pSU0U6HUgS4yryEKIgAiEA/Ktn9v511hXSlCPSmUq2VOchOvrcycWXz3C4Sb9AM8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEZwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIGA/+LxKdCuYs8P1P3V+V764eYve4Re7x/krLfnJcUT+HcFlgJSSZ\r\nenWhtv2y1iAMr4LalF7KMSy0hV08XvRgaSOay+iK4/GEjbcVTMKfRMkTxlgY\r\nakM071WX5aFBdWTH6vwyAhMNfwp1UTJOLTudHbvKa/6W2x1tXbV63q8ApwMM\r\nzPRqbbXWhUH7Ksf59DaXie90QUSaA8hpOjTb8sdq/ppklK4xMQAn2Fa4VX1J\r\nej7yeH7c9ytlE/6TuRiJ52lhRGowg0hDyK+H4JKEyOhhgVuDkkOt717055rw\r\nKbvXLHVkadjWuVdUCYOcr/FdxW7ZbJprOwyJ6ncJ1q185oc5aoHk0WvdKz19\r\n88f6rAY2e6tliDbTqsPSQP4g+2TytCLx8/Lfx6aFdSzjn52oMv/R8dYxyWlL\r\nPindA4mhCnlISIyCTcaxSl7EKmGvX5u7fr8T2S6IC8qA8EVpPNiNOQsKsVXj\r\nDhwQY4gbil4mZSHZsJIzYHtIJrn/4e4R6mB5J4ZEdJ6Kk1AAjbROLaexfrdL\r\n3AvMGGL86/XLURjzdeyDcWIA8G3MSvgA3t4EllPCxYu5kZmBilmKE5WRckvK\r\nmtZL8IM71KABqG7RJugWl8Rku5Dw623U0I+iTxU9oDxtuTKIfLkjGcMReL1i\r\nL73DL4rA6bBZVJg5jucQLRRW76Z07ljhkFk=\r\n=pZUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/tokens":"15.0.0-canary.c871fe61e.0","@material/density":"15.0.0-canary.c871fe61e.0","@material/checkbox":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/focus-ring":"15.0.0-canary.c871fe61e.0","@material/typography":"15.0.0-canary.c871fe61e.0","@material/touch-target":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c871fe61e.0_1670399600144_0.9003252486871347","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/chips","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12e1bd754073bb4ace00471c675d82676cd2c964","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.9eaee7936.0.tgz","fileCount":163,"integrity":"sha512-gQT3YmELwn8Lg7YngzBeoFOcMDv9KGyXpd8qSt78FnK1Vhl1ACgvabuDLwtrgUVqC1SZRp4EXERJq4rMWq+y9Q==","signatures":[{"sig":"MEYCIQCbI7Ut69FaU44VfmpT5uEWPV+8Aww6+x5UG6AhAivqRgIhAKDKaz4G97gq2ZVxkYCpyNK0HBwmfl1qtZflVNUDL92S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPHYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHBw/8DKylfkUNW9kHF2NXWgq848jswpwVpmwxkqi7c9CRyEBSIDXS\r\nDsa7HP6sLSTjmDci+KHkSKuozqP4VCnkBF3CbGGzSvk5BNe7YXnpTX5qOh2i\r\nZvKPBo/omuy2pCSxcAk/7y2mK5wWOqxogZtZbcAU4c7ak6jA6iVzYSuEgNHu\r\nStnomaPc1zvUB80/QyhTYcXAgUkS/xA44MSEHaG7f98b8U1Og5MxGYzOQKs6\r\ntjXT0blaWYXsMcfopZ4XVP4d8iUtiTIgtwZuavO7h4mvASNPzPz8uTUCUYfL\r\nZdwr0vjDr0YVqmTasViW/PW/TgbQoXCR5X/smMjlpAFe8sG3FJwKT6Yjw3zJ\r\nM/doTsqN4/BdkqFl13Gmg6VWDmn2ElhBsevzwjGfNZeT6ZvAxM4pDN+NDYKI\r\nRs0a5bHqyhP4OyFitjNiS4oyafh/SvbSKhfSoNrxsNj502bmB1ucSwsep8NE\r\nOo292UkLOQOU2UKG6rUIuFIWVmq+oWHWIU0GCzWJiIYa2YiCAlZwIi2kR7Tr\r\nskDiD18G50z2nK4lXTivZ9Uj+VWRZEynvRQXFXOu20rzxDuBLgCQelnaynJR\r\nYgbss0vGghsnW4rHoOLwiWX6lApoN+aVE0XeRYC5/LplFsfSGZtYKe3fyBxU\r\nMTO/VN4aRewoyj7ZRrrYNDAJIrrUTVlLCak=\r\n=aAdz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/tokens":"15.0.0-canary.9eaee7936.0","@material/density":"15.0.0-canary.9eaee7936.0","@material/checkbox":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/focus-ring":"15.0.0-canary.9eaee7936.0","@material/typography":"15.0.0-canary.9eaee7936.0","@material/touch-target":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.9eaee7936.0_1670443479894_0.6078447492057597","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/chips","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe53e1cf36f3c96067031f88b5aa650974fe0ef4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1d37bf601.0.tgz","fileCount":163,"integrity":"sha512-Brvys/DereqRjY49w4wc8RK+0zKqbQk7m+FPBRufwhw2rfY88BhW9vPGpoTfIsMMdE22biaTO3IUDe49k9ZM0w==","signatures":[{"sig":"MEUCIQDG+KVMvu/z7I39v7jAplKslvAxCPf1Oo9tWZMBHAOntQIgVYkfHzBoimGyRn1i1DQz4MUw1G06oy+hPrsIQQtpsmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPrKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruyA//QniX/rVu/Eyx9gy3AuNTDAVKRh0Udmf7oYh/r+TJDcvLfM68\r\nVx/FNoG0nDwWFBhHQjZROT8ln+rS8MlPamEUfKz/mSOH3KpmtxmgMLq3sZWI\r\n0wNxAav7yCNUq/wjKM1CkWLtTkpX1vqGEB3SRVbGWqHUVXLERfEBhDbC84U8\r\noq4xvHk0QS7xrIQp+Z5DIjPncAMbcC9uxkU8Lmd2HXjY6t/3GqALTrzZOk/F\r\nb8qDjY5jnKQ8w2YuKZNcSNAfNRkX7WqUAtd6zURImMLTjaU9v3oMTXTrwntm\r\n9BtO0iUhlAOBoi7vnfiCjcGAo7mni1NzIeAOpRX+bwe5K2rBTOGq0stmbqR2\r\nv3MiO1LcZ7z9hDNELPJkg++AK7bLTNTWgCG98vg5cWBnenUP+RvSxIG8xxZb\r\n9LKnZtRSLilIF4L9BulbrpfdadczTQgqt5x5iLclssk8VieAJZG8176CCkBb\r\nI62PkcGwZaUFzuSLlRabKYQEDot7y0OpQDa1+Z7IDo9zY50m6AxuK7baHc99\r\nWu3uMAIQRMIudFlyMjP/Mvvh2vS0gyJjXy4pCq6QBZFu8FVsWxyUxW8FXcZ3\r\namG4nvJ444SsimrfKgSqliR9+QUL9bP8f7aQxMk6VpcJnQnMChKQliIJ0AJe\r\nowoYyDW/jyEWRR+kxKTSM1z1taxquugKYLg=\r\n=3xTC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/tokens":"15.0.0-canary.1d37bf601.0","@material/density":"15.0.0-canary.1d37bf601.0","@material/checkbox":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/focus-ring":"15.0.0-canary.1d37bf601.0","@material/typography":"15.0.0-canary.1d37bf601.0","@material/touch-target":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1d37bf601.0_1670445769878_0.44626228609237306","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/chips","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6ee78011b1d6ecbc78abc322b37cb459ae0b151","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a5fe069d5.0.tgz","fileCount":163,"integrity":"sha512-qTzhrYiiT9cWOeyDmx9Gx4o/nPw49JqTlutUbl1clm55Iyo1q4BrwG5UukKbn8fREhSB8DDKv/zqA9ivEQZSNA==","signatures":[{"sig":"MEUCIQCloRLv5GgDvb/c1OJoJa1UUPt9MAa6Rwc+5BJdfFKxcQIgQPyJbR9cczCns95GT0ObNFvbQmP5hs0zfnuBWIMRQv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4JkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnsg//Z3/+9CT1tfqSfzHE2Quw9U3Cj4Md9zy2Us7vX2fBPvo5bPct\r\nz4WDvJB3YbOQLVEWPj7xaiK3ePt68LwLAQL5soA3B48S5gTGLu5ZVEht67kq\r\nzTDp2k1Qk4+DGs9INUl7LcHCr57L1FgYTWSLZRJ6UVeFczA7m4Z97QjjW54m\r\n8CgliAJku8MbLoouegS1K15mdPOMiK8axvMkg0H9Jo+sdcH90RC8kUDY2QZm\r\n7AzspbMKFHSCwHQpvVSg0eE27FQququbQs8zDRYZ2goJWZVwv2GRN/HbIV9o\r\n58feGXXPb6hvlZ5LLmf2C1i+wgojJMMpFikFOkKnsR2T3WvB7G+zHrkDna11\r\nUp1B0vlwFrxaHJ2VsERccluSPEcRDH2yGkoHy8ujak1z/sIvBWjoH1eA8XEH\r\nA+pCINoFEDhYLY2Uxdw7XK1f7FdA3jfxJClcJK1TN3qv7zHEjq9n/JcsyRW6\r\nDxLPKijAu1w2YDsYyXY9eaCAGBqlL7wCdetkVuaeZtJ+OlOvikXRmEyH/s+j\r\nlYFutdweU6ztb/c9Md6VvVvSayqoma6Tf2lDPazCNLniiEHxYViwwPm1wGvN\r\ngeshRRRlo/Sv3yMrOk3GD/HWtC/PwfcAa55e3VXBWc8rj22vZuoHNsl6p8wg\r\nlO0I0TJawCNAtVptgns8ivOzaDGr4MYe/Y4=\r\n=5H+o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/tokens":"15.0.0-canary.a5fe069d5.0","@material/density":"15.0.0-canary.a5fe069d5.0","@material/checkbox":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/focus-ring":"15.0.0-canary.a5fe069d5.0","@material/typography":"15.0.0-canary.a5fe069d5.0","@material/touch-target":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a5fe069d5.0_1670611556401_0.077303149941083","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/chips","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6433da7aa625d3ac2f321b3f548ac156cda0ae2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ce8b5326f.0.tgz","fileCount":163,"integrity":"sha512-4SnDaXYPx2PMUt3KsNv2gwKc+6uVRacidzUyJd5aTXDmlw4pVy3NqTCLZovzA+6Sxo3qzcGhNEfktU95nHnHdg==","signatures":[{"sig":"MEQCIC3ulAFlY7jIJHOzyeSaiZCVJDLTF0PP4E94gv5PmEd2AiAjRPhB692j0gW6WvJPu6CxVGy6214COsqaEOP9VIvTcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8WBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2QBAAlgrvfigqT7sL1zlegxcvjPDQxPpxA4Xx7u0hikuT7B6pB1J/\r\ne5gQCLXFBxuQkN7yKQgo8dqYwaIVG0AKrxaXpgaxP7YU/jj8Xtxso64qaTc5\r\nW2jRrK5G6x2TOtf6B7WEg2pfeKjOrqPYGGd9V0UEKI6hgSDZ7h5B0ltHLlPC\r\nX/lStwSm+nmqmpAtay8jGB8BQsGlHEkO8uoCphLS/XlRm4d5MjdKB4viRSwB\r\nSSdovYnMtocay3jzB8urPO92rIdynKW2i1Xpm9s+60x3YydwYHsy4+u2HtFD\r\nA6BKjcVbSajaIYrmikdg0+e9EZcKWw9uOudGKIb/1OvzZskmQjsEhO/nFNhj\r\nq08HxO2OUJcgC65CF5H3oFFzLSsbmQYF13vqG4zLqbr0t88P4h/c0mb6bB59\r\nhDTY/cMGt95M7ZqXeQCE+Lgcz5Zp+YvHh3FbDlrbhNGevrTq4c9N3VSA2HPg\r\nXazQlW1A0edjZkClwNS2s3NDQLt7c1uWTKHos/YHBoUfNOlU+JF8FtPTOMcq\r\nDYQlY250ZHTu3SFxntmetu2OMUVIoyMW0lRxmWnia/apSg2hDnyJOEjOQGj1\r\nj0OnHzL77pS5Sce13v6SH1KE9RFnWEZTT8oZhFghylxod4kOdPjiGmI0Pu4D\r\nUBla3vNqFN4qw3jjE74W/dZiIXObtaU2ThM=\r\n=3LrR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/tokens":"15.0.0-canary.ce8b5326f.0","@material/density":"15.0.0-canary.ce8b5326f.0","@material/checkbox":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/focus-ring":"15.0.0-canary.ce8b5326f.0","@material/typography":"15.0.0-canary.ce8b5326f.0","@material/touch-target":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ce8b5326f.0_1670628737253_0.5087217019259118","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/chips","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a67f3577ad3bb9ef0efed38f6c1ae8d77e297966","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.43f5323bc.0.tgz","fileCount":163,"integrity":"sha512-MajIWl6v4KxujWRR6mjVXwQwEwq8wt5K41Dhn2LNdhAAaHX09aR05kt7w1Xh6i1dkc0crBRBYgDp4bGzV2vymg==","signatures":[{"sig":"MEUCIDhvuQjgCGIddqRubZsBPewP81FrL37l8tfIK2dqAZnWAiEAz3c2oeBWKGEb/zbPtNnMg6mjtwFZm8Y8WlCZPt7rP4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1ssACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjRA//ZibevzmuR7MVPGCCptjPBllOlrUyFSDmhH5Nl819k6LZ1Wnd\r\nN6ryqZCB6Yg4gBxsQscTGuSCSFahSc5BYOoEVpFCdLEMQunAW7hGRA7yvwhO\r\nlAcCQPiRmRT8HXxde47YAjElR6xu1DpIA/d/dGyJCfp1t+O1xiAXzRKs9Yjj\r\nbW/0zRpIIjnaovxRguxaON/qIBGFXgtBq2v8bmek1LLc2DnOSeKWE2ppeKkK\r\n+/5XEljBc+miIjxcnQISf9n/hOARkrpI3svl6C/Np4nQsjju1lw+RW1jI3Z3\r\nhuJLvnGbgppcJ67WzvfC/C/E65oaxfWYmE/53jlKmjJrBdGIwmbqPJ4LWMAw\r\n79kqqPwju6wRGRXbAJkhp0bNU5DzREcJvzUy7/lXFZI+jk3QJibGqCf5YLL+\r\ndL7/QVW6q7zDhpg17TP2DaB4wlJdXNzLM/o/MErimdyCVWQvLnrmzZYyX+rK\r\nTwNCdItv+lv357SspwDsHDavidN6zMCge+03e/QvieETnFppNaR8zp7W4b78\r\nd4d0ndyn4kQGug1tT2w4gpIxuxWEthkAvfv4uZ5kURmCZVGRhuPx4Ito+VrR\r\nBMyh3u3WzIs4/nAx6ZfHF1ngXOKN1emCIjUh30BqzAh68FFXccNUS6EF3zHi\r\n4uq3O5XBIYFx42rHkIZ80jHoiJGnoicetbg=\r\n=FFlP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/tokens":"15.0.0-canary.43f5323bc.0","@material/density":"15.0.0-canary.43f5323bc.0","@material/checkbox":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/focus-ring":"15.0.0-canary.43f5323bc.0","@material/typography":"15.0.0-canary.43f5323bc.0","@material/touch-target":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.43f5323bc.0_1670863660423_0.495506035960364","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/chips","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"017ea21a7c5a99550e51810e6999d8a688c8da17","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.5490e32e7.0.tgz","fileCount":163,"integrity":"sha512-bRZ7ZcwBOr1kKjz99ntccvOnBq8mEbmXoGLtPGbUV2u0mQ9tesHQUlqOajNr/5pvCv2L0GGnil+slELms9t27w==","signatures":[{"sig":"MEQCIB2oUnOKGFVOEmtHep0lrMknPvd3WbeUFfbl4FPthdoeAiAMKtJIX3zpXSpYwECWbHdfaxhY2rLrNYGwB/iteVQeJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl170ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEnw//fAcJrEV9SR6mFIbjIJjcYIPu0mohjA2OHdQ0uYv6ith65OBU\r\nPClorOpeRVX3mBRu3+llw+eakdpfpWecbQQeuQ15nVU+bW9+JNHl5AGxYZON\r\nP5EIv+keAW3PwHjmL7fOchTl7KsscNIM9+Kr9r8Cu+Y7t47C7bLuAdsFKwV8\r\nt8YEJyYA07otxBzSVQf9918DxHcsd9VZNeIhVJQwDJTY/FbVeq8+5SGf2NaC\r\nIEQfbF4RHMujqhY9ohwWbGWuhq6AgUklUeXH44l4jl7k7tr1u8iUD6Kfo4Bu\r\nTIBcDwyYxIq089ivM+nYqJMr/cuFdK8NymLEtjD9iErtUwgq4f2h1+zKf7Jl\r\ndqmfqiIBW+vzYBE5Dsiygyx9nuVv9Wzb4D0eBUKa7Fe3h/vS2mPfPxXtmXV0\r\nGOkijGSxRGeqHTJs12osPjiRJFwe0iPUha/4XAVCuB3dMc2RfqFds94B2PMc\r\nurnwza2Qug0qCIK+jIybBibGjuSmVwDSgmzM5yvxzX+YS+XGWzKJtCNM5XOM\r\naMGWykU4Dgch205jGjKgrCnfs21x5S+BJoQ4SBI0zMVDVsDm899T3Fciv2/8\r\nXwNj33DRnKhE9w7Vxt7IkR7SyGzgaG/bNem75bkGWycJOtZ8bM8HXfefGXt2\r\nw6qqdCY+t2qVlG60h86/twzBjf1RqDz9lzY=\r\n=rZK1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/tokens":"15.0.0-canary.5490e32e7.0","@material/density":"15.0.0-canary.5490e32e7.0","@material/checkbox":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/focus-ring":"15.0.0-canary.5490e32e7.0","@material/typography":"15.0.0-canary.5490e32e7.0","@material/touch-target":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.5490e32e7.0_1670864628096_0.24267503874666096","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/chips","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.817002c29.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"762f2c7a6295079d1e70c1f7582d1b1b82da23e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.817002c29.0.tgz","fileCount":163,"integrity":"sha512-9WiM8lvTuYvTRM/qG0+TkIR39+ZoGd4CkmG+Zd/rfeUPU2jKBZlZG+dqNe04BU7ScI90QDHYPCa/ih5eVUpCmQ==","signatures":[{"sig":"MEUCIDe7DyBJvK5H8M7du9FX5Vj/NQzqCQdIbC1kA0aJK2doAiEAlv+D6r7tn0KZt1+1cvn2IemaBP7GmgMlo4dG5d0LDP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPTaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYjBAAk+Y2AIt6tGnlOJewp62TPhJ0bqk7yPC+b3bQQsZ7m03nCzZb\r\nqR6+yWYIZnsyuUPgBYVv0lHhzcl4aZsUOc5sMxrd3matey5+1iis6Vni2cwT\r\nguV9TK69sT7cSKmzo1C+zb4HaR6qjhWC3AA0jQ+kuAblrRw51CcFl7MlybHp\r\ndpe6gd+oUCgLiW1ZgYoUb95nwmHTHRZBjvX9eFPnx3/c11+maJ/bp79aWOly\r\nBa0KZIPsAgTJQwnKLJDRTPDUgZh7zjdkAAw4FZjpH4P/sSKAlwZawbakYOuH\r\nVk1UVNryqEms6GNZVnpeAL1lqmzHPWD6R7n2I0/HOxbBBcLketSPy2UPNeRx\r\nham1b8yXEAX7KSQHjHbvGCAgdBJj16rwSs88vJGhUH3kReV13QMXJYc2Tmed\r\nWL7vqYiHWCBwb0WLJPx4Xf6fzL2vmvuxXiaI7rKZ2NpB0yKLJ+ra9KRj7y0u\r\nwXHnqLkPxuu7nrksvvtiaP8/ajdYprabfVwx2dvpBwGznvZ8TqB2CMTNumE+\r\nesZ8PUs7Dpx6L3NNLCgth2V8NTrcs5sVxmV3Tx+5cZC2AM5DZARCtncF4l3j\r\n0OrT284TmAHOrm2rwEdCS9pUGBhItTJfVYbcOZqd7EYhddDt2VrD90jXVSu5\r\nvcCm1L4DxVR9vRnwgwNfMfntzXeXsbLaRmk=\r\n=Az1f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/tokens":"15.0.0-canary.817002c29.0","@material/density":"15.0.0-canary.817002c29.0","@material/checkbox":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/focus-ring":"15.0.0-canary.817002c29.0","@material/typography":"15.0.0-canary.817002c29.0","@material/touch-target":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.817002c29.0_1670968538645_0.9693940618423151","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/chips","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.313a1326a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a9b3edaa160e49420e4c34107a08c31cae0f9a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.313a1326a.0.tgz","fileCount":163,"integrity":"sha512-lNP5tRC8TvlTM2LQaNXpnlY0SUNQnolmGFyGKj7jM8udyNRCZgmY5FonK2CdsdmK0vPOnLwHAZE0Og+whM1QTA==","signatures":[{"sig":"MEUCIQDkyMoqL48/KWKKzvhxACg6xnid37k1Nh6b73MOZNg0DAIgdcVRfnbY/deCyvyUMiByw6lo4AKUuJrXvMi5ZHi4E8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaXBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmiQ//XMhXf3NCz/96e/oDL23leVm3yuR2FhbVAuzY6gxWYGTX7zyS\r\nsPHPQpNdnEL+e4fRNhyv+hOC624SvLea0weHbsudvgftSFP2NObQLXdu0yVJ\r\n325tM+ZutFbgwu6hhoiQs1Zd8wrvuD/NijGPSnJPtp9CNetXhGmHpnwjwUJf\r\nrZmttBcGQ+ffpq0d6WqF/pk8p8mlYO90xNCJvNUr3O0BCa2wDDZHnuhcyzHL\r\n5YSPb0BFIpigavZW5I/dUPVktKv1Yv+KCXGxD0YdQrwnuV+xE/UnCR+IKwhd\r\nrUBV7R881zakU7o8AjVmG3kukKJSkwK27n32ovQhsXT7Oe5K8zKKr5W3y9Ga\r\nxsC8cLEN7J3fen58rxQeDBIrJG6ClvasV0FguOucaF1nOPt2dHppfqokrR5p\r\nKvEFfwlEhEKqaT3xt+BZGsxBJEsv21ch7+DRtNXRgb1/JQUz7ceMyFgEk9x2\r\nzqkYDpJWWcWPpdf76kg54nqV/0VGs4PSgJ7uuqRnikrbgqnJyDgeRsB4C53n\r\nZAHsj0wG5Da1EMakQjSDLew4AquTYqNDLwra2PjadRRFJPzVn0S4VZZAbJNX\r\nawEMBOBeYoKoGlDBvJ6Dojgpm8VRn1n9N7KyMRk6y6n/cKGAUruWaqO91swM\r\nnAcqyW8CSJ1lSsA2TjxdRWLe7kb+QL7skMY=\r\n=q0z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/tokens":"15.0.0-canary.313a1326a.0","@material/density":"15.0.0-canary.313a1326a.0","@material/checkbox":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/focus-ring":"15.0.0-canary.313a1326a.0","@material/typography":"15.0.0-canary.313a1326a.0","@material/touch-target":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.313a1326a.0_1671013825124_0.20525493179813492","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/chips","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"155899fab6113facd096bca66fd24762c78e8cf3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a69c14e10.0.tgz","fileCount":163,"integrity":"sha512-96UrQvYkRPoOhebK5xaD5+jPnIGz71giDvPnjx3IaWIwvVB9ZTjSXjclqi2BZ9VmDMyQG+2weSCXwBQagJViUA==","signatures":[{"sig":"MEYCIQDYhH0L9pSMnZQ3tlElZaBErjOO3X+IYTyKjPobUo4INQIhANhbRE3F0Xj6HvVt7Ednk8UF6G2Ppz+8aTUM0z1hAsOv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbF4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE1A//eOEzUYcMPpN4TL2qlV2GScqJKTPJ0kuaUO+57eSiMtMo+F/w\r\nC3zKQc++MTKOe7fP6VxwnS9aujNcB07EwOssOAIahcJ0aEp8gHo3khke7neA\r\nOHQuHENrXHLLZP/u7O8i8x+KjymPypshHheWPHIeAV14DXdQOhrCd9muS27p\r\nbPndxq2o9yXZyv+WzCgkP3r0Py3XAE8A677tVTfVk7dSs8vlnogDdtqZjlzq\r\nezUSH2VckMczbC/ViVeIwQp0lgxGKcwH2k+RYHhZCvT4qSQo1OunKObbww7A\r\n60zHo5cDgU3BZZNi7Pk8yiKfQN3VdaqnamLdxX8Y3hbI2yBD0mFsey4nIUaj\r\nbx/0VSIAr1WiPutBgIsQV7tGzwe1rDUrW/TlKtlUdru+E60983h6u3jMXyRd\r\nHGJtITCsjDA1j/y43nt88NhdAAM3K4eg3CF2y9fLNXk2it/PhfJavvJdUfSt\r\nz/RbhVIz+aJitQpS7PrnhP76E29lhBwfv8UgEZYAyI2+KyaaIsg17FD5EXk+\r\nfbxY0pJFgrT9dfLY5M1fH++w9Wj24FMFzIJ5VJ9oSnpePbA/dxeCGFa9YFXY\r\nEBMZvmREv91dh3vunHY1lyv1/PRzEM4Xwg6lJZaTEW8xT4FwefZSViwAil3N\r\nMYla8tTs3gQHwqNM4EAL8JI+I34POJiQZ7E=\r\n=B503\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/tokens":"15.0.0-canary.a69c14e10.0","@material/density":"15.0.0-canary.a69c14e10.0","@material/checkbox":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/focus-ring":"15.0.0-canary.a69c14e10.0","@material/typography":"15.0.0-canary.a69c14e10.0","@material/touch-target":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a69c14e10.0_1671016824059_0.9768459539044942","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/chips","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"675f7eb5415d165a56495a4c6c0e84433de39372","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":163,"integrity":"sha512-hWQf/Evs6fNWMLgUYHJbuCaE+Vn0D9Q+YP1jQN5wKrMuP/j8HhIdTu13+ip2kWNN+g6Po7HOtkDsm2qkPEr3RA==","signatures":[{"sig":"MEQCIC/b0fN8CQl7ZON15EPlvV5XImJYtehHAvOhipnzHO2PAiBsekQ2y1ra7KqKoPiSobQxwnYdlwIJa/rRNwrn38ryhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf3fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Tw/6Au6dez6NEoQfJzc35kyVU83SVnXmVritPp4cSckG9RhGRfgr\r\nQ8VijaJKHF+dKIVT/1mqvJQ5k32Hb7CAtLoP9MdB/mFYJ3VgNA3UYgw+goVt\r\nO8nnmdEMUE1QLPt8ZA9riihScfBCNd0nNyICkZgtLQI1mF8uw8imI2RT5/+H\r\nRaE1CjRc6yQC3hCK9gpZXE4AZWPlzgaztM2JI5Y7YrE8RL0MFB7jSbCnW9dW\r\nWOWQPBw12DNx/J1DxA0agoEU6uETl/QjH8HeP21QnxVv6bB3+KivCh7d+XNM\r\n+TssqWlLqOEdz+6KPEm2wTR0pcyP4ctSkmkxi/fQyKemRO4tt7xUzyCs0Xs/\r\nOSpVSxIpFyH8iMg6IIRD7s31nAebZkytEb2WKagUccpNQxyucaEfX8m7/26g\r\nZ15q+vv0hunWcZhWvnNY/7cPBzHohr7aYp6ZCcIInaoZcCRLUS7d3DHcvJyl\r\nlLcPJ4RWPH3pHuak3kByS4tRO9CkBMmESuKGeSKlTyN8/a3qIMfw5xlKFEjb\r\nHR+rzXbi4XP/MwIR6NEdqb919HBcwXvtwKjynSzULi0XjLJP6faLp3pVTuQV\r\nLw/falHTQdQ6q+uurr8Gbkk92KBD0FghmKwaWCJ+kNA3jgDgIDzY+CNjaxdr\r\n7hz4hy80JjGu4oyA5TJNm5P6hMyrdrByjoM=\r\n=e7TK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/tokens":"15.0.0-canary.f43e0ceb5.0","@material/density":"15.0.0-canary.f43e0ceb5.0","@material/checkbox":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/focus-ring":"15.0.0-canary.f43e0ceb5.0","@material/typography":"15.0.0-canary.f43e0ceb5.0","@material/touch-target":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f43e0ceb5.0_1671036383237_0.6287230934125749","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/chips","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.34767110.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a675abc247a068a117b22ac96f13e87a5a506622","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.34767110.0.tgz","fileCount":163,"integrity":"sha512-+HBIkREPpOVFNr8ApgCPfCOJLzKDB8Yqf6V79nxBJygQSEb+alU/92H/MoqLX7aukVA8omC4r8KROaN5qohmaQ==","signatures":[{"sig":"MEQCIB1Y09KDh7rh6RhP56EtL7FDqOJ5qMNDTDT8NbAy2FiDAiB5rEA5UvCnh+p/pvVqtoCUWU64B9MUWaFPWSjx8gkT5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgW7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzsxAAheYM9dYGEjXqFKSKlhiYhYstkJKpoTdRKtZqFaWbInVruRcZ\r\nLFr0DxtgM6c4pULo7Q4VM+ohq3hN/HVukMur8WjY2LuwCe3E6wM+gXN0ReiN\r\n2mHqeif+7Mwu7hG+TCY2MXpyrLGcyhOKxpC22eWU0sSZGHHamb/wfbLHibJp\r\nRoXcdgAs8XhRQMm4tWH3r9kWi9uG2KgoXQ/7/jS4isInav9M0ghmFLLGMz4S\r\nT+P8n93L938zXPUolNLA7k5vq1sshZS/11S/VYr2xyTag2zQSvISL4xuiLl9\r\njnkP3iBeQLJhFIptCbO91ny3m9vidatnfyYiF5SgiI7RYSclFbqBJmZBMrwD\r\njdFPShSoB92Yeqs3MpGn+AAPnF1Au9q89e0Oy902gj4WugRYWMp/iUSWzt42\r\nHgkcdRT3u3wAAfI/nl2/RlEKGeS9YGI/g16UmIx7JCXzf39+n+PfVb4+MRai\r\np7Nzx7uoZanrTHMnx56PxaYv0UlwrY4CnDQCH9qdlnvhoCAI2ZbDIU0gXkHg\r\nfdd9MHbKWogRxt3cDa+JZ/I9VM+RVl9gtyYsrPoH0F5bZq6UlSsJfjTQv9H1\r\nUUNLJ7OcSYjtmFIq3h3xwBRngtlrSy6Uchh8gN2kVR5picmIubVwC80U0vyK\r\nn6NtxVz2JfcOThYZ2NuBukJGmtdjhebF1eU=\r\n=3bpW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/tokens":"15.0.0-canary.034767110.0","@material/density":"15.0.0-canary.034767110.0","@material/checkbox":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/focus-ring":"15.0.0-canary.034767110.0","@material/typography":"15.0.0-canary.034767110.0","@material/touch-target":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.34767110.0_1671038395512_0.10178152271241125","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/chips","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bda9bac9047de1af165d28b8dd9fe6cb536d0b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1f99f3c50.0.tgz","fileCount":163,"integrity":"sha512-9GXHp77UijWukoyoss7kJxnzNvEUDMCIGm5aaoomJk4AUEVtQbqbANWkDnL/Lp0dB68w6DEtUKtGCbOQ0NYeKg==","signatures":[{"sig":"MEQCIHm1AZA8ysBtIcFeZ3PUc5DKQglgEIKltmgLhoQxVygaAiA4f9wFqF5yqLwJy+SgTdRDfQ58KN0MX0nad5MPWgMxNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy67ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi0Q/+KnEX94J6VMl6SqTG334RrXWNVlBjFD4gdAiM6Yr6d0zCFV/x\r\n93yFpJirKJ8Zpe/cd7/ErPDxfW0WrZXoZNI12lZw5lSGLJOfS4PNEf6llbjG\r\nJwpK/zYkMnyLqq5Mayf0ysg5zIaDur+1sGAV455GWtrPNED/qE9wAAxY8hqU\r\nox1DiSlpwpoYr4JudjjO3RG8fnajkzUQPqkoh8sZl9RdRngmclnFsosqXKu7\r\nHEWfskVP0bvAmCILaqt5CxeZQDXt2Cq4rZ/NDByvNS9gClbQXAwtT3VhF40U\r\nKDVNp57e06hMzH5cRfloG5oe7KTdizNaygrPI7R+IzF1nOsX+lelNVazg1rk\r\n2fz+nEU7lIQZ/krSq/9Jckh857yQf6pVXoQ1SdvIIic16JZK+E0joQlsl7W6\r\nLiLiCeZHOdSkmue84jrpAfDhlIUlXk86AmCnUHhua2mw+4DekdEWF2FE4NSE\r\nIJN35rl+x+vGvawIvRY58UOwDEuBWt8UAb00bnHXVPZeMSJ7+4NQ6vLvzvzD\r\nq1yjHHXXugvpqQO9EkgwL6Ftgo45hZx0axGvh/Ooq9OQN9eddvjZPjdM0AKi\r\nBTEMB+mFYqO0Fl8S7+xQyJ5Uxj6H8BBuEVqx0xxHCqjvMAxikF124xJla3x/\r\ngbX/UvXl71BdmvjYHY7fU/mS8hwZDxGBmK4=\r\n=xhXz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/tokens":"15.0.0-canary.1f99f3c50.0","@material/density":"15.0.0-canary.1f99f3c50.0","@material/checkbox":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/focus-ring":"15.0.0-canary.1f99f3c50.0","@material/typography":"15.0.0-canary.1f99f3c50.0","@material/touch-target":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1f99f3c50.0_1671114427293_0.6770503901118243","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/chips","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"347a914e67e690392eb4dd97cf57740d0933c8b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cfd69490f.0.tgz","fileCount":163,"integrity":"sha512-SV3vif6id1O3MfMqhUgDZUCM5dfd5pCbGV06oaYhAaPubpOKTeH/K3ibXPIMfj/lDDz1K7Jf4OwoXm+aJKz7BA==","signatures":[{"sig":"MEUCIQCAovwPV6S1d5bju1t/fW2WkAeY1LnQJBZXMvX33kGUhgIgN/Wx5nfYX4Stl95a5gEKcvey+9/LUW8guc38w0YwHqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNCeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqACQ/8Dj5/7DTPHErZAp48qLXtrL8JSREIJOYjzSqZ8ZcYwZyfUFYZ\r\nZGdJ/hxfcYhxDklSeqRT4Qlm87IYHo9tuVR7jKTWedw6C8Kff8nqZHzVvw4R\r\nTUbyG9aum85OBQcqlKdrptcGW7DIeMfvs2TukPGTCK1rqoSVhYxGy+Z/8jO7\r\n2Ah0sFaphoP/A2/0VopkyA9VlNy7nsoPmzJ9tfwlxVtJfAj5WL0R9QtMyRoK\r\naztgBxhZo7bARq3pbZKrS6BhG4+2wsjrq6KcuccweuinOrMA9+i8P39vszhy\r\nk6LsJ7rr77Z6q2tXzBvqHyFQU1Car/kMwIAPXs6r5fgS94vorRrCffFNyFgY\r\nj7mV0FN/3ImJczLT5dBNz4yA3AWvmhyMazF2EFlbgqrWMpnwjjbIBgO1EAGa\r\nwrZzXL9Yt664nKb85sQIp5G1HOn2OSYh9GlnL+/rzhhUhkgqFUU6EvMB8Hfz\r\niwpH3Or57GnSdR53gjN3kHXsvVa9aUMCUlM5J1JjB8O3z2ayc+Ghx9SiD4K1\r\nwdLI0aq8BlUIMI7oWQjH/6GIg4rv4WCdH1VCoI6abBWkxBMUn5uYPLpBd4q/\r\nSCEcmn8PwvkaydhKSUMgn5J6Q/ZUJPcYR92XEv6sWFlYXuQvZk8A3E2WXYkV\r\nQLIpPXHG01Yj0vSE13wwyqgi7I58IF9rgoA=\r\n=Q6GB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/tokens":"15.0.0-canary.cfd69490f.0","@material/density":"15.0.0-canary.cfd69490f.0","@material/checkbox":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/focus-ring":"15.0.0-canary.cfd69490f.0","@material/typography":"15.0.0-canary.cfd69490f.0","@material/touch-target":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cfd69490f.0_1671221406369_0.29308857997668714","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/chips","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f568d22b0a5775a84bc2033d23ac63ba7a28d20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.94ad8d986.0.tgz","fileCount":163,"integrity":"sha512-gDrl7o8KUdpcjyIfNHC9a1vKLf0yio3b+w9zfYjKy6RMYUCyLJ8UaC5RoFQGbDmXhvhr/Mvfm+igeWPu3+UtSA==","signatures":[{"sig":"MEUCIQCiyulwGtFbmyYRf4IT4TBPH18zanB0P4HKiZz9peo14AIgC1CxlO9O7mPWHXpqC9LGYwugjypOiEDZZ0v2AkSPu3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLtoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKJw/+L6hodYG/lO8NvJZJ3Gm2CmCo7ioVReS+zScJtcmt8CGFWcVr\r\nkY87glt3KIHBZZmFKRz2lTIqHNfXCXi+w2rptnmQb6Ry8DeI7BUVUYjThgoj\r\nr0gBRo1d+5KImaMjunojAjKcUSOJu1tUfiy8SSD4hopm5jUMcBQLvUWZ5xyh\r\nfJSn1R91AOd8csAIRC6R/g0popfDQ3+KfD1QNmDF7DyyadawJBFY3r0JW6ig\r\nzwhbOvVrbMEeWrNKkQPCva3CsVj316HaJWjKVzPe9E3hcv7/bZxq6zIcwKja\r\nnBMUMBDQTh1xMsVDTTdFu20+1vnoUGm9edt7W5LZYAQptvV22ateZHj4E8Ns\r\nWpfCdlXqKZk9BFwVk0rbk/2G2S2h5o83nlzH2FDC4Y7dPswBEA+/KMH3DVzl\r\nWC40AgBYuN7XDE3oLme6JXnYyCd4T6RHLPmzJnnR8FlGjaoCHIbHRVuOPltF\r\nx7aqvXPwfMHBOcPEOAoDtzmEQlAz5c/yTxQB0XuCIKd6f5ocRAMGeg3MK8T+\r\nxfs+edJ6g/kHk2MuIy9erVYKNCSWKfjs31nceaphs93ngCWEHanLtKjnBJq4\r\nsU2+Iu5Saov371DOJ/2t84AxZXGZ2OPhZ+W03jl6NUDYZMAK9Vq14hM+w/hC\r\nJLZXglsZMOpW/EYutX7MDG3Mnf/V/BkJd+w=\r\n=rh6R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/tokens":"15.0.0-canary.94ad8d986.0","@material/density":"15.0.0-canary.94ad8d986.0","@material/checkbox":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/focus-ring":"15.0.0-canary.94ad8d986.0","@material/typography":"15.0.0-canary.94ad8d986.0","@material/touch-target":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.94ad8d986.0_1671478120185_0.6761934331195993","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/chips","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.604264203.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b7c8baf9ad80495f29fdd6fb4abd164d40b9c6d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.604264203.0.tgz","fileCount":163,"integrity":"sha512-MaOQkFsFoiAaEA2VTTIrrw1ivetJtQFfp82VKq5mU3KBe1fZENNYLh+SgL2XRQ8fmNXEHwd/RE3HtLdQY+KO5A==","signatures":[{"sig":"MEQCIHH3G/x4IUDx8iXWcPxC2n1VwjhwCfxUXM0PpBTVpT+2AiARlv8aEhbr7mSf8U29tbV1y+/fUn8J5Gg9pw8JK1P+ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo323ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0JBAAjGshvyz4ZBsq3I9LxyYaQHzt+69WtQthQkvjEp4cuVK5k7ft\r\nmg6NQnXvAXRnJqvy4UUUKlCQdT7vQD6p+0eISZm5mdzsgadVJIBeXH7x2Omx\r\nWfKuh2Id2BRH8fymVArNnnqmc/imBhpyXIAp+1VbRRytFFBxl06YwBIar60L\r\niYvD4uMjo37hfWa1SvhnCPYVIZrfXrciOvucFgx2T99uzxE8qBZHpP9+v2Us\r\nuBigHp/Q6Yten7XhujCO5Ev1CmWwWVzz4bDRSIZfIXLNwmWXw674FgDGNEkN\r\nZ8UYeR/JP7fCuEwmNIkMTnLk3mrDOksSuDPYFvvWN6RJbWBb7VxaSt5ypqG0\r\nGFuWEQH6TMBR4PVRhTG/Ouj0hix4yQebHXXkbiknf4XQg3CqOUfMWJdULXAF\r\nk77WC7dddXmmgmU+5al7agz94jgDGBYqqLeygaVzDEFkxbOivcyjKCKhkmRv\r\nFbLHqWabpCmacvJuN8PcQzCYD0aqn3alxLr4xLe3bLstXV8xzKebCcG6ZSid\r\neVSESdXW7ho4tMI5a/VXKd0llkjDkd0k1Zv+W3MKOV2aaBeH2bD2Sjl4QR2T\r\n+onZm9Tpwqn33HJ7kJcPnntrqnB9xL/B3djwWcEVLrHbFXC1XEExIQW91qTy\r\ne+0AK70SmJudsY7Cp77JhkVdNuRAUlXSmBg=\r\n=ItCi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/tokens":"15.0.0-canary.604264203.0","@material/density":"15.0.0-canary.604264203.0","@material/checkbox":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/focus-ring":"15.0.0-canary.604264203.0","@material/typography":"15.0.0-canary.604264203.0","@material/touch-target":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.604264203.0_1671658935650_0.6473551002945415","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/chips","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63a48b44a1ed4a35dde55932cbf92bb7cdde8944","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.85bcff6af.0.tgz","fileCount":163,"integrity":"sha512-YjZsVoiWOXGJ0nRRTLPEdkR5tFT4ALP7rhOc7vNR8RkspwlFX5+l1PCzXYqQBGHVKg4o5VflOBTMwhz0ZDwM9Q==","signatures":[{"sig":"MEUCIQCtmCToPYe8Z37AconET7J5DYBb9T51l4aaF7aILb7DAQIgadQWcPBrvIC9Pt0Abs8+3WLXc7vAnsUGhNwMFEhzN5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDDjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIgxAApObpHfyTzZKtyLoEdpnYkMqYJj2pmSzTR47izHZdaKBJuWHe\r\nT+SWXEx+jXd/TkEyhyetKezLGSu85w1iPcaFJZ45yVcDz/FrrlTd/XXmRXkw\r\nz1ZxsbhgAzovR8mbhZbbuyWkbv2+HJ4lkjFRHpco3PIWlCunVln8VtXwCozA\r\njlcvTPofuN26+TaZli96pBP7VPoC9O2Nb5nfx1mIszYfH7MOubXU82ekVUeN\r\nd5zVG62CG9qeLvJbVoT/9wyWxOdDqgcsjQZksEs23RguHkkoICfQqb1Y0rGm\r\nN2a2WDX6Oge5Kyv1QiL8iODCWVzJcIfljIye9CO/Shg2hoDI0S0RVznkeX7o\r\nNY6MxdnkEDHgw+UwmXV1HKjALgEaQHsn4oFWRK6QYWnGpkyJ00lipba1MGrx\r\nBR3xjpPVnaJYHtI2kU1Lbjlpuh1tLpYxA9rd+APSloy4haKtoAcVslyrOvIa\r\nAkLcoNSZ6pyZLsnG/L6FHp1hFS5txTo6XCMfFxfqp9NPzUjRWnZLuPBk87CN\r\nC1xnfrSC2GFDWA20nRcGNLH1BE2A/cUVe3umznzVPSaAHo9xVB/i9C5auliG\r\nQg00a4ifkN86BZ0b9TrkONDLyT/MITQ5TY8SkXBiiJyGtRkQo/l6Pl+WTwXV\r\nrPdJYxPZ4kJenrSPY7ogeNtoTjttnXaYj7g=\r\n=WNoQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/tokens":"15.0.0-canary.85bcff6af.0","@material/density":"15.0.0-canary.85bcff6af.0","@material/checkbox":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/focus-ring":"15.0.0-canary.85bcff6af.0","@material/typography":"15.0.0-canary.85bcff6af.0","@material/touch-target":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.85bcff6af.0_1671704803043_0.7786067477397891","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/chips","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba89fdacbcebe46d5e59a9d2b5ddcf418c7aa0a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ece3e8d21.0.tgz","fileCount":163,"integrity":"sha512-5ECx+/C8fpT0tLyTA8zXdGChVNxhxKf+zBTR2NSGW13cD9kNVzb7npKM7jJSyrlfF5GQ2jBZSRAIyVGPusFbxw==","signatures":[{"sig":"MEUCIQDxDkH3YJ2/lIJCuC3j0lOo14/A/WhjhxQ2MrlReOWy0AIgaQFmp9QvO5Ig5Uh6ZI8ksX7pv2hMVebQgFyOJzCyP8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJBJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgfQ//VjpgEncos8VEtUwknKBS2ov1R5ZeO9w1iA9T4/m73owJ6LWi\r\nJ+z4D+QuBjQ0TTrW06euiC39702OFpVNYNbYFVRIig45DVLdPrwSQCfZ6Ult\r\nIELftlAewuaIi3mPW5oHvGAJPB+h3GsjqOOteOnhSUSyqvLrOzyqdpow0FYW\r\npFGLr9EedELPw6DvTkbtrNp2u3SiUJw9/nfEMolPKcmFdSmb/NiejoE+W2xi\r\najENlnAjK41B6SPOEh14e9+I3NWt0Te8C5b8MqV1HgEILCKCT43SFXpzgLGL\r\nqADzYH1xLjgV6X20wiBIoXg1KFt/F57K3erWd9IEd4zbRtUy+842TiRKr6mL\r\nJqu3OACSvxRizRuZdWzUJ9i4Uv+TvY2YlypJQ55XipNHtEQUFeAwqZB+3XCb\r\npyTfE6GTotuGSbRCLiPa3JsIcFO8vSoVM6lIrEUqSyRaw+ecOzk51EynX8vI\r\n0MqRgIzFcR83KWvVmuiIzYCn6FCY0DLnQhoT3fNwMoS198j8Y8WDARTbFg5W\r\n4U1pssr1GEF8+xFl9ae0ihjCYD5NICtdfHelGhBrA9hsJOhrs22SViaZvR+z\r\nTU4ymVgvItu/ztIYcgVuV1YZgVOBW2LximHpNEWGTnx85GPhrhTOFQuzfRAq\r\nOzjgIegKX+9ZX2vzJ+POkHoKWazXX5oUQrU=\r\n=pLWb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/tokens":"15.0.0-canary.ece3e8d21.0","@material/density":"15.0.0-canary.ece3e8d21.0","@material/checkbox":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/focus-ring":"15.0.0-canary.ece3e8d21.0","@material/typography":"15.0.0-canary.ece3e8d21.0","@material/touch-target":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ece3e8d21.0_1671729225516_0.7641781384742823","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/chips","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae438825817fafbfb93aed98b5bb3c38bc44dd23","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.278ad53d1.0.tgz","fileCount":163,"integrity":"sha512-xnLwpLkkiOHTRX7HJtZlqkWSVh0+PwtInzVYn2jXnZw7xocU9ZeAIMYYYWS5xkV8Ht78q0ft2Re20JY9t3U/jQ==","signatures":[{"sig":"MEUCICq6Hn6SYkjrJr7Dott56aD9QTY40Fr22CMv1qh7YM/BAiEA1ZxUIkSSE66mSZlivMxfy76Xgmip516ek21gFq9+6V0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyYiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDdg/9FJvoQ1GWZ4fYzBaKsMmLzVTFCukbQyGkNckg8dJx1Kxy3EAG\r\nxjsVGH9ucBCurtAoB4RHq7J8YStk3KyZk2avfhdGlGyQSjQ3Cmn6FsmsU0tv\r\ncCOy6q6OQUJFNUoA+MJby8vKcW+WsiSK2z+szrFrcXf3Iun3gt1NxumJYV98\r\nu+hXMnpW8VQcoojB6LqH4SFZ7xewWUnYHFNXPZrbAcboOISCafz9l11lMdhz\r\nm/2sAMyPoSt33Fbdgo6cDb0lUXjslvgVzM9B43GHhlQPsUqqkJRV+fNR0Rm7\r\ngxMOvDBbLgN5dTX4jN5ydNjqPyykyu72PQqVUmLVAyStiFD5fox33cuGrzbK\r\nQlmLZ2VgZnqnrqwLv7I6maFqZz8i4QXk5Gso2fr2FU7fLy78+JnRoDFYTJQr\r\nNWwKVQyEH+RXnuicLMaz4DX/8B+OOE+GKA/pESptrnWX9XhqcDrMwOoHuvNj\r\naGg9kgN7wC4Jklojr2B3jqwCEwbeQ0kuMzahKmF2Nwfx7EcQ/Y24d5AN7tWE\r\nbqgfN+OrvcYq6hVFlwYUdxyg8QUAPM1KSHrYvM8Shmwbt+DyuoFnoGWkGe7M\r\ndIDoD+Z0+YTfUJ4BHAWTVIK9aD/Bf3FgJ7X7+EcOTfsTprS6l7qFk98oVYyk\r\nE9pAfZNC73a7Xq/PD6lNDQ1gPOzJAsxGZ1s=\r\n=zPbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/tokens":"15.0.0-canary.278ad53d1.0","@material/density":"15.0.0-canary.278ad53d1.0","@material/checkbox":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/focus-ring":"15.0.0-canary.278ad53d1.0","@material/typography":"15.0.0-canary.278ad53d1.0","@material/touch-target":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.278ad53d1.0_1672160801733_0.5569318511342594","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/chips","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8f22683b1fe064cddd981f5aa422d46ae28ba0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a7d8389e1.0.tgz","fileCount":163,"integrity":"sha512-MYU2MtD27o6sdjLudk5Ce24HQmLCrKUjadmNgxrVeL86Mmv056YQdRvhD7ti94uLszkFJ4MhQyzizrS62UzaZw==","signatures":[{"sig":"MEUCIHI4inwdYllsURQ3YYJbdGuVeriGiGQNnRxbhU8jldNwAiEA6eU5x//tET03LD+vxgoYb+Faa/Ambed9E5YFg4B2MQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0H5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqpuw/9H9KQVCZKy8rRFOU2awp8fk0CAOJWxvfPiwojirXRE/nRU7NL\r\nRbRr2Cxla42w4/7uuqHKJp9vTPmC21m/ebo0sJxzNLvMcPu6aeO2uZFeBCYw\r\nE8Nc4XCpxqfGwI7+a24eW8qX8bXFqL9FwEo6gpHPzp6DaOKdIKh7kJvTBw6V\r\nNlyxNENWNqvnZkfNSjP/Y/KMhxBUJGfao9+W2ywDjEv11FKbCdoBR8mIDo/7\r\nng4TyziYdsYPEXc4y/OdU3rN7ZT27rFVuj+UXAR/gJeI1s1Togtk3EU0t/Vd\r\niw17TkLXQ887q5sbPXxufh/but0oiI6F4+dG1FoR6cmQZ5jlMZcOFlp9bqCu\r\nEK4Oy3zCwIfv5tA50orl3J9xkYZWGylzIE4hPwvvnSyFPT3deoAduC3Loq/p\r\n6HPMS7J35Rw+HiV98RKWEG/4ftLTBlAKzfBTxDOe3t8ekCHUtXBpkNHsW8/d\r\nJDoOLLClIcXfnbXBFceMCaP8NV7jOIKaP7G0wgYfc1zNdvp32EoxGyLyO77o\r\ntT7GBHnnUV/b4GHd2Vbt0mHqK5QmuPh35itCWIlAQPp7fnIDbMP6CZ2u+gtU\r\nGnQgxXOspSxZZJ5pxHzYpdT2xLHm2zTZMkr1RGrnEzWlXQ32DJHyQxXrGNA5\r\nmP8NGiIqOaMDVm9dWtc/y1cDYyGjFz1g7S0=\r\n=qDRs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/tokens":"15.0.0-canary.a7d8389e1.0","@material/density":"15.0.0-canary.a7d8389e1.0","@material/checkbox":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/focus-ring":"15.0.0-canary.a7d8389e1.0","@material/typography":"15.0.0-canary.a7d8389e1.0","@material/touch-target":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a7d8389e1.0_1672167928945_0.3572503830581655","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/chips","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd8fdf297515bd6754207385ec9b77e56ba4cda0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8175d5eff.0.tgz","fileCount":163,"integrity":"sha512-0fvtwecRoi0EV0sSgJyY0aRIY1+3F4AN6iQDHHA7ZZvJvByu2LNIQd8nLSNqM7LB+Jr4Sxyd8Qe8Uu6zdltlIw==","signatures":[{"sig":"MEYCIQCa5E3FO4E5hx5Z9V40Lvll5GLFjJelMYPbNAwYiaTiZwIhAL4ay7UNh/b7AHP/K74kIy+Fo/y9RVU2KYJAO5oGTSAt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1951991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6GFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Rw//RqjIU5mXHxzDsnBNvmzHAXje+vE/jPZK+SSDvaQ+qBFR3ke9\r\nklG3XfNk8IxGTONfRSbL4gRCN5nGYppEkUouoVY+waC6t7uXW1uZhLE39B4U\r\nml90S9DLE4/jsY3z5uq1k4umleBKGHyHDzthjFU+Pn+1iosoMGV9qQtzUMWm\r\nZclHWZwnpT7QFI+f6ZJN4E+eL3htPZgRvQ7ftCrje/EFBbQaalKnINujd0Wd\r\nJUV+yCFvSU7KjN8O5miBg66ELgw5koQHlbQrbUVgjSmHNXxkxheXM229qH1o\r\nrDyAlQ+/baNXXMt5x3QsTocnW+v7KNluF04bvFnGLM8ElaGIHFN6h3u6DJvM\r\nSQaqGHzfPxhnOToZBVo6b1Wovbyduooiuy80/YZJOzB9g4PFVi+5Oz1dhnxF\r\n+XU6bFml5tLCIEf50xGBW118LaBwTtDTF76TkxI5+lh3fE48jhDbtnr+6GHI\r\npeX/oi/t17yvwOwNX3TW7GkOj2+5MPBHU4/W6/+BdTdgbvL8lVtFXvw9K+cv\r\nJ1ukqZdLasYZjKlQRqAsFYtrr2G3lRF5C8XzHAXFLNay9EElRNnVnq4/RIIk\r\nth7PVs3cJsWi9tkUhghP4kUzTiTxpNRj6VQjB8SaNFZ20VeTgg6URVfG3kyT\r\nfl+6c0lbyyniC6Q81AxZydIEaGVD1jvfals=\r\n=15kc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/tokens":"15.0.0-canary.8175d5eff.0","@material/density":"15.0.0-canary.8175d5eff.0","@material/checkbox":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/focus-ring":"15.0.0-canary.8175d5eff.0","@material/typography":"15.0.0-canary.8175d5eff.0","@material/touch-target":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8175d5eff.0_1672192389506_0.5219426813056081","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/chips","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b1455b781894b8df58aa0ebdc65bc9e2acb7716","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e21dcb86d.0.tgz","fileCount":163,"integrity":"sha512-46NyJktYhkIsag+yU+O63v+F/zYbNrtjzhJ9lm/lCaIDDeuH4koY584sTYNeuIbv7uiC6YAAJfOJUhBxIu52cA==","signatures":[{"sig":"MEQCIGjrv2CtH/49mBd9Y3So6HkanBTvFyHkmQEu1bi3yyMkAiBfJwqqVb6y7qaUXgG8OQOkplsfYkLQyCmgggad5C21mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ5BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXSA//SYhYZGaDnzfF9TdE5pfHzzqulQjiIl7W6yf4DSOjy47uGqYt\r\nt7mt9pvJeJ7yVEhjjQpCCxdcg/Cm+sKfQU1PM6iunjw8T6KfeUBcTL3PM2cG\r\nC62c8JsF9TsHpNB9ALAq2AlFb2s1seqYtODaqPw91xOYJspb9wRutYditd2W\r\nRIBqs/g4A7UH3dtx74BcaI9MauZcOINCjW9dVXzRSqsZ3J8v+0b5FdY+LDD8\r\n4qhbxc9OwMt5yJ7W+EShqRuKTschgMSyD/Ki2j9I4f51zyAQnkMliX5iOsld\r\nizbi/vn4Kn5POIwz2geOYGgbbW0+IzJGtgHEOKNwutA6CZKtJDbF9ubf9lq+\r\nn6gHcV3YLiZmhv3ev0Ly3krmOtaly2XgZhWEjmdKkk9ERWIGNCHD4OHoaq+u\r\nTTALg4LjSrWyi6UnX67kU0MB02TKLabjZlnStbl0v3GYTImGCvA6FgPj7bQZ\r\nqpWeXJ+RjEI9U/ZP6H0W4SnreZ5uE87IK9L5NyoBI12xMQomCJqr50caT7fj\r\n5mZhPOjIweVH/7+gQ5054LJ24kVCFQcdt28I9gJoxnNH/kVUyzlK/mL5c7l5\r\nLe6XMoOKTHonk61yrh3xAyvtpCcshdODDyfz81kH4Y9JzMIpUO5ukdirDHCy\r\nXImaqUmAbBb9I7MvprKF9qjx0SB0Qts07/Q=\r\n=V1Lt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/tokens":"15.0.0-canary.e21dcb86d.0","@material/density":"15.0.0-canary.e21dcb86d.0","@material/checkbox":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/focus-ring":"15.0.0-canary.e21dcb86d.0","@material/typography":"15.0.0-canary.e21dcb86d.0","@material/touch-target":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e21dcb86d.0_1672322625188_0.23381034469875983","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/chips","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7c3addf7719866be0b426d77f66ab908e9b8dcb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":163,"integrity":"sha512-6BQSL52phktbUK+ilsRPDkqP6o7ug1e6w1GhtMrh78SjMnkV/vhccG5BU8rdiqycO9xL+25yPy66qAakuC28+g==","signatures":[{"sig":"MEUCIBt5ykdrvhWGaATy5DszCocze/HCqlA/OAWi2z39AQHyAiEAnaCs3qZMbvuzeiLf5MqLAHj/zbDkAgIVGCaDIwfGamA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre2jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrboRAAmXs155rv9keV4lQRSfG47BBJo440eK3eDmcNq2bcUEQcBS/7\r\nXe83iLZ1iitAYMGOYDrmek5r+wWS9w7QGpKwNWosHRjlJ7go7pNzC6EdFZ84\r\nO7h6XPZaTDpC/TFk1UeI9r7cYYhY98kiGw0mWCF/8WC/jwvzDy79BSeo43Hk\r\n8uY1aS0tkzJO/PYVDuDqcJ2MTfEIIvnRwqSmztiVFe72DeaFJ0ZqKxjyzRiO\r\nl1NlcWKdVTxLDSDUSHhJVukSkR/77fmdqG+GWjBpjOATqFHZ+4IeJezEK1dr\r\nMcZs5fz9zb9HYfbNtY6W8ynpO/BHHBasoO3yXShlFP3i3sitZHmq0KOP/itZ\r\np8911+HVTdlKDlwOSiiwGBS8jdVoETapLfx9zr9eKX73eoU8+yKgu0GzMwGA\r\n+7rGS1gcHOUIN8da2kd7JFOWzP5+tFXiDyTo0yOQ5K7kZV7mea2O6F+Gqtml\r\nL+MxOWTfOWOYWiINEciLcmqpn6mnnN48n7HFM9eEiB8ebaa8Q+T1x8XSYbcM\r\nxcbgH0HoDhFyBlhxjSyW86r0sMMX0BXNpZC6zhLOSDsNieYBcG1fejzfmB07\r\nUUirM7TEcEqK3NgP4fD8/o+vAJBllVjm9PQZlvOmrTmjILVXons92qjO9BBj\r\nBOkZ9Bvf53jasPuPtqgcjiKivcFYN0LDnYo=\r\n=TelF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/tokens":"15.0.0-canary.20ab6f5a8.0","@material/density":"15.0.0-canary.20ab6f5a8.0","@material/checkbox":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/focus-ring":"15.0.0-canary.20ab6f5a8.0","@material/typography":"15.0.0-canary.20ab6f5a8.0","@material/touch-target":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.20ab6f5a8.0_1672342947529_0.3534038135402535","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/chips","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b9806f623.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de3a8aae8e8c068efd16eef2625e0bf7b7947018","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b9806f623.0.tgz","fileCount":163,"integrity":"sha512-oistp71wzjGd+1dj2eipiM9hBJFYmd8pHgtkFFVxraJ7pQZNNe/xx9JQtxIekMSnTEAAhDqy5GB/GRI1D8AMOg==","signatures":[{"sig":"MEUCIAfU3y+cCu+DzgqixMF3fxJzFeCKA6IMFJ/d0Q8ZqhIjAiEA2+T2dqfRIJf+V3VOtC299kEC0XUlt6CQ7f6MLJuQnvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh2wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpz7Q//dPD9N8CoPUQAxUbIzPk44w2czNsSWVUHVcBjEru4MGVV8qYY\r\nCohNH/fild6tgJnH85TLrPMJMsTHIFwUh5z6hQ+AjVYr63dcqDsD5096Yf64\r\nEdOW7bSxCAadBlYtnQ6g/uBMMH4z/llGKePLNi3Llmd37w1RYNqJDaycF6pr\r\ntTC2HgsU0RJ3sWTMOnZFW8Hu5fXImHGlcnemk3KTYcZgcmoEleTJdV69sEW+\r\nnqvJjteQWa2ORytGXJ0rTEYuAAduGkSJvNO094fek7r2V4tszqgf2FpZroXK\r\n8+9GvPAhcT5cCGUHotgp910n5Xkwib9egngRT9QZBSD++QgmdT0uTueqSlJj\r\nv9hQRQNuwDvq+P1xtcxQfFQXd9iEdr8PTcRfURTLvqJHjHhAjxSOHu3emvqi\r\nHyjG5C1wclYzdADRHCcHQd4gnAYvi5VcHyYf5DeFqz6qKTXfaryN62DF4bHO\r\ncGP10f1nb3wT3mFrhm+JfqEDeF214wlp3FfpOIUddAgIKLhhNWV8ke9Nfw/x\r\nzm/3sbbJBz2OOrey1BUmgqVH9+2DTP1va7BoWRwsPywF2qJxcW1fhF1L/H25\r\nb5mt/5q9xnKKBgBIGj66ELgZxqAI0aWD+U6uBhYk919IoauCPxdYMBzhwznb\r\nf17TYb14TGaVfLvTzHSG7W7g3HrnshcQZgI=\r\n=PL0k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/tokens":"15.0.0-canary.b9806f623.0","@material/density":"15.0.0-canary.b9806f623.0","@material/checkbox":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/focus-ring":"15.0.0-canary.b9806f623.0","@material/typography":"15.0.0-canary.b9806f623.0","@material/touch-target":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b9806f623.0_1672355248555_0.8393734993468487","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/chips","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bdf24a087a28e942b8713e35b69068d614689c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.50c9f550e.0.tgz","fileCount":163,"integrity":"sha512-xaDfU+lJIfT9LEaXPTHVFo9P3PwaJPpKgY/jazX3eIK6ZY8MxA/j0aqemtdklQ7rHb34f8myPTNFr3rKqCLpRw==","signatures":[{"sig":"MEUCIQDVQOvzZWyL4sWTczA1pcY55k1Bl2wE4q3dsXS+ysbROAIgGoRC4t0asIVunkKqUyKx7SI2Z2DABgqSVknkIw1Die0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE53ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgBQ//cB9gL2gFt57RL7Gl8yb0jhpZr1GYseVHuCciy+MvSy/+NxAS\r\nEteun28BdA6SUT3n97AYtljJYc8wjxV+QkO7IJKcqFdb4we9d/PaemnFCUfO\r\n9f2ywxKMzrsZ6qN0DAsH8YH1E8DIaPLZ2ohtiVGkCOLTWmbajKa8bYvsDuj2\r\nI4dpGcz6DY65ivu/TqMp9awApevZU5ZjQ4VMMvtpghFEH/nfx4/tqseSvyOS\r\ncWgTjuaAA4D4IroUcm4QSZRuv1daYyXrzpFKlGVJg2yQOxX9kFnrW6W+dfGK\r\niSk3GnWGmdBw4/W0lJWFYRO3KCsz+IUPP6fZt/+t9yFFv6we43YljI/nkuMp\r\nBg9pBqdeCeakLkCiJqGYX/OUZDpH8eBvT0JZeaXmHKbyhGXkMuu3L5F96het\r\nd3y3Pyaaoj1T/+DzQ1ndp2yCPXcBLLYy0E011HGg/PoYoKzuKIh3KuET3OyQ\r\nxW4Xm2p/Qf78HjwmMZ6ld6/I6GvJO75W8FFliwoL/jpfWnKjLpQu1Dn+ymC3\r\nr+8Rum3+Tf8KSZ4inw1bl2W6tJ+xCxDmZaxF7X/aeFpStgOVpIEboMbkQIk9\r\n+Z1/MLWWEJVFROhXz1YsEdvZSKdWeviH8kCg68jeRC6R8mW/GxLURigjf+R1\r\n7zG1fFXutGYIbeurBuq07XgUxb/kuf3iBBo=\r\n=oZIR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/tokens":"15.0.0-canary.50c9f550e.0","@material/density":"15.0.0-canary.50c9f550e.0","@material/checkbox":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/focus-ring":"15.0.0-canary.50c9f550e.0","@material/typography":"15.0.0-canary.50c9f550e.0","@material/touch-target":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.50c9f550e.0_1672760951651_0.2513847545916048","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/chips","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.af490a848.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caa80ca9a30cdcfa1eb6393977dfb8f57d30fb4e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.af490a848.0.tgz","fileCount":163,"integrity":"sha512-oj5T9tLcXpegNDhNFh2JmnSqMnsGJlmlrxzHCK5DFAWrvmpu7w7/3PcDjPjBkPzJVrERj0+zjvmFyMn6S5TFLQ==","signatures":[{"sig":"MEQCID9gXJJ32WrqKODzrm/+IofaqdxANTEV5L5Tx9P35NsbAiA/unwu2/jxDRhM2pW79W7vtooPhJO9OR/WjmALdVhbGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFDiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQFBAAj5ITUcx1+tlDOYR6rrULTg7e17HbQWflCi/EEAb1pHQYS5gq\r\nQ0NEmSn9OD6w78JWD9O67T1KqAlL6L46vOYRlL0PSgjzxIWVxm31p5JqO9sJ\r\n0UPTvE+VsmoB5AnLsWCdET/GmIvKuhSGWT2LTZAyLMxT4BEWRNghn+lKwXb9\r\nfh4r4IurWHWp50/CETwEc+TrzelRmrUFTtgA8G/K8C31GvMQWBkZ8FRgpCpv\r\nNryMvbN48yZr/X8kzCfusd3sa+1oGqQ4GCI494yCHQltK4blQ8gNVFQEuGJx\r\nHJYZCwgBApfKJOehyCajacHGrYCdFgsNAsFUVArDNdaZUCiEBMDTdhSWkqpv\r\nrjikqxKevlFXeUfXbs3fh5bjknprgc2jRKk/Ji0LlxD+4awVr94U77PqJtYk\r\nGQ5jQN0aoGPlJi1WWXjzWbKadBs/SzLSfz4Kep2cabdaAWUCQWMPX6J6Ihjj\r\nlHfSc87jbJUdCGjBU3hNM7auOhq4pTxfoEhMO3VjslHeS2GE2289qI3amRAw\r\nSj6ZE1CPIrigjoiZKtkJQNB0M+V7oU4hF+onm/TDLsuXYradLsZTs0HmyJfe\r\nmlOfYNhhqpKft7T3raQquyJbs/9TFjw0z+GLYNZ/L/pi6mYFbU8y4CheOQX0\r\n4yJFmUjUk+z3WReg2ei52KfWxPN8tTe4n1E=\r\n=yGQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/tokens":"15.0.0-canary.af490a848.0","@material/density":"15.0.0-canary.af490a848.0","@material/checkbox":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/focus-ring":"15.0.0-canary.af490a848.0","@material/typography":"15.0.0-canary.af490a848.0","@material/touch-target":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.af490a848.0_1672761569837_0.9003738680534441","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/chips","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8558e8a7c28f4150dca5a28c6cd20d3bf390427","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7cf487c98.0.tgz","fileCount":163,"integrity":"sha512-yVRGGOlY2zOQ9ejutW579N7bmWOQTAQH+5uJYXdQauUzJzPQaP85v73VJie+BOy4gZphsZlovWSD3bNbwDOiKg==","signatures":[{"sig":"MEYCIQDRlk8msIejAm/helHrAXzYXikzeVG+HF/79cnn4+wQSAIhAOsbQ8GU5gP3ZhkQehef+RZuBLgA91mHoCkCJY7dp+a/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGiIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgaQ//Wk+TSwUA1qhiJSEnZsZV5oJM6k/lcbRtOoYoWL7TA1msBA2M\r\nwhDbxjoHXgytzTxXmDUfIvpBv2GYmRJ7QF77objWVOZkY9H35WxkrtDNZ/7g\r\n0lHd2RZ4Wuat6JD9qs7a6+WHfRmtg59oYFxqdV0/0EmOVj5zvcmd+OHfKsHK\r\njbwtQ+3gzcp5bmWo8YRqUkX8E2GrAN5Gvrwi/0glwLD8pb4LoYjFfDMmnLJq\r\nUdgy/r2mu8bbkT5dbBm/2ANCm3KdUq9AIuiiJs2E8JlOFONRXd52+ALipLZq\r\nJ2jnBUQT0Rx1SNXB2U4RyYqmlbilhgXqgHVeTU+exuFqK5I+vLOoGl62TWcT\r\nHLecfU7scanWDMV71WlyHwMu43Kx138XXAERTj7zG9/N9FDvnKoSCOP4cvmP\r\nwIUusV0OKKdnTEpgjGz625lFh84M6NeEzDm3QMZGEgRxi2cT1vyjp2PEb1wl\r\nqzNMK7vEsi+cu7HJPeF+vggoh0Qh8U2wyRgm61Fak0/cc3h4xsjhPWJB0dvu\r\nhyGFTsu51WlZ4bKa3MT63ErpHzODXpi2u75AOs3tyRcbNDj95pDwABc+jxXn\r\nYQE0cKN9tLQY80v1woEJqu2WC1TVVwBAFZv7+MJ3EmTC6F2OJjMvCBNVH46U\r\nhf8+OqeIpcnkvrKLoIE/losAW6hWSXBl4QQ=\r\n=X/3x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/tokens":"15.0.0-canary.7cf487c98.0","@material/density":"15.0.0-canary.7cf487c98.0","@material/checkbox":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/focus-ring":"15.0.0-canary.7cf487c98.0","@material/typography":"15.0.0-canary.7cf487c98.0","@material/touch-target":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7cf487c98.0_1672767623828_0.9542353163547701","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/chips","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"877aab497bb0c3d673b2eab735ff64d5c1dbb4ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a52be2d5e.0.tgz","fileCount":163,"integrity":"sha512-o28nOcRZtdxExKCHWYKL7jiSRG/53lTXpmz3Fu2ryA3FRiJrcGhXYN/vcFgU7a4TxOAnLWvvn+ACz8Em1lMKEg==","signatures":[{"sig":"MEYCIQCLZvPoBOOIycX4Q5tUWrC6qSS0Ae++UhhWojUBgacqxAIhAN71avJThdaDVpTrQ9kjJL3MxkkY2Hhpksn9XQgHqaeh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH6gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVNQ/+LuMMKn4lxWLps3cWoeQCTi+QNazsnU8pm94spIapoDvD+Hey\r\nljnNKWgfgk2iu1zck/+OeYC5K5P/Hys/hxbkICsrtKU7Wz6PR0VNQNpnOYay\r\nqoF0YU4d6SikmvyNhv9PQmgrLWKlXPoyFoT09IzpoDZN6dFMRJoU7+UwOylz\r\nIDYP2pbGroLPgXfqYwW5K69Zry3gYAEBLY4xq+7jT3pH/y6l0spL7bwoHir/\r\nhIVbeBQjcbu+I/IINTN70vz3/N4LZncd59LLxQtnUAE6qM642yvJdCh950GA\r\nHbr8MQMHyhLdGeysnM3jXI2wA2n5loLgcnkWiRKmPC4OwVXgfaY6UZBwBv7a\r\n0NwUE3MnrKNKPoEp8Z93htonS1dzMbB8RfaOgmyPQV9wvsQtoH0QUwQHQYw7\r\nvuQ0cYFATtvSrI9OsttV0pvzZZ6dVLeL1cmGFEfksegRLlZZb6XaAUtFf1si\r\nkhTQSsDSdYv5NR2FeQ1mdYZChmh1IDZjK4Zm8i1ug5ttWjLAikrPJfDkJDLJ\r\nqsYajqqsIKLEjrmT7+/fzHsyfBUYcaUMy9e7zDk2ru3Sc0MZXm1e606al6+o\r\n/dJZMvKAnbNBtYoNUJlf3qsm6Mx92gcEndZ3kUFvPGnFccycbS9Zxml7ygvt\r\nvXy9GLdD2quoq2CVV6eUuZTvjnDeGrAQMqA=\r\n=Vjgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/tokens":"15.0.0-canary.a52be2d5e.0","@material/density":"15.0.0-canary.a52be2d5e.0","@material/checkbox":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/focus-ring":"15.0.0-canary.a52be2d5e.0","@material/typography":"15.0.0-canary.a52be2d5e.0","@material/touch-target":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a52be2d5e.0_1672773280649_0.48225570199518386","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/chips","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3ae18e126e877381a976f3ca8fe666d0655004a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e38ba17c5.0.tgz","fileCount":163,"integrity":"sha512-WZT29YjqiiuspcqJ0ccjuH1fVZJsgS0OUjcN0671Et+/0qW2acGTWd6deNMm6dkS5Lo4l0yevAZA6qDyRWBMFQ==","signatures":[{"sig":"MEYCIQDX+BdT21tFqA+fFqKaozuO4pMv6XGSlxuoCJ3KR1RjnwIhAMki2gOSAp9ko24Nkgy/L6C/8A8+6xwKGMn2Q6HiRtvB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK1QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Ew/8DMFAq/1uavA+xxhSOmolBDnl0/6VPmJmNDboN1CvrQzfX75H\r\n0HxbY/ExueeaFi8VgYhb7/OKSjww+SKCzP5QZaPDXPvCGhqXeiX32YHwfSC0\r\n/huBQ8XkZ+13KtnIs0Xedl4odRgQ6A/GiNmoMuXvIWZzrdVUeNQ880Mdw2RJ\r\nPjfg2xotcRWhvkVkSNr0NqjIc8E6sly0Woj6DSohgRwDzFaybS9FnwWtUkLb\r\nVVaFzjdfq8GV3yMTT2avb1wb8roORrSNNobQ7ev53qraJ6y1bip5e0Mqu1X9\r\nUGbV5tg9sFBe0vGOSJDQW37qkhmskG0mSDkZbwAJsdm6oeVvop4kBzHVA6kR\r\nY0SF8gU9EZY/ot66R13/9ZZeokYOuyXPYill7O5bWb4xnVBPYSoh+2J1avtm\r\nJbrcg8MNRJdJRs2I45jtosCgpBn3ME/qjWQZ6jghodIIgJ5c/nBfF4ibDvxn\r\nDuzOlWmnfI7olPn2lTxzPKEJlGrLKXaQhRq4nXrr1z6UqTAIMk4w3JyKIwDA\r\nOs/J1SQrMyTnaNZf009R5Mjyr5apPdmTymumzvviyOXusk6bRXHrYpSOgidH\r\ncUjUkjip0I0CNEeYqGkOooxlP9hI6rgdJQ6Vm2p7Kwgxoc+8jr15kt16nq0d\r\nyYvdT7K8owEUflcERNtd1mgeoEXq41VvPCA=\r\n=xNNP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/tokens":"15.0.0-canary.e38ba17c5.0","@material/density":"15.0.0-canary.e38ba17c5.0","@material/checkbox":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/focus-ring":"15.0.0-canary.e38ba17c5.0","@material/typography":"15.0.0-canary.e38ba17c5.0","@material/touch-target":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e38ba17c5.0_1672785232521_0.21050238464126858","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/chips","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73dba1759ed625bb09027471d4dee5916017212d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.49041a6c3.0.tgz","fileCount":163,"integrity":"sha512-oOM+6e8KMkY7yhKRGpEgvNNNI5u5mQfh9QzMa05L9Yp20awt3Sg9xAO2VBoCC4eBOocOrlBpDDaz5/h7toIU9g==","signatures":[{"sig":"MEUCIAjakgmagjeCkKaB0aMCBpbfGaDcQoLeOh9NP6w/hxFsAiEAx+gF7WvkkYbrG4BgzhB4GmHcRGzxM5kZvk+9aaJjrWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZj4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF7A//ZdCfvKahrWaaUSYoENE8wjPjN8vGX/FoBEOmexIkjYAJZR69\r\nkP4B83ozGVVOl5HI43pRGpf0WrY3fyM88tEGvvYBU9kOvpfPzmqJVMLlVpUv\r\nH4Lhxqm0RCAGMAesKfb25z1PGY3XBAFtXZAqyJCJIUiRY3isCYKaFT0/RV0a\r\n7fZarx9WTpkCHUqsVXQ5H74xn/Q8TqAboELmaLJLXkOCP6Hr5CP8W5dtuk89\r\nVojST7/ixW9wJ6iDJFkD8avzSYe2V1Sl9b7NDzO7clkfc2GVJXybt0hshE4M\r\nVm33lgtRv/kcvepNfKYI7G24Y1qEL0+3cmezTgx1miOyiuLntL03xVqXG3if\r\nOWPsmtYbv4WklX7NyNtYYrkZ0iulqSCa3AGVv+RG9U8unYsn81bhC54fcni+\r\nQDaJsiGXXZvZ+Pjau7KNMXraa4jPy170QgTLrwvLxMiM3HUJQKA0AMSvL7be\r\nhlqe9zuH8TxrLrbrl5Da0Phcxo8dGexOvJbrXfhS7rcATx/X3nZmV1fl9dNA\r\nh/NWOnzyovIwcFu46uZd08F5W6mWQVTxgotxqfTZy2hB6eikxhPFFNcrNdUl\r\ncVGfdqGjfwaqjyTh//4HytoZe5+BGkPy55iqWMeynH9vTFSxkIeRU2i0N5eD\r\noJRRtTUmr8YGMBzYcLHygPgUUJ89ysPtb3I=\r\n=MmhN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/tokens":"15.0.0-canary.49041a6c3.0","@material/density":"15.0.0-canary.49041a6c3.0","@material/checkbox":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/focus-ring":"15.0.0-canary.49041a6c3.0","@material/typography":"15.0.0-canary.49041a6c3.0","@material/touch-target":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.49041a6c3.0_1672845560000_0.4279887051619289","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/chips","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c492898c2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56fcb2c3840eb9503ee4513dff7388793092d616","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c492898c2.0.tgz","fileCount":163,"integrity":"sha512-sOSPUnLU6qttv3MZpyQ+T05kuR6aKX86qsRNb6cz88sUB9jVRr4Jdn87Zgx2qWn08FgEn1SCA8CNeBPfpshHPA==","signatures":[{"sig":"MEUCIEcdpYeLbFgVdarEqDcFOGAvZuo4tMpFeTEVhXhxJcjOAiEA1O6zNkHX641Q4BYmJ+T+TUpCUMiyP5fo+wvz8tE8Mvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbmmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoN4w//ZjI7on5ypil2FQ9Zdo43njfEsjBTGYnZ4GB1T7meajokXsli\r\n6Znyb2S+mgJ+/HwVy9w8wdomwZX9He34UEHA+sY9a2/LAwrzKtxSgpR4nfYD\r\nLHJ01mCajn+/6fKwWw71TRwWd9Hfh/9E58kyXRr6euCyKHk1FYNv8LYNCwuj\r\ney9B0ItQ8OsS06NkNMHsvVQYfFWKSJBAAHAJxxyd7ptWYu5toKAYASkNTNIg\r\nydsShW19yRyDOAu4jeKl8fgLayxph1gYjzhxB0hLz4s0ML8GjB6ogxs9Nhy0\r\n7FueTP07j33xEa4LFyTm8BpE19Y2eCsWCrKIMHDmD9nOE8hDzEspdoUMfeGs\r\nYhGJ9bKhcXhZvVS2Y33d/BbKIUl9PwuQvprjviHdy5OmbiT2+Anhy1+UqMfK\r\nCimRHSciyjA9oI1V3buykJjusuUSQF5CHh14ufn3BwW9eG1iI2TaPGmUSOuM\r\nhAQgZdUvy0t1Aq2m6VLI2nvgT2Zb5QH1zFZDjs0bNCcqW8B0/zZYlaYML2wV\r\nKcyi8FSiV1bNgJk2MSPJRk0JblMuYsgbdgfx/uVa7jSWrxgfVRYNXxShsHfc\r\n9kJcL9VlAJYmC0p2F19d/W2NUo6yZGfpKY92+0mR4i4YGyr2arcFDMb9gU8z\r\nOpxBOGzJTRY2mo76KdkEFtoctUjPQnpWpSc=\r\n=3on4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/tokens":"15.0.0-canary.c492898c2.0","@material/density":"15.0.0-canary.c492898c2.0","@material/checkbox":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/focus-ring":"15.0.0-canary.c492898c2.0","@material/typography":"15.0.0-canary.c492898c2.0","@material/touch-target":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c492898c2.0_1672853926549_0.6863511760925209","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/chips","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ba6c2fe4858767c4e5e68eecc417c5da26aca6b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d7a2277de.0.tgz","fileCount":163,"integrity":"sha512-/9ymhGXsdCNExmWL33YyHqaYYJMzBljP5dM0dYVLtJRH39RoG0wGnyO3Rh/QIeb+VmSwlL8UnvvTxWwcm7QE0g==","signatures":[{"sig":"MEUCIQDc9N60iJRGy2Yncw5mif8txHK4sr6oX5Y3Z/pN14cCBAIgQCJcSDKtHQ+/glsTlNHo8E0/W3+T1iINUaG6WKU2334=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfGNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryKA//RvdpgMzeMmxY8JJGxJFwuyfWHu4OibnP3ZpAsqqQaEpBURek\r\nNdwgJ12MCYwEiD51YPxAC55oVT7+mvaPri3Tub6ldymECE6EyhFDSHUyx2ku\r\nsAOOyfMyNe1RtZYi+uJ8HkchNK/8pltXglgp77qz4ZklxaFYuw1OybI2t7QC\r\nYiESJBEi/xgGJ+jtsr00DpbEfmj/sAtunDUqt3c+VBUeb4SCn56WCAnebQQ6\r\nBOuPEZbHYJZWuIk4YqUkxPe6kITniCXLVBG9dmywb9BH901Gm5jAUpmbfIG9\r\n3CPYp8okF1MIO+65ecwma7KKLG2SQ2He/5YX11859A2QSeDicHCJ07dbtVFM\r\nudNMktUqSfJ5oQsxRvGlFDpPndUUg+Uzy97GLH2LmqhdvRVvJFQJABytw+Xl\r\nPrrQkNrNpA3NTZ6mwpcblKVY5S+LKvVe9xUBsT/f4PiMsC+Of2UoIWdO/iRs\r\n3Db4wlLqjsnr0syBseQv5c7uDa0tgJVikTyBfY1sjVnevPqBLmixR5GXlLKL\r\nfkyoBs2dxMYK1C1pyvDDyDwBkdukoBgQZ5o5gfxK5cBOMWtsWKtegsTPhooN\r\no4NnHzNrMUlIefsheE+1iD4AEzotj3pJT1xahhwAbUyBaT90A+z0HTsyCcsx\r\naHdX1xQlaF/wL3BEu/sBuktBSpIn9WPmCsM=\r\n=cbdQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/tokens":"15.0.0-canary.d7a2277de.0","@material/density":"15.0.0-canary.d7a2277de.0","@material/checkbox":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/focus-ring":"15.0.0-canary.d7a2277de.0","@material/typography":"15.0.0-canary.d7a2277de.0","@material/touch-target":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d7a2277de.0_1672868236742_0.6727292830179394","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/chips","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62e83fef59b65651a94e94ed1f60511802988934","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":163,"integrity":"sha512-M7bfcCicB58k9nSvIlsR0FYM5ahhwh25IK1ybVKWBvtCDD4dyXVgeIc+e+u9E/i8e2KVzCMclwX1P6xocHJx7w==","signatures":[{"sig":"MEUCIC0JT50xuN8RBgGSVg1AgipPd5fML1VcE29RADzBFuq+AiEAtEgg7JbLkOPR+bX0/zOTjpvMReAUTQBJOPQPmwnYdq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiIVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIAA/+NR955mKEY7CzHZYiNrIRaAwQolZiWFqv7wSDtHuv1RZJGHgy\r\nKfZfBtfmCSPPuaADr21smfDvq2jHU7w86pZIcXWNcSuhlOdjrHe8GlO51EU9\r\noDbWlFqrO8+RReOCUr5Xp7u095tRfoAd/kou5rBxDO//qCa7UBG7YGAHorB4\r\n9Kyy4U9IsLZbxSUjreJ16/14jQvB9yyueLqe0opN4o6qGGlunK4En4vInMFj\r\nWPKxm0F66gdls3MbiV/70gR9V4Y6QLzzgT+uvLPU+Y064VYnMUw1s2Ku0aXr\r\nIL+STDi3Os6d/BaMR22Tir0WMxkdUQT2rTy5p0MbK0D8BNu3ps4qVKzCrjTZ\r\nZtkFl/E7lI5PVRcu5zaSeXiyyfVOsbjP/SDi3Rhj1BRCTXDoHqQ4LXeOA6wb\r\n9dAAyMxTx9dWVx46wCHdcxV3WZL//3DTH0tESkaLVYzsAFjNDeN0Qm412KEu\r\n3y5zanhrfHbtJiySHv7qGZjAGNH33ftIyNlHlEvgaGlTw2s/dbGxksd6EjiD\r\nZXndTRMzlH7zPrpCxR7xf7IW9lJgLHmpRNpDas20AR/esYPFkb9J6UGzIhE+\r\nI1Xk95lOI1A4mLG8m5jspLE6UKWpgU9l+XS1mfuHNM3VTaW/rw/tIo5/0DYy\r\n1qjTcAyJAwftnNkP576IPcRl55fYspW8TPk=\r\n=P07I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/tokens":"15.0.0-canary.fd95ca7ef.0","@material/density":"15.0.0-canary.fd95ca7ef.0","@material/checkbox":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/focus-ring":"15.0.0-canary.fd95ca7ef.0","@material/typography":"15.0.0-canary.fd95ca7ef.0","@material/touch-target":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.fd95ca7ef.0_1672880661492_0.6856860125575732","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/chips","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d0817b50aa05a8ae752728a3bf2cd4120a20c70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1eb44faf9.0.tgz","fileCount":163,"integrity":"sha512-7xmB5kRuM6PAY53htNlJZX13bB62GgQgDAAsVHQbruZJMLh5kj58aXcTKgCmfKfTHBL8dhd1JUrI/7VupL2fsQ==","signatures":[{"sig":"MEQCIBcOOUckehdco4CsXuziy9cO2Z2+oQp5hUMxIZOx+v5ZAiAVNKvf7fWAHrnkO1qoQ+sSmQYOfi/bZgRzUyHimjMaOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpQgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6ow//WNG6QX0Id1YVdW5XKt3S1D3nLe2I1C8X6+2gAFrFnkd9VSIo\r\nAh31NHdHKOvR4XuaMUzmzxo/QgIZiqj5lcqFgJ4df1V4A727DLLmkda8jUgA\r\nrCvG9gPbqaLp8cgA62+dp+mvuXLsQR7Yy8UW4m/kh0Gc9ECgZppjCg3SGvcx\r\nT6HkXk1jrXIs2sLLzbq5vNwAOk5jiOfdts8tB2LFbPLTHaBjxZCFk2dYfSnr\r\n3SgDz4S0pwoDYa6jzHOh7C+FxMc1SF7duK0VtB/BkaXrKs3J1eTFJU2+szSk\r\nma9OLKE79rdzVg+V7KprHDHjjR2CkWhA+oO8+//gOjnVe/n+yBx+ehe6wAKb\r\n5SFnRi6HdZBW9BrGz2w+r44O4G51hDl5tC5+rtgHry2bcTUvqDS+/NXlX/Yt\r\ndFkJsdQNMm3p3msdtAm5BFEYMVzTgMS19Iy5JxpUmF+avQonsdJ+zy6g3DH3\r\nVqXCiFRyW0IXboAYpjqtUzjtH6QgAYRAw9XTWKIYS9XVBqkejQ0jTk3RSD8g\r\nLpx5Md8a6g0fX3x1PDO/svhiQp1qQiaTW11SmpZDI8cYVYBaaKXzqZ2tXL/v\r\nDhpSJ5AaWPYzqEKFhUes4sBGf0tCV7XkxZI8rRIlr1mjWvUKMEovQJgH8DvW\r\nZXUfRiYuNryDUvjdVD621Nr2ywRqfV33wjM=\r\n=MNAc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/tokens":"15.0.0-canary.1eb44faf9.0","@material/density":"15.0.0-canary.1eb44faf9.0","@material/checkbox":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/focus-ring":"15.0.0-canary.1eb44faf9.0","@material/typography":"15.0.0-canary.1eb44faf9.0","@material/touch-target":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1eb44faf9.0_1672909855933_0.09984582703879274","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/chips","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"326bd5a3ed67546f43bddb6145ded017cb416fa1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.adcdb7db9.0.tgz","fileCount":163,"integrity":"sha512-+XQExgTqVXB/yShRFVljmibAFnl1uZk9WmjxxqBziDtMS1Nx5y7WVxK8UtgbJr1iUT0HQ9IAm5unjMdqxwipuw==","signatures":[{"sig":"MEUCIFXX/y9qTDR62andSf84J1wkXVKLXpEG6GiOxl/71X9BAiEA0Olah71T4PJQkIAkbX0mZECbf2wnN8eDZ85uFJLk+pc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvlzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFvhAAkOZV/w989DsfnCnrVtywYaU0Liimx8tSypnC05zubQ2o5uUh\r\nN+QETffvPWs06Ub32+Rdj9rNrDnw8zXNjEZOjq6rALJbrwVaIIBYr6l0+72C\r\nu50d6RERNbwyrj2521ieCo/NvP9T0Baom94L+rbip0x2v7iEREK0UmFKlVBE\r\nQn5+KC1j45/9fZK35H44ZwkPiWFc8MJX3T8fkCZIxCbDPWWEudShMAoY/KTj\r\n18jQJycAMl8DCUCynbXMqOmnseCjuNqPV9pVRCgzWc7roRcV+OJnHFYV2t9L\r\nqOmEY5dav3tmzd+BYPq3kQLSLUNlVo8ZP5lXo7FlA7Dzey2SES4cGPoup+9T\r\n49oX3d46ZbNM4F6+UEg5La13//byX89pZqO6MDatPrhaa7vsZNoFfcCoPImu\r\npPTcukcrQJDCakindBxbt/MW5YFZON0cod8d9MfjNutigANypQCNf5fc9VWX\r\nvNC0pPfnpcUIQQOxippZ4Ioks4OCkqfUUiB+lH0tleIHbDb1jpKhAuacrN4V\r\nKM/yfAG76JOg8aiL3XTPdJTEdm9no1Nn4uj+YDjFt1cDENbIfuFJjd5pnOeb\r\nSwjgsVz9popLDmQW7EdHcioyWwMvJspdUPa5WsMTU8CLKsO02OhV28f5NloE\r\nWRO0aYbpCttxRwk/g71IQcMxMoUDa40aXGY=\r\n=rXzt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/tokens":"15.0.0-canary.adcdb7db9.0","@material/density":"15.0.0-canary.adcdb7db9.0","@material/checkbox":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/focus-ring":"15.0.0-canary.adcdb7db9.0","@material/typography":"15.0.0-canary.adcdb7db9.0","@material/touch-target":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.adcdb7db9.0_1672935794623_0.12749960110218272","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/chips","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.067af7eff.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c23dd70438e731936572549707a53504f69b6a6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.067af7eff.0.tgz","fileCount":163,"integrity":"sha512-RmZ/jXNa3wfkxb9DErjRrkj3DeXe4vcibZ2CHfGZ4YsyIqxtdDNPtI67DyLsuaiv2IiIot5DYySSRQozBSxMVg==","signatures":[{"sig":"MEYCIQCOaqIXWTMwJvt3DvQbERb0IkZd7ReqBTbbUCWI4H62lQIhANYAQVBjP2NzzwFuLWBWjNwE7Ytuj6w8hxuOM9caCmrp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKwMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP5A/7B7709D6aDccSWSDkK0VZYtF8HcQcHKocxrNq3Tw5vOwAq1Dg\r\nURaDlyIqsJ2SfKBdURFXCmaLTLETuOUCqQnhcVmrVzulTCMsUhYY4PomIlUR\r\nXI4v6YsJvJdTzLsfJFykerjunq7Ex3DFfvu7dgFrt7zstrP3Jexs/RkPr1PO\r\nLRcLlNFzO6w33AYbH5FGpPVixVKZ7ElJbEsGqA5IAN9fP9OHWA0Wgii3IxjW\r\nkyWJaKKUnNG3JdZhnCYks+1KJn74LN9frn7c5jFl6KOY8cIix6TwOGfcwSwt\r\nSSM0wdmd7YMcEjBLeb2/4wL8OBc/9c6cfJ15Va7KXjUvujmun8CHMmL84AS8\r\n7PVKS8eiwDp/WZOq5HQIZjpWSDq7U2yYhy97LuWZ3xI7GcGJRd1NB0zHRA3A\r\nW+iBg0iXXubS1fz2+rgN1K8cMFH+OMaqvmofqJgBUyhGCLWBEql3r/RGhexg\r\nBU5e+eUD4hegEOKYXx9A2u0aOoxMUNNI061QlcQYmqFXV4IOMjVlBYgIS2vT\r\nIsap+lDlFUoMtwM6h2dDbD5RglIU/z6QUOmyEXt9/sAkmABGo/B43CsgXpW1\r\nT+jXLS/Hr7hQHdg9PN0ZGxs7eN6q4G2AyaO2fNEIKQe+wW0NhvCTpf2hGA95\r\nJrGxUkZtCuJhxnHLHnl0Dr5b3k00iwG0Kpg=\r\n=CBj+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/tokens":"15.0.0-canary.067af7eff.0","@material/density":"15.0.0-canary.067af7eff.0","@material/checkbox":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/focus-ring":"15.0.0-canary.067af7eff.0","@material/typography":"15.0.0-canary.067af7eff.0","@material/touch-target":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.067af7eff.0_1673047052572_0.836040043741888","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/chips","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6357633ef066ca8e6ce54f203a8a6656d415f1a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.21d1196a7.0.tgz","fileCount":163,"integrity":"sha512-udx2nKhIXdZQOgto5mDPUdsOebckzFyye9Y7J7I8SdDmM330fOdQeepDeK37ITr4nuk0beiPfhi8RCYurpg+sQ==","signatures":[{"sig":"MEUCIQDoLmm39iDSFfwC6GeSSBIQKYAAdgKHQRzQpLJTc4eOCwIgPQoXu1CN90htFBe4lJOWT23fZJJkQs5RMW8iHYQhZPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju/AWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm/A//a0reNwXL/qvP6/9VWLw89UREDKtDTLGOh1wyBdjD/Cgs8IFk\r\nRuLZBjvVT2ynedTI/euJ7Vx28XUGHj7xkIkc6jdWZjoNGwdeATFG/rWTDQp5\r\nXtu1XE61WJEMQHjxody0FrlSERTLNBN+FEJmxUTX/fC8gZWqIfJ7JU5plCJY\r\nPqYyxU7kcKMz9raCiFZYCM9u7vYZonw/vSG0QPB+ovMRVhEK6fRXDwGnzuFs\r\nlB97Ktjy98zLqgj0ZzqylwRn9NwNE2eSLpEBmkWNjc6i6vWyT/om+9yGqN2k\r\nrTdv2YnqugISAhf56OstMsdBZxO3T6E85UuLtmfBnO0urMKIxjdavhVnsYJC\r\nu+xBi19EivTrPiOSP26EJlf1ofvGEXlZ1+icnpRcYiVNq2KwFVbtfrnJqAqN\r\nHIPJnEH9KMX9pxSJT3CC5Q2YDnjuOQ2+2J0aQE1WOQCNxf8SxszAM9k5tJoX\r\n9wPtvCNV37lFZty4Dv/hEvDh1kmWCX04uoiNMb9dG1OjWq+RKD8k+Vsw/rs9\r\nuJu68HjRn3K9eaPH/46oI/sGjD92fZN8VsQkArRTWmCdkD/AcRyFIq1EJbeA\r\n7COHDjjS33U+C5jWbzuIQqkhb78fSMMyKGo7tuhv4AaihIX43eSND402IF8n\r\ncm61eHNv7d7MTAuKX3CQyiXIvRtiPgLWWiQ=\r\n=M+tY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/tokens":"15.0.0-canary.21d1196a7.0","@material/density":"15.0.0-canary.21d1196a7.0","@material/checkbox":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/focus-ring":"15.0.0-canary.21d1196a7.0","@material/typography":"15.0.0-canary.21d1196a7.0","@material/touch-target":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.21d1196a7.0_1673261078143_0.9865239365882896","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/chips","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bffe7661c293d8d6a8364abbcb1e152e5c98b92f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":163,"integrity":"sha512-6JUU6ihYQbGlz5fpyNBAiHtAPuhGBuW06I4ZqRYS+9GGfy+r9g4q/hcU6EtS7zWlo1G4QDtqceIf5DX2Cf4JnQ==","signatures":[{"sig":"MEYCIQDUQeN7K55BDCUPdV/tn/YhRd9XVF4cGPBKdgwCPmO/jgIhANXwcB47bbSYQjjUXH8cTJyJovOARiqateaAIlwAs0Ub","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJRZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+ghAAihun37l067oCxpu9hEAWM/IpNZLLEHqqxPyvf8OajG9xNMTi\r\nzcoeVs9q5K3DaqCXqkeZcwQ5KDJMXMxrgPwmJZAlBOYT7h9oUWEyNGtN+lhA\r\nJvQnnxtVX1BR7GpWuF79F73VEyAXxmo2nsQ7bkOLDqsU2Zcpu3C9bx/Fv+8Q\r\nc1ndu4ciPI32G2sf9+xpGaiiqcyrv7m66+z90wSky7WL6O8NAzKymo/TtLYA\r\nz/h4iVvPsJckQFoOu2LauPq9jjT/l6/BFPPB5pSShhNcKP9Sy/TUQnFJp1E+\r\ngYP9SJ0+KJejmtesZT3AibmI+6dFrxTSO9jz0EdemO89YwL7wm8N+p6LaewM\r\nq7+rC7rL4HbnvnbQGEhMlI2mF7hD35fUJqHXvaDbi06pKKzuhBEmRKcYAQa2\r\nfj3wfn72h7rMmEN29BzLAc6rttaZTtjdtPHxI5wKBaUUXry8/OsKAkZwz2VM\r\nPMnB6st8hVbJByxaisDM6NqJMvFYhQD9QzKrYcNEMAhyNESsHK3G3I4hgxsz\r\nYnL8d0OFj0P+fnsN0sXRz+79q0AKMGgtQZ8y5kyRmgGlPlD5EjzhMY28o7ra\r\nQAJFiIaKg0sJURmvbca5WuBiP89rNs2Pr8XR8N/WHy6LhxwI85yDYh/hcho+\r\niTGovEZvy0+7KX6Y7A7TzTytCfguIPivj1o=\r\n=UZwL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/tokens":"15.0.0-canary.8d2d8d3c4.0","@material/density":"15.0.0-canary.8d2d8d3c4.0","@material/checkbox":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/focus-ring":"15.0.0-canary.8d2d8d3c4.0","@material/typography":"15.0.0-canary.8d2d8d3c4.0","@material/touch-target":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8d2d8d3c4.0_1673303129503_0.5879586970408028","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/chips","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55b5b49f79d382aa31ee2ff23f609222a95dd469","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":163,"integrity":"sha512-BaNbQkBoDPTDnPlE/jBlWO5drmZCpsJNd5lIBu3a7fOUL7QiZjLsoPOPLYZrvxXxMwJrYMlJjXnNWEJy0yq1gA==","signatures":[{"sig":"MEUCIQDTdqSI7xOIQdV0gdv4zQKwZx5s4YrrxAQ75E4jjtGmswIgCc2DFaBrIf9B6c8wrrDDRoiqXjLUj8gkAFKJuwr8jkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZJ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT3A/9H0UKUlfAm+0kX5Qp/uzBPp6Hp/GJr2EZlFgIqRVmUVRitOEM\r\nhSAY7CHnoB10df3rWQWFyKPA/oydJz1UJfiHa0v2Yvvcy21t4SxyO5q39snN\r\nFqS4bNSflws+5f+i7k1e8USjAUda0zwIjdIWCqBCLU003rWqy3L6dyCMq3R7\r\nq2kDftWITxZ03in1iuAp3vCHWa4ViXSmO0ZvaUpnYK/ADQebDbJlAk1EcgaM\r\nyYo2cq9iRhhQN5SO49EJ2bNLr5zYQ+OqDBHJuQNRSBvzqgKZSm8fuwrWW3OC\r\nciKykR8XEy8E1GeOMDH22clR3nTLQfivGF1sNI2uzlxoZWjNCv0FFgqDk3DZ\r\nJtcqeAAjXQBhfeof1+IgVUrM7gHdeeu5hgMRzQtOvkCdJL25Xz6R4EmKzTPJ\r\ndZAna7I3uRnh0BwXukhMHD5EhLC3nf0JPNvJnXOk0CRoBcebHqt4MyLXDSp4\r\n6Jo+O3ko30T81fmgcWVK+TqUDDZ9B5yOF1lhEOTLRjGuRc5eNymV9RAL57YC\r\nmR27qJHpycitczMtR5Nz8K3udDC2xoOM/rb9nm03+2IVQONhek+io10+5aU2\r\njeyIF8U/ZS2LYTXoArI6WK0RcgpPQ0eSvM8yDGyg6zTmcQeJcz5SlMmOSQ4E\r\nOoMe0h+uwx98Apm1dK+YGyl3Hxxj6ykKFAk=\r\n=mPVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/tokens":"15.0.0-canary.fc6ee6c32.0","@material/density":"15.0.0-canary.fc6ee6c32.0","@material/checkbox":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/focus-ring":"15.0.0-canary.fc6ee6c32.0","@material/typography":"15.0.0-canary.fc6ee6c32.0","@material/touch-target":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.fc6ee6c32.0_1673368183480_0.018737262269920896","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/chips","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60da30c9520f5e938fdcba5a1655465308ef4da8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.73537ab0f.0.tgz","fileCount":163,"integrity":"sha512-dzhCWiV1kkgAHmX1UePw0aMoKL5BZoe+DsBW9t+yGY/6iKxJMSC2zF6/gXA1chkbMNy+XMc1l1j0tRkhiz3urA==","signatures":[{"sig":"MEUCIQDG6BbXpqmMLrJTIEx72uMcF3h+UtGEM16oSiBo7rj3jAIgPVnoseZ/jY9sqBMWeS6TaCUZGyHeo1eFztlopd5fXTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaq3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQ4g//e5LnaOR6Od3GGD6In2i7xLdM0l65Z5F0SCRgVmceBSrY5dp9\r\n7NQQ1AWhgGcwgBrLHdbIGVUpiPR67Zwok0eJV8OfCZmTYQ0JosRj/TLfcYAo\r\nqq1JNZjf65miEOS0eExnWqFgi1Qa0X22olLeGbgNMG3FKMmuZb2STUAUKg8I\r\n/gW7v3I1oNSCmEV4OmjWTKvAsD56fpWs99US5uwtqkESZk9RX4xrPlA7qnn/\r\niuP5G9xAsFTmDemKYTcFlhltbOpi5MdYvGLEW1d9xKHHUJ7GwbQEpanz7RSJ\r\nxHz0HaFKCnID11qm8Xb7WiGCYSXRaT+Kw3el3CGIwPCMW3ckgjZf7BhWRL4v\r\njUwJ63i+Z/062z/zh7U70a/TkfQkarYDpEnTL+HiRUqZ1CD0wGo6ZceaZfFM\r\nDCQ04OpIoimhRuWP4d/iAho+4o27nx1hVsK/vTckflGC8UVUXy9ybF9aSCeg\r\nrEzmeh1ZQAP1eF8wltM5QcbqAmcsUlQBDWPJZ40GDvtiOvAqs4UmM7I2xpTp\r\nI/YNQfVvi+6aS4PoPzlGdEzIlLYglJflkrci69TEJ9L1UL/WsKuR5SEdQQgu\r\nYdHD2hw7s9zTe0qaGgenTUWShxZrqEzqzWGQGQ8f6MNcqpbU3P75oRL9oRpH\r\nxn+bVX5MqvYtzLEsEKJCpManyNvEPNuwYvE=\r\n=QOX9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/tokens":"15.0.0-canary.73537ab0f.0","@material/density":"15.0.0-canary.73537ab0f.0","@material/checkbox":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/focus-ring":"15.0.0-canary.73537ab0f.0","@material/typography":"15.0.0-canary.73537ab0f.0","@material/touch-target":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.73537ab0f.0_1673374391648_0.33025579326250787","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/chips","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.684e33d25.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81929e0c18ab58a8eb0682ead9d37352b8b583a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.684e33d25.0.tgz","fileCount":163,"integrity":"sha512-z4ajQ4NnsAQ/Si9tZ4xmxzjj2Qb+vW++4QjCjjjwAGIZbCe0xglAnMh2t66XLJUxt7RoKZuZVEO7ZqcFZpvJFQ==","signatures":[{"sig":"MEQCIGXGzzgTGAvE0yz2FmwuX2QwdBQgmseRXhX3mOaowcJXAiBOVGdmQu2LDZQzl4pqqXy86NN/IPUFyfsE1gof2/XGsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbpmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKPw/+IL+c7bA6VjwaRjxwRbXyhoakBlAXniKjNCmQFW1Xer5fpOvk\r\n6ira6+JJJUFxFnogz9LzhNg7PCuTImWCxb2F2wyYepwfyOiWFlSWY7jtt2ZD\r\nmjMRqUCVouU3C3ucX2Ujuq6ksh36HZ2KwpcgNGS5E7Frgzb4Y6QM2lHsDp5d\r\nXTKDIt1gx7uM6lKx3IxB23MsHiW53Idnkzte+8kPJLR6riiZuDj+eK+B/o/U\r\nJluAM/JFZhFZ+7tAhGPpLUl1wVl8J4D4kzoIENxj480R+rgunv+3+9yGZpAd\r\nKC5Ek5u5FLyI2dv2Uxg3bm+pvWRsgAYhmpt+T1pDIneiCNX0ZKVaXOiNz9rc\r\nH+Ro5fPSqcHoMRArw22BbpwRiXxPGBZ5iiuDm0NHI9mrxaMIRvO4d9CIHTsA\r\nJnXx2DUX6v7z5o5iC3gFkO15+67iGy5zmMmvmDIcQdCFrOsGECU9VUrvTWZk\r\nVdXPXabQFxDb0ZSCE3vTm7CeS4ZsfAD1U19xkX/GGGUjXnT6ZjOxeJSi+tJv\r\nNtf53e2rBbiSDJzV3coYBdX+PPVanlcsNrRfBByTQEV97/N9q/dlDW2ZH4uk\r\n5nNuEm7kiP/DUf9xE9tcryx5HNdGyzkGAyEnZEy4vyTxscabxVe2ngz9pmbv\r\nypdHbPMobJmBLzYVf5mJSnbGLCgI5mtdBeE=\r\n=QUvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/tokens":"15.0.0-canary.684e33d25.0","@material/density":"15.0.0-canary.684e33d25.0","@material/checkbox":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/focus-ring":"15.0.0-canary.684e33d25.0","@material/typography":"15.0.0-canary.684e33d25.0","@material/touch-target":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.684e33d25.0_1673378406172_0.2662591073073286","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/chips","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ca9836e3ac67dcc6308a1378ee3457e67873f81","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0e89aab6b.0.tgz","fileCount":163,"integrity":"sha512-FL4e01xQl9JBtc0Zr0iqqFuuIsHYdo2BX72ljqxQfZLferER/fHw7X12wT3pgrK9E4KQiZa/xHgUAdOdXlju2g==","signatures":[{"sig":"MEUCIQC/8C1ila+sKKe3XiIukeuZSxO9lOY4FlbAZ7UiRoy+HgIgJyXtwCDc0EdwUnPlolT1St/x6UCh5ENbbJJRVASQGLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuGLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr3A//XM4qDtnOr6n6puPW46MGdp5G7bCvKO6wnFrElwd3iv8IFJ0b\r\nUBP5MCg0GDcbsDvRecZC30NjK/9krZXNAFD4a93LyModj1Pgw6GxCQoePr5W\r\nI0gmlhcb642QKkxuFKxn7nygKiDqMqwZ+GNPcom1lGRV1uYX//LmK4dWhTZR\r\n5ltVC1Yxo5ZAiHDuKGAnHqTwLcYZeB+JeRPQiDfn4ajDNvf6iKTCHJyj+Pu+\r\nrgy39aDSckRfpi6lUren3bOsFNWZkvOhGP4JbtuWB8TRN8ixJa6Bmzw44mPZ\r\nPWKOo2OyUixwSTfoRMF4jGskWpSMzMNZqkqjs0YdaoIzk8q2YmSfZPRrWCuv\r\nBnMDo06h3IvHYSzjkdoyuuRVJssayHS9kNUa7QFheSgFYZ/myZBhn4v6xRsL\r\nGMKOfSSZ9HI6lqriur5A+bfUSB8vDbANM3Zaeqioha9IaISfcNL/CaxSHhzU\r\nVehUVuSB3WCyy1hVBvCwy8TGAHo9XIV7qCSmfW+Iqv2Phzcfef7MXwNqdXX4\r\nuJzUl40D3AaZph11pNoeux3ZQsFxgEkfi13UslARSrfNp9WbxULaZBiE2Spn\r\nXI728jNeRRAlyco13v3Q0tSqYu6f1rWW9HI75XHLIUH4NtJoAGm44rPWVCZY\r\nq8WclQnY0nMtJFjqorlawrC9I18sfnamhW4=\r\n=dV+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/tokens":"15.0.0-canary.0e89aab6b.0","@material/density":"15.0.0-canary.0e89aab6b.0","@material/checkbox":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/focus-ring":"15.0.0-canary.0e89aab6b.0","@material/typography":"15.0.0-canary.0e89aab6b.0","@material/touch-target":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0e89aab6b.0_1673453963137_0.8660269120273796","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/chips","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f7af77cb59835df2e94db2f6a25efe8ad89f0f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b0103d10a.0.tgz","fileCount":163,"integrity":"sha512-WFqsJgAuahM2pO9MD1ttjfldodc1cx+1CKHcN7U/U6xZt5UqAcQTGas0JCHfD7xJg3h5pQ8bPPY6VwcwubPTqg==","signatures":[{"sig":"MEUCIQDmcDv+3r+zyUrcL1bImhJSN8Or0sh9o1DQX7wPZ3GxyAIgMIGlqcac/3RwQbjl4U0aeOWbuW9MFS2icuBzKO918BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwpuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLBg/+JcifRD/tivYPhipzUM4YHeWjvm28Ie7wPk0D6KzpR8JzTxVl\r\n0CTZUJgcnyw0DrwDH8GvU/S9K4CYKvq246tthk2pCj/6VLg1WkF8dzr9JXTU\r\nC97r/YtTe6Ezmbv+zmosbn6DwhePADk7AKpgh2I0u0gFRNt9FG52kY2BbQFm\r\nqGph9JXr7r6nZTgKjLbzq+x5pWpyz1zfYJLrXSmwYMnn3qSihXdU1GX4liqM\r\nyHe2vAFtkNaU+vj333kmMcHLe1QHlzAP2Fypnoj8JqVXP7hZmPg68pFLkzIo\r\nJlE72zszODAI9pjfNfsYBRbEYpYd8dUWDsIZfRxqfDc0m+LIArdlMR1wt4q0\r\nMQM6NQfArufxQTg/ffKFVtZTd0gXolRbXltrBHfgmr82wpYxCSCg+/+ivA6p\r\n/+Q8MrUehwir3bjdeC2nNNurjryiUGaR4tkUvtpJCo0Yb59yLGCz5uZ7emIY\r\n7plX1G5nA/ySAaEVWQy2rA6b5BmBLn9D5Vg4DCzWiOmHgTp9XOc0N684sWN/\r\nCBjY/YOs3jLDOb9OiZVv8vqgDGlj2ijXAWUasN6kW7vHlyCp/DG9VVkj5onk\r\n9dVQa1kMkM7q9Gwy2AWWWSFZrdsHXl/i0sNmhnqcf8RG3ZzZ4RIt2N0ve6Pa\r\nwBkbz8zTwnn0ewBl59t20xDZSGUFfwmfH1w=\r\n=Ic/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/tokens":"15.0.0-canary.b0103d10a.0","@material/density":"15.0.0-canary.b0103d10a.0","@material/checkbox":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/focus-ring":"15.0.0-canary.b0103d10a.0","@material/typography":"15.0.0-canary.b0103d10a.0","@material/touch-target":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b0103d10a.0_1673464430184_0.7332788972530051","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/chips","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b62da4b25b74d340d214c1d819d82a44001ec2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.50e7a5312.0.tgz","fileCount":163,"integrity":"sha512-uwnyI8J5aa7xb8toYnOUloYIH/JqZJOmkoShl/7HfUK1M4Sp5QtZOmF7CATEOQqNMOhLvEQDYxPxhMkCKamtkQ==","signatures":[{"sig":"MEUCIDEpJYWU4oODi7lvIxRJ9VsfGm4OPfjdcLwDv9sWyoRTAiEAkzxri7TlcP13Xl1DbkdXApWmreuNHQNFo0twDu75jQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyJSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoJw//dF8l49t13XcE+VD3jWesNHw7LQIQwZUeJ5QRJt8nIiJJQTWP\r\naOwaFDJoQSdschzac6rrZXFTpnjGUytFC8d0ziDKQthPIM/ck6KGOVhi67nR\r\nWEMPW38rerCZZHsUju1XihKqhWvZ3V1xBHi8315AORYIvrvQH0LsfnKoyzW4\r\nZ0dBBWqt6y655sDYpPIGnk1u1qilTNg4Ak7kiFHZ5t2Gb4uLEeXmgKPou9Y6\r\nnldzTwaiOGTOxO3+Lq2nW61gGalaLCWf+ItkI58LfzHHn23cdUwfgvB5FYic\r\nywY9bUpieXINc2T+bYRgXUDpb8JZOBuKnMPyftad4m8N/QfQ9sStPb60kFAA\r\nNpEKyTM2znX33InwvfsUvw8brbx9XODaqsLTQ/e2azDe7C5OuinwGp12Enib\r\nmbPrBkkUlTswNHaQpSJ+1YPydCF/n2c72+kZYrOEJJLAyQVgwQ5W/Fw4ZodL\r\nBoB2CbbcVv8HhogtH20a37ksMAJQhJgy8bXmp7MjVrZmcGWlqcxqrPg2bQJn\r\nH7e7B35UNFkrPo+8pWCKXcPmFRYrOdYU+CXx5qOb+xUPqdq53G2nCfJ9D8sO\r\nB3LqokBzZxlC0P1XXOG3fSwfNrsPcQUelfnpC4jZpVpAQKqoGOoatxDzIwA3\r\nVDTBljEwDEqPjXCyoQnP3tcpywI2t6P9J00=\r\n=p0VW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/tokens":"15.0.0-canary.50e7a5312.0","@material/density":"15.0.0-canary.50e7a5312.0","@material/checkbox":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/focus-ring":"15.0.0-canary.50e7a5312.0","@material/typography":"15.0.0-canary.50e7a5312.0","@material/touch-target":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.50e7a5312.0_1673470546165_0.8506171292980016","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/chips","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.202823f54.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cd0ba61153d28ea4a6e1786568e253b2068eebc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.202823f54.0.tgz","fileCount":163,"integrity":"sha512-GFr9RVfTOKHSPyAAY/peo+jiHAe2fCmEQbpVvn9EILyzQkqFcakHa5NIAz3aZWkLT1BSRBJObEGvFFEhMmZalw==","signatures":[{"sig":"MEUCICjCnhE/h08gX8nu2CDsoSNgNew+TVKeek6G4V5grBsrAiEA39OimI5mWMbJ4rV4dgYaV2QBEY4x33ZcIz22j2ivPdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvywMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg+Q/9E5JZM1bkhqrXUKm5yZkax3TsskTRP/uNZQxKXdztTqY8yA5g\r\nrLJMWQrtJYZtmRx0qwREPsFvWC+sMA50yOaB4qdrhuN1SY6//nHKCMZ+kg2i\r\nTN2v71fBDGWMdRMfMwMMG0sCTXJSD1tCApEVhHOG1htFM0Cj85sqvg/rZAp7\r\nSxft3PoQyOKFysN6wVwX0HTEVLtqPqqWIvOHuuMGACdSWTunrOIQNx4e3D5j\r\nHDppZ9KLX7fM4GeN7BYqyj4bhy4jk3KV77WLDGv5kfG6ix5UaDqAMHf8l6aF\r\nNPA/S02nimht6ZQbZ5WSShZExSs4ERp2bOYuh5fRDDihiuNGbM9ITEUGD55j\r\nX1Jt3SCuYAmsEfpujTc46SGjwx5Gs+I/1ha/Tagdc5Vw3ZDFY1atIWB0NAkI\r\nSyZHPpT2RXTQccThNSxXKpxUNNhn825kDdIpwCzoJWFGKtRjV4M41NzFSQMe\r\nEgYFeypZo1tNJ7eUWifc9OGf84P1dcbYzJKQwNUoXjtbGBXUS3NP3LZk2LrK\r\nnFC2qaBUKCwjrgKtMvuEasUcMt6/QcNzhfiuDasRC6HcrhThCiwwEQw5HFpi\r\npRkK9xbRdM/B8nZmmJCO+adCtNNeIWHwlGu1G8GiH2zSruQr+2CTrkpHihNS\r\nFVYvlu6Nf/3Ij2t6R2+7j71/C8fSqGX2oUo=\r\n=ZC2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/tokens":"15.0.0-canary.202823f54.0","@material/density":"15.0.0-canary.202823f54.0","@material/checkbox":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/focus-ring":"15.0.0-canary.202823f54.0","@material/typography":"15.0.0-canary.202823f54.0","@material/touch-target":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.202823f54.0_1673473036610_0.7645573504450034","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/chips","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85288beae4480c620628abdafda5a03d1efcf5da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.199fe2a2a.0.tgz","fileCount":163,"integrity":"sha512-C9xWOk8WnT5HRpPH2P6zyEKY7RxQ1691e8ykrQvsBzekz0n5s9DsV5UjAHre3QIrL1RojFOSlvZE7Qg/QALasg==","signatures":[{"sig":"MEQCIEHyVVwfbQaMuBi4hoyCPweZwn+j84s04d2fNCxqWU1/AiAq7PIJirlIcUEHQxI2UvMh7eKwdE1fS1O+C1Ie/eANSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzDEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+HRAAi7nBZi2QRcu2gEbXFE3iNKVRz6kjI7UfPE64Qbv/VdVovchO\r\nwo+f68cQdW5XxbKRMZ25bhH8axonTJRUZ0iLnjItahRrKYTkMgM5cQwHeSPF\r\nyQsKnm9tQOyFbCtLwCBOmFqAj72xqVFxA+F9J2qrNbk7lNNqotYuVWYuRpbz\r\nEE8DuTplqeN3BstYFJMjw2awgtc8Sal7L+Ft7CQWB89obWTv0fuOk8a7eiWF\r\nGRQrAjt0SkwFS76wY8kqNYGLitDspf7czGrIWj5H5xU6Edd9EWbQpj4te5sp\r\ntYZgs3NmwLm40tdBTZ7b8U1NbzFN6SNMblHOiQINRv8dEXFkEYV/6xKVMGrn\r\nJfvC+njnZVkYKZUjYOIEKP7OE0WzlACY67N5Jw2c63ecy//z0Oij+qeq898w\r\nQJPOLEU3od0aSRo1HvtkodyrOxqQgWCASJEIcOfzBQFuyOsFjbYviEtodTlr\r\no06uB2/ZfG8UuuUtwML21iADcnDx8CicY3AzDQcmtHOQaRr6cjT5AS3xDZPU\r\nxcMQV6HmmpgPCfgkQDp/T71glwPmDtfuB3Rb2tKHE3JvJvYQBcudnSGeLFhS\r\nwK+AtEWE7Ve37P71HjJymvrcYyOo3JSi+8q3SaBsQo49z9bOTdMDkvJ05e0f\r\nd/gLUMalc9UognEkg7z6/i8n7U5ncFivYO0=\r\n=UUe4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/tokens":"15.0.0-canary.199fe2a2a.0","@material/density":"15.0.0-canary.199fe2a2a.0","@material/checkbox":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/focus-ring":"15.0.0-canary.199fe2a2a.0","@material/typography":"15.0.0-canary.199fe2a2a.0","@material/touch-target":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.199fe2a2a.0_1673474243784_0.2860418591326379","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/chips","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64a13e405b1ce74689c2683e64802ee46d8b4846","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8c0786d6f.0.tgz","fileCount":163,"integrity":"sha512-kIwjVANZwk3C6xH4RxdTyq9cE8LCXTcIK569ZvnIwghSLgdRJx3G7Ho0uwqkxNPUw365v5nRz5U39JHuLBSVzg==","signatures":[{"sig":"MEYCIQCghD07Rz3nrim27QjExjzi15tx1gXtzcE3Ake0Vs4XHwIhAIDT3BkehWFGi8CPU01V+39kmmzOSCYZC7lXwUTiNT/Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBtDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbqQ//aA1uiFOhsvmQpFUd3zzBknhMzTyQCIQKP3TXThy9UwmD/WNp\r\n/yjLm934mFsubBYvOIGKwar8D0qKKjLxg+uZ/B8Nx3C01975QV9SEmnU3xFv\r\nl6PEtExndTWtpK7M9JGNpdeLXMAXcT/ZalfwmBasxxxcwOaLjPKrE70MRWdc\r\nXieSDO1ya9lHAn/cVCT24NKSVJoPGEfz3e0zOdFOlKg9MhAhvcmRhs+UqmuP\r\nUuiGIS9w38hUPhgLsjZTzZcm7cARat9dkTNPxZrxmjpqFT3yM+fKXx6mQDbW\r\n/mHharK7SEC2Ubf2QbftcVLKobTmQbwG6CuDgWuZFlUFdUxK/ZGFOvFfMKDI\r\nFAsfc25/wedxhdIPQNsOYemhmoVDhW0do6R34ApbkxL/QD2elUGfSvwvuzrs\r\ncSVsBQVxu7eqfq2mcheIIAsn3fuvIOG5Qsqwaqix3rbXD+dx/eeAeCUZU56f\r\nYn0qDfv9nRrXI3RMFnKtRnadk8Q/nIqid80J0QdTkO4TJmcy3u90/i7+Huau\r\n4pS6DWZS3+8TuCKdMzz04WdHLtrcqTwwuSCl6Xwg7PpOkuejhemAq42uEjMF\r\nKUpZ2V8dNV3pYaj14kaaJADEsZOHCba/dhFBdTdRuij0bcP9w9UYq7sev4y8\r\nylrqDT51TSW4burpUPba7ZITIzEtaCcN5Hs=\r\n=OLTB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/tokens":"15.0.0-canary.8c0786d6f.0","@material/density":"15.0.0-canary.8c0786d6f.0","@material/checkbox":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/focus-ring":"15.0.0-canary.8c0786d6f.0","@material/typography":"15.0.0-canary.8c0786d6f.0","@material/touch-target":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8c0786d6f.0_1673534275266_0.48412876423788886","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/chips","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46bbb9d2c742479180427fa6e89e0bb979fd7d9d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":163,"integrity":"sha512-cQXOIe3Po2VdTYnh04Cy0OHLesf0KAbbSh51kApw6j0tlNUUFH8J+yV0tykOwRDndirY5zMyiwmGnnhtVZPRaQ==","signatures":[{"sig":"MEYCIQCokv7i+8WNyFPVyDVfTFWFT9LxkZnPxUzL90MGiyhCPgIhALC9Omqdn8Nkr3tzv/tPsx+50FncncZLj/aj20Y4W0P8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvZPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpadg//VI4O6YnxPsW/GdUONzkV9OvI7X+s8MuM/hFc8LW7VFIWNhiT\r\nVkD+VmUb7BmdnOfEsQRv+ycz+4u2d0JObsSokABGg7LKVheUwD+qf5Y75J22\r\nZHmuAtA/1lvRtrQqq7/oNufKfHH87wUbny4+PgG4ugjfax/liZ4LY6H9O9Hu\r\nwcMpgBMx1iFvQx3JLVA5dWzmXk8nx3MYzYQaMyoBxLe1p7SP3al1buzYdYMv\r\nQOXgjefdi4NFmJ1ewvDQUYBniyuQBNB3QHAzzL5nov7DKrbecL6tsfJWwgZr\r\n35+9oiSm+hg1OYJZtB5I5NyczIUiYTgtWpj9PbOrEImHunybEWhA9gHr2mGZ\r\niuNdo4ZXkClvvYAtM8JOMcLJWCrbM1xrU1rLruCVt67Xjvc//WAqV6q/h7TZ\r\nJ4nL/zTB/ddzZUxyirmTImijhqggqfRt8oWV1M73POry8N8QmTJeywv85txm\r\nx+72DK2IZXIb39k6zSdXQvhesaS7rgfVi7xG+TIxuQWwRwsC2zu0aKbDjakQ\r\njJdqWIyAKOKJ9ibwipzLZyBxDHfZ1/EatqV3G2/kqXQ9xG+x3CmbwlZLAJxT\r\nvm1R03WMSORENfXqmvcBpGTbYXyhsr1IKtmPNV83Vo/hcOp1oY7VQ6YXpqvY\r\nQw6pkW/LyutyFxKl5+yi8A05pGUhDz8yM+o=\r\n=gkXR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/tokens":"15.0.0-canary.8a74f7c6d.0","@material/density":"15.0.0-canary.8a74f7c6d.0","@material/checkbox":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/focus-ring":"15.0.0-canary.8a74f7c6d.0","@material/typography":"15.0.0-canary.8a74f7c6d.0","@material/touch-target":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8a74f7c6d.0_1673983567443_0.8607203860422066","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/chips","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48ef01bf724c96eea60b347b25c565d65cd6166","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b4687fdc1.0.tgz","fileCount":163,"integrity":"sha512-TOIUEBRiYBc7KEDoRf8gT3uayqENmGDvR0eWUHMETam7TzSpYW7zwaJdjVc/i1stEYjKE8E6/f13wjUMItg95g==","signatures":[{"sig":"MEYCIQC6kqtzytvxejTSnFYLC5E42ZaatYd44JBWFBetMWNjXQIhAJYpsptj2ij8NqhP9srFyqVX2cC+Sm9/2UBKsbRHdr9u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ8zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW5BAAicU0hPaX3kb4rZjhxH76hg5gsiWlPmq19EaZkcuCgmepqnta\r\nDOv92VURHrOvWTHqnrRTPPHnwOZCeHy2Lxja+jevgSPlaoYpIUP6IiqKOnI5\r\nf5JXqyvVDEaG6oPgaGaYKABm2Gjtk+qODv/onIU6Y194zBnggQrToVZz/gJb\r\nGOzaKWg464VYrjP1qNhkl9nkMfv38wwaR4tyGerbPdhfKAYCGWiD0zYWaKX+\r\nkODZeYrTpu+ONpsfqV2L7osH4+DIvkZEwbUG42bT8bFC7MuxH5L8HMGOCSkQ\r\ntaRAr6vgdN7IZCufk54Kt9i9GtI0xAi+b56itGeqGwH7XgierPazNsRZ2au7\r\nJfUz1x+ea2H+wKtXGTSA7EDc+4ouMvd7swi1vmoCD0qIcJnyxeEeKC7ky/UA\r\nczF0KZKU3zgwaDlLzehdK4HYwSafS/Xbuy5cY4b67rw29eGDeUxusigopIXl\r\n6nARGxMEeUGDAPIqGCbOM7q6BIgZL9sLgTFAWKPVeAizO9ukPyOvhBYQNNFp\r\nUWXISr8HUxSILVmf93ycyQNKyZ1D4oXXCBpErA/rJuIM2ZCZW4W5cgs97AvC\r\nJh53fLX+H1IDNTsw4egqw2QHpps7tDVkIoxBvA8Cgo1z603jLxCJVJczTHkK\r\nnOioNBH9UNBREcad5MUdqi9smG56x6aIFIY=\r\n=nVyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/tokens":"15.0.0-canary.b4687fdc1.0","@material/density":"15.0.0-canary.b4687fdc1.0","@material/checkbox":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/focus-ring":"15.0.0-canary.b4687fdc1.0","@material/typography":"15.0.0-canary.b4687fdc1.0","@material/touch-target":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b4687fdc1.0_1674157875166_0.9940742094972235","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/chips","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b836b9892.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49bad6ee5f87ec98850dd0a83603a7077138f123","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b836b9892.0.tgz","fileCount":163,"integrity":"sha512-//3zFGo3tVGWSI/29U51nSbkwGocNebtq9P7Pfic1J2nj1FgFRaC7gptI3iwExDfwOUep3ZbWkZT/Hv9IYaLpQ==","signatures":[{"sig":"MEUCIFHOVcVJoPtPN06xBC5pUkWEapmfXoKsFVG4Uc2w4NOzAiEAvkMOFEYi6XuE18nNK2xeAVIHFBAFH2WAthiVgzpDlXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F5rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNzw/8Ccs1VdhsQNbVkErna8S72RTUPPwvF+TMDl5j+oRV2nLBfGWx\r\n5ARPpE4p20NudiRp5SbDXlcJ5XZ6zb6M9BlSKRrSQ+3IJZyRXzSANVHNKdMf\r\ncCo/7RkDvIR3GxZH2ls5afFOB35FlH4gMlNbpWVYieE1uSIXs3rT9JD+1ImZ\r\nGRoKWdWwnhE963hUn8IxpTALpp0ONt9SqinZiYJZEMYq7zl+XPcL5behPWXP\r\nm1J80VUGBLTG9Q+bynP34X3fqxscf0phk/ySPNo+JDbKSlQw93+nfOvtC1zg\r\n3z8v9pcTLR2Q8sb9fnK3GB60QIq896FcVrIxIwZzjEKH8RuPJ/jIZHcRC/To\r\nZB6GmLdzz6H8PmWLY7AtC21gwvAhEB6hvuIpyyy/55NlGl94LkVF9o4dSyYm\r\nOVo8SfpIc8aZnsEM7GMVTFBnr7fVutGmTSj/RrE6XILxOP1wHF4+rNwlFlMw\r\nU632k+Nnha9ljTtnL8KyN2V7+e7GJWmaMgfMoYJIiUOoJwDveBMqBuQDXsE1\r\nNIZEJKoP3xuf7NgJJkChxHFoRd2ADP5GKKUI/fkpx4dYnLhKS7v20kPCYcz0\r\noFXdh6MK59H7rduJQRzVwt3qJRm0nHam1Y3Ft+vogaUofph4mZ6aGAZUUiti\r\ntgw31HID+/bQWWlPJa8ZMW3sL/m9BPTSL0w=\r\n=bnM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/tokens":"15.0.0-canary.b836b9892.0","@material/density":"15.0.0-canary.b836b9892.0","@material/checkbox":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/focus-ring":"15.0.0-canary.b836b9892.0","@material/typography":"15.0.0-canary.b836b9892.0","@material/touch-target":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b836b9892.0_1674600043608_0.6448574304532118","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/chips","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9330b9ad8799eed8bc682bd880f3d46e544360d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e8912fd37.0.tgz","fileCount":163,"integrity":"sha512-6z5BbHmIIMUtFtPjVTM8rKUmgLuqmpAEexLKwL9cxnDA7wsOQ5MuLOJFIFaA1afLHmTielYZSP7TBjE92Pk60A==","signatures":[{"sig":"MEYCIQCiLAYK3emXbq1BI302qioZstba5Xd6/ASSRXa4SKuAAgIhALkt6yosY0wpacTNhvOHz5zgsO5ieuie4Aq4sBkume7W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sb3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHeQ//VqdriKvHqXuneS2U6iqqweLfzvkM088PjgrnyAy4yQv8od/c\r\nEBSkeKt/+Bg3zSwYN7vDSFyZc2ZePKros8Asp+nO3vMBK8B+ZMsgZlLOz6Wj\r\nXt24H+Xf45ExHsgA8fpRqsPFN3lTGqNMA3AQiMWpTkZeVy6MQIVzjOB+IdQt\r\nntOcrh5CYqWOSf/oMi3+8i4pNkyot0r/TqtDLCP7Yd1/JGF8xiOM8b/0BVG9\r\nhN+8onykUT9zJI+qlSk52H+hZWi3KdlTi9VAumGCQkIFmXgWZvmH+LwC6Kw7\r\nFHToikNsMz3IUVMTHS+QgFuD3/F8y/oW3F+GDcjgTveIBAYQJsmH0w+zHZRN\r\nx3vPUEbCSuez3NQLAOd2ROvOCvpCM7HgKqsVg5riU1CGvHhWHjVcvJ1rkqUD\r\no92MfejgBFIWAmKBGVjEaZU8yDB1zkkVPCrPgaThbnuqAkTfgK5xTzUJQhGp\r\nDsvBAOIEWfsQJd+ZZAQUYc6lfg1WJBa4yotkugdYcABO4qD06uVvatQVyZ+O\r\nJRxssMWJ4AiIZqO2sBhYLpfW4+cf6yPd6qtZWUMVi+eZHyMUH9u/36yFcvQ6\r\nARbq3YIRfFxUSUXNnmt7Po/5IYcyQB8gp5X8fWzrq3CNCjEO0DJX5Bn/PyCu\r\nzLybqmsp8IG1EWXHWrs6l21O6dEXieHvWKc=\r\n=lmWi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/tokens":"15.0.0-canary.e8912fd37.0","@material/density":"15.0.0-canary.e8912fd37.0","@material/checkbox":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/focus-ring":"15.0.0-canary.e8912fd37.0","@material/typography":"15.0.0-canary.e8912fd37.0","@material/touch-target":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e8912fd37.0_1674757878811_0.9648475400622483","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/chips","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ce860cfb32e1d4b9b1b5d83aa2c5b916829a5f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.16fbd30ff.0.tgz","fileCount":163,"integrity":"sha512-SNJda2zRXHSpbpoxpTeeMgrNsxqEbgMP5o5J2nuBIFSBEh1d/L5mgCkOsnaK++btkfX1bpnwUFMWcqpTm9MuHg==","signatures":[{"sig":"MEUCIQDBMKZ+RR4Ktmnr3jzkkda7W0er+uRbof5CU40GI2BLgwIgRddC1XNSiaQRLysDx5/+g+4zULQ/8EM5cQ6GG4SN6No=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sgfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn0w/8DjxWmL3aPZUlPcf/KHr9RObUO0zf3KSq2f+LvhNyZ6j/CNNI\r\nuS+z1C3hG3KQN64XQbNH/q1ZzEVfT30acEsqg0MDN5IkQ13A5yCyh6R8QAyu\r\nW/QUZ8Iu3G9qfZ+AnJp05J/njYRUBGDnGTFSCd5+M/1Gh5mv6q8wWoSNzvy6\r\nwO28ZUnu71d3jx5f9fQE/m8O0J1bJT+9WUycgoPQgfdLBeolrIpNfYx8pRW/\r\nNL8XpDBLSZvmWYaWfAndevxE3lL/IkTKZBB5loWDdJ1bAP3Gb2je40nv0bqv\r\nW+Lzds3DRswQyfjTlGsWftxhxXhVJruWQoLCtlIC2hJjDSC69QiSh0yl3v3Y\r\nfZq9L+e7NL3THPek4JWY8bDkKrseiWjF9zS1zRb9+71Cd77UEpUMDhnVQupo\r\nvlGWSM2NOScr0+uonE4tUStkI2UeXpJfWsGGB6gdrR702mWgDsHZC0mhhvXS\r\nPo3uBqroxH6lPYTnXSIvHVHoxWEv05xyZhoBUb8QmrY8TpbKNxlvCM8/Cyg5\r\ng24N5EevL9lMcTSJcdmxW8ntusekxjgNHxsLTE5jB50BgJYx9BlCOitmGOpl\r\nLMKQINpXDrMVmuDEJhSGhMiqK0gimpjUenZPjIenfA8GC5YwA+EORhLE+OYZ\r\n7ghysMmyIOxwmCq7MlrSEiSbCkcThSx9EWE=\r\n=Lsg0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/tokens":"15.0.0-canary.16fbd30ff.0","@material/density":"15.0.0-canary.16fbd30ff.0","@material/checkbox":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/focus-ring":"15.0.0-canary.16fbd30ff.0","@material/typography":"15.0.0-canary.16fbd30ff.0","@material/touch-target":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.16fbd30ff.0_1674758175457_0.5637316491048525","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/chips","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.033ae083a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dce95a443e97410c15c4860a1e3eb90b57c3218","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.033ae083a.0.tgz","fileCount":163,"integrity":"sha512-nTZ0o+iVbj2Hi/ytXnv4/7Afs53pRW+VCpiPdXeLQGhK4DXU09KEUPNdyAEPyWgKruBSC1sd+flGf3bk8Gn17Q==","signatures":[{"sig":"MEYCIQCIvz2PztQeEychSobpFZBomzXmeluNnODVVxDP4YA+UAIhAO8Ow8emMFVErnkcoLjOIFZFIkA8vJWpFjlYRHOgsHuk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tRYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4TBAAhCrnBN0XlaEPQz9uMlmOU2G9o0iWy6BETHN0VRgAkOZWTuHt\r\naqyHQLups/dfWLMuBf/tCET+KgwaYLK/NiiuFUKDhwo/B/TNO5NoTcjvbcps\r\nSuWjd0FRTzgcudMLlhwBHgV0CK93dk3FuRNAKCt6rR0cuHHWokvwXTI8z4T7\r\nBKAANCirLPI/w01WRLf4dmP/3skOaXvmr5r9R/8c8u/cxmO+kyNKrI/14vgn\r\n/WRYfB8OkL9pakQvRsHddpOjVIHDW5LlyRRV6SNdiPPaMVkV0XFzLQC0IjvE\r\n1l2ggIkAAfwhQdqOSJLPbf6kUPRNGVmNVrh2n/VpyRt8/ie2bVAKz256To4H\r\n2Kk+wrMLXo982g7Y6gUvpXsiWsQ3gnFMDLjJrMsY0ZAS5YaAKrSMiElHdUTY\r\nq/wT0eJj0JPegiGSkFk6AlB3Iif/aX8/xnhKF0qoB8qef3BZ5pA/cDdfJKZj\r\nDplNX5GSJi+sj2TmiQU2+bEBtreEmGnQ7fCxxkuprRdRGM4/XjnnrPlQNS+j\r\np9YfwLGDKzN8cH23KtOEb7wF1X91z7Y2LPpFPv9lgUTalo0BJtw/wZ1rud0E\r\nwFMn05c1T30csfAl+9VZywrGLGt9jAkjtBYzTr+65nf93Lkbcb2yyJQ9wo5O\r\nQ+e78UrhnaXYFvzm+VoY9em6HDSXAOuCD9I=\r\n=oY1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/tokens":"15.0.0-canary.033ae083a.0","@material/density":"15.0.0-canary.033ae083a.0","@material/checkbox":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/focus-ring":"15.0.0-canary.033ae083a.0","@material/typography":"15.0.0-canary.033ae083a.0","@material/touch-target":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.033ae083a.0_1674761304344_0.1860223053635599","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/chips","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61cfd7fe438b5efdc7fa4f1d505215d14753ca32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.3a705fa1d.0.tgz","fileCount":163,"integrity":"sha512-dKLkGRTCb3gQR/kJ2uVoA2DZwGMCjQTrMvPr4Ze3P/BoVwLRA9zXAhkizgRorKlT0yB/IJInIKSx8FmZhDd7Vw==","signatures":[{"sig":"MEUCIC+eBHkJ/FaCv2aSLG5Q7Ehsy93bLXXybNuhDg2+cON/AiEA+JrlvtsNgp3G+JRZ8jtILMUm+KSD00LBeAFpQbwl8PM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FPtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphig//UcT9z88M+h7Uy4lOrwlF3JR5SqtoJaNApk7UEz1vlw62H2VR\r\n8VOkid+XN06rY2JEW3q3lTqMtrESBoHdi0z9u0PbfuSsFaOEWZ5o4eMwZgKN\r\nNlVqVuZ9dx83XyPha6T/GRJ6rpmyBDjIH4Ks9itZGxq9UCWyVcZ2rJwg+Lnx\r\n7oqgTwXzab9BZaHrVCUBKLGT+fyvWRgTZEII/bTKsxbIu7b1X2eXWCyj5B4c\r\nQ+kL3jTolzpCR9E7pG9QVVUsbMrKXamSZspkNmeI3KfKyDwu1OoBi58DSf9q\r\nsjmHkANLA0hvz/8kJZ5Btq9bDR5yOmakU7UndCOYjJ01YFQKf2Wa5uormjD7\r\nVAxUSKbrldqGVFuyqytLbQu2MzVTNMXMv597zezwGSHqcws74886KXdBEKVe\r\ntkrwKH4yo/Zzuaej9jcAoIOWrUEHeA/wMIsC2J/Q9q1PFZF0ehHnQ5pf9T7L\r\n3/WX5LgmCLkcmg40YIMxWya48TDpAsWt2IQQuLcj7Phq/QabWE01qaJJZi7C\r\nb+NWvV/hAGnSdMXDK6eFLiqFrPW2AldznUKVK8NPZnuix8hmhD1Avd1V3RHd\r\n9Jho7xYrC6ELjaAen0zzjuRDPs7w4QfYpOfCToVl72VbmKwtscjvDJ8x1quN\r\n+88gzgtfHLlBYngZ7pHckSL9MmpnIKRyNqk=\r\n=vZvt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/tokens":"15.0.0-canary.3a705fa1d.0","@material/density":"15.0.0-canary.3a705fa1d.0","@material/checkbox":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/focus-ring":"15.0.0-canary.3a705fa1d.0","@material/typography":"15.0.0-canary.3a705fa1d.0","@material/touch-target":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.3a705fa1d.0_1674859501133_0.47515059228713885","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/chips","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ad67a5f03533f9fa0034d7bb9aa05866a64b0b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":163,"integrity":"sha512-R6bHqcL/GT1QBjfJJCQpQJPPkppJ5qr2B/z1UTfbb/G/RdKkqwQbHYlQjY/PfjhHqzK5N7X4Nsqkma7CE4E82Q==","signatures":[{"sig":"MEUCIG8HcD0GNmyedCR0aUrGw+6zs7tIUCBhrM/viLtkd1kKAiEAz6Kk/xBWT/Pzp7bLLEpVGQUqYeLF5RlH08B8NzIsidE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TRZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo8A//RgnqDxu2anE2+p+944hmnOuFGJ5QN2TFzuNp3f9v7VLSh9cC\r\n2/SYzq/ip/ZvnLIW8bn65pg6N2Fg6KlqP7GAzdhuBuLtoytBglSh5scyZhmU\r\nwD3yukidwqGcQFrlty3QM5yrUOG3vTRL6RuUCnQ4O5wirWDR+/75NGV7aOm5\r\n+twDwIFUcn9nPRdIlmaiAjbNlH4kDJUf/9kfPTa6yB0JMx1ARl1FGrwqdIQs\r\nmaOBx1cfERtVR3l/J6OJQ1mr8mo9L6eQMAwZWLRnyqLMTxXEIA5nQDzmx65k\r\nv1R+tLezNf8/jrMcE2by07Wey1xT55PFCfwJjLzsDzV3vG4PQAEZJZrncG8N\r\nFRMPGXxXj9UTZaRz2lc7eEgUz95QGIm1jyHt0A4xcJFu15nATZUcnGq1weci\r\neUSoOf6bTDYKHi4P+NFpvFMGKHkhnBp3KPmjBdkeb1qpJ/29HkdsCWIdlgI3\r\nWBcCVvW2CRrl5rxOtA7rI5uOXe0e+3UiKAyGK2rKpFhTDmFvWzo9KXY0A13k\r\n8kvtbKRS7Rozf3sZNAjxcMlSghxBrOjbfrirWBoM5OsPpsQpsaa1qS0iebfy\r\nVFZxGrbAedvHlfXMeH6UM6xlqPnLZ4Dfr6uEboLgBXofAQ0oTLJs3G6xNd+C\r\nPTy7SYHgcGl5MwmMmihtVIdNvGvSl0W4Vsc=\r\n=SYpU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/tokens":"15.0.0-canary.d6bea2ff2.0","@material/density":"15.0.0-canary.d6bea2ff2.0","@material/checkbox":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/focus-ring":"15.0.0-canary.d6bea2ff2.0","@material/typography":"15.0.0-canary.d6bea2ff2.0","@material/touch-target":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d6bea2ff2.0_1675179096820_0.07094895376990795","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/chips","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bccf1780d330c4b8895565d16b469b797897265","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0c94182c8.0.tgz","fileCount":163,"integrity":"sha512-VXtgFEH5T197z+Lrc8Pp635O9w+uPesYiWEuylni3jTeH6WfmZ6CkFMqK+LVODUNogSqlYuodE8BiyK00kXltA==","signatures":[{"sig":"MEYCIQCEKxeR8RcOb92j4Hbv5Szrj/vGm1bwpEOeMsYlyluwjwIhAPpP3qafPvdfx91BzLxWyD8maTE2QLZivLKGrBiYSX1V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qVJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO+w//SC1aTs70sDk21drXGrJ08UkSdTWhq7ScdpDY7ev2kTVWxrzL\r\neYhEtdkcrX30I3xxooYPpBxI9szwkJgeXhTCBUTDySqnftByyqDA5zW4mdcL\r\nG7mD1Tm+ZHV0LGRWEo/mYAtdyyvi+QTB8fcPRj1akFM0SGySxZDjM3zZZyCe\r\nCR7ZIKQK4UOcBYA+p+sFz0lI17xqJu/2tPvGLNZU1KWGMVoph35Oj8tWxjKA\r\nTEDLBaK5P53ECWUezOce6fVc+rMkNUl1/XjQxKIBMfazoUN3JCmbc47XKIG0\r\nIFAcdXjXRAroVmS++M9D3JbZCEoTp1CTRmatW9AuH7yXwqLbtedVSsbV9NLZ\r\nBOv6/EY+BUbE6MmLrTlKpu5yYrMB+AAeOAdmjJn8Blq5tKOAmZOufKLeYWV/\r\nomA3yS8t5b6bHSbEg414r446x6h/K1y8a8LC6rGdEzeXyOW5Je8SwWGNfciI\r\nEPf93/zrG2dlLnZgJcT2xYySjsIahIIGPbK01AJesl9vSdlYEDvtsAdCNuvL\r\nIUp8S6y3ExyIUOFWtU/Pv5LugH2BTRRE7ACBHldgdAn3kqKJeKlsczl+Mhci\r\nU44e8Yd6be7oxUVZehnR9Fdc3Hw1T/AAH8kT9Dk7kqsAEySThtDNvvpqx5+s\r\n3l9cjsPTtlg/lAVYzJL2TG9a66WxPn/TF7s=\r\n=43wV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/tokens":"15.0.0-canary.0c94182c8.0","@material/density":"15.0.0-canary.0c94182c8.0","@material/checkbox":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/focus-ring":"15.0.0-canary.0c94182c8.0","@material/typography":"15.0.0-canary.0c94182c8.0","@material/touch-target":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0c94182c8.0_1675273544924_0.015050765211450212","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/chips","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.15b221540.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72179de8f91ba47608d5e41b5cd9038ac19bce3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.15b221540.0.tgz","fileCount":163,"integrity":"sha512-t8GhRaJMaSXzNT1LiZHsj+bcqC2ovwI3sggdPIMullQfE/oZB9mVcWZhsVFSzkGzhkKm/4JxAduOrJsVLJFPcQ==","signatures":[{"sig":"MEQCICmbt4Gj3aW8Yl6GBefwH0TAnfYmwvidQ8KVfSy+1vt2AiA4J8qVbLuGO1KRyreAnRr1DuCEhS5tqJrBmeBYbjA2AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qdAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkww/+LxFXHavWj23hnD9sptHiKgbU2xaG7XBvw8Nr3+pGSkBb7wT/\r\nMMuRLlWVOIQ1PigBVW1Wi2XddZFfiuBRgtjHwhkQniM37Rjib+2pGarl7xYr\r\nCL0OpO00298S1yMjdhsOkrH92NSZjJGLhjj2dYQO9QTEvaLXPxPgXC9tJ/gY\r\ni0wKuQrksbjEFgQiBH5e4DmQj/6d1ViM00nfboD1pbuH81yZ5xgBlwkHk/ec\r\n8pXOVZuT4qIwwrasXTTPKIqNoaNQEsYrJoafXxu2nS1EvGexzr52wMYcKsa7\r\nJCSMEZ7mc3HzKEccgu7MdF4ncmTyqfzk2S3hbUoHfUDORUoKKGltnocPeBmP\r\nlPcpjPOAxc5e59v9El58zTIKOGrfyDEHQmHldT6BxvPjbyzhjFwE+Yki0gJF\r\nx2+tKirA0l/wQx/4PJKiOTCfPncO8obDtJ1bIlSe0EzXRHxw8zr32NaxpMHj\r\nRb1abwublSdmpiUeEx+Lqn9tPGAhowKyrHsH0ynx/ls8o2X/GyJOc0S+cstI\r\nk7jvE3fKV22riCSAYLZ3DWneYNZQaf9bUj0KC+VrrNS1XFlv/JtjtLjs6fIn\r\naXuRbg2Hw/ZiwUvOjBqGhUMAMpbLCYQKwQcOQeRHzfhd/Cza2kAeYUcl8I7g\r\nPrzz4sD52ikI+bdOLUicat5h1HjyriEXaJI=\r\n=RvFq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/tokens":"15.0.0-canary.15b221540.0","@material/density":"15.0.0-canary.15b221540.0","@material/checkbox":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/focus-ring":"15.0.0-canary.15b221540.0","@material/typography":"15.0.0-canary.15b221540.0","@material/touch-target":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.15b221540.0_1675274047982_0.24497747685990556","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/chips","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"826e49dbdb3b1ec41b5839debd13d1d99c2acf84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6a4b3f834.0.tgz","fileCount":163,"integrity":"sha512-VtAd4yJlViSqA14KNBb1QzaQXQWY4zgAweUl8lblKWYe5XW8vQtCoIZCzYCGhOn1dxCyfBid+qkBddI75Wt7gQ==","signatures":[{"sig":"MEUCIQC+sOll6mXTnuQfmK+yjremI11PGgOH04c/UmLdxtV0JwIgFtyWfR3VN0/9Oe4GpIxFl3pRd4BMOvlXl0HQPjZ9J3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rawACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM+w//d7thvi4FJAwO6YUGYmcftElzR1rT1rssIBgJ1ztqI3RMszOy\r\nsRpnn/M22zYUwB6dG2Y22HV/pDRDMILjbCGPD2pPZERNiIpPf0oh68b6d9gR\r\nLWio22Pj2GHFFlNqd6yaTKVNFj+sU7IwZuP+ZhklD+Nzit691uDcGywSnN26\r\nwtb23Fm0WC/fwGO1X7gQ1yeKP0kPKut0Gw8JA1xQCoN6mSVziN5bzm2GOAVh\r\nI4Z07DRR0vkqNsM6zhtOcNtpwMLsAlRNTeFeHRXu2w9clZWNokCuoAklWyzp\r\n1YNmNny2yjNmP3gUw1K0JbHS4cm2MUiY2bRjN3GChFEs0Hnsg9+/xnhb8rkH\r\nxhloi8AR1a3AI/nkbIw0MRB9HyOS0Uj7yXekCAbF2iTO3vjpRZF1B5Ci8QS7\r\n6aj6nzxUGB3sKpcEHqL6pOqMDRCsQDl9vQ5dUXHDT3LSTQzhh5CCkF//9Lj5\r\n72oPOseFxkEoQlkgRSgaCTbsMoEyPn/Mg9jTbogChKe6+dShOjV416BpoYC2\r\nCaGABF9aFoECalkNCy5HqSlb43g1z8ikARKL1knnIbj5yzh5+JwiFMXWtNEb\r\ne2fNjFyCyuwwmDDqCelnXjIxq2IWNXtlJRxB7Oqa93MXr+ioWDfoCmXaNvS1\r\nKIyVKXn/e0bt2TSHIypdQmaQ/4T+xiaOzPc=\r\n=vPMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/tokens":"15.0.0-canary.6a4b3f834.0","@material/density":"15.0.0-canary.6a4b3f834.0","@material/checkbox":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/focus-ring":"15.0.0-canary.6a4b3f834.0","@material/typography":"15.0.0-canary.6a4b3f834.0","@material/touch-target":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6a4b3f834.0_1675277999757_0.22455687011463787","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/chips","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c4aa4069278f11cb85f5cc286ea2654404479da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b177b40e2.0.tgz","fileCount":163,"integrity":"sha512-bRl4HLXK0apnvGcHtVIGsVE5jK07VKd370o5+SoFZHXFQAaeA5ktCJJVobHJsdEMepFtEXDwKQJwvZRJkfaODQ==","signatures":[{"sig":"MEUCIHMY1Qa7S8SYnaTxgwjWrwdV7jvgkWoFfQctv5zQ7GtdAiEA/AYpsT92aTvmm/gblcxB+kMMSl07X6Dv3iqUm0965Ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y+XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZpBAAi+BSfp2/spa6XMWP75+jBWt7NoliMY4aT6aza4gzHDpbsB2s\r\nBPdQgbUnxknTaKw4JeBnbi3WKDgqLA9ePjivVvlk+FS5c7wq9GDFljcwHTRh\r\nGJbTcH/nRW2ymNWzPMhX6A56tKDFk3ia/Puv4iiHUHo19CPPognR+bvCGPXK\r\nbWtF7fhlmcWGGA8Kw1Id+kQ0NA6koSBy07p2/s3LUOFX3XttCXqoAAgSPNp2\r\nltfSCczY4GvxFFhAitYZxtRPA/vSkmPQSE6r+rMinuFr1GO1wxigB/GTI/Mh\r\nBIZABnkM5PAJh/l48FliaPGeTKT7xtuinTih0FoD+FvrMXNwPTKEHnX1zxqy\r\n4e/O2BOr6CKs1/ck1DHy2jhr5FAKl+Bckadt2Q/3It9Oktuyox+1l0Rxj5fd\r\nBgzJYQ28w1lfhgGznOGZed6Gdz5IWHN/Kvg4+wWXzW3cJXR2u6RXKizdLxB8\r\nnCdfJ6J7Xanedh8sSONqVfzohfl9soQsmMnQ30zGBYaB1wThlCqCXUFDWMZo\r\nlLLXlqtzlppLlbeguL8YnGtTdlJlQAU1URZD+CZgNb7x9t+rWQV0DVVM90Iv\r\n8C982d1ugj4jBXKBZH6EUOxwdNK8o7MSDKm/EbxHGV14tZV4DIdA5V/m3zv/\r\narl8KHEK8tgtrY0NSo7Ty5Rx0AQADT90vps=\r\n=TQQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/tokens":"15.0.0-canary.b177b40e2.0","@material/density":"15.0.0-canary.b177b40e2.0","@material/checkbox":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/focus-ring":"15.0.0-canary.b177b40e2.0","@material/typography":"15.0.0-canary.b177b40e2.0","@material/touch-target":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b177b40e2.0_1675308951045_0.18522375401652602","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/chips","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d9f821042.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"856ed70edf35dbc60c999df6f5f518d2e262dad6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d9f821042.0.tgz","fileCount":163,"integrity":"sha512-hDtEmG9f3keWOgqOZoH7Ka08+2EgKGHnx7Wk9NWnswS1gtH7pzts46nwA7+F9nhS1gVBPbrzrb1+2dZkUc7Apg==","signatures":[{"sig":"MEQCIFKUZsbR0DiszAcFKJZS3pmelZjOoSRPqNmwlbFswbzKAiBGTLxxIrdoaTswSh8DWRm/94Mwt6uf+boL69p6/9AbXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/VtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4mA/8DVaT70lARxY4ki71V0uMWpx4ydqW5gLju0LtZMTzbiq3MCXq\r\nnppco8QhP9ejXk+gkicj6GThekY4K89Y2iY0GiiKj/RAaqCZRfkhTX3RPfQB\r\nsOjlS5su6liNeRFgJah6G3fXY1sAuTgAnIi4756tAs/AjiwIxhJEoaOWVioM\r\nkH4exPGvu4JFm6To55hVd8dnk9UdTGda2SG+xhFRCBy52aPj9uoNr2k0bQAZ\r\nCpAzqi8rPHB8FeSwUhXtb+zNr16zTFciVibsEG6cauqpaNfXx7VdGObVgUJv\r\nsRiJcrZ/mFucIJ0SXsnr8xJ86xBgbiG9VLzmHttyjZs6l9AbGmJRZFr6jrQu\r\nZxVIexAVUFnZ95Ucz1YXcp81WaURgIDw3kUKp+hO5qn45brr8DiLWS6xkW5f\r\nmYfkqHtCZB+JRCuKAxrHJKhKZT+3gYWK3ogafu22xQj/Ez5uz3ehpS1V75wn\r\nuFeggCpN5NvfWVGI3W+Z2e5MF+Uzk7Cmha3zpDzuLo/DQCWHFI7qIEqoFDU9\r\nGMkT0nvbwMjVep6EzP4JBQxY7TDxgqGBXn7QeHrqLw/dp9fYPIVOSAKVVkQV\r\nKrl3Kh8cYvTCCy7wU62ZoIeKqK+rL4tiPOW4CL8JtsuBxo5d00gDYWA/lYGO\r\nr9yJJbCiEK4C+DrnHbaH+Xo4YEOegiBQS8M=\r\n=Lsp8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/tokens":"15.0.0-canary.d9f821042.0","@material/density":"15.0.0-canary.d9f821042.0","@material/checkbox":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/focus-ring":"15.0.0-canary.d9f821042.0","@material/typography":"15.0.0-canary.d9f821042.0","@material/touch-target":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d9f821042.0_1675359597456_0.6064419212705967","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/chips","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59069d20f6f083b861a91d5abf6c270ce3bd853d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.47c7deb19.0.tgz","fileCount":163,"integrity":"sha512-DGLYXMhcP/IeIM4gvLjPNr3qrYQFRJGeYbFTAeSUaVZIUdvBvlaHUsNbYKb+yt4mYZWsgNrGyLdtQURaRhr4Dw==","signatures":[{"sig":"MEUCIATBqqOaNEVekz45dh2mjIMUpwtVO+ErrpdOHg6ezWKLAiEA+/ucRrziQbRx0xlVUoQZDJY49mqKoRpqy7yBSYGVS44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M+HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDeA//Qiy7mz7y3J5WWBwYeEgFMku8VOCaoxvTfJVHfhvOtEXUh8R0\r\nR1rdpN9lInxjK7yi/hAS1lZk2of1IX953wcAMlHztwjrFMRL8jWo7Z0rH6lc\r\ngd3RdXfLfdBTPS7VU4+oXHNaJiurl8WymLVQipVJEZks6MKNhVI2N70qi7+D\r\nIvT3WWcGf+M1HsgImedaFAGDPCJdqUG2knLErhU+wxStGKIL87HVKks7ip5L\r\nEB/6gE6vZP2D3nNPKgOhNGhN6412abEXJz3GME8wnUdqB/RsXCx+uWQI5w54\r\nswqXGrRUm3TFEdBdevlCBiXuSzhzNpybQlfcXLlHh/unKd5XtOwk7+MGlRAL\r\nEi04oegpNVCqWZEc8+9PT2C4/6jNz7cSlMpl8epI1cJfM41pm96e210j9mx+\r\nHTDLh1OeCglaV7Pp1olpIXrH0fKBliTphHxWeDnWPpmhEtiRcv+JdaUxMPbN\r\nfjtYkNz+O642Vz2EquGH8tpOBsOIUmRcX3CeV23cWhGNz5dhWKhw5BcEgdwx\r\nar06qzu/EY0Y33+8QclcP/bKdPm606p4gKxFAUtEVHyAOKsixMNTTLaQBZ0R\r\n5QqrHnmtoq4x4abXjHikOqcMR9qRYvEuNt/bvotjzKRSwoXu4nKpfxO5haH7\r\nzMtGK5pt/bL8Fj6iUwz4WO2yEaiLBd4Nx3I=\r\n=iY8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/tokens":"15.0.0-canary.47c7deb19.0","@material/density":"15.0.0-canary.47c7deb19.0","@material/checkbox":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/focus-ring":"15.0.0-canary.47c7deb19.0","@material/typography":"15.0.0-canary.47c7deb19.0","@material/touch-target":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.47c7deb19.0_1675415431534_0.9725297138593743","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/chips","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50bcdc9eeae81b8595e327ee08f6c248a1f97e73","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":163,"integrity":"sha512-a+wM0TS29TNmWEZ6BsdHM3L7RD+O+LbCBjqqGf4TObt3UZhZbnqgFgXci0BBCK6xz/GdVH4NDpU1qcP5U9YFJw==","signatures":[{"sig":"MEYCIQDu1sXPkUPhYKBniMvnHyl1coNqsrVp+BXeSUF07UAsBQIhAP+TiYmiMZItCb/YQVeHRvm+PcOGVUqyc764vD+iDvMF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fgiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/PxAAiayDTfu8ZrfRuBR1sSyJfzSYJaqRDlXs/LiIR+Yu9V1dOs40\r\nGS4boioYO9rs18YonEAP0fmmtMGcX0jdKHDxrBFcYl2CFVehD8qsgh3IB9pq\r\nDuQVLCHB3l7B6KZr4vdmwTMVhYU/2mB+YONoAdvIsfmidSe0NEmOLB/1cuSI\r\np7eGxdyAiqMM1gNN+XpfaKEX6ramF/KjB9AU1QFyOshyewWkFVgPkMdUYmEr\r\nm8O4H0JantbGdVRmePE8Uy1riyuFGCH0Db7sQBFsdrQkLR2kl/3za5IWxjDw\r\nWVgKcelwTHtZ+ReFj/1+imlD96MmpexNIk2cHyfo7LJlC82YtLVM2l+Wfzvz\r\n2NLOx7GvKnA8nXTFcT/dLohiwotrBTigp6GD4f259w+zFJRc82FJ5Up+oW5q\r\nV2RWzBY2xB1rIvgnmyjWIc3Hs+rmrt1erpaLtUbym26yBQs0+xCwMmVcjFH+\r\nsJTLjKJ78M2Up+9u7pCx8Tqf/Jq2VDH2slIuV3qx8Dxh6AxCBUfJh8JuoqX1\r\nh80EhF1zQXBspgCP1q5lJf2MdrwaRiLddEsi7kMlhzdUQrnBJ5QZEpcyEhMj\r\nLPCjXy7VMMAHTbZavTLEPly6qE2TZ20m4DdH93JjjdrIMdWg65qXm22Ld/zs\r\nNz+tHtT9Q1s0Z/nUQREiDYETRXmZqZtsJz4=\r\n=8V60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/tokens":"15.0.0-canary.a16dbd1a6.0","@material/density":"15.0.0-canary.a16dbd1a6.0","@material/checkbox":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/focus-ring":"15.0.0-canary.a16dbd1a6.0","@material/typography":"15.0.0-canary.a16dbd1a6.0","@material/touch-target":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a16dbd1a6.0_1675491362533_0.5420814241896257","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/chips","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.93416f87a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63b83fced3c313a7188a66208d75afcf85d7da5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.93416f87a.0.tgz","fileCount":163,"integrity":"sha512-G4/YHG0agsUWaoyvGN0wYLwjOkURggg7LtwWKPtNzzzFhs5nF8Gotwb75kMUcma/4hvdUxBH+zx6JrYY2n0gUQ==","signatures":[{"sig":"MEUCICCD/dZLGdM68vo5tiJ7mZfuNhqlM4Bcn5lvj++JEkwtAiEAgF3iefJDZrwwy+A2hhyNOt12SGTpmfHgHsZsM76gIXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lFGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobjg/5AI6XzNsLLYDD52h4VTxKmVTVMC/gha8K5WNDsxfkB3e7SGLY\r\nTBEmRshdhbEWgRCZvE7CfqAiGYLs3pv9+sv3u1w+yOGTlYFMHZwxTlINFDR0\r\nEnAX0HUTF3VXirzyBArloSivqcejbVLCRb8CbGhO9WdkjDKZzftt+kkL3Hme\r\nQAH0zJNabp+fsrQ1wJb71Mwsst6YM8E309qu/VIEVeUIUPcnkyOZY7VUbyex\r\nIk7feXOlu6oVMpw91Di9Ej+JY4sCv3nxlSM0PlRzThBQ7NZ0Vtkbkm1aDlzH\r\nc9RRJPRJ9hnaFC7AVTekEvt31Wq+SfMDbd2wYGgfiBHBE0hbbaO0N29g6sRg\r\n9fkUO0F6qUbg6n15MsvZJsPejy+4yqNsYf3+UqyuO0NZyB/jvgzksuYiYs0/\r\nq/AkI0PD6DiAfDYDQOPx9BG/UYm+L7XnZ9Wjv3w8lH3/nJ39JOF0b0FTQdYb\r\n3zBiLqLpTidutXs+Bap8TyjIfbKyZpQYpWAgbZvqN/y7Dp5hRXV+gjZ9UoTo\r\nQIZGQHu8g3fgw5dbLggFPW1QNFENh49iDqLJjHyBdUDAvGwgbuJiAD/IGRX4\r\n/p6bua7FKhqxR+qfKNfZNSL+VNNWkc/hdNKV5dv8K864l6V3U7i91M8r6AeS\r\nldiXz8sKE9Pzph0Vz+EQ4pU464iMk0uk6v8=\r\n=qzXW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/tokens":"15.0.0-canary.93416f87a.0","@material/density":"15.0.0-canary.93416f87a.0","@material/checkbox":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/focus-ring":"15.0.0-canary.93416f87a.0","@material/typography":"15.0.0-canary.93416f87a.0","@material/touch-target":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.93416f87a.0_1675776326372_0.12185137480722474","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/chips","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2c4b7adf5d126ea181ab8c64a0a95a6854d242","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.49b8e7442.0.tgz","fileCount":163,"integrity":"sha512-oswxvQZ8jHVhpRYnXFy9U0StG7msiRm8jJkNag8LEzENuUknzaw34CTxYiGMMZY63zWccm4QP+Xw42EN9wSTGw==","signatures":[{"sig":"MEUCIDh54BsokPkfGWkkiNlKHMkbIMrI0DX0L4xydv9jtk9OAiEA/apHbV2BsOIYJPuW6Jfhz47MhRA8KwiVkfQTuL2ntfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tqKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHxBAAhyQIP5MOfWBj3BFrGdXk5aRzy8+KcCBbowIQJZMs1viWlGYH\r\nMZaw7m7RLoPNJrHXT6wYzsrNXjJY2yCXQNSIpoj/oAgrOMHMd2znCpWO0pe6\r\nCE0B74RZuzi1X/6If0OHrkuqSzCEJb8cnrZqU8HxEmRu+UVCvyc8oIK6yocg\r\nIXpB6JAdtrckzTN7VTfIj8AQOVj3wLXsUSXZPUUMuylzv8WkXvHtGU9o1Q7Q\r\nxIvRzvs9ZM9hNPtDYuZHkRrCZiw1E950H/R6CZpBW4m8VnjFsXqHJZSugwGP\r\nUw2ppv1DhlhEpaECt9a3xm/FnQC+uvO0aWO3vs+W8cweJHJeQNlBmEflPZc6\r\nj0J4r1IopllnXTOB4SRLEnS9pf9yzhDUFgUrsFstyWtVXAt1Pog+Bl/ypPui\r\nXMEa5wTn5FstPzSpgrAmhD1eWga9bG+F36Rg8dp2rEitA5i5x405Uci52VlA\r\nAGudDrXvdWmVRXat8UDnk4H4AtR/jGMMHutBD33WQurdxyNDTjIvjQSG8x3p\r\nlee0BNG4n7pK/tsTCOws8N8oo/P4etBoJl21ojoJfp+Y8q8zoKxDt2WGXlVw\r\nRyljkskLNGS9FSCZdgPSzBMTCPbiyBOSvxiUVDFaifhHFs7AjlVY6P79LJDF\r\nP9KZ/7PnAXJ4Menw2Mlf4bq/ptIajSgaUCY=\r\n=hmq+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/tokens":"15.0.0-canary.49b8e7442.0","@material/density":"15.0.0-canary.49b8e7442.0","@material/checkbox":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/focus-ring":"15.0.0-canary.49b8e7442.0","@material/typography":"15.0.0-canary.49b8e7442.0","@material/touch-target":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.49b8e7442.0_1675811466353_0.7993066374048416","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/chips","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.de38de758.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f44ed53b19b816437b59fc1d268e75047db0190f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.de38de758.0.tgz","fileCount":163,"integrity":"sha512-zfraDnVf4u/neLTJEMaFI93fIkUV/EuipssKzUHRgCcCClAoGaG0AomVCyVrvUc7iIMPleMNbDTSjGGjb5hDsQ==","signatures":[{"sig":"MEQCIB2dcCNMJBAl8mbwpOuaP8h3FcZZTOM3k8D5F51dussfAiAU6m/itxT5JuyObkF+8sivTcXojb7CMEUzKsnkJq2jQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RS8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDIw/+LuJ6/E0+MCb1NItPMDNLyV1dBIpp39Q2zc+D5N1BeSu8ywCF\r\nhZVCW2CE+9WlbXCVnOSYZKcbgpcAh/3zJaDhcBI5a/1bKdAc5e8FgmdEdyjV\r\n2E8sJP8OvG02biEyb/3MXghDy95euSr/wEOjUie9C2Z0DitH57zC00LORkzT\r\n3jw9Fm1Jit2MM9J8x9ujDA9ZWbcoLzkoJBid3K6HAsKr/sfQuhjzgKQXMjaO\r\noS2fpbcALOLpQXv2H+oxI3kshbSXz8ydvFwuFirzvBRYkfig0NZi3Ze3Tw31\r\niwNIXwsFls9F+lG5eAeA5yDUDIbBX9B9C7ldaozD0K39oMYT91bddqNVzk8b\r\njGpZsy44dxZbw14W9CZ7YQ2ezfHaQLHuyQhbJe3/iYkICzxO9oXoSdY6Njj9\r\nW+fcDi98zyLwUCOtQVHVB/HesRESmyg1iiY+Y2yeQVjrAZJiDWa+i2WL00VB\r\naHzw6b5/zn37I9sNslcARM+JWt8p5O/5gKa0ugdofApGTR1MiZSQ8Nel6QRA\r\n8TibWinG/JI0czfUk1P4Gp5KOBJhL59iTQbkfz7FVT/9GlpiFag9VQrp5hMr\r\n1oPmVzqeFxt50Z+URh4gJAzYEK/g4IaoDsNQAEz9gugAIx/ah6KbbNZlw1bV\r\nIJMoBRwL1d37UZEJ7f5vcV9qNuWXGusom+c=\r\n=AN5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/tokens":"15.0.0-canary.de38de758.0","@material/density":"15.0.0-canary.de38de758.0","@material/checkbox":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/focus-ring":"15.0.0-canary.de38de758.0","@material/typography":"15.0.0-canary.de38de758.0","@material/touch-target":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.de38de758.0_1675957436474_0.3486310912696746","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/chips","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fdf5919513845db674436e7a9256af575d7be38","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4d62de70c.0.tgz","fileCount":163,"integrity":"sha512-ddACQYYwtKAzxpvRc3tTMbZzr0upLFgdhaLeGhWPhvCNVIdMp78otcOaFmUBaBGCLNymps++dW0rv/CXd7ugcw==","signatures":[{"sig":"MEUCIQDLBcHz7YqqSfeTBHzJ9zOIq5HX+Iqwsa2ZnsJDmT1q3QIgZRbRUuv4EOR4NHfLf74jkBnL8jkMLMKN7InayyUI/h4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W30ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV5A/9GF3bIgvQKVXg2JQo23yKAaYQ2DbRqO1uPd0Y43VlAilac2Wf\r\nlMISU/Xfvn4Sj0r3+RAOl55/BuAt5060D1mb3q8F2MXUN8+CJqOVFT+mi0+G\r\nXyT0OvtHZEmtmg7ic1M63jaobHRdQNbbWUuFUEt9Ggv1Ku9EoefZyngDP7wr\r\n6kKpcfCNyzW6zS0e32ZmfUASMt5updGLASjwo4Ulv+7pIOb5oh+dZzQRmy41\r\nxknSx1N3oThX69OqE+75+tryX6bOwmduB5cazA8gtkGwnloCx3bjKcNJmy16\r\nCXDiwJuA7rsTYukKQ0iEWjknrArWbIzK/KJf4ERb883pWT5nRXtGdkHtm7Ip\r\n+UE3YIr2QGPit7vSWTA3wiroM0AvWWcA9PsvCO4KIXAJsHF8vFKR6kOBQD+k\r\n3WC2y80SkOPCvvsetfwKp5tQeoanoyD4uu5pqWEcEQlMEa1iPuPc5qtLSzTw\r\nv4hKYV0UP+xXCPxDcS1Nv0nuBeec2KPtIVrOHxE2e6kzQEsHrDXOlrvHCrqR\r\nZWereh+B0i37HyTCtfSHoRXpaqeYLCPsR+ksiqJDphiiVhKQ5ysu/vC0tRhl\r\nKoIxvRBb+LWZVNmg2gO9UwpXtiK8wvkSlqdmINgGOa9BQkqzEoHus22MggjX\r\nXT/oLX/LEAxbcZuQXGeZUuL5Bene650bdJk=\r\n=iXjo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/tokens":"15.0.0-canary.4d62de70c.0","@material/density":"15.0.0-canary.4d62de70c.0","@material/checkbox":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/focus-ring":"15.0.0-canary.4d62de70c.0","@material/typography":"15.0.0-canary.4d62de70c.0","@material/touch-target":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4d62de70c.0_1675980276030_0.4400191799333788","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/chips","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968943b2eeec15122e6b22f92f9e9da83b6ac986","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6fcd8d418.0.tgz","fileCount":163,"integrity":"sha512-FiiSuCqD7ZE6i6plic1hgeTYb/539nF/cqwkstH0CvRTDPTnfVtBF32gd+gIfROSHByKqmdqtC8CnEOEHgtAJg==","signatures":[{"sig":"MEUCIQDsAOxq85OoWM2BTJhYq+kUopwU5UqyIvC81yPyy/sEZAIgR65E5QSMn05/vlRpkKO/Q0rSNvwhliMLRJ1UT4xicJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iQ2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxVw//Xy7WSUtZ2saFZ5bha8co0HVBEb4thT1Hab92VMwbuCIa2iWx\r\nV+aIJbdqHCXgqyvHvvGyb8vkhf1uPaKHWNDpUJudUrK5q94WhpVw8npp2x/s\r\nybtdb1i2yJW+88uT8YHSaNNK8fBRFMO3Ug7wxPf3eNiam2tqb+f6l/f0zX21\r\nWjyzw7Phqnf8av866QoSIAALucyLl64iQwnfSTslYHi0Kop9MkbUGqVSaTZ+\r\nyk+kDgze26PtqF/8hiNlpJnaF5FcmHPzERxgdhY1PmxDcX+qoChuYtJJwykL\r\naQL95Uls9jKbrXIBsOs29Sd5EoCdEjj97t+Iz5U2OrfrLx5OGEuL3nj+v6YZ\r\n0+AhY3dDVCyLp0pR/qDspJJhSdiyC8YKgARlebxnkP22JqPvC8p0BpTICg8H\r\nwQMrX1DSGTnrs/dgIgyOuJ2j2RjyE7BdIhzpWHH+F2PpT51noAkgzJaitYUC\r\nqJzfaxIuo6tuf+17d4W6L9BMnCogUQV1cUolKky+O6kMsLwY5eG5x/woizxe\r\n/IWySY4f5ZJzHKyzIr2JA5g7ZFRJeCOIWjKnXGuw6Xyp1kP+NItHixTZMSYu\r\nLihPxa1E+gMQA0tB2nZBgydzqGwxiR4+PM17Yaw5v4R0LBvDINgIYVPqjGX0\r\nMzcjrZtBSmJCHbSyJs2CQrEPhXhgwYIMw6M=\r\n=ABZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/tokens":"15.0.0-canary.6fcd8d418.0","@material/density":"15.0.0-canary.6fcd8d418.0","@material/checkbox":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/focus-ring":"15.0.0-canary.6fcd8d418.0","@material/typography":"15.0.0-canary.6fcd8d418.0","@material/touch-target":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6fcd8d418.0_1676289078061_0.8572842177716786","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/chips","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.066d9439b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95a623f936ca2d3dcddf73cc2d61bbc8059da00","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.066d9439b.0.tgz","fileCount":163,"integrity":"sha512-2N6NP/Cq1o08hE0YCne5+zBOqSGPYyzyc8ARHyi59lptbMosJ36PUYGlttTkuVJ78Yjtalii84fw2mjRPvDvng==","signatures":[{"sig":"MEUCIBxhGalDAE+pdc3NGbLJMb8hd0SZhGtGHUaSCh4lg6lTAiEAkQ+vDzfM1MBH7ZA8QiaTlm7tINIl/Uv5lyAbjaU2QCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TmqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV0Q/8DtCCF9Ss1B6iodKiSWKoKui1dP5fEtofWxppbuS+dLpPiHqN\r\nRMPO3LdGIKFXAA3j8zdPGh4NYNCelJ+qoT/IQ4keL24cJEX3MWl24AOTnzz1\r\njxjMLg8rxnkOle+z/nieq4o5SQhIPVITruroGsxfniuqtbSr8Kb7da76SEpV\r\nOHYIce52jtOLfeBAVsp6F56kFcUftXF7TCIPZMEbj63u33dAE/ZStYhtorTM\r\nrVGCAAOwyNA3k06CEa2iPoNUN05TnPE5s+OKa3lmgI1RQ1vFs9MXIRiBBbnK\r\n009Shct1HS/H3MRMx+Jd1pqJZHLDaqHYXxodmz3DxYAx9QvN4Ryp8tcJ8kbt\r\nidyY34KRdSimnbwHxHEKeZllVGwL0kpV0BoutPWQejjjo8ce5TQhje/xhfRL\r\njm8O42QED+4pY79DxZlb7Vxs3Mdk/ByZYhOy/OO8bK8BE+QVsvciLMqCDJRO\r\nf5dNLvbILPErihrg7u1SFhSppNfJvs5Fa8B7U2H6wTf8l17XcZT/opAPFhFE\r\nUxyVMbpNVpvfEVH2H1oq9dYDp6cWx+HjYZUY7s6vg6SlSCfjsx4q+ICctRor\r\nypYl54dqGFXpcMI/ctRlD82Qia3Cos4lBpbSE/jBoHKxObtlS51dcsm8BQ6W\r\nlR0HnjQ/Hwh2Al81ifcVbBbKNxueXetxdy4=\r\n=2Do4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/tokens":"15.0.0-canary.066d9439b.0","@material/density":"15.0.0-canary.066d9439b.0","@material/checkbox":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/focus-ring":"15.0.0-canary.066d9439b.0","@material/typography":"15.0.0-canary.066d9439b.0","@material/touch-target":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.066d9439b.0_1676491178311_0.5859328235666779","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/chips","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41a093cabcd5139dcf353e7e0729ed5215a21620","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7ab32468c.0.tgz","fileCount":163,"integrity":"sha512-OnXm1DNT8BkUPScohcmnnKA+kHrcAyChdXFP8O1a0LvaA3t27Me6fji02bUJqhiJSTusNkS3Wkr3io6Ynu52Xw==","signatures":[{"sig":"MEQCIDWq7QoOIJl7+gf0i6WjfmXoffnYGA3cfygbxMAiakykAiA7F5kNUfvfuWKam64XPEzkhCD5pNpDwLtneo7D+YF+Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q77ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryHA//UbZ2Uepmgo4Ybd5/k/NnsnYaQutTtw+sDA5fqy3T9x9mlIEY\r\n2LsDM7XhUvTGq8ec+CfpMZWx/INzCxVFr+i07oR3pfNd+fJoWv+swai2JmVG\r\ns7oNORyW9rp7QGCKa2NbiJkQgpGTR22EQ48QPUR5IA5p53YASZavTXfAURZn\r\n6KBj8WcAuXDTOKd6vzuOclC1i1Q1QjWyStpizNx9Z26rN+L6Z4TdXLSQ44Ku\r\ntLwL8BbtbTQiSJbE0Ee23XAA3/yfo9p2RYmGyY6ylrJG5dZGYcWodfAT6ROj\r\nwXi8NTExbLlli6wXNTXrdf/FwP4T0XBWGycE09Uzw3TikIlRA3MSajuqCLdI\r\nYe6HcEPXQbsv+u4+itcUSqvj4jsyU2ILwyzMSMUMUHIjgDldS++75wkOplB9\r\ncP6fKm6+qTRxXZDIqIFFy1cZXowTp75u/iAfVQHd1697ggci99Ox//PYuj8d\r\nxEQS6RdEvX1Sas7ccYa+yojGchbJqA1vekwjmrWOCQF9nrGelbF3Gqf/u8y3\r\nLKmzToOHsNn9PigHknlt+xLaE9WR7LR9vbNZrC6CnmNgdxVosKZbc7petC6x\r\n5GG5i0RbIlCIIOrR5ShgLsW4fnHnzzUsbos0O2WQzEev4HYqNFDjrkb+zHzO\r\neg194BY4zVMXtoaBrH8jfm+uriRg0r/Fbnw=\r\n=z9eI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/tokens":"15.0.0-canary.7ab32468c.0","@material/density":"15.0.0-canary.7ab32468c.0","@material/checkbox":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/focus-ring":"15.0.0-canary.7ab32468c.0","@material/typography":"15.0.0-canary.7ab32468c.0","@material/touch-target":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7ab32468c.0_1677004539688_0.5937909194504374","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/chips","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6df9d7d4f5c87ead57f082cba8c6cb316c0a6b94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.fa27ba61d.0.tgz","fileCount":163,"integrity":"sha512-/kRZK/mHmcuBjvvEPdvEaGktRfOOKaWcum/VASd9uJT/pFVPcP9QvEclG/jMtIxD9Ga8+YWcQRclHdOLNEDGPg==","signatures":[{"sig":"MEYCIQDqfxW636UxLuUUpB0WqDQlSUWHn4kxiWjugoz6mYPYqgIhAKYcQeQwcA6ctKrMt3Za3giJasyB8WEYeIOpUhlbcOpo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/Nh7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl6Q//T3qLVKmnmQP4iZMXmvwGfWn+d9nPwuFINdhRpv6/RaAPGPG8\r\nOYuOAQNbPNRF7Sg8YHf8bfxy9wJb5wV2fLhDWHOOlFQt+r4O07fi0YSzfyyn\r\ns9z3+ST6M3u/cYVRjSQfx23acpcb96T1FtU5XyXEuM7eQBfkCMLod6c2KKm7\r\nI2ruHesvpi5wlmpfvmHfQhjO2t9AizlNPTvT3oYGFneHrovizkt3Hw5lixUY\r\n/0z/ZOaGQJZG3rAxtmxL5YtZsqh5YtN7k4v0nRsg7+LYteIcBArc8hOkiMvc\r\n//5+Olkf7jgJoZUG3Ifb/C/rRsYRY7jjazLwjaeUytu83ngfYFmrkMCnfpFl\r\n3rw+0bxxEbd+QFjp2/LQOjLzZcJ/p73Xo1wvdBkYMSE2JIiAtPoBLhRAVZi3\r\nqbPZAL91+OKY00dIiI0DNG51HIVqaP7Anpf++e5Zequ4CXqiqVLWvNAMKOC7\r\nV3b4oGszt6VkPs/mAUd/2lNKx0XMmPOcd12ZhUsptzUuuy9VI7aXjevxldpP\r\n01itWVfvgxfKjUpCo8zE8FZSThVqKeHVZ7AGkbyAJrK1SSQ8ixpHgAxzxueR\r\nRN1q0KI8BbbQegDC7gABeQMDO4eylxbHr8/OvOF9+yLKff2wRu4c4GSE3lFr\r\nqlLpHY9dyaADJriSRL1LlIPsnXq5x7TyYrU=\r\n=WMYR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/tokens":"15.0.0-canary.fa27ba61d.0","@material/density":"15.0.0-canary.fa27ba61d.0","@material/checkbox":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/focus-ring":"15.0.0-canary.fa27ba61d.0","@material/typography":"15.0.0-canary.fa27ba61d.0","@material/touch-target":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.fa27ba61d.0_1677514875606_0.3561590932828189","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/chips","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeee0cb541ded79e5c2861fa61090bcb309a285e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.311ab4d4a.0.tgz","fileCount":163,"integrity":"sha512-WRvCzev3DrLG1ru/dZW4VfVRNEQnPtuMaGGKcwHfm9NsCwJQLSO6h4P56wpyFnWVbjOdmUpT4Uy5jvW2PcN8cA==","signatures":[{"sig":"MEYCIQCssjIT94ThMjNbJBPT20O+ADccVhBnI+I7o262/F5d/AIhAMF/DKNfQPfI6RR+lTpGxsDOCuueKjWfd/oXcP5echIY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N2WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp30w//QnWOIL6tRHPSINHmixXuIGjUqs5Jz//MX6nl/PbKi6Ni3klZ\r\n0WRSsUyEsYRXU+YJx9u61g+RCvGfxxa16bKxVInx0a3rCRel1EpGnznKSXZe\r\nqDsWGR+4sILdSx2tnnMte9ugwD8Os65ezGlxO3bqEzkWnc8Vx7wSfuWld2uR\r\nfzMsSLm3eZABufgdZIY4o11FNMuDwuF92B0coL6c8ZW4zGzpyKS7ejUnmf5m\r\nxBOfduJ9Fw+FdyxOsohiTaJ2Hwo4SYAV2dRHRG4zGvnewQcWlzcQ5ofRD9Wd\r\ne+x5MEXGrClnp1XDmkydsHy0tb5ycuaQSvktKXU1G8j9XhzGqQbNCKxnMqZn\r\njv9Ply4hs2rXAHmN5OvLA+gnPGxXhR+aNGnl1OMtScjGGLsphbirHR8wRVrN\r\nB8Ujry0zGdCLUMQ8Wb77UEpfsBC9UguDN+ubOooBJAsQ3qcZtjNOrkp3YxyD\r\na5wXf6sYN8Of46knLpEWutfnPvabI3V7KBqrRfsr1Fr5qDYmIJVbTPFlwXxH\r\nzxBi/+fQbGuKy1L4sqc2FT7wzS3EVVVHE7ZcEDQHS0ZH6UDRDm2aold1qNvU\r\nsbQ/JfDurV4mBhxoiD4wCJmmE8ZiwIjxtg5yOSraCBLPW5PNeDorcM44uKLT\r\nvjCEXHbQ0f2bSdYSyWlwYEIhPzJ4Nf3dTHw=\r\n=yEcP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/tokens":"15.0.0-canary.311ab4d4a.0","@material/density":"15.0.0-canary.311ab4d4a.0","@material/checkbox":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/focus-ring":"15.0.0-canary.311ab4d4a.0","@material/typography":"15.0.0-canary.311ab4d4a.0","@material/touch-target":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.311ab4d4a.0_1677516179048_0.007520583429120098","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/chips","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86bae41c522e7d4b777aa1f6f1628fa5d69efb20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.5cb8e2174.0.tgz","fileCount":163,"integrity":"sha512-7lL369WFWNWOupnbujEmm1fDiMhuNmv2MGQl10FFx/INxnusDT6nsWP2wIKCmq7664mHJi0pR2jdmQwEKiFgSw==","signatures":[{"sig":"MEYCIQCxJAVP/BqghjZ5AN/+27YGJxbaqvfsbsrTqX/rrUzT1QIhAIrn/Bg7PDeP3XJFYQ5dE49F3xQa0Ofz5+Zq1mDI9vXu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/38/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrshBAAix4giQHekC6Ed+nxOKpzCVBprbAGQBctaBdkiS4iZztkv0sU\r\nb5opcFWMMWHyU+j5/hr1VQ2ydNv1itju1+wabLEIRsFOJH2OYb7kf4/MT51h\r\neAYuZZYWrYAdWWx9JLsmjrycJtSzHjuIttPoK5dkSSGUoReYpDuuV3cWTUTH\r\nIXeTfKORWNnIBdfYHtpxv2bwE4uZTdraBqD7Q8zKzBnR5Dx6MlXWn5yD8Bk7\r\n60cilAkv7NdnDajoojOmjQMyyhlzNmyO3Gkt8sjhCV/FG2ls1NS25cnuMBve\r\n+6n/xCmnhLVFiG2bD9HWd4zVok/wgAUlGwwrrzEr8q9SE8btsEDf2pKNbiVy\r\nR0BBo1GaNzzQP0vgxay826EdTQ8kQ++2p+Q6iM5uV1JYAvJzPolRIcqozeAa\r\nEK90EmWYfAuJEtczJkIo8ZlRdJargqaexsOp1ngoo7FPPJkKFr2SnI9BZ7ns\r\nQhPfxENLxJSQ303iMyxkzaa17zRNc0Mp7Gy1PS3Zm5+ZvnyjvnUl33vwcsSx\r\nwjzSs4rZqnzUpNP3ZJIRt5f0wPGe/dxcG/nr02HuyfFlf1qWrHJe2+RgWgqq\r\neJ0O5hm368VmeYKm/g5z/RqeIwNJ363A3I05ILNJfBaROfxDO2DI4lj+SjyB\r\n0GawSsQP/4GV98USm5zP+oJ3EbI/Vpc9SCg=\r\n=ikm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/tokens":"15.0.0-canary.5cb8e2174.0","@material/density":"15.0.0-canary.5cb8e2174.0","@material/checkbox":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/focus-ring":"15.0.0-canary.5cb8e2174.0","@material/typography":"15.0.0-canary.5cb8e2174.0","@material/touch-target":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.5cb8e2174.0_1677688639450_0.5878503170613696","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/chips","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f32339937.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de8d304179ba8db3aa14e8875df41081086b68e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f32339937.0.tgz","fileCount":163,"integrity":"sha512-AvfbmxlOSL+coFpDj2aNMkCaIWaVauH4WvXl2Y+ENVtHMhXM20NNjYqB8s/NtsRRshQL//JWg3ceQ5+5emPcgg==","signatures":[{"sig":"MEQCIDRTyz0Pxh4UKSl8H9MnPHTKic2V5rkuVP8pCRMd5xB3AiAWElt6TC5dq8r///39qNWc9c0vmyYIfNsiRS48G8Fevw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjwg/+NccU/TjMdtMChf0poW3pCKpbBOaziCEB16JxiD+ACkD6nvJX\r\nvhUfdJaRFlTh8pJ/G/CBePQ2QOGKcyOBAeMwiVa0EDJqk/OVO2N6TTmEdfZq\r\npMyN8XEahkBLwSP+/YGMODXMmY+Ayx8jp5EaEM1GcQs8LnHJ8JnXaOuzPv87\r\nD0UFlFT+ed0JhMRBj1AV/oJdTT584YVZ3SRYFlslEY5aMGpkjby3DbEt6EZv\r\nnY6Wf/jBzFuF6f5i95wljavHMrygEuishyyNSO/hGa1cHkj1m5QwdYpigbEd\r\nhPtG+PY1MreUp9QUCvLPiN+8I0O5e2+psTr+wV+8jZchnq7RcBKbAPGPpCPD\r\nZ1F3MiE4pqSB3DfiyftnnrLV15GUIwwSqmSOi5PPXIUIJ74oYlv0hy+wcapB\r\nYLa3TnoZxH3ib/oRisR97aMTMsIdlXFUC4vi4hrJT2F0EmYBLcjk/zch1O9+\r\nf3ewfAMNbkphl1IcGjBkeVANvbUD+GuJxjB/uh7VfVB0DoT5Dg/6STYe75vx\r\n1YMWpGMNqtelmEAIBh6a/15rRmg+zb4Hw90IHjLEdEfGW7zvxO3p0MFVDldQ\r\nHhiJ9sUULSf0/7yzz7JCi5yizMa7FwgEbKTwxyLog/Yg8Hbnea0Q1Py2+3AC\r\nHLycbdDQp/PcnW8mC/gaFBV9Ati6RM3IuR8=\r\n=aHe5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/tokens":"15.0.0-canary.f32339937.0","@material/density":"15.0.0-canary.f32339937.0","@material/checkbox":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/focus-ring":"15.0.0-canary.f32339937.0","@material/typography":"15.0.0-canary.f32339937.0","@material/touch-target":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f32339937.0_1678115834523_0.7709341203897107","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/chips","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9899689f13311611e09809a92598b365ae89df0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7644d63d5.0.tgz","fileCount":163,"integrity":"sha512-Vykox+oP8coUTWlSfye9Qvb2GBpdWigzamiuhEfAWBGYL036s+j6szIEAphNVec4Yq7MbvfcL05huOeZdGrzuA==","signatures":[{"sig":"MEQCIDltSss4Fx1qTsh2fwKXsnVv3z5e5FlywHdG/3Oax77qAiAMghkYtQUBlrrLIs1rSATIJKECkPaptaNWD82ES3huAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmkoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2RA//YxseDpiClL+/JGQckS/+vfqy505ME2PSmgMTBxM64P93pfUz\r\nOneCPK+nSmMSUrs5iZ8gGkiH1WKuycLBkUvRL57fyETrQVfnSncKwETgNVK/\r\nlB5ziW1Z9ZAfv3QhkoKTSe2RS3lWmKxykVl96qoeEiOGYrzGIUaBTMGqIYsj\r\nVAlrBrAqYPBoc01MKvsDUpmplqKCHX0lOcN80eSYhhHXKrjcmV9XrO/Y2yTm\r\nKPUfb8W+aZG3cDL96fshK2OUgdpUoVM3oU0028hXKsl/czOXe3VpuGPtP4Yf\r\nV0mpOYxRivLkdC99+lN2Vlrf68xi0c0ySSAC+gjZtJfEwLeTg5yN/fe0IIxf\r\n2syjv6bP+mVjdKKNLScccAhTsNlmbqCTEmh+k38WbOpnLHMWcNszBwW14eDT\r\nsNc9CNmji6ImTnaWZ8VWriGqn/D5yqZ+2tHuu5Zo8zmCSRuhaYsYWyVRVU0O\r\nAmq9wJVl8SLE0NlwYt6DaTGoflLGzthHcIrGKzR6+CiML7TCi1yb1xgR8uF+\r\nBIjsImRkzOPJteF2E+aVfW54oPsfRDwrceo84vYoDoG1JjYNy4dIxrSWBzjN\r\nKyp9MORaNdP98YKBJwZAKkwJRuktbIR/QUY7cFr06QVRY5DqxdDlQ0dBTqq3\r\ng48OEd2Vw1jqX7KSwnPZQ3HisYvuX8lYiwc=\r\n=WRcA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/tokens":"15.0.0-canary.7644d63d5.0","@material/density":"15.0.0-canary.7644d63d5.0","@material/checkbox":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/focus-ring":"15.0.0-canary.7644d63d5.0","@material/typography":"15.0.0-canary.7644d63d5.0","@material/touch-target":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7644d63d5.0_1678141736657_0.7997818431245474","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/chips","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d96330c08.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e08c37671b3cf83eddb0188833490ea1126a5415","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d96330c08.0.tgz","fileCount":163,"integrity":"sha512-W69ESYyuANSc1toTXCfi17mLhMaV0elrb3NxPzcCY/44l9RERorW4DImeaqYa3KcebzITs2f0VlM05HA9Pu7qw==","signatures":[{"sig":"MEQCIDk6IoHa5eTi6CA5Y9+9f/3TlL1Zz7aFdTVOjYkjZzFyAiBX1ItuhKvvysJCPpEhPOOLodiRBBfoaPOkEJoI59zxlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHTXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2gA/+OjyG5uwcwLBq6ybNGd4PuUiB1EMK0orhC1HhMoTWwojbVKoU\r\nWwzEfhSK4JSlM5Tbm5DvIlDO2LhQ0sgptsreqVI8oQ9O9wLUo6heKSqNvaFS\r\nMv4BjR50lWQ0vbTv26hoPcmYBM5i0Ik7jBYDs6WVvsG1qWwo2AObrr3upTIZ\r\nsd+7ObeVqPQhRF0aT2Gjgvir67H14ehulkmNpOuG/YRj9IObDWEPH0z9uFdU\r\n8gSFVpJH+ZHuYiAQJSsmF17OVrmZX6O+LL84REYmBiAwT0HuT3a6eDQ5/zoe\r\nme0QH0A7ZqT8YrRrhNNS2p/LQT2iLBJjII0ziaWV0O7IzVFcxp9ge4Mdgr2P\r\ngSLC6XK4i57tCAfc7Xw6pdM22QoZHmwY4EztTddHEp2PJ0k6TqNHuXjhKRFM\r\nQL+a2n2wUXl0X46oIAhJoq5Abhflif79qPIVBx0EbfWxFlink50WOEpz0Vpz\r\nSHv0N52LwHZAEHFgito0DJqmTNn0E01oNMQBWbKuEZnCxfzIqmvhkLEJVOow\r\nB4thvbjZI6wzW1WhEhr9jFRftf5FOxRmBDHog+YAJ1SqpwLte2pVGvopd2Hy\r\n8Wz0hrPdGg188Xt2vQSySKcq0lWZbmVBarx6ZfkLaN2BGAiGcrMhxP1Hh/3Z\r\nrK/5GW0FJwP9H6zVQt2q8Rix1N+H/FZp9lE=\r\n=DHMb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/tokens":"15.0.0-canary.d96330c08.0","@material/density":"15.0.0-canary.d96330c08.0","@material/checkbox":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/focus-ring":"15.0.0-canary.d96330c08.0","@material/typography":"15.0.0-canary.d96330c08.0","@material/touch-target":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d96330c08.0_1678275799277_0.9387536374910157","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/chips","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"009decf2675c828e58a9b3f5dedd15a955aa3e28","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c99cae77c.0.tgz","fileCount":163,"integrity":"sha512-jqK+01gncTUYWIJN5G9YyF7ik7AKkYJeLl9tdytI5Vice1Ikkw22zUkWm/9rCKL/i4zcqwEYWG0X8n2/FObCGw==","signatures":[{"sig":"MEUCIHSAah6bF4x/xXSbl5OuKavLalCpmd+xPT4HchmLY5sOAiEAhloNAujOeOgciUARKj9CAeR5KFjhcohjHL7ptQtuJ3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR3XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxcQ/+PHdHlTgN7lBcjqO2odmN1eKaP0C7uhGdpf6EdTK4vsJOeGRa\r\nab/TBPsbbPmrOThjM0e0CGxxj3k8iIOmyNibzQUhcB5gMUvpl0IjSfjeWGfq\r\nUsKHpb4YZwmPNI12V7btwZrdPVWpFbQk3ciIf8qHyhzUXU/lyAveKTDMvtiZ\r\nO9BDcCSbenA1eYSosUIdpbZ2L6M+MWMRgFTLAmRKlwaohFb17WsCEHRZlH9F\r\n78pEL8JWG/ZuifaaM9FlSEqLTRO617IhX5CGCBzuSxBp6FNYvDBv1mkDeAQh\r\nxlu1u1ewmNn4srBqePe1AYeBKFyxWrvcXUoXvUwZf+IybLXaBPkyuzIbiRnm\r\nDB50pHXChWl8lN9ZKYKTU8NUQxIGIP0LRK4szsQrPhb9qfiEhrmyClBWvmjY\r\nIlgGZ7RS2W0V01NYAav1lSATE3atzXQnkwXnrJSloIKMybewyEqK000f81BH\r\nriFafZcJfG9VuN8+HcXJEKwKOSwWHj6cQDb/CkMDA6YEdBuYOGMFNGfCHoot\r\njstBvl/+pfSl4djhOvwGs/kbDna23ffa/+SXAvn+VtWnSETeYHb5E1BfxIDh\r\n+ATtTeCi9MGvZO7J2r9547QyHIN6SnJBsXGRkQ20qk3S7GBfnJxi3ebh1ttd\r\nkB1XdfhNz3obpM5c1zkCpTOs+nX4OWFAE28=\r\n=igKu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/tokens":"15.0.0-canary.c99cae77c.0","@material/density":"15.0.0-canary.c99cae77c.0","@material/checkbox":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/focus-ring":"15.0.0-canary.c99cae77c.0","@material/typography":"15.0.0-canary.c99cae77c.0","@material/touch-target":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c99cae77c.0_1678319062751_0.18756585422684968","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/chips","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7156bf668ef9bdf84da9dc18d8d3975e92a4797b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6023b1cd3.0.tgz","fileCount":163,"integrity":"sha512-KUFBsmf25Yd91CBkTmCvhK0MHJNP0ERBTdvZIFQV9UGS5w979pnzTqs3Zcz+1OrBFV3d/c2U6glxShdSEGnXfA==","signatures":[{"sig":"MEUCIFoY86kLqtmgZl01FnRzjLfDsP1v2WxfZiORCG8pMtKjAiEAnZc0LSJJsXQaVqM824uU6mLBjHHIJkm47/wQKpRzAyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCezlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof5g//Svm4JZo9h3rsiDtzPCqYU2BBNlp6uhrjmWiN10JVHkFqN6Mf\r\njUKtwXns9SGlYKwE6M3WVzZchXq2ECM7egT/Jr27CyJGpc6v4b+Tk+WN5/tR\r\nuYeJ5gnPPYbQsLTWNjKfgEf5BTeqs1tjXqVewR/e2n0WoCM+zPYIMKext9ca\r\n77+KFP3HCuiFzKFqk/3SJOuiCf7IU/I7zrjmNYBK0fhHwaV9yQaiqWHFKaJm\r\np4JDluCj1jT5scFKPPypWtfkb0wncM8jtBuK5KaXwwK7Zy4D/oxUrZjVhVI3\r\nH9vLXkHHbP3uPlGm3M5eP9bZrxTq5/A2iaF7oBGjQd+63W8GDDoxGDqExMD2\r\nWN1YmIVB3eUMJrX4yDqG+gI7wzhH9FmpIJ8wKUvVg+b4jYU2kBZbZh1ia6US\r\n6PMKBUNojx3guR1ftR01y+PU06Rx0tjphvPHcHw7f9FIteYnoY+3tYjmk3Sg\r\n1kyg7t+gL9u7oFtFBoiSucdtRBktsj5X3+5uBH8KDRWHyV1h24vbz7WqQtV5\r\nXT7XY0qafA35LF/9cC4SHhd3DKMycyPZKWWlaRAD7xu4sX8AmHDhA3T5Izgh\r\nJnpyCJPoy4jTADdN3NNj97DLEj+EGLPqlQ1is7NQJYg211JMLC0qArtJf5qH\r\nC4mW+A+oi5mBF5EjO2gQaUDcY6VtSgt1H+g=\r\n=VITN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/tokens":"15.0.0-canary.6023b1cd3.0","@material/density":"15.0.0-canary.6023b1cd3.0","@material/checkbox":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/focus-ring":"15.0.0-canary.6023b1cd3.0","@material/typography":"15.0.0-canary.6023b1cd3.0","@material/touch-target":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6023b1cd3.0_1678372068888_0.5730522292454101","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/chips","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.274610c77.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2845ef5d4f0062567a3f7ddad3903ae121607d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.274610c77.0.tgz","fileCount":163,"integrity":"sha512-cbbpmedsphGxPu12FOlU7pA1n9KbYygIFMNZZ1IiWYAHI3KyxwsDwfCLgjrbeZOAHUoOJNSbKiAnbADHt6Ex7Q==","signatures":[{"sig":"MEYCIQCjH6aar2mpkMY8sSzqQR5GjjzHimTwjjvFJ0d7QiMwzQIhAIIRZ0TOOIducnoFcXJrQ7sCu7kf6I+H/peGup9DPGG2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfSEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7OxAAhtvdCGsxJQpQl7hCFePL8hhpbEAMWVu+aZG+uN1HSW9fKOiS\r\nmBP8gJLWub9xAsRiKYESoabjKOUBbu0HxfQ62nKMtTo3PvOY9hj6ICTMFKGz\r\nkZpvlHsA7j3VVgXYzX8PAl3imirdmhE4Rfm6F9fY0mNc3pP69wZRgoOEmt10\r\nKarQCEIdRsYDJjh4Rt7aqiH6EdkFGazHcH5dXMy+w+iR+CRke1KOF4EOsD72\r\n/22UiYiykAsCTCUnCn6tSBedNymPlAf+HDQf2c798fOVbxlyi1k2lq+ldpAK\r\nyEocXJjlCq/TM2Wb9vAWDQYQISXtegQ7JK4FqgP6Kn+eUaQRcxH7ZporNO0a\r\nXSyJpeZ6p/9wd0pgm9A7Em6ReBH4maNx5eaibXOvXFb7hT0aPcBPz9BbENN3\r\n/5bsBkSArrGyOJ/RGeAem6SwWjo57Ks8eRpIkMClEJPQVjXFn1xLX37HIwI0\r\n5ZGfYub1RuNJDug2K9Y+EzpRsgs15+apPNnXyMLZ7zoOfVvLMmosT/8xjJUt\r\n9YTzgkOnC9GBsWiXVLGYaceMuuVxQDFGd5zOGBCchvGwjnaRbkh8Gom2AHZn\r\nEdgu+lS3YbQQ++JFrG3wlOR8dTAIUmKX58waE1xY5m44zMAwGaBvVMjlVk8+\r\nDg/GNpfLmJsS9lN//MaLQXZ2Mt2X+FD3a70=\r\n=nh/q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/tokens":"15.0.0-canary.274610c77.0","@material/density":"15.0.0-canary.274610c77.0","@material/checkbox":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/focus-ring":"15.0.0-canary.274610c77.0","@material/typography":"15.0.0-canary.274610c77.0","@material/touch-target":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.274610c77.0_1678374019940_0.5017294798942753","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/chips","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a274583b9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a860ee672f7e743900c1c6144dd88e43e0d113ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a274583b9.0.tgz","fileCount":163,"integrity":"sha512-WSsXZO6qnWOTavV1QglTRD62XS3pwjaVkj2t+fiJqRcOZli2lOYWurW6G0HhlxFGFmycYqe2wIf7GmHy8KUWlg==","signatures":[{"sig":"MEQCICP4gMqvdTn/woZjsk0LGQYjk2ld6209f5SGZA++tjzGAiAqFoLPUD5jYDRJjwhPpf/EVZOaDkk60VA3JhJ7f4LrMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjlfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoExAApRbn5a4xa3kpwaCUq+h7DXYHYHfgpwuVWLErrcFHVxYveEjU\r\ntojayex+Cot/qxJ2gLOivmzTESomjicjtPWx5GRHSDpNLGVvGMVc/V45szvs\r\n3IIPC/G1H1MVWD5FtWxFvEj3uWfsPMgjNR5XBfOUBWDHlX5z6vzlxS4irl/G\r\nORxtPYmuj2d8dhoXtr9CBLyArYRX8OsAu3EJ5ItgvFSLWG4PpLpNrOZdHgqR\r\n5PH8GfFZp8OsF5CiOu6G5H/bOXpsMngMBrYd/xM3r1+nH/wAaidsrljx07cM\r\n+0ajcSYoU8tQ9/y/xI18BoqqPCFdQKTZ+6ppHHn6cQ+TPYwV7KMKgrYkB366\r\nU+scce+OWKBpIFdpuJDpXKKRkvOG2hRCKo30CFGQz2tImXGnLecSsyWa8QNF\r\nfYBrnmPuozP6ucaw0MH9OtqLYPXX8sPw0pgeaW0Mh8ElgZRmfFS0cIYLOcUW\r\nVXo7o+gemSPgtn/80kRXd4EPhStNhwYX/g/fg4QPBzS+XLBTkLHeRcR/pn0L\r\nCP5YeGPo4T2GxRE5qxm9eYbzsSTuEA7Ysqf8kxAJ25ArAm2VBV4e+DTZaSEG\r\n37+1vNRypwuZd6nDVD5R3qW3kEEtr8TnZ8LM6CKrVBegZlL9Gs3kAkT7sHel\r\nTUtWvDquR9mFC+aoxxIf/yIGstqMp9zpnVM=\r\n=lV7T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/tokens":"15.0.0-canary.a274583b9.0","@material/density":"15.0.0-canary.a274583b9.0","@material/checkbox":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/focus-ring":"15.0.0-canary.a274583b9.0","@material/typography":"15.0.0-canary.a274583b9.0","@material/touch-target":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a274583b9.0_1678391647463_0.20612761580554606","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/chips","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.da22ca960.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45f1327b9f954921918bb80d352ebded17bd52a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.da22ca960.0.tgz","fileCount":163,"integrity":"sha512-hmgcF+6DnAKRPr7MnkEjd4R/CvircJ9Wpuc+oFXvtfQ4l0N18NY7ITzqiuCjyQz5djjKAI79/Fsx7QFMU8mP9Q==","signatures":[{"sig":"MEYCIQCoRQwLMCmD/oCyzsXlDUkHU+KbuXt87CUznw9zw8GJ7QIhAPMX3YCQQQSRudCV0iWAYYMs4mfl31H0D3g4R3f3QnuB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj9nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3JQ/5ACQS0x8NcoMPXenhOEXc+ExYIvfUnCTtpIt3eNuBpkbe5Q5W\r\nFXirZuDKds+KcDJqnZ9gT+vhJ2dzQdMsVLonG2dN6iV6Kb+jYlhbf2gwqD5z\r\naIOL1vRvwbvq3bUq1MB17XzKnRRa+GGJOqMNWvk7rTez8/l/2cJwqeNdVyHv\r\ngFH4bgb/r5GUnN4QegABnoIMz5BwA9l0AHkyuzF2/KKg9ENVcIQEoaJrapl9\r\nk3aKxrHAP0K5inH6Tsv0lnjAj+BphaeJYFAslxdjTVdrsAMQkTm9xmroVEE6\r\nflMT60N1IOzcpaBn5zKdAuoQxMyArX7sbwb3TguMe3Xa6Ido0Vw2w+PQRi6X\r\nXgQ394Ja3mVTOkvadMpU5jF3TJJbhHNny9JDAqzdWGxuMvd/KDfbpQN/CJ3Z\r\nVhVX8888OhvkkXLxmDceOK9keeZkyxiMIbX298G5MZ3BQBa2TCWErjPLkXbr\r\nt2AmCI16PIkmxrvwRQsBpSfMjbk2umHKb6sFGYtTiTmDx+6eWhhg7av7pv0O\r\nt7dqLZ39sgh7RmvlRaebAQ8dG1XWpY3jbqx7/le6+qS66pCt/NhxdqfCXKnF\r\n+KUxEstJCqJDbwP4bZbw3Hmfk3NhxDDIBDovdlRgimHmvC8GdMa60uIDIVoK\r\nyHRdpZziHWaSXtnK2ele1OIIEjjrwVrV9pg=\r\n=ENeD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.da22ca960.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/base":"15.0.0-canary.da22ca960.0","@material/shape":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/ripple":"15.0.0-canary.da22ca960.0","@material/tokens":"15.0.0-canary.da22ca960.0","@material/density":"15.0.0-canary.da22ca960.0","@material/checkbox":"15.0.0-canary.da22ca960.0","@material/animation":"15.0.0-canary.da22ca960.0","@material/elevation":"15.0.0-canary.da22ca960.0","@material/focus-ring":"15.0.0-canary.da22ca960.0","@material/typography":"15.0.0-canary.da22ca960.0","@material/touch-target":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.da22ca960.0_1678393190789_0.29791914665331154","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/chips","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cb83c733c8e873657c870bea6e3934f7c17e932","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.304a94e8b.0.tgz","fileCount":163,"integrity":"sha512-GeVp/5VYHm/FA2zYZ4a2oXOU5Njm04eEFDONTBfD7VP0Z5zmBH3bSao8KMiJeeudiNtoi3RSgWfj5IwsxA9bJA==","signatures":[{"sig":"MEQCICzSouSqEGx6AwnPkgwxpVxBnvXJKyqkPtnXnIW163adAiAFbCmgiVCkmCASTBYD7plWxA+G4tu++7Ue5Ej48i8TBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkWjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+gw/9GOHewcmaMbwK8fbh8wvbYgDWcXr8BVZeZGwEfG5bfoMj0sgl\r\nvmvFKdpB2i98Mk8bMj1xbaDkBLGTzsfGnI4+4mYTD1i5Tji0Fug2RSZh1Zeq\r\ngRgd6SDKzIhtobpbBNSYGdSyvGyU1i5FrCJ9YUDiwiXECYD8g7XoEkCm6Ct4\r\nCltS6PMVepCc3pJnGOGcgiUrv5I5pQeH1C92pyBz1ef+n4SVDcP+u1UQHsOJ\r\nKz5c/+KJ2tPNvzgWbHbrp5anpYMk/vJD02A3f/rEM8BDjziTKS60/TVDgFqe\r\n+o64pmlwfsEN2j0RPNoWZ+GXeqpQmyKaEjun3o/T9teyhh5EBIuzy4Qcnb/j\r\nEvBiwoxhV9TVqvM3Ne/HUxwcHjcFkYI6OXwjM1KAy15Sey4dU5FKkZ4qNFuH\r\ntRIck6NVwkOJelDpbNHuBVmsQ9w5qYYe1v/VSodNTOvWZvK/zRpMqBlvFsUa\r\nFAoo8VuvVhvOf+Pt5hFIEu94NZijMn6fHTxs4+i8/Nfnh8+mcP7YaYysUwhN\r\nNNhE4Khq+q0mByDHDiJCbBb892kTl60dsxSuqSjDaoTFtKmEWrmGKf31YGw8\r\nfF4B9pvU8Efs8W4TBYowtnz/MsY+xGi8gdmR5GjMdU8RpYoGvhxvc7/2P73N\r\nzTpV665aN5bBnZ0MBcXLW7OIfyZpMdp9CtI=\r\n=RJau\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/tokens":"15.0.0-canary.304a94e8b.0","@material/density":"15.0.0-canary.304a94e8b.0","@material/checkbox":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/focus-ring":"15.0.0-canary.304a94e8b.0","@material/typography":"15.0.0-canary.304a94e8b.0","@material/touch-target":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.304a94e8b.0_1678394787195_0.2841685307732289","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/chips","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6c265915c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae2e9a726c580cd41a292cfcc1341feb261d9576","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6c265915c.0.tgz","fileCount":163,"integrity":"sha512-jCOomw/D8kDH+qIw/cHH7HuizCz9M4wDRlyMD3ZqETUg0nX4zDC/4mypCNgJf2ye4+tp/NeVwGOrDb3fvz1DjA==","signatures":[{"sig":"MEYCIQCa/N+Yjx7kRSI/KfN72mahH/+4En3Hjed33x8aHbgBVQIhAKeF+W+zyALICxqRyaWHaLU7txuFApJexUFDY3EN9bzZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClQ9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolKQ/+KA34d927eNj07W00DBqJjwW6av7dwCrl1Dqg2lUQO/dPPNaK\r\nflZgIuoMxf1UbvA6vS6c1mqZW3/jcmQZdBDRQFowZPPy5Ktlr9gSfwWj47l1\r\nWX7C6kKhl/t1+7QXEmZV0QtlTqSEbnIb22pHbi4M05oOkfc7ZuQ1u+wSO5wW\r\nzdE+9Tvycndfe/3Gfg2t5lMzgkk9HcDY2E5AMN2+jrP8iCDk2YFsC8jsFmSb\r\nVAJe5gAO3ENNInUZXHjS3AsV5NBSjFrIdQrx6KcbN87hIKqnwER9wJt3nnDS\r\n1GPDJketdLGsV2AxCp4MzQgyEAWm4LQZMZDRvWM83Ztms9WYVhye1OFCSyqy\r\nXtMQn5tRpgrNuQnU1WumMSyh1H89mY+9n8xBoMnJ3Fahi/fPujTYDlg3M47g\r\n0mI6cWfRAk2rq02pIVbEndtL7YkcG4ZgwRR4H6LVoum6PH66fj6F6gjNIqRi\r\nIlphvecwVQsdzsWdDRXFw573knXtKCrLYogp4Q0d/HxA1mJMqU9h8/IDQ+xJ\r\niTLZnSMr5nUQxdUoZbSAfwA87m7CpbasOsD+lMrFPNskUggEPKrkm/tJdlvs\r\nWd5DPS9pWRI9U8ufOgbHEPlWGlMIWtQmZYVMxrItzXzcURRcWYNF/RhxjI2b\r\nJiAynafAvvT6BHtCfIMQU//iuibAI8QamCc=\r\n=tOst\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/tokens":"15.0.0-canary.6c265915c.0","@material/density":"15.0.0-canary.6c265915c.0","@material/checkbox":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/focus-ring":"15.0.0-canary.6c265915c.0","@material/typography":"15.0.0-canary.6c265915c.0","@material/touch-target":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6c265915c.0_1678398525113_0.7605853424351947","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/chips","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.de5224633.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9132451c5f9c46d5dc9ce41f316a55799e53e0ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.de5224633.0.tgz","fileCount":163,"integrity":"sha512-H0ORvBXA2zOrHH064kUZ31FsQz1GVuZ7gWzq6q62qeLwJ+1IfVe+T0bodClsMWUB+uK1B6k7ozKuiVX7Hovj7w==","signatures":[{"sig":"MEUCIQCihnyvP/3v5211sTr4Wlt549k71IF9dLNvHFEdQ9vrgAIgeIqKuviolpyFHWvDULj0eKuqrpAr5p0F0eZ1u6dowN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnJaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg+w//TEs3q7QaXDYmUNhFmAsUjcb1b+4Of5O/MeJ5rpG4VL3u8CDH\r\n6XVFlU+71ZL+eY3iCfkHdCC+ciDqtHeozB/7yCx04L6v7/YPLlHpDQKDyuSp\r\nz+nqq0YHH+sPnbrfXbwMRss8SUNriiaFh2xkNLZWaN9vtLC1GeNwAasNWmXQ\r\nxlse2RNMS9Pba7rQzorrQeCP2etlmkj4wW4DvhnV4tA9Ut5OsPXXokFZYleg\r\nJf4RmjoVugeDWs9T2QRNqACs8y+H4y33i7J3BhKOlrHg8C4eRpqGbH9Tgn+G\r\nI+mnpTajOJBxD/lkUNod/8je6TTJQuhw42b+OysoRDIRgI5ojd84gNtghZCa\r\niPiA5hzkxcDIcNKlavoglUKUWn+mnxQ6/MQOplX9sKfu1k76P9mBIyQTXFzC\r\nVi75fJMVG15oR1Fhg/lQTfOohN2/+mRVorApAtd4a2d8bJHnoMB5K8CKJGh5\r\netsto477iym/VW7k3D8sc05ecn+TXlTL8iiNcpWRA/UinTiqHypsE4Rxdvl2\r\na6+2NVu8p6JuniUsgKSohEw9ntqdtpOCMY0PMpWG03AoYaP6DR9hjtmS6Hp3\r\nRUCEBpcUYw9LSyTVxbSEscOgg4OYhOWuz15rzsau67IftqN/uu/HDqg2iegm\r\n6xR0WPMTv6OKxUreaNKHWuzBrPZxHrsLB+k=\r\n=MVuo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/tokens":"15.0.0-canary.de5224633.0","@material/density":"15.0.0-canary.de5224633.0","@material/checkbox":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/focus-ring":"15.0.0-canary.de5224633.0","@material/typography":"15.0.0-canary.de5224633.0","@material/touch-target":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.de5224633.0_1678406234028_0.20414785983803174","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/chips","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8879557e6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28198d7c3de794d4b13a28e80d7358ab7166d99e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8879557e6.0.tgz","fileCount":163,"integrity":"sha512-E+AlzFVMPt2/bbVhi2yNLXcf6fSUtQc84IVbK6Sg06A8slSKDvhhItVPe1LO2zko+n8wV/lMfbOR46PhDmDROg==","signatures":[{"sig":"MEYCIQD5CykmLRBGEZYhKrrLjzBqN7S5LEERRkHLbkfbtk4vdgIhAJz9OPlIu0NymNRwfcvFM+BIari93RZ4fK9HDhEuOIDM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzoSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAWxAAg4v4yh5oR0+oU9XO9ZJIunXs4a6Rd+hbBWsBVG0t/U9mP3FW\r\nWggTT3PaZp0KeDeee+PSvr0pYgTQ6iwL4ATCpuSMc3h1H+3vFvN8b3B/g2Sc\r\n55E7gUW2er+2JdERhdZYAd+edTr7gJvPex5XQ6NOQiVy0q6F7fvTv4z5eI+W\r\nsv5vcK9L43vWSycA2+VcoVOtyuegnQ/lpNpuF96i36k0eZrJ3lJdjmREKCzS\r\nQViFh/WQ7+VJ0yuVfLT0xRxXO7+oVubtfBObJTiVsq0TRDFkwRgWDrHrdy4m\r\nYX3DOqadD9MURFr6rE5O6b0bDnLVxakF7VzeXt/YFoBUAWd98PPCredoBU1m\r\nnZ/8vBQVLk+51psbvuJI6gnlHPowUMZuYX7JwkJ/ADv4i5ZirHlHPS3OjRFg\r\nhzgCtSsbk7GYsxA6/VwelAPBd+jKFWUt/hfPGo1zqxTmZgmY1USg/uxeX2YT\r\nvdypjkm4PSQa7/2OGxOMawHFr/5b0AxAGEG2cyjkpEU4NXwmz6qOoJccy9cN\r\n2xuHKMP7f0UbxWpmLDkDHuw70yewzpXU5JV5f3ieaYkGFXrywksVQX3Yz+sk\r\nxE6iNT4qiu1ASC/Un0aSVmOk7KAFV7c1tHoww5vP6/gQekeq9M6nVZafds2P\r\nARTkgdz46134KCwF6OkUcBJ9MwXKP74TIPs=\r\n=kFKK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/tokens":"15.0.0-canary.8879557e6.0","@material/density":"15.0.0-canary.8879557e6.0","@material/checkbox":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/focus-ring":"15.0.0-canary.8879557e6.0","@material/typography":"15.0.0-canary.8879557e6.0","@material/touch-target":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8879557e6.0_1678457362400_0.32419322329580336","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/chips","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.23073a303.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ff46ce2a52d0954c81e6e712fb2e1e8532ef6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.23073a303.0.tgz","fileCount":163,"integrity":"sha512-MADSsAuMXh+QcoekMII1BaeK5bcJeBYdaCmAFbChqSYKzh/GiImbjO3NEIsP2DG3/Cg7/lj/2w+j5nG8k8ZIgg==","signatures":[{"sig":"MEUCIA7znyoIF9EGP43cf3b6WVprQKlWP1ptoYU5j4H+5TrJAiEA8vtYF/q1k6F265/OtaXVCK3uvP7yvJpjDIBHz0WLh3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzu+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKXhAAjhWIt/p+EtJ1efJxqLfd1eaOVOHyyq/3TQkHFF/EI6YysHeQ\r\nYzxw9iFhNrOLr3VO9f6vPTx2sNE84kNtFZhQ3Fl+ZAovJjIXtoI3DKDO0BXq\r\nkbLUdUitqoA3Iz1Em9YwWch/8/q9zhoBvZOf79MBgZ+qedd1qasWpI0b/Z4d\r\nhwcQrGLxBQKT8sNZz5oE6/uYlF+pfuX6Widz7jVYyyew1LukbDz99SDpjBbU\r\nWyfbtRH1TSZ9fO9VPsgUHVG0MK2PXX3hI0fuDemguxAreBGiCbN9GPUyTpnP\r\nmTmVrVXNtFTBD1yQW6zW9Ay+ZQzwMQ5JZ6iS1syMefRWH/pJr4T5gwR3aC5V\r\n6wX+9+q3oQ0ojOigGyfGJmeo8q471rG4VsCaADRWbWFTyCZriOyYBLaeK7Hc\r\nm2q22G2nMpvx3CEtAs6Cjc6s38xNTMr9Oaul5CH7wWZavkP3xqsKH0DGR92k\r\noXSdLIFkVvh/Qq+XbTfAQ6zVPrYxFVhamKXqSz3Ueg41YyuSbbrkc/r3g31E\r\nh11QXx3HMt0DU6M9v16HLLf1QCB7He/KawZk7FD7rjV5JkieU5tQrCRKx2DO\r\nqJeMOowtPZ71iYus8BPe7sCwon5khOYw15d9AcHojwmY3ZOaQ25l2shjB65K\r\nLT4RV91zR8OAk5uODcsRcOfTqrutP6AcqB0=\r\n=Cd6U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/tokens":"15.0.0-canary.23073a303.0","@material/density":"15.0.0-canary.23073a303.0","@material/checkbox":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/focus-ring":"15.0.0-canary.23073a303.0","@material/typography":"15.0.0-canary.23073a303.0","@material/touch-target":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.23073a303.0_1678457790209_0.4148182955847477","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/chips","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cbe5690b2bb19c1ff0fe0ebf0549ac5b561d4ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.51c7d4014.0.tgz","fileCount":163,"integrity":"sha512-v9pZgUIbxgC0+rDHtUee3Evts6C3KKmlqzLwZKeDaPvOgfdhUqb+diT6lpp5BAYOM8tZUMSEhhliAqfJjwMQaw==","signatures":[{"sig":"MEUCIQCuoJdhiV674Xs7jl4mOB3+QAEh5mj0Lf9otTZK5nIWIwIgU9Q4jVntcDEYJB6IpyBUvKsZ6oeUgKvEmhSi4n0DF8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC193ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr20w/+P5FVxOytMnf5xO4dKNvNSOsCGvYZp/SIhnP1IXtTamm4jmU1\r\naWN8DNEbaDWTdpphCl2BHaxL7USYjQWGPAJEE2afDwGSHf4gzkxIg0ox50pU\r\nQKCBkDAswP9VhItDouMoGFUppAilhJUR8grFaFTvPtKsXmEeV0UCo5caqumN\r\n1mcTPzC+UfW9/7Ctve5MANc7grvtKGiowCPtVBjE+S0FIwfNWoC92w0ebHdH\r\nBCHGIKsiaASzFRA8F3SW6CNcNooelYczZ5IZOztkjrLQCV5Y2bvEAWoXktuZ\r\neZMlIu3Pz+TG1irE3kQGn9ZjYls1kSud5got4C0xX6dxvEB0XZLunHy1lfkG\r\nFoaptICWBERj/UKQqgle6SkBm1CpqnxWK+gXH25rvuPxcBG/uytc9Whv4R5m\r\ng8rx+Yjo+vP6y1GVJYeZ4uF4eV/bFgtdIFd+e+uG+FlbKuwjtlCfwmCtP7NP\r\nIAM6BXaBN1BMqEUpVkvTcLsyNkRXSyevU09VilXDJWDpVdvqWAWgexKkPy2d\r\nmjGdkulmBSweaMewG4Fjqh/ZxLP9mn52N7mvR1usC+wDhmEtZye0HnPYGrdC\r\no5WVOcSAg4hUtgsF9FBCOeAi4SmUKSGYDNW8haqA9sz8NhsZvt8ItR8Rz/m9\r\nT/bqb/MLdRsfD24EXKQ2Jtbr65hM+xn1ncE=\r\n=169N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/tokens":"15.0.0-canary.51c7d4014.0","@material/density":"15.0.0-canary.51c7d4014.0","@material/checkbox":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/focus-ring":"15.0.0-canary.51c7d4014.0","@material/typography":"15.0.0-canary.51c7d4014.0","@material/touch-target":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.51c7d4014.0_1678466935749_0.15261625633361509","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/chips","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81fdca9fdf627c63cf515e938690e86d787af3ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1175a5be0.0.tgz","fileCount":163,"integrity":"sha512-QSMHHTxa6e5lJWBaWjSCkR/koGLghNVOBIMQUAApS8CEWIEFhc/P2pJO+jmciZiOwhlnr1QjamR6dj3YRTbrvA==","signatures":[{"sig":"MEQCIDShKZLinq+Rf7xMh3TJUdi7euUnN14iCdaOIBfjXIy4AiBs7n1wtX1DBAtkle3oc3O69CJ9ZoYJI3lbr3LcbilbsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5fZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNKA//VW03vlfl8YeHCV6DIXyBl4Etp/pNRxjZ95FBepSJzwVHFRQL\r\ntrEPzNwRRYj1qRRKFG0PGKZRmj2vXuXyVh1Fju5hLc5aqAS3CVWzHoauY4bB\r\na7e/+gY4DYd/qVKvXnjm4mN4uQ3o5JYSkdzZabTOxQwlt2lEjQsHcUG4spbt\r\nJyyzqaEa9rwGFqzouM9YD76+pLJW6ksqh1gzFMiRilP3eQBDno3ME+K6rerv\r\ncAniMqrUAdJKhJNEqa+21Bod+VRsVwosmRBi6tvUm5DzVIBjB56yTMG4Qrj7\r\nJpkykslexGKURQ/Gce8r67WrGHYHjZZ+aDkRChUIDQDptSQpMag78FiHAhQh\r\nbnPm9FLL9tcGuxGmR7Z+Mk8FMVZKy+OiDmDFMQ1GW0zxCSgSj5x8Z6iNgovm\r\n9tbHZDUNkS/pXLtcNG4QN5g+JNdq3akOpFqxG0q69LySJpdOB3OETazsNqHR\r\nmNv4vcFYUSssCFs1VISU3acxH1MUFU2v50eOPPXaCvVCo0aeJ6R1Tt58EZIh\r\nf66sj5Ve2hAjHARcol570v4ja+OoSfmveA4xpFpAXdb7uk3FOHNNP1gTF5EG\r\nSwVgD9UDIQUk5V4tu+UnV4t0wNov9mk+2m0hXF0Fx74ve+055KsxGrpprYEO\r\n+50u5mmRLCQXWixD0TrqccRENTVXCFNCj0s=\r\n=ioTS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/tokens":"15.0.0-canary.1175a5be0.0","@material/density":"15.0.0-canary.1175a5be0.0","@material/checkbox":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/focus-ring":"15.0.0-canary.1175a5be0.0","@material/typography":"15.0.0-canary.1175a5be0.0","@material/touch-target":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1175a5be0.0_1678481369052_0.9660408419329363","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/chips","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bda1bf9413c17043919f5f9785e9177da86c6a90","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7adf3af80.0.tgz","fileCount":163,"integrity":"sha512-AJU5/KLLkpASEJ9ppv4mHFd/t+EWY9FNSedq0CTI0RqFK/gw92NGqbO2DS4Eqr4ZllHtdzc8hackcB3ASFXk5Q==","signatures":[{"sig":"MEQCICXPJQMh6N8xxl9ln6lYZwQEL+bJMX3rfycazoZQeLkhAiB/XOop+zlPfxybP8RQAuFVsXkSOk0bmp6IUutWc3TutA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9jAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruAhAAj6BdPJF0TgUg7DTA8/l6yquVAH3mkm7SM40twQ0SqAlrjMev\r\npRTX3BWj7YlyUIcNACAQQBWG6UOZpeky10xm6NG2LcUKG+jc3eCWkobN5Dv1\r\nONtmH44mOxCz5u70Q6MzIHRfv/RmJtXCu8lZ6cCjFFO0HucYC4xOoZb0p+k9\r\nhjw4I5YWquUkC8snIEUE1o/oxQ/28rGDA2180MxkE2b00vjLS7RQDQq4IntV\r\nl9A86t72GOwqzkujmnjbDGX7FgukVrZjd7Dr0yIS3R/4Ne5xL/i+DvxxoTtY\r\naJAMf/gKMlOjmEZSvF+Iv5dIkGfjo5GNGxefXVjPDJzjEY3Us+SDq8DQOnMG\r\nzE4m4Zalk9iojSVYQ7iFL+C6MY8/tPQRX5cfes4r8IppMzN2tqQA4AF+Zt4w\r\nZHDjBAzQUGaSz4y7B6iYya67gvbOTGHZpWnOWvpKgDLxgYNafTKhvVoFtWan\r\n5s8Ct6l1uNmKFu6DRN3McYAlnq6wqFvkr1PPA7hkoedNzDG1uarzNQBngXOM\r\nWEkyMkkXioWs2P/qOxSwG/O6UtIxoOWoFezF765mnBObsELgXV71/Xz1CPy2\r\nVH5ja9j0cqazbPUaZH6vAYUTr4nzNe4OJURdO/WISzWqNQ5C2PpJRN+d7pYn\r\n+zClMt2jznBj3ywjWg0p8+npsqPFs6SnO/0=\r\n=E2L3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/tokens":"15.0.0-canary.7adf3af80.0","@material/density":"15.0.0-canary.7adf3af80.0","@material/checkbox":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/focus-ring":"15.0.0-canary.7adf3af80.0","@material/typography":"15.0.0-canary.7adf3af80.0","@material/touch-target":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7adf3af80.0_1678497984418_0.4706273814218662","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/chips","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.82554d770.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41a0d02f23f463eef7851a1dc22c2de027a3d20b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.82554d770.0.tgz","fileCount":163,"integrity":"sha512-1yvbnT0d+vlfcseLAuRQIHXsPU2r/wYHhCoNangoG69UE63AwGFA+Z9gcwlFDNHskxXfpvsFPtiV7li7lzdO8w==","signatures":[{"sig":"MEUCIQDFho7qS6JGAO+C9iBNYfeMee7QbwuObL6pvNtwM9702AIgZyu93hVW+0uexUYI2uhGzg0ZIqhLMYzdxOhjIczxSHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9ufACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9yQ/+PP5RTQZRg6AeOLN8I6OERnGsIjMIN4sQ5blyDaKSHLSjPYS8\r\neyj8EbpsrxWu7aAc/biHTsfK9eFFONqHX9MldUReycXnmY7IdRn73EDcz0fS\r\nlwtPmCB7tSxwTNBaTxWgd5A23Rb0i+hyMytfCsFqBg1s+xocek0+iAajj4Ii\r\nw2+qZz3T1y1tjw+BOcaYisl4cK/jQuFSsSCZGfPQcaGiPEcZ0GVzR1jCw6Xx\r\nd0Lenx7vMPx22jH7qju7qsNakBYDUj/6TQfERi1kM8/SaYxXw1vGiJ9k9siI\r\n5+PxiSw3h8QvmQJNM/IxYH3iv7Nsk1RH3izIsJeTyo1yOZ5YFd2ksOXIMJNc\r\nqgVT9Aikqw8hyziG1rYpbFxAUxigT8YPKL5pD4E/rClA7Kkvi6myzkoFHHOs\r\nawMrK2AWKDpnbQfV8QcbrXBidfZo25dfDSh1KVyg5JQirql6cQmH65vm4IJd\r\nJfvFCJOP3FXFLK1XZF2EzGgEYP6SVGWjrrAVdv/o8LFy5VZy+W4s1ZwZyOTm\r\nodt+NzN1YSWokkj3fOr5bQjKkaopgF0R/RCA5YfbKsDD7blJCCndo4DI8Zcg\r\nNXlkxpND7R9S52+Y51WqgHZNFjlAHnz/t6luXrpe1LK/DSMfjC0rUxCr+UlC\r\n+YRB3QleDcaHfYi+dgdxusOUCIcJIpTsS1k=\r\n=g9IU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/tokens":"15.0.0-canary.82554d770.0","@material/density":"15.0.0-canary.82554d770.0","@material/checkbox":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/focus-ring":"15.0.0-canary.82554d770.0","@material/typography":"15.0.0-canary.82554d770.0","@material/touch-target":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.82554d770.0_1678498719443_0.6300753179948198","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/chips","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8beca10c4a886bb0605416afa2d2af5c8f5315d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.93fc524b7.0.tgz","fileCount":163,"integrity":"sha512-wkfnk4zrMEiAtvBKzP9DLq7aTF8fRQXoTbHBKizp4MMMPZIarkexubOJpDZ+GE+OP7l8WCn1qRvbOh4VHkfPfA==","signatures":[{"sig":"MEUCIQCFjbmdCspeBdJ4haGyJcd9sIizgNv9XN9Z/7f7wNr1GQIgHEKytOwpH+jwCe5BiMqKLMI01r3p0jEhp7jQqijkgRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuF8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/dg/+Mb+aw9GGRpF8KgecQPeITTtNIAnmoCWUG1mez0XR0lHX92VZ\r\n25HiP6KdQlvFofc/SrTje7UUvh5eBw7Kf86cvoPgfjtK4GCrL4ia49PMSU0v\r\nPNq2s8Cw7HScxNZRfInqfU77SdjyX4up0UqptKcyZo/0GSGxcr1PgUx/DzrO\r\n+aJVNGcbl2NX2a74yfVcA0kXc4dCon3ietxyIwH1Y8fQTj1WQXGsr/+R/Eql\r\nsQN+vgFC35uZZuqbmL9fQWlISdTkPiPRaPjvphWzejGRiOW2R/PytbfmNlcZ\r\naqOCrwB0Lg4JMTugmnhDjzyu7OeKqPTNKeAsSbcVhxCA1VdG+UTIahQYBkQO\r\n+bfrV7gEk02+B57DkgJY21iw0VD6lRcO4QVFgfgCsgva12vgwVr7p/Go9xnO\r\n9C8aBGganpnk6d9eUtqP2JbXSXc8kPXgmlCZBJjUDSaTIrHo0p1op5R73FL5\r\neF3K5PqdooVlFgWJiBgFBBMuCRZFNQNWyXhnewpOqQKxLb2/iK3csGhLTbb/\r\nQGXnqoNQY/BRBlZSa4udaezFmV9TQu/02LxHAecC9kXAZVZgmi5pH+qQ8VPh\r\ni3vrBXR/y3u4t1qB/vQtG/qCa4YcwSFouYuPvOl59kyCmDnR2+uSv0zlp4mi\r\ncwp/Ef8jDufUJgcH57hpgNbv3n9M/my/jhs=\r\n=ReJ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/tokens":"15.0.0-canary.93fc524b7.0","@material/density":"15.0.0-canary.93fc524b7.0","@material/checkbox":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/focus-ring":"15.0.0-canary.93fc524b7.0","@material/typography":"15.0.0-canary.93fc524b7.0","@material/touch-target":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.93fc524b7.0_1678696828287_0.08794713424527556","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/chips","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39318dd4a2a83e95ba821e759328a5f4a36d9017","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.50be0fbae.0.tgz","fileCount":163,"integrity":"sha512-Q/UCsvDEPWJhstGpg7EBwd3hfxCwl3OoRosgAg7kHsMeE6wURWYyiH9gXriw+44sYDvFoEqeVSJjRX+Ny/pcHg==","signatures":[{"sig":"MEQCIAuML/SVm8tsrtC65wz+LR9b+76Fgi5PhzwVHC7FWEv+AiAasubXCdTMjUeeiiCsVGzg/TAK8afa3m0iJ6UlppTTqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2FFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7ng/+Lm5khZQ3QL5XNMvhL+lg1r6pHHI/YuU+9EYBUd9BXPtifUJg\r\nYQO0YELcF3QIrDsuMvcEqcSTb90Ya5S/lEcshegQ5Vmz+ya/f81TQrztmhmY\r\nKE45DJUFj01ToF+jFgbuSajhTY+h1tCaDVFgCZz/7FyLIoZUM0zslATSUBGl\r\n0CjnIyp9IF0VOeCFXN1rrW4x7bDFuVGIwn/1dphWrWKG1DJxeELGsNTKNDlj\r\nK7WBbDMs3sHQFVC7vaXv7M2Gu+Hd+t8eOhrJ+6pT2ps27w5ZIIi1OAWaLwqn\r\nkhV5zbuWFtHR6XWsiPiz+BYEG4yTeH+u8roP++xlcJ6i81Uh5uKUW83xADAv\r\ncrUdbfh2GZ6qEXdR5dvsJv94wh+b2xw9ZqEqGmIdKe9w7l9z+WNR5Qz0Sj9O\r\n7zyHmxZicDytEYjU0yLT+T6UZyk5F9EXmziWv/wqQ85xf+MhhYFl9+YKEXpo\r\niCv5Jq4x88oYAiAGCHPFOY8n8Qq7TKDnUt7HNGhij1CTFOOUugwcgnsolk5d\r\nEyfQYudE52/VyoX2SJc000O99O459RBpSePuckdOqLVpupys/VlJ7d6HRwVw\r\naIU51QCPuk5PkmMwDC4wUC/hjjtvVICfigrpe/A0Yxg+MlM0zy6TkTsiVCw2\r\n5cE73Pxv0iNCMQQB0u9FzR0FBHIUhrnbevY=\r\n=8ke5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/tokens":"15.0.0-canary.50be0fbae.0","@material/density":"15.0.0-canary.50be0fbae.0","@material/checkbox":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/focus-ring":"15.0.0-canary.50be0fbae.0","@material/typography":"15.0.0-canary.50be0fbae.0","@material/touch-target":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.50be0fbae.0_1678729540902_0.8008655743478972","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/chips","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"370119febd454a6a92d11b6e3b0f8bdd8b55caa0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":163,"integrity":"sha512-ehsBMWpGRf9syHGgsMXdMoNTsRBM78pXWToD91VrfqErKUwx62Jv+7PGioJJo50xwYVy4lwJ4CZBYSOXA905qg==","signatures":[{"sig":"MEQCIAhl6rr5Pe7rnnWumzg7LQayh8qd96m2+qCnr9MgJFT4AiAymsxgsCbPdZj4XufOYfXYVvO2BZO5VgImpXY7M9gcPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2ISACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1dhAAmom381LP+uMdmUYVlfPP4lcYdEkkgjBv97paJ8L/UC7Vkvr7\r\njJ2Q9lRu+meezuSEJ2BWJhwczHAl40BZieKlEPpitYjpK32iYbTszTT2k2SQ\r\nqYjJnQ4ut+jn9Q9QEmN8jocHgnyQYCODgph9ZTTfoKEHkNCcfmUKm9wNI0jj\r\nQkk/YRZziQvx48tHL7JbA+Rb2P5jrQ/DkR8GVg0IMnQW0K2PsplRQIBfpYZE\r\ng/0fejfMrjRfrVgnQwxfxlNmt4mkFkwaafjny5swReSjvS6ry4pWjRs5vMXG\r\nilqqlWs7T9XU4lvT0CeExlbmP6nHwnHosGmb6UIvuYJ3R+BDx/lJNeuIRSGF\r\nG8LqFnAjCj/tQq40n91o6kULAdieodEwjXr6+1glHb/I2IiFQdOdCblHFPPZ\r\nJDdi98HYP0s9ydQhFjBrc5YqrksOUC8oy34qPek6m7j31IAy+iSmS9wjaOy3\r\ntSZ1yosgvBk95lTw6O1h/jsgh6dXR1zMbpBf5Y33SlW6fXbsnifn9DfWLFyZ\r\nNv8P0v2VHwpmN65v/2Jbii18ASiSkQv8PcvaNFUD0y1/ThVIEgLQps/kAWjd\r\nERLqwSHon/BvdgfvCit5zJtSfWhW2ZpjqTHNeYIl83xcX+K2RQvYEN8925uU\r\n3pKX14Fc2e4KGy7E9NR+5xYD90MWVdvGtbc=\r\n=ZanL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/tokens":"15.0.0-canary.6b5ffccd9.0","@material/density":"15.0.0-canary.6b5ffccd9.0","@material/checkbox":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/focus-ring":"15.0.0-canary.6b5ffccd9.0","@material/typography":"15.0.0-canary.6b5ffccd9.0","@material/touch-target":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6b5ffccd9.0_1678729745688_0.9429712039691023","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/chips","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"359ac5d55c51d929e0e144121a816ed2d7dc030c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1c8013f4e.0.tgz","fileCount":163,"integrity":"sha512-u9bKaVNxXbC4K9G/0kZnM135PsAes46djJtoeNSw1hDf2I1wUCctZNY8N1WXVqWu7J7Z5W15XWw/yQSkABMJCQ==","signatures":[{"sig":"MEUCIDFwQf7beokP5gPK1jrNHAeOT8TcnvplqXF/wA76eyr3AiEAl8/aHQHgv3ZBkWksg6vHRtNK+vBeTm2Ku5elEWdCl8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2WpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjzA//dfElY4Pru3OugQOV2Y9mFpGRAY+Tz1xnST+ytTprNjWkSdM3\r\nOEnQ+XjgUxTZB7drECyAi0EmDTLHyj2MLve0yZcobwkwXu0E1y0a7jIpL6/x\r\nkw5QNj1TOsqTpfms0n3N2uC9ggm/R7WWffgFIjo7HQiHxEwythv97HdjiaKW\r\n93vmI7CMTZ1G/GvFLs1fub8vlHul+Ps9V0XwZ46Nw/i2j4+wr2HUrdeVVZnB\r\nACPiAHkmF9NjSOALHF4DE6rXF9cSKVD67r5bs/lYjDmAj8zGqez0iUpPLTsz\r\n6QBNR3RishKxQ9JesobOgtp5qDx0qPfOSucH5qwlRM6Cbmjh1dSAp+Kgz9r1\r\nQZtIPkVl1n4eh0NVN67oFnnKlhPE3Wmu15oK08to90znSVFHK+m4R/l9A5fh\r\nVHBetrUpp1hbeBdNW1Kfi8OuJ3RE5UeQNvGWIqzr+Gcfy99FlNnaur9BCbVb\r\nkkUKF4olUoloi1dzNuzH3MNlkaSzvOEDhGpDw+y3WQV0yDjjbfVb/ACWdM9G\r\nCCr5lg/fxj2XliwdRgGL7F4tmTCmvtaBMM70QwD/96pUrBuH2fR67bYO6Z2Z\r\nmjkEE7xykYSXnQybqMfEh7cULIlzPo//wFkpeTEM2JZub5wRJP8+pCEw4Pvv\r\n8Nx+UbijyHz9hV+4VBdWuI5vmKJQHM4X0C0=\r\n=9ULB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/tokens":"15.0.0-canary.1c8013f4e.0","@material/density":"15.0.0-canary.1c8013f4e.0","@material/checkbox":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/focus-ring":"15.0.0-canary.1c8013f4e.0","@material/typography":"15.0.0-canary.1c8013f4e.0","@material/touch-target":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1c8013f4e.0_1678730665126_0.9447622966593292","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/chips","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.112715df5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a407dc0873a0e190011c79696a95a575a669d64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.112715df5.0.tgz","fileCount":163,"integrity":"sha512-9wbAhIvLVhc7aB9xgmLgX1dgjZyWHjMD2OGdpwszbVHgAXpRjvR8kGiGiKDTWdiUUL4TZlFrPm8FirPtPFAMlg==","signatures":[{"sig":"MEYCIQC1hv1rd5Sg5KSjpdXcQiq60PFezZ8k76Gf8lA7HDPP/AIhALr1IXkyu+m+DMs/nqh7G/PtPgh7g2Nvrc6fatndasiY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD24tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroPQ//bUKQeWSa6KiL13RqlMLHoc2gYKIs0FsOnAqyaeAla7yoZhMJ\r\n/FXd1jBnnCL4zYUwtp5yVr2xGr8pdAM8amVmmM7lxgNWvEO1YtrbsL/Xfw9v\r\n//61PBAX/oJVnPOflTb4agcSwQJzVsiccdRJZdlqpKcwoVlyGImZrYsqpu4C\r\nBMomky4vRRSp01/zgO1bkO1ikRlX2T7FaZFRsNMFbKQ91l7sBzVIhJSj/V/Q\r\nN/50tMr01bgajOtdTxOImJujrIuw2RJQYqpYbEQkhSgZxdqD/6dvktGBp3In\r\niF6lPKJTiGOfgJPjCmng5zxO48KNVksPqhGHtv5samuGAP47nwIWSOiwR+70\r\nPMZv7D2JjyHzrPWxy1vwFZa/YuupeO31UB34ytq53iY17D+HQwK1bn0872tE\r\nTyZd5hFf1LQ8phPV9evVQEitFBXfocGxPZqVWyHmtXMazWPTpJjqCoi5GXe6\r\niwaSeJ6I3D6XGf2IJe1menV+Tz/nswoB//3LQ1W4ANu16PBoeV2r8fmKw/YZ\r\nryx/vSt7SKi0MY6n/fVCdb9qUBvmby3jq2yq/LxCvgkt1w9tkISKTj3nPsFx\r\n5GX19JgrkdXNBTJDw/0K3Wp34KLyMh+u+Em3URg7uhD+MF/pEXeKdBfSe7xN\r\nGC9EGHbUlthSYqNKJ5aI5QkTnpg+9GHp3G4=\r\n=GE9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/tokens":"15.0.0-canary.112715df5.0","@material/density":"15.0.0-canary.112715df5.0","@material/checkbox":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/focus-ring":"15.0.0-canary.112715df5.0","@material/typography":"15.0.0-canary.112715df5.0","@material/touch-target":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.112715df5.0_1678732844811_0.7495404232336276","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/chips","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d250911f2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78febc3936fad97ab02d258a3603f1134d2c580b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d250911f2.0.tgz","fileCount":163,"integrity":"sha512-QjOU6lGmyk0b9Rt9zjaldCymACN5zLFMDfKRUz5VT+tAQKMWteU0EXHvCdQrWfpG9nqv+OOtxRi4TKuDWwqfYA==","signatures":[{"sig":"MEUCIHtl0yZIrWjUBLXRdnmLDORytpkIS1udiLNJBDZ4rgORAiEAswW5+gj7oMxhcbfbGlbVT7re04l2T41mN1qGarW/gSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3pwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt6w//V6ouC/Ipm3Nyhb6AMmk1mTTiYVgwnYvH0awSNlV40d1GiyTz\r\nXI3E4kZZjB+tVsYz5BeZ2TCw2dG7tHVM4r1Q/mM5Srcb+zl0stc9aYH/gemo\r\nze/wPlRs8PGmKS9sgDUl+Mlc4etzF4wtZc8xNbStgGS6KokSvlyNgMVSZFmQ\r\nr3x6vdihBtibu6JNP0U2ZoYWIkAcZZwt4rpRT//ocd1gjCHiTDQdVUbTeaa5\r\nC9Pfd0klR0+hG8+r0l5V0sbBvtuJyBFIjP5lq/zCjDvDON9ksxEg5arNUZ7+\r\nWw+0pUTXYCg+llgDeeHD5H0AHmr8ox8HFJTdORZjZmw+hjp4njh2hjwGh5v+\r\n8dwxrrMhZWL/Wmmr0ZMpYi8M+yZ7P6VLhciiSth2wUkBHDtqqJmz2pTb5riI\r\nhb7C9R7Z0S327zTa4yWSCht+sg3ChiEe/dfnvJlzDgUq4Qoao0ElkuHKhwM5\r\nmQ7enEbsyugpUvHfJJOCAGNmm3Y/nkMWuKW8XBZtxURaooABiQaGH8A5dBjr\r\nfzYCtQQ0thsYpKoFHnnUfFF3wa7Pr0cHtRvaKcaYP12gdzfu5u8/CqLWmJOE\r\nugT9ak6MFanb5LUYdzb2fpA/PhlXGBaR6U5ucDXwM/p7fC+7G7Nm+i3aSaMh\r\nNKgSQ2sX0XpbevrEmnkMnWDYiIZeB+892bQ=\r\n=930v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/tokens":"15.0.0-canary.d250911f2.0","@material/density":"15.0.0-canary.d250911f2.0","@material/checkbox":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/focus-ring":"15.0.0-canary.d250911f2.0","@material/typography":"15.0.0-canary.d250911f2.0","@material/touch-target":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d250911f2.0_1678735984453_0.11660894383955234","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/chips","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac2b8d9a8ef127e6199c3c604035da53889fe1c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7cd925c12.0.tgz","fileCount":163,"integrity":"sha512-tlKC5E8HlePk1Ob8wCAuCJjuE7HKqnRZvPJ0+7e/WA8jxqhBj55xMfbh+DsJ1pJA236s4Xy1tqMBUTYXjlr2KA==","signatures":[{"sig":"MEYCIQDF2HlUYstfr15P7qKAS+Hj+QzYSSEnWjJprmUqMDFMGAIhAKnAO5fVxcly3COhCqgHPTKrFY18qOAKDcbndHUvalis","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3w2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd7g//fYw9hngy3v+F+HWimj9FgCLIpAfSID8eamgXEhhd2ZUL6nGz\r\nFNVrTa6Y/yg0Wog+NPVID6hpUZLOvkexHRpRlREV6bPTa8jcxxkuvPOj0hHU\r\nSUR8z3FeF6D4niUzkgR5FaeW1H70OpZIViLgn/kyVw9/etxuC0F8ptFrNvEb\r\n3Tj52ix1G+QpeudID2lu9sJ/96CPIW4QDa0YsELy+wrLpIcNiXacEtNwNiP4\r\n4PZ4UoJQj8J7aeKD3Jfxl59FV2GlYPOhy//Z4kJIGVWR0wwtVNiou20FhetO\r\nBUPO7pgo7cu0DQKGSUibs+oNmdcIe/eZmMQeu3fyLcIDeQjpYf6pfB1mUkfU\r\nFzIOkB1Lkz6C1uXjCd/fTPi0uO4/F/dHFH5J+4zAsQlNsmJWziq5hiGceFBo\r\n2f8fYi3gFDb/1UDpItsYJzsn9n9OcRgzrI9LYxlWa80a6+bG8mtbLdbYh0Dn\r\nZNmJXZegpiZovVaUVmXZDvCurlyRIWYzKrE8mOhqiwuiijy5GHQXG40HNOlC\r\nWiTNpvwkOdIFwbiC2Bf+fdeR7KoOoG2MLqzy6YwVgMQqiofOdewmzHEIvqEf\r\nZCjScszukY40JjRosbuBuImxTvj60aWntJB/P1SYDA8yT7dHU1KH/jWU8uHG\r\nsE78mVpWsGFGRumjg3bO1+SLiXIH89RVPig=\r\n=JeBk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/tokens":"15.0.0-canary.7cd925c12.0","@material/density":"15.0.0-canary.7cd925c12.0","@material/checkbox":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/focus-ring":"15.0.0-canary.7cd925c12.0","@material/typography":"15.0.0-canary.7cd925c12.0","@material/touch-target":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7cd925c12.0_1678736437770_0.5142437666244839","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/chips","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3322ba97660f02953ed71e3307e35b99a61b303","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b2ddacf73.0.tgz","fileCount":163,"integrity":"sha512-B7nUd9mLqo+Nqmdo/DZlTBeHLnIe13DfaTC/uLwwb3gbM9FL+VeUMRF7MwH/50vrYF6PNW1Dnyhav2hxLWDKLg==","signatures":[{"sig":"MEUCIQCgImKtXYcELPFQuZIMp5pir/6rUnOuaaEiAd42ISiv8QIgSzht3FDDmRx57fmKcmTeABMEj4FGX1wuNRWmYi8Asd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD300ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB7g//SAmmrPy0m1MOoAS+7o/nrLP/1izOFLRm+vUMpQhw3ygY+e+R\r\nu8izJARa+kWgs4OJDAQgi9NXBf+zu0jYwcaM52cxfd8sZq/WaYEFS5D2x91C\r\nDJdhXVNjMd0zBnAbvcjPp/odHR70AnW5W5Ad5ZL+ynSnMKHtHLrHKsI1K0gM\r\nAi0oq7ENg471xE7WcZFAIyhHBaGP9dmLFNUBi720Am2HwRl23iWKvL41Hyp5\r\nP69SlpV3gn+DpKMM1BapRlUq9yoWNGVPFdSm2iyG79Mo/eXXwLjvOSg18EZi\r\nkx+esMlclwP+9dF1AyoPI3LtF9HZXOXNiRYJe60v9SrEY0m2PfTeKCGw+pUs\r\nA/gRW16zZ0fDebgvVySZ10CVE0YtH8oSKWVbu0Yy0R6fMRq/rEI2Zcgck8Tf\r\nDle2guqObbNsNxiJ2Fiwnys5xAlHf4ERLOa1xCI1bzmTkddFWTcmae+WxgT3\r\nUvjXOSt2digQM19wFXl3cXpsOX6i4RM6evX8sn2YvovLyb87bVAZWukj/Idz\r\nscgFkC0Sji2rC5iP6lupmGpq1OliVovm3jxFUSpYtElqd1Uef6/5zyb5pvRO\r\nP+BvE9hm3Hn5HdKzuMSUJWa8hG0g8VmDzGDAdSv0v1bWN7stXDDgl2FGeN6s\r\nZgt/Rebeu176syrr9T29OCJpMXD6NikT0hg=\r\n=3u8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/tokens":"15.0.0-canary.b2ddacf73.0","@material/density":"15.0.0-canary.b2ddacf73.0","@material/checkbox":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/focus-ring":"15.0.0-canary.b2ddacf73.0","@material/typography":"15.0.0-canary.b2ddacf73.0","@material/touch-target":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b2ddacf73.0_1678736692163_0.7498042556799169","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/chips","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b0575897844aed62d44a4796f25eb3287777059","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.989ae2ecc.0.tgz","fileCount":163,"integrity":"sha512-mwnEYDnV08dVsAuJmAOOIEiVaWy/S6qMT0WpHS+oQS7XQHm4bfdDY9UaumWpufw+72wK0yq5WYzZgTZyG1ljBA==","signatures":[{"sig":"MEQCIFU+tDSYhFJxYHrNquKxaDBLQngDohW8w8gMtN+ORtT+AiBTwbe5fWC0j9+lCMFl5raJwTp6X753rgkNfKvudqB4og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD39hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLcw//Zgg42Q5jOpi/Zz/+Zqqn6ue1iYr7NxsAFnt6dvpazRILJ/cV\r\nF1r6jrSGMvO5hiuueJ/L5jwLKqLiCZaQdHSAfy1nF7FIuzqlY3cCeVKow/H4\r\nMBXItkfixk49R0wAPSmbFZMPr2h9vOCIAdDrlmkG1Tl8UQq63rmmDxCdn880\r\nKVqJJTAxf8Ikwh0eHh2MWkVRS+RFCK85GmF2GDTlSAR+s4Dwe3EqCFkRs2Yj\r\neeSs+/YSEDun8vlrgL8jPfYI388WeMjza7uP/9GvjJz4IgJQDL5OsqeqfjAA\r\nWOsaZsk1YhPb6ZWNbOEl6hFGYwLWLgG+7RbGAzIeAitphkK2nlL3W5LmuBYw\r\n2hiURvwi5ZuQtqlELlkaYiPENdRGdiGCPA+Qxnik1ux1DL0LUZ4Jgfbm29yW\r\nllib2j+q5+I7DhZGoRbktZlPeY9ajZndDiX1kL9OM5JY6ly8/GZu+d8tZDHt\r\nJ6CoGRzPzQp4sxomRIURFlXveVknw6HMXv+8Jvovp2Ralsniv0ZVWPczDXeo\r\nP8Q0q8t26Rv+T0LEAxtUrpvaF5Xf+O7iqW+SnQpJgBu4Qzhu9/j4JXsyiMkJ\r\nmMBvCZfI+THcum7kK1PyK1v7lG1k7fPxlBEeIeP3O99aPB5nFdxodGHBgneP\r\nJ8rfiNYvSTww3iKmhzdiA+4/ryD8/q27aSE=\r\n=VSjG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/tokens":"15.0.0-canary.989ae2ecc.0","@material/density":"15.0.0-canary.989ae2ecc.0","@material/checkbox":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/focus-ring":"15.0.0-canary.989ae2ecc.0","@material/typography":"15.0.0-canary.989ae2ecc.0","@material/touch-target":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.989ae2ecc.0_1678737249355_0.13516097192734167","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/chips","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.89c66483a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd7cbd409595f075fa2d5496507cc77e6b1501f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.89c66483a.0.tgz","fileCount":163,"integrity":"sha512-JhBbCwZwq7IcFWI0lh9o85xzxnfV+Mk+X+xrV9iz6eGvAkhby8vIoZGkhEr4VI8uRzYOBrXhHjuREL6aD5Rb/w==","signatures":[{"sig":"MEUCIQCB7fNvNLSQlqm9PMwQQ2ACenPySxIGcNawtXRNsV7VWwIgcmxYGlRqBwO324iGLoAIHunwIdBDcEvrLJz4bv9HCEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4TxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmUA//aE+653tuNmNkGZeqvEPrb0SwBGZzThPA408ge8EvLuwkF8lW\r\ne2ounIkMNg93aQvUYOgSFvotomgmCfbpbj9xp3m/El0xyuem9kggfvWPZ4In\r\nVT4bqUjLer2o8Z0+eumlCQdlNKumldwsSFAKtKdGhubsWVhw1YpqSCm2KVF6\r\nJQsg2k/E6MIrdoY6G4B7dCxciyRVpShqDQxBRLcTGKVuffr8UvvtbWqjnP+G\r\ntxbx05MFDN03a1krah5rBboPidR4DfKwPYXF69nbvh2CAteOLGaVpiEL1t6k\r\n267nkDCElZNFueLPeKC6aTlgO6nxzZ1psQyQNcogJPjVpxI+FXfLjdXlMpPZ\r\nEocdfjzlxeHkMAzfFzTGv+Fbluit9owCGXEnC8wDj1ID9nh0Y80f/6Id+Z1j\r\ncC3PzByMsSZopgV1XCDlv+4JUSdkGELWaphJJ1PNwz8CWEJELfNAtQN8GDlp\r\nLsSHT1fedkxBvteaVZbhA/8SdRvmYOZm6gilsui9+waqn8mXOty7cd15yGtm\r\n8n+VIdfbwEb+JkFZyYuUj1E4iDvhKuTKhBT2TzD6Zmo+GrZn6zJL8wJFDI68\r\n1/HBEVAb89N7q6om/8l+y5SgUeTd0ORLEGtHUHOelOaPryDhBD09Zi01Q34U\r\n0KvCtQBWF3LrAwVbSzLbXm1YgCzxV9XPPWA=\r\n=bK56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/tokens":"15.0.0-canary.89c66483a.0","@material/density":"15.0.0-canary.89c66483a.0","@material/checkbox":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/focus-ring":"15.0.0-canary.89c66483a.0","@material/typography":"15.0.0-canary.89c66483a.0","@material/touch-target":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.89c66483a.0_1678738672910_0.19754290031500843","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/chips","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a1be8508188630fe171ff569f4370ec68e4ecfc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6a85742c2.0.tgz","fileCount":163,"integrity":"sha512-y52EaqQWTx12tSJFtIcRUT0wV7I1K19EdvtgxPcefhZVMwmVXRhL2OcokuER2NJqm4AIje4BtOp0uNO5xf1aEg==","signatures":[{"sig":"MEUCICmgTjAHbtuEkZSRx6oEqwzHKn595s38+7vstt1uDNi4AiEAjYJ5vYz4gyEgjfuBNoMhpUskm5JGzh2kC/PBAGTGCDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+CRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2SQ/+PnzJcErWjR8RGRfpHCkiKhajhdyT89UQRGvadazVK5pbiuYl\r\nyiZP+hEAOdc9MN+blVI4kztWozultEci9jhB+hLionbK11ERsEseFY8E3gMJ\r\nYgn/hyfYAlJdkqQKM5iuN3eV6V57fLU/frjumKTzlCJB5ByRa5fUOAVUfuE/\r\na5EesB1XGXobnmw9fB1AnXD+4cczhSoGljRE65LMQuayjwuqEVug+owQb56Q\r\ngAF0vZbftuMS3Wj6lXLI3StdC8Tw8jzZO7PNSmmQuPhy/PUn7Fr1OBWI85by\r\n/GmmZOnRleDgWKZZxszC7/lwmsH79MNMlQr4ZJBxnXN6eVVBcpvyoxGYjfpq\r\n0Z0qVvANfc0dwsqS7p1yJfsJXBU6cnnf9F9LclqA7UQuWVNpIuutS4/qXVDR\r\nQVGeVv0B+cUU4VYyvsr8T9SQlL+k+ClNqWMFq6cnGoAJ55X0t2SPn7ZYwMsS\r\nhIC5cZJZFIis25jgf/fxjI2sg/hlVinTgimVQ+RGmPlsNH64666GnPHeUPRE\r\nvRAAEGbToctiv8TclttA3HhsTu9t/kXQNECWtW+qmnaQKSHo2u7wNr4MX8Pl\r\n1XkNp8I3Zv0A8bQ8/WAyt/ApyJZA4/Zs1C0Sy51GTB/o8OCwXUlbR3JiFUAW\r\n5B6MoUwgZwrJVNlJxB8Tum/8VhyNLheLfMY=\r\n=9hf9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/tokens":"15.0.0-canary.6a85742c2.0","@material/density":"15.0.0-canary.6a85742c2.0","@material/checkbox":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/focus-ring":"15.0.0-canary.6a85742c2.0","@material/typography":"15.0.0-canary.6a85742c2.0","@material/touch-target":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6a85742c2.0_1678762128720_0.7869420164660035","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/chips","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ba989d98920618f6dcea2cb4d013a0f377d8841","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":163,"integrity":"sha512-xEKkmUUi5/R5PjLjorPt+iV00EDH5anNLGWUG79B9W7gEtuqA+fCOfryWbMO8QprOAQ4qNf94UdJnEoaPaigUA==","signatures":[{"sig":"MEUCIQD+Wb/OasJvGaBPHU6da38n4uFca+9um4zXK6uRkVnClQIgJBYonBM08hyyZcvG4J9+r/Cu0mkyOf1Ydm5mC6p+vNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELpuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosRw//dy0fWB5yKn+lB6zIVG/gUX0vDzgtK/+4MclN6YiWdp/4WXWM\r\nDfRe/nA2eGvlg+cB++ko9DJbdWD2WPHcHI0FhdWM2zBM5Vze2sI/pkDyORG3\r\nNKibAbuG8109FcPayRZxcAuQ/xLWijiW48Nc4GdBRHJ+nyRtuj85CLTb9qwL\r\nbH7IQNwbKdb+DT9BYo7l5yXvFbNU45HoZYrBx4QwIA3pDCsZJVtbGZWk37j4\r\ncWJoKU/WAy4Vdku0eLUc4lwkI9rarGmA9p0ApJrcQmcZrSKa/ijgEbZLmOgR\r\nEffoojEJiLXL1vfBbBw4Yg6fhITTkTIW7troVp7L+AfitHSX+t0oavL85yJG\r\nFvm9MKlAwgdKu3+y32NnaIj4BRoUUg2qdzwvLH8V0xMJTQKHUveO2pW5u0MB\r\nJAAmwyfGajvgZB+J0ZQSkgDmSUnBptzA6OrlfqwoAg/CFx4G3lhPZU0Dfx3F\r\nz0+rqM2XluASiyjH6gAEf9eN9yMxkZLa1Ht8uDIVST2atkjvf0VIR+RVjJwo\r\naeYwZghlNUcUbMCb1ZBdTFJaQZlvLRjdVRM3w8IL361nCQm+tzxdS8bcSKKw\r\nesqk/SifNT2WxF9b31a8UTjUTPF3kc694RAU1LpsKvFk09gyYI640RHO5wzj\r\nRt41f2yWdacdqB3pTc8buu/d7qnH1KrUCZ4=\r\n=mXsm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/tokens":"15.0.0-canary.bb6cd78d5.0","@material/density":"15.0.0-canary.bb6cd78d5.0","@material/checkbox":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/focus-ring":"15.0.0-canary.bb6cd78d5.0","@material/typography":"15.0.0-canary.bb6cd78d5.0","@material/touch-target":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.bb6cd78d5.0_1678817902356_0.3168822091227572","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/chips","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c31c54bf016d52a10631cf844e49a64ae238de22","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.5f94aa37d.0.tgz","fileCount":163,"integrity":"sha512-pS9obrmqTljYCLOr2VKmqvrPaNzfUwgdu9IoR01PgDG/rOA1FuC6rnkKQP1l/vG5CEMT3iIVkj7bRnQuNonNog==","signatures":[{"sig":"MEUCIQCU3HLZbqCptytVAgZVhg7+dQhY7pkjqhIenV7/rUKQ8AIgbZt7eFAFQi5YGjYdnypshUgRTNxXjoHjizX6CC8HrV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELsxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIVQ/+Jwzb6uolM+Md2WVGGRXd2ARKsMoDxlI+cbKFBjF9wDgIZApc\r\nQ4KM6ZHekqgaBT6Zt0o6B7IlPLaNpHxuT0uJe+u2vRLvsmdmpu2gFNNry7tg\r\nKPPDqfKv+OdEMoIuQy1z+Fgi7swv3oOmSFtCu5gUuUD0R4Ft8eLOwwrbRmMX\r\nswwBAs39Y9F5JR7KnxBARcOqlyN98+7jeaM/CDkGAMqMats0lfbvcYBCBbUq\r\nk9OveDdTbpHjqZ9eosvHtk+w1m8HkfLAFFrrpyix7GDzNeWUvZWN5nurt6e+\r\n6XX1p3LckSF9Ws6iciIzKxLYAXxNncn39KMaqyRvfuS3Z+tV22+Ba3r8Nids\r\nmViHD4wnnwrlR2cXrFgDWnWm7zH/eqUN6zga3JdPW7XoG2/eFKI7l/TsDmaL\r\nk7KqB9XzQwnpr2IsX3ZHwpZJgfkclYvwK2gV47VmUnPGCVaqUs8EVmeTP1yh\r\nOlXu3d/1h1hsUEpmOSQGJPwj7qvN4QPg86ynqVI96TTRPSJnldh53UtjcgQY\r\nC6SZi9L0VeaTWtwFgywn94dlROkTInLHa7KSD8vLHaEdacBnBwQRX0tlGBfk\r\nl1+EP6qLNJke2z+2UbsYZNdCBclRIRVoqFDnwwqPD7hZCEhz2iZpzxHb75EL\r\nyHg4RGadwetp0xhuyjT7gJssPIBHGne7W0M=\r\n=GwFj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/tokens":"15.0.0-canary.5f94aa37d.0","@material/density":"15.0.0-canary.5f94aa37d.0","@material/checkbox":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/focus-ring":"15.0.0-canary.5f94aa37d.0","@material/typography":"15.0.0-canary.5f94aa37d.0","@material/touch-target":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.5f94aa37d.0_1678818097102_0.6459868362566623","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/chips","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1bd317240.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ffd4d2cd2a08515c275b3d4c5f3188c4d01e764","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1bd317240.0.tgz","fileCount":163,"integrity":"sha512-wj1X+Zv2uJerPnexNmhNSegfVnBfo5pcdrT8Jj658xXiOWE8y5WBzpHv8dxhLOPimog2798hB/lZN/QLssVCOA==","signatures":[{"sig":"MEQCIHDGb7PQHTvmV5VN0DRCJwrbUeFgwjLrEt3z2upq556YAiBYyhkO3j9E9N1erF5kJcz+5LfepsBw9kf3mnVHOmjtlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruQg/8D2G8g7qnF/AOn7jOTH7KNzoNJVJiD5Xq/M7pi+jQaXgBijU6\r\nCFbG1AWUGchT4UYzsgdbjdykwnWCHWO8/ohkBk2NzjF8httQtg8TUZ4UsCgG\r\nMkLve7uafcSPtgdq/xY6bS27t29O3QK3LYDqNiwD+637tL+quNSu2rFWkTHM\r\no0go+5gwb2IGAphZQUetWtOSO3aaX8SpL6ojbgQdKxcDTTp5iWOfkCVCmSoa\r\nyOCrehmyeC87gTs8u3IRp2CXINX/IS/HXaMvRFe/Mv9OX+GQjcG/PpYCryNs\r\nokl5hOroQ4rCnUeBkTLX8Pt/yntWSkKoDx/fhHSKPhUjS27dVEJvBYZEkhnl\r\nzKLfDDZjgyUoRej+0q2lWLbPW06ZwlO3gjA1n5V5h13v7C79/qRXbFtV/9/w\r\n7JnOcDEslWDbHn11urUpqbM92lhoh/CL4+vR6aXVzRsuRXoNRjR3YxaOx0Dc\r\ne94kCl5p3X4KX/MNeveDhvzj5SK29AAGlcNNjpPZ3OHvUxkTSmH8x8vle8jP\r\nAcqi41toGiTgPG1cu+U50k6KnMGXI/k3jHlVItfDAk/WoG7HHZWa4owWth0Q\r\ntih+X4M6Hp6OuggslTdj70ickbbFSQfAcD7kQWm/J4c3uBE1fGy9+JrBK/+b\r\n93x+jkBoZat4fe8Q6F+GEjfDyCddXEyC+iI=\r\n=cxPF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/tokens":"15.0.0-canary.1bd317240.0","@material/density":"15.0.0-canary.1bd317240.0","@material/checkbox":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/focus-ring":"15.0.0-canary.1bd317240.0","@material/typography":"15.0.0-canary.1bd317240.0","@material/touch-target":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1bd317240.0_1678818331106_0.139004030860159","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/chips","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bbf7df9f2b14145115d703007d0465e1fcb4a24","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d441d2a2a.0.tgz","fileCount":163,"integrity":"sha512-NTrNAohVpJbl2fHd4VIajgVly9qpe9AwNs/YrWvgD43/fE32XfzuVcRGApVwUeHZ8lY3P+ntljUobiqQN7kdTg==","signatures":[{"sig":"MEQCIGCjZFLygwrpUA4MbIYUje5ekH3k6F9PmEBUaaMrlGvzAiAT1qJq5wuLfQa1caCfSATSRgIWoFTPMIyNdufGflMhwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Xg/9E/eA/frx3yvt/PhAFDnmqvm3NDWQLbO/Nz3zwIYWT/djEwyt\r\nKu5qCdDNmqJk7Lta/kzGqqiZRKajeEkLuf0WmGReosgZtB5/N19XqPV96h/G\r\nuTcJS77y/jybztKn0kiDkyHKg3zMbDGiYrYL5nPcakVQTaGYQPDN5zrZ3yTH\r\n9cRQFrRtUS6pqP1vuTdsuirwtuteLIvhPVc3q9tiNv0nngfGWN6BYsaLV9hx\r\nBJ0KhpZ1IEkZEa0LSOi9hh7JHgX5Nv1bWFJtfc9ACZWCuQisU5eCFeC8T4Te\r\nIuhZnihPyBpq6Fls+z1cH+12VhteOecWYS3qAvjb60dzwUBd+Y1CZL/LeofY\r\nLx16Mv8Pv/MZh1VO4RY7ikSIXu9SMy7AyNrrjhuYlgnID0r8YelbDtV3/QwY\r\nSakrFdGznuLo5BjOeliHllsja9mJygQoMtK5EcOswVwdcU/OlrEGQF2+5Kn3\r\nAoGNUAetnytnMUePi2u9WLT7aGu2nwhB9vfEW0LoD2KYKO4VZTvNoP0on6cM\r\nGUgLl172TffbbMUxVNePv7dvmbcJjXsZTyEi77pGQ6auzTVChH0yPFaXu1HW\r\nEYXhmUYDhIhtrv1QJJi5edLMSjkqw6tk5d2wdyBtMnY095KRu1T228+PpuSZ\r\njcm0buWiZnpy7Zan/X5/0AHNdYbdshVFBFg=\r\n=kc3B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/tokens":"15.0.0-canary.d441d2a2a.0","@material/density":"15.0.0-canary.d441d2a2a.0","@material/checkbox":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/focus-ring":"15.0.0-canary.d441d2a2a.0","@material/typography":"15.0.0-canary.d441d2a2a.0","@material/touch-target":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d441d2a2a.0_1678818496275_0.35305331505941107","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/chips","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e69d265e1e2ad003bf0ed2450e7cd12d33dd227","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.fff4066c6.0.tgz","fileCount":163,"integrity":"sha512-fabeZF0/f/mZMWOtmBYmclNzkkvcc8w0PmlexHGSmWuderNv/+1JUojaAyYQwmnuclQEuc2qpXcxKWDVdmEz7A==","signatures":[{"sig":"MEUCIFuJiHmpGZtiNt3orIAIGypHvEi2xX1rCudsj1Avvq/zAiEA+DPEHzmq1himD1oybqnCnpYefJaSm8XcrbfrGeRUqmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRsA//WbpMi3xksgN1ybiG9FlHnaR0leRwhJEzl1mXcYyfNzQGb5wg\r\nv9p4oL6g3khsajLT9KsOFRG92cTgWfPBTzu2GwFsEEIzmmWO0ndL0/UiTHZp\r\nQy8Z1etteUUOQ8JH8SX/KcsLP6BYMG3vlMSrw/lC+YEqVaghY4dZabSHhDKi\r\nfBcbTQXMeHYjQKY6tXmg1Wc9BJq6sHYCHXD00NEc+h1qJ0NbuKcytMKnUGjs\r\nlIlzzaZNylCTYajr3J8uhRuMx0ZtdwALReezwZcD0awEySsah+S5wJ4AaaMS\r\nYpM1yfHWXA5kopvHKe8pkLa9oF264vYR2mWNFqQhEKEMfi8cWhAQ0iljIyBs\r\nqFSqloW7ucpwBH/tPcC0D71T2j95UJah8HUNWzY+s5VV2kaGNDzRkPuVaTSs\r\nSTsT3STwu5v10ZsJmnnqckzv/wf6OngI3UT8SdjZB0q5tKnSf+0IitiQfRA/\r\nk/ayJcXAewxjOWEiPqj5YyyRYe4K1fB0FPOmB0EVYgp5aNDm5zS8kQSK/mqC\r\nQMC7oSYPRhWLKi7wJZ+Ai0AFtHqRvWq/R1soc1mgtmhMTNJ9l4opSsiq3LB1\r\nUvM7x4goRRs4PAdZ5CbG49B4nqCtz4c2aMezxM6qPzc3oLV0QZZ0jRz12/i7\r\n+SJx+Tlvdx43W+kEQqeiZ4Kpgu2uT3rld7s=\r\n=Ewv5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/tokens":"15.0.0-canary.fff4066c6.0","@material/density":"15.0.0-canary.fff4066c6.0","@material/checkbox":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/focus-ring":"15.0.0-canary.fff4066c6.0","@material/typography":"15.0.0-canary.fff4066c6.0","@material/touch-target":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.fff4066c6.0_1678818534393_0.3583594791299409","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/chips","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.87809c710.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efe70a02a21ed34ab6525e87dd0533886cd85cc1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.87809c710.0.tgz","fileCount":163,"integrity":"sha512-CRrYB1nS93hkPCnft5DNfrnKRvkIpydqeN3yrvqwc7Nu/06/NeEL/vWbDkBj9jtcstnsb/vK9y6aKgUaBCDZdQ==","signatures":[{"sig":"MEYCIQC0PpbwqkWydyytolwOLhDhBmfBYDtsN8TNVTchAnnPvQIhAOTTq7/VJV8OdjKqyX/HYWvEYodcH35PpGTTcn4KA1nB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMCmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQew/6A3wLtOk5KXoAeZqZ0tt41rTePdH40Wp+h9ewXN1Au/8pPOnw\r\nlj09j5xuqV8+W82CcImbLscVtn834HEnruE0Rk5OLeNw6H7Z3e9oTfDiBrbf\r\nJifhCy0zBeWuXp08bguieZWfhkRTBUr4DzA537rZ/CrlrCe1xKxox1T8DSrJ\r\npP+cXhl0ByZ+v7CYqiGKZTiMEPN+a1b7xPaN40BN51HaQUhu/t3lrdIDS9pi\r\n8e5IaoZLxjadEGw39/sFpV6rspeUu7Ui97Emxq39LHijyhMC0cooLBJJ+PXY\r\n1ni8Es0F1YieRlwyP/3eV5HNLw1D/d2DZcJ49wLCHt8wM6U1AgXyXjwOEtog\r\nKcPcfb3sEE+pjfNJNbdFO8kv4L7s9gkKT21KGn3mVBTnFplhPClKcdvUVx21\r\nl8lDwNPtFarl5YuiIZbv4ej8nGKFp+mEa2mkihQCyaGPRL13O+5l0QSqVlLe\r\nZOoesw1JTXolCZvmdr1/jdud6Gm/iZVVA5LNo6lB0oXoF6GBkORAuGPYgsBQ\r\nnhqXLwPDCiJzuLGRO9L3qxMqGcfk3Lzdl7R4V3k83YhLEihTe+OPwOOx2Ljg\r\nLIDWQMfhQ2M54ZIBwJ9QVw0Gf+gTaDJwegHI9XOHMzBuG7VWGDBqtQ+e0DPU\r\nMKrYfLYVa5ZHkNgZg9fVKR+lPjmNJK6etMo=\r\n=Bs5q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/tokens":"15.0.0-canary.87809c710.0","@material/density":"15.0.0-canary.87809c710.0","@material/checkbox":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/focus-ring":"15.0.0-canary.87809c710.0","@material/typography":"15.0.0-canary.87809c710.0","@material/touch-target":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.87809c710.0_1678819494519_0.481868148160975","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/chips","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.48d30012d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04cc8e13f12d7f8eec6478eaa14258b9c4474832","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.48d30012d.0.tgz","fileCount":163,"integrity":"sha512-hNt3XMyaQ3PjrRTBJ79tBLTKAuOr7beNXf1ZaVX6H0q6hJWQY2ydQr6iE42Cz54v9ubyh3CGheAWyYZfUpMnfw==","signatures":[{"sig":"MEYCIQChe100X1rfbUKK8QZGljRzZAojRwALYPZwNBxsRjR8zAIhAMQZ8AVWe8fn+1zcTTk1kbebkRuDiOCW5A7V3Csygoxc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMGpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8TRAAmoo2/uQH/ArxlrjvgOV729YisKXBFfpV7q1ExGvu+jMGDN4/\r\n9KidaaKA2YpTiZ5vyljuhDgW71al9fEfn1vDAM4b4j3gxz8/1GZqyo67LvLR\r\nKCEwj/3p+3yTysqXm0JtUbDtZMKf2whmwXxemEPwV1uvaX1DcQNAVNU6AQdE\r\n2KMjUawMjQlAi436M1CYwfEP7MU+QutAKYWlunhiD+haJvg4gTU7Lntf3xfe\r\nDn525lr/YbpRdVfhMSZC3fm8dmziFzU0wvppfyhLrdb2L6ViAvvbyyKe3Wy9\r\nNYEsWiUbW1PrcYPrQw2V9yEbb7UEgGXpwhTrtIZcFCVqOOJDHZxqMcJPQMF3\r\nnbiiEBil+Cy/3UQzUSOFa7hs4fFT2j/FJ92RKRSQ7YJ30fAauZU4B3UYc2fn\r\nnRdrL8Qs+/ChVgEMlN1iKBzSn1KzUeJ2629PcseJnIl29DpiGyO4fMy4nlCp\r\naDgHlwCWcClqSNpBMzVF3Q3YJI1LT/TfM76ftkP99OhdO/eKHoblmLSILmJP\r\nmH/FPawzPjmEwzHhxsbn7XVMEdYiVYmEo2SG/XvKhGqXhft1jkTwARY8FVGZ\r\n1y4QI/0+g82N0QaFaGjq0/7dhIUSuI0RNhGGMUEEZD9P6/IG0BK/LrJ/dysB\r\nzN5Si6nsAwvaVIt+2CQYzyq0CG2hNJn7eUM=\r\n=AE81\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/tokens":"15.0.0-canary.48d30012d.0","@material/density":"15.0.0-canary.48d30012d.0","@material/checkbox":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/focus-ring":"15.0.0-canary.48d30012d.0","@material/typography":"15.0.0-canary.48d30012d.0","@material/touch-target":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.48d30012d.0_1678819753444_0.9186640585551904","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/chips","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15a481fe7eab886345c59a8ca8f6dd9e6d195d42","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.419b23cc6.0.tgz","fileCount":163,"integrity":"sha512-j+wkPW8vy6Uc2K5zm3gvU1CNxR3I9c3xIGfOkgf4hRiRqCC+SEovV+PEdUNeB8k73ttTcLSmer4Cc5BF1aVRrg==","signatures":[{"sig":"MEUCIQD8TH3XAcmwCaz0iaiy/8pp1l+iHkB+m2M/ZZnXdAe0wQIgOe4JPnhYSMU4sbqtMX0QYKM6IenS9yGOzN36Km8+LpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMRBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJSxAAhGvK0dfmRIImDrOr2uumucy/6m7GsQqBnFj+DcN0Io7G8CwF\r\nA3lkHf7rS0ZZnPnqpmMViM/0+qXvso8czhHtqnlboRzxZFy1+tl5nB8mfqCV\r\npaKjqBSqjNZSstl7YuWuGaGqyv53mnqrXpPqut4MM+1wler4cGDZ6fy0WYBm\r\naqSzV656wZFYlbvBLTkNqST66H6/+gGFeH3O0rR8Qo30So/exNV6XJINQq8D\r\nj22N59THbNtpj9mSePjaB35eh+tM8KXeEEeOaWaPJ9tp98+ZPpdGggAllZmJ\r\n98qBnr58kphLwM2/RpF3S+PhxcmfPUHltMsz9EhdkNDHqlSM6rS2fHT/Mqf/\r\n+ESV8HqF3E0PiL6SkgfAFOh4YapRdbqFlh1wLKxhBKxlBvQTqyMj1llSZBfr\r\nyq/RyimE8ufK27mGxE18uTDk9pe4rRCouaSEzvL/aKWERwBiNLqy0RCoLzZC\r\n62NzOXDNfU3nJEdYGedNwOXIO4e1QrPk434cVcz8yL3+dJiNqEd6oFbobQEN\r\nwD3BN1+VXqRsqNBnw6PXDTfjnaL571Jp0+KLm+rQCuDtoLot/nyW7uW4ZuUx\r\nl4I486yHEmApAcaQlREO8+WFSELPbhAArdP+4BGD2dSD7NfnvZOl8IIVl0C4\r\nsi3hTLY/EqsrqSUIzfsYbiq5ExpR4aZTntE=\r\n=d8g5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/tokens":"15.0.0-canary.419b23cc6.0","@material/density":"15.0.0-canary.419b23cc6.0","@material/checkbox":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/focus-ring":"15.0.0-canary.419b23cc6.0","@material/typography":"15.0.0-canary.419b23cc6.0","@material/touch-target":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.419b23cc6.0_1678820416964_0.7561171005505356","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/chips","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"383045fe4622c14691c76b143f4260fa672dbd86","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.bf86521f4.0.tgz","fileCount":163,"integrity":"sha512-oixdJFLTYA2pgqDEPqhz1E9n8sIoGOMtek0l/s81lpxlcEeaJ/YKIeoc9GsH9Jeew34rpmEbHto0Lki506cUrw==","signatures":[{"sig":"MEYCIQDr85r46JIptD5LJW/DBGAjp5R/iDuS5mNyZFHUAZqCXgIhAIerDAUxfLlyltU2xo14JYoX8ZcUiozErtS8hqETU9Q9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP/xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrflg/9Hv5JV0rh9AUEiu5MJ5ksPrIN3zkNUm0E+BNTh12opbR2GDd4\r\nSI5aJdp31d6feTF1NzEcr1su1tftIS5vmqY9nAju03ByGtEtnU1GpW9EKaHr\r\nVFbvwf76oa91NEapsH10tFAg9KKIoCCxcyRFqsB8wMGYX9nrwpGeJcMkoV76\r\nrmf+bDt4k+16PPcU2Khb5LopaWIV7LncSjmC2ljG1rpGVT3020wGoUeD0ADD\r\nrnbRLAQF3gR8CK56qTOhkyr3k6+oaiOEabNENX7OXYoVbygtDoJnTyUsqhxN\r\ntnP25x+VMj7+lkrcsLWtG0okJdjCfbd1inrfntaFZFHNonpIs04t8ZSHnBoz\r\nlh0UBmWSZpxmIoA0Vhq11tO6Pnn5rt+VPXrVQcuvnFll4IGDaTJUKT+e1Jwv\r\n3LrCIEW19VKM0t0g6ON76izW9sCjMqiG7pzPPvImksDi2CbX+TRTUQRjtm4i\r\ndbqL54Qx3/hJRsPVhWFVnDmARH5P1PqG+2ma6A6lc7QyN93HyV4rZBRd4vA8\r\n5wz+bgd82v2d+TpI4xRakt+IZ2nqodf1GD/qRX290RDr9egsmQACespTQJp1\r\nK02I/dh+TrJPkSkP4jaMvY4rwyasotqYEx/XbkqnUSvAruFq+2jaXaMtI+n5\r\nsDihZ6CcYjgTStGXFP56I9n7oij70Tl3VbE=\r\n=AF9M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/tokens":"15.0.0-canary.bf86521f4.0","@material/density":"15.0.0-canary.bf86521f4.0","@material/checkbox":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/focus-ring":"15.0.0-canary.bf86521f4.0","@material/typography":"15.0.0-canary.bf86521f4.0","@material/touch-target":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.bf86521f4.0_1678835697627_0.05461849956712905","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/chips","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13187f7171316f9fb05b65c3b73deb08d1ab2396","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.11f3d280e.0.tgz","fileCount":161,"integrity":"sha512-lAqIMV+/8yrDvcrOqNhPPxEBXbjHvfoM/ywkLn2U2Igc/tcyRs67a3dXgq2gOm9NQPcu2nYtp9jwKOJELP8i+Q==","signatures":[{"sig":"MEUCIECpZdFNnC8k9w8HEN76mnHC7adtjCioQZfg8ACDGBv6AiEAnEUm8zFj1QsPG5fpL0McwsrBw8EyuLplSmPfGLZjJ/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ19ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHIw//RbXFGj6mTv4U+9knrtEVmKGevJr/VLautn1sqzK+dhbnHP1e\r\n+xJqXx1ap8Yme1k66XXTsTJIKJ+/JFYWommx4n/ZngmYQqUu/WaFRdbRnw7a\r\ndzfaMbnUobkOcnvu1r+XRSaUDOhqdOw+SBdGJFU/8yaCbgrEY6QYsNcNQvQR\r\nlzP1kS446qf1LE5ZY02NvB+l20SWvQJ7FdoDXbJ8zP2LJvPHvZUfybiF8eo3\r\n8WG2XD25ygUMVOWyCK7uCaMW6++a0KYFqgSYPVd7/4I2mPA2mmpCsOb9Y2HV\r\nxH8vx4gJX1cYYcihSpoDEwoRCvYyx8klNFuu/DdEEA+sIwon1cAaoHW1ZHBu\r\nMjQiKs9nbgrqREINkTVPXZM96JhWCUUOFK8PQhZlauDk7/6ZOClPzcOACQIi\r\nwoigJCtNDaA6U9SzPJliCSnxMrACxU9LwohSgEG8T29kZUFE7pustpE0B1MV\r\nscldBtVUajhUg0yxvu+Fo9GpuTW39vmztthoj+B7aTIU3MyZ04h3WAzF/NXS\r\n0TPZ+GW89j9eYrQgWtDZ6wYbwwotZ5QNqegypAK5ONcSv1RzZH+y5zUta5AX\r\nrWFA8PNyCWupmvQm1TqHNjhdxfLBOVM9l95rDmLCe7i7TFUndW8WeJ7BZs5s\r\nG6uyDQDBE+/6gdpTCl8cijCLyIFhxy2UqNs=\r\n=FEt9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/tokens":"15.0.0-canary.11f3d280e.0","@material/density":"15.0.0-canary.11f3d280e.0","@material/checkbox":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/focus-ring":"15.0.0-canary.11f3d280e.0","@material/typography":"15.0.0-canary.11f3d280e.0","@material/touch-target":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.11f3d280e.0_1678839164767_0.4411464654748598","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/chips","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b281a409a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00a494a0b8227315e6d8301d0b422e966b101840","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b281a409a.0.tgz","fileCount":161,"integrity":"sha512-91NYdhK6Fn1VrO2lmDOXyGW9KcSnq60vjmj28WOvcEDt2zIWQzcvIEyafbXBCqbqSkuyh5A1cxv0v2zUD1Siew==","signatures":[{"sig":"MEUCIGQqnhtYmGnyE6PNy+MkHg1LHCb6DKywAk4sVI7ZKF1bAiEAyq3iDlas/kKCRtPBUfhPc1oBcEPUyNdDKg/uOtTudzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdCHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2dRAAh8gEHaatcd3LvmbVGsuSI8h0GijiEnME6Yqecoa7is4PtWF9\r\nrJJILUXs7/cvpVDyHL7MRJlO4J0i793HJApc9bcPMbhm8MFhoDQWxp0CjyIJ\r\nm/ZZkyq8yaaMEWv2ZQm4MB9LxBgghN3iq+To0KvNgGy+fy/JvZSFKX71Uaij\r\nTWEmuHiDBhzGPseO9p5XwyLYfZvoLylXKiLUy5lzUNUPMihvDHZB8PJ1+TQd\r\n+6DoqoHezzWtSm9iTlACkCGQfmerYVkevrKdU6Iimht0H2xVS7Rf60+AMhfY\r\nGQg96NMWRM/qytUVeYuscobPUox5sBzOJkD+DgB48+TdURL/V5lvJirL7dBm\r\nhYebyPCxXLDEcnh24cc4QkJGd35Vqv7Ba5m2fhqoa4plDG5EOG/SwNH1QPeu\r\nvdD3Wg04bDJQSKlq7NgohmyvGwSeqspE5LKisWKZNoGWe3njkXS6W/qsxY7m\r\nrTjZyye4n8KDN+zj6HWbs6VnhZLVgiTVwCD++aSF8mIRAYrrEIhHANIz44FF\r\nUb6gWykfrXYvW8r4G9dEO8ZgZYSTjyUXXRg8kBsYGcHRljs81YuaL0TnCBSV\r\nnlPu7RqqYU7jvNODkT2jh+iLqevqloYY+Ld17A6NMJRUzwUSA8q6eDE8ZM3S\r\n/7Pd84No7pI/UjPY23TdnxKAyHkambxD1O0=\r\n=1dtf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/tokens":"15.0.0-canary.b281a409a.0","@material/density":"15.0.0-canary.b281a409a.0","@material/checkbox":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/focus-ring":"15.0.0-canary.b281a409a.0","@material/typography":"15.0.0-canary.b281a409a.0","@material/touch-target":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b281a409a.0_1679413382925_0.2675070594675599","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/chips","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.39e473690.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa7d18d7b87e5fd37a6758ba8401caf545cff78a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.39e473690.0.tgz","fileCount":161,"integrity":"sha512-JzmOI5pMJ3Uv7NvgHpERN6ExQcQOxSHf+Zqc44PGGs6FZtqoy09csfhEUB+v1ODiaZBR5eBgciL7gpEW9ZzdfQ==","signatures":[{"sig":"MEYCIQDgYcZ7HO0fSNhESotpc+Xcte5gelTCV4GPfgsx6X6EagIhAPHINgGkxxxy2qxuwlZJyRfwN6BJEGGsnNOU7x85cFGC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe76ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Eg/7BbGgchyXaVrhU1gp7hr+ObX5wf5Mk5nMExenVhlPxUkQC128\r\nDBk0BZ87cJxGJCJhudc0yvkVDmEhdjOc/OqVR7ISjxG4bIff3AYVBY9p01ql\r\n986Pmn6aaNFXZbeyEhEtOXh7095nDso4/vYbQggp2Pk/IkjtZBWeOqP0gdPL\r\n6M8K4e6wdfTng2C8nqpqgoF5tkr3lkGtj7bxVOiyz9tHXaUT7n1ojZFd7gNI\r\nlXtiSH7eOj8BBqzXmbdR//m3oyP/h7Ie6He/BiZmD5Zk6eWsKVxHBAabJj2+\r\nS7jtLzTBRTg23o68yHc7aW4vB3qnlL+iBeGcM9j1WX7FpztpcQq4Uy9jIDew\r\n2fMqyaSSYUh+S5sYODcUs1VhYjGWf4H5TjcbnaMvX4ouOLxML2svAoFHwq8A\r\n5ooJMaxMqQciKb/We6xWoPEW7A6YZrMRwo3DuPwPjLH2O1OKhnCb6mmZIkq9\r\nEksJG3FRnHTBJ2PK1dQvLp33g71P7oMJ39feR1Hs6ED90PuNveq+Ub0FzJz3\r\n0/CQDC7yaFT8Fgm4Bfs0xMLVToKJtCpgKhzdlwU4dVolmZeQBXVtepQNv8Wi\r\npQ9aOwYvFGlSCrAk2N4HMI2rfZSPMPRVigTeb9jxOcA/G7iVn4zGB62AIygB\r\nbGceF/rUTvo15zfLf/T55WPtgg0MwC3REpQ=\r\n=Mw9x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/tokens":"15.0.0-canary.39e473690.0","@material/density":"15.0.0-canary.39e473690.0","@material/checkbox":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/focus-ring":"15.0.0-canary.39e473690.0","@material/typography":"15.0.0-canary.39e473690.0","@material/touch-target":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.39e473690.0_1679421178752_0.947498585519746","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/chips","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a68ac01382031f29cdef27ed7586bed62ad5896","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cedffb44c.0.tgz","fileCount":161,"integrity":"sha512-xVXAm4iERBjMFvBOmj78h+Zg8b0knfQXVXPB9xTw5w1jClsyfc+I6CZgUdwng/xNXZOCUeHB9Snha8CHIiOWtw==","signatures":[{"sig":"MEQCIGbZDqHses7PHFDTmlDpBbnHIl4naLTP8gCyV4+XRAMPAiAh+VEXa0+hjtlZ/Z/osAuWV9Mv2jABGAKfUeBzxuwwCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfCdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfVA/8DJJtD+LwV2gxp5cwtArfy9C3C78NRQaHKZ/ms7JhLf7Ojd0u\r\nVjqTYbttpUWIyLFkm/YWlp5TPyno9J3QjbPGgNg3CAF9HYjQdifzYFPeK8E+\r\nSeKGwaUNmHzlPsSbXMYA0Lc09AOav+AHiReVtuuRr45GIu9+y7MdbXIIt+VF\r\nUuCu9ubgE6AhNvzfURWNs+onrbfGj/jXZ/rUzas/TOULt6gez8MfbYyzJF/g\r\nKbR2Eu1NA5FAKMbMk2J6DwTPboHHpzwW0SLTYRlHdR0lv6C27QYmIkjxoebw\r\n8nxj+yXfiDRyDeGmzbf2kHDX6OJMuPXCABCgDq1CSa1EYZM88Oi0bMvbLC3L\r\niSLnnwfeVAfeF1jo9zxSE8Vs8mSdzNn6TNn9SgMtBF8R0lHYNRN2vfzDa5Bp\r\nFXN14lUeBtSpVHGqIEOlan2cMMi7Nej9xQdYmcFWCm0sByJKXVKUx7PiusV+\r\nTI2wPvOBdq3A1gefKBV1WHdYnscCrGHQdZYoPQCYClwrKCXkfIo+9UdJo88w\r\nu/zc0Gmc8GDezxWRWO0EIOh8lZ3WYSKMrJPq5rPfwNPeZiyxaxH+NnjOomuY\r\nTncdNQGT2j+mLm/FaU83Zwu/39By8L8o0dia1SYU6cQMLebFKkRDDrAxBUr5\r\nTKloSGiQ/2cOo9uMj1U6G0jdRmWasfwmKcA=\r\n=90Ry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/tokens":"15.0.0-canary.cedffb44c.0","@material/density":"15.0.0-canary.cedffb44c.0","@material/checkbox":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/focus-ring":"15.0.0-canary.cedffb44c.0","@material/typography":"15.0.0-canary.cedffb44c.0","@material/touch-target":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cedffb44c.0_1679421596951_0.8261141553270135","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/chips","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f68fa861c91e9448c31e368aeed3340518aee25","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.36a4cba99.0.tgz","fileCount":161,"integrity":"sha512-XwK4rqzOmSDGu2E2jDKqgLEjyCspndduuWzIEFn+SIjJ5hx1ApVMjGMzVpjve/r/e21SR9Bb+G1pBe0zt3QTgg==","signatures":[{"sig":"MEUCIQCaScBAsmua2vHj+8xdsfKm1ukr+YiBQAKawrr4s6oeFgIga45Mm3kDs1eYTeNmUiNPyWUwqiofYDJJX1MuXMnG4Fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIykpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqo7w/9G/Da7Im0E+dY4jTKDmHMlbx0PySuw8Ac7S2ROGoS6NUqZUzD\r\nbKrCyQCnAXJEX17wlD13/4q+5ZSW6Ym0By2pKQpSOQXqkOz+8ctP1YMrDzQh\r\nsOc6xXkNxCy4nzSmjLOqcDvIzYmquW617EyoaB8bAsVLAfSeupjhTL5Ui0xF\r\n2frTQqmLDp221wHA1dx1T660gsj2UW4Hssweazhe588afmzAdhGJbpp8ov/i\r\nWilOHR1cfGxJ77oRh7ZpIUfdanMrEBsC4vPc91+JBt+AMHw/QbcA6aFWU7qn\r\nc0IHD/6Mmm/alEtC72anGIH73KIuWeeDJkLT2+x1nEGiPa4tZwvjz1FOuJ7g\r\nhnKatVkK2tDlfFmtvWSQGyUcyq2jUwfldnr8A2uEEWDy0c/rgVy2in2plTtP\r\ncygG8LF5Qw/Fmx2MvUTKLteIxfnxtWUe2Q/zmtbbWlu6o50v1yUkLLjGK5kB\r\nFuIgKN1n5bX+iO3RadrxRx3xfPfOERCA9+xboH3BYHkzFob1yyyAv+Ad2lUY\r\nL4fVw6Gb0VTurj9a0niymbl7+upM/papBsYKG6eV0lnGacmZhDoIPrAyj+/L\r\nwps4Qfp5FRy4jr0a4wzTg0/7szvm0QaZ+fQMBRh4kFIuP2Yj9VhoO9AtT30m\r\niO9DzTL3BWke8UujypfePQFOmlqBtDuvz1E=\r\n=H3pz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/tokens":"15.0.0-canary.36a4cba99.0","@material/density":"15.0.0-canary.36a4cba99.0","@material/checkbox":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/focus-ring":"15.0.0-canary.36a4cba99.0","@material/typography":"15.0.0-canary.36a4cba99.0","@material/touch-target":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.36a4cba99.0_1680025897729_0.3008861282922144","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/chips","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07e30a3c9bda7ddbfa3c1be041e9edeb667d0c13","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ed7e82ded.0.tgz","fileCount":161,"integrity":"sha512-Ny9yxbEXtFJIaKYADlWGXmIaSU89nlUYZq73rBncAvZpui5qksn1u7iGy9slPLqMauAsQiWEfIWO8AHKCUWLVA==","signatures":[{"sig":"MEUCIQC1W4NADJ0roRxaN8I7jyx0sFIC9QoMa0dKbuyV6Iiw7QIgDCDx68hZ0Q9BSMYjI2Qu6eeEm55Hc8d2TcOv5o/oBFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0/BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyNA/+PxhtG115E2v8DqSSOdT0Uw87oUs8RtZpyngb/vAPKN9M9rjM\r\np9UY3WD1PpFUgBji5C7A4XAoOAkZQ8juK01fiSAr+HEhp+2+O/EG/mhog+KG\r\n/uAuC9oa0wPs8AF38hD/TDjQBEyD0am4jEdImqYaryEXJN+kI47wbnh2qG2l\r\nxwdnvRD4WdtagMJ+fSZXwpZiC91jgp86Pp96PDLLBnrwNaEZV+LPbBwN4G70\r\n+CkSuCHADuJXsz3otcaARyqva5cfxG8NgFIIEmwhRGmYmBhHQGpxxBIrSO98\r\nAaC6KQnnbOBWbvg3UxVjLTK0wkzX79hKwS332paVkPkn3Avw9iVrpdf1BJeN\r\n8fU/Q8WrKfFXORGRQzjzJAwnm81uw/iFcZvKsdmJK/Ko8HgOCFCh0wCq25o7\r\n37A98q6lvMq/y4CHQkRV/ZZ4yaqdhwgnKN5ZvI9juoJ3lFEdVjMgYuDrH6NY\r\ngMAKXhOVIdvL2EbX3pUEg1v0L6VOyyRB9hMe0Tcik+Aean0W7utrt4mC/BR5\r\nCSvMDwzlsB/BSH7SwSCSjIaR85CE3rOU+t21pyyYZhno610JndKnMfbsOID2\r\nDa0cMqbb+7tuNRQ3wkt1dt6XE4ssHGyDxNt4ydGxon269S7YUWc8PG56zqRR\r\npY7xO0aBWHrM6DEFpROtZppRK+iJXooEO/M=\r\n=PwD4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/tokens":"15.0.0-canary.ed7e82ded.0","@material/density":"15.0.0-canary.ed7e82ded.0","@material/checkbox":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/focus-ring":"15.0.0-canary.ed7e82ded.0","@material/typography":"15.0.0-canary.ed7e82ded.0","@material/touch-target":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ed7e82ded.0_1680035776968_0.4196854397243781","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/chips","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0bf2c0ec8cf300da79af937ee8a9ca3371b8f72","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.55093ee1e.0.tgz","fileCount":161,"integrity":"sha512-gA5BCXGRsK3wOTvK+VFj3xBfwXnaJpSEEFUl2jZ7PoZtkLqYUKeICY+CTEyvYdhFd4fOkujjVXQTYRbliDNbfA==","signatures":[{"sig":"MEUCIA7df5p7ok+jolzJJwmQNxysN90JPzq//pJybLTzc43sAiEAkADeuh8NVkeLAfQk5Q6DF/g7O7muxzjNEESIPqbcsKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIhzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnhQ//TLljKeFBI12a6LilZIxZXwAnRYR6a5Z6lVJ+2OsB7p/9z9+k\r\n8LqBxnYpnlrk3HOFeeD0Iv0MpOxHgYXshpyO1liwnKpkNgGGVZV81MeM2zui\r\nlby02v0SlcQqyRd8EoopJy3DS97+sCM42u1xQMTZinIE2zq0MmfmM7WsDSz2\r\nLgMlANbxN8Psze6DQCxgD33voY/imAthux9YuYAjtQjpeu/VZc6dYFEhhy+c\r\nKf6XRBAL5u6JBtPBqqypDD8FS6UMVs0ub9w5mJwxPPWsSS5+MwgEX0r44GlC\r\nG8tMv/qmKt9Ek1F1KHTbQNfUFNU+oeLjDi2MUG3fObY5Sjx+wWZOmcjlxLhl\r\nQHN/dJu1QhT7dSCMHvKZUpQ77gM+Du4crEGjg0JAC1+X7s1SOynZXNjBzJGB\r\nwVhrGx4eI8X7kl3FuNm+jl3ymui3ue/HzA7M53S/mdglUg4rNIimUSvZ2kBU\r\nYEV/UsQcIcSSTfqSHov2l3nipR7QDgVn7s+vUXWiq3C0Xi0Zum5doUNn1EcC\r\nfYYmF+YIgCZflQ27vJl5JFROWNe2sNmGJ1Z/q6vR5kBqcfcISKvcQZPcXcba\r\nc6M6khb/pFq4q+Gqt6eNmDkv1QKDEDoPCdYfiVIvticI3LUiTYGTKA9/Iw1X\r\ntpJh9m1/3q/SgScB/oNBfo/mRA5LtgVm0dE=\r\n=MGNX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/tokens":"15.0.0-canary.55093ee1e.0","@material/density":"15.0.0-canary.55093ee1e.0","@material/checkbox":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/focus-ring":"15.0.0-canary.55093ee1e.0","@material/typography":"15.0.0-canary.55093ee1e.0","@material/touch-target":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.55093ee1e.0_1680115826779_0.6948573653390571","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/chips","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1001ddde772c97af6a7287a32451b5ecbeb6d2cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0c53abc81.0.tgz","fileCount":161,"integrity":"sha512-rAez0LVO1b20Ucsg9f+xDF3fAGDEdg9LXWeXgkVdKnEtSQiAFPmdJU1uYcTv2hAB/Mb2/af6UeJ1ylHTMrav7A==","signatures":[{"sig":"MEQCIBA6QR6lVmSkjnNTUxxOoVYNl8k+GED+g+Zu//jXNJk8AiAY9PyiAkqCRZmYSwXan091vQJY5hBzoOs1YNnJvfYA7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3UGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo02w/+IJYcd3rSSPtnnDIaWCYwaEj4S+itBOk6cRgr2YNEVVPEG6I1\r\nfG59RR9wL3630cXsD7skOLZgtOsO+h+8tol4zdlhwy6BySldqYv2DvsOLEkj\r\ngBhHyHego66axi+dMjaWjGHuGCWza3d0IyUuEQji2U9hJaDXDi0/VKVVKRQr\r\nzBGWN0FLAvDMU9kOrwDmy/pBELBf5d28PR8CwcVUXMbFxnHgQ8IdC/JZGQ23\r\nS52smJwGK8TdSoU1VnEYZkqswzIM/eI8UyhkiLRkqzsIa1/fpdmARgktKoiY\r\n6AF9OIYQSjU9ox2CQh2ntsOVO2GO3Tf4IXUpI6qdIcEBj8umnY8eQAnI8mdl\r\n/ZDNOqwHPSjG56mBk8TtPipCry7ssmie1QyRkjh/g2qlSbyNqzuUgsy4vF8m\r\n+6IeIQ2Zpkum0Bn2cMhiHbIUiOHWXA6lKGZI7mdlyDi9Gak5uZl5++t+HbgW\r\nt+Gi4bTA21rYf/OPgWkCRciWkWthdVAsp5WSeRW41la34mQkGyyzyWKhS2YJ\r\nBrTkqvBeInLGExpYUvZAfzsdtPlKxVjQwRkTEYzf6hw52C0VXShaVTHQZSR8\r\nCgaZE5oCxNhoheJ/urlukBk4DGMilfUC4gErIQ8BRVo71onU/d4zem7UtohO\r\n4PBnuCSq/RHkIJ3EZp7F+eqTfMdrzOIv0zA=\r\n=BcMo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/tokens":"15.0.0-canary.0c53abc81.0","@material/density":"15.0.0-canary.0c53abc81.0","@material/checkbox":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/focus-ring":"15.0.0-canary.0c53abc81.0","@material/typography":"15.0.0-canary.0c53abc81.0","@material/touch-target":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0c53abc81.0_1680831750661_0.36346999655738266","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/chips","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.51311e69e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a6c7278621ce6321c6b7a75504a158e66a74fad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.51311e69e.0.tgz","fileCount":161,"integrity":"sha512-FbL94krGBFq4+SGY+bS8Lgvx4yRtLAsq+4JYomsl80zq3JUJxV1lN0ElxGi9XYY9OSS/p25YDSS7+kUVeHn7kA==","signatures":[{"sig":"MEQCIHh4n06DPIqcGNqa9bV0P3ehrcsww/u2DTxRTxvyAyHQAiBoD3LLOd0PdjOcuiLNosCEMAx3c2DaDVwsIXyUoxq8RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFxLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlhQ/+KrzGgNo4O2c3OtSTBdCvrPeLmnbv+5eod3MkkUpvslCUdakc\r\n9f3zIJD5Av1chF0GGim7v5lIp3FFa4/YADvja+M2KTbTsHjAdR78a427OPB9\r\n8f3tph9rRy23QtijmMtqgUtv6eW5JCnrR3f3vgkT1bhy6tD6f+VGy9UcyM83\r\notfJkupnV8386dcQMq6mqIKrGwJfT3W/GWkvzKZ6wpJwPgNxDvmy9VIbse1B\r\npKujjTCBA57GH9qY9EBbVdweYaRSQCeYBxSs9gqauqEw8HtbSE0V0EhJUglI\r\nkhy/NkVDmlylYbnlqrZyTxTaLZPKhaUAdy7x/+fNb1OBlvuOLHcG/FENBx08\r\nIvFtjimYh6JYmfpGpYXHhb/oP5RzfN2fOjXSri3DVPjMKoTmFyimODmcWbpc\r\nRyDaDUfIMpQ7gEAQraWCpW7zYD1oOF0Ej7P9mOkFjFDjq6nhqVHXZ/7NXVqG\r\nTo5fzpWT//x1GwT0dS9JXV98t5OsRujVh4I1GPQryBrZf9zFEc95jixQw2re\r\naWjG1B1U0OgkGHo5Xvk8qKLgWWdgVlqAzOGCrtxScdeidwZpbgc4gFujswzd\r\nzc1S/3OcSskjOBCGGNS5YYJc4n69qCjWSnix9PsJWHxt3eDCh8qcgphlcgDQ\r\n8jEEgWiBJt0UP7INFQykcM38oYmsuS96Ujs=\r\n=Htg0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/tokens":"15.0.0-canary.51311e69e.0","@material/density":"15.0.0-canary.51311e69e.0","@material/checkbox":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/focus-ring":"15.0.0-canary.51311e69e.0","@material/typography":"15.0.0-canary.51311e69e.0","@material/touch-target":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.51311e69e.0_1680890955717_0.4321348183967362","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/chips","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeb0f0b1458640bda4804f11032030a3f00ffbf6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.113b1a38e.0.tgz","fileCount":161,"integrity":"sha512-jY7NijMTjJzY6pYUsw+/aneJwBHNprcyhcKwoXy95hf7IXdFOQo6dxejekknSKc3tzWwtTnJF71fpgsUoBSPgA==","signatures":[{"sig":"MEYCIQD7MRM0oOy+NDXmSPNYacFbRcubwXERF2tkpPVk9oEY8gIhAKCaCN1fkIAk87Nm/3pue+ceyr7T+Dk/xa4wUYClfMub","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIW/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql6RAAm25vos8ZJ+i6Lc/U1Spe4Oiap4O7LVbtMAh4fd1TPJWDUDHI\r\nGFEHapmnnB1ahmqvT67YVq0sTVcd57cEznSmrmRA6E32GyTXee+1MjKHwPba\r\n698d3vcNykeYUJ3QPjl9du9VrFG3i7OYjrLlCqzsKTsksd9vWZHV9LtsCEfV\r\nGRreuwPqHrf0wUWRzu35HyDOHgXFqcnoPVewNtxlVCtitMDNTvgl/XKHPXdM\r\nKq4KXbQyH0Tabzp8Af1DfpdF5bgMS7lKSuWKxqShk9aMc7fzGMTvqO1KstJl\r\nQfMnuL3zYVGgBeDZDpF0hkREUbkeOVZmez7Ha3TunqEvRdAkByTbSTqGJodq\r\nL3VWKdcM6d5rQk1UOw3Nqyk6iXwiTpST6CCKFbiGIbaaUqgmENtaFb3ChW4I\r\nxJZVsxX6Oy4olW8tLjstnVeHll9+VM0hevpfhaKffocnvwrpt4Puitw1H8zk\r\nZGvYN/T61cdbsZZtLJOUCDx/zenO8rjm67Eji9zQm209k8Yi5y+xfw9DKPEP\r\nFfbkOgPQhVGfeCBZEGfqwioOamEJ0s2sSepzjxBAEUwIeoJFk/INkTnCUX/H\r\n2/w3Hh+xowLgey2pu8bzPe0yRcas1rj2Zlnr96NNWhwtHn5dDkM098m2fbF6\r\nDohS7C6uKl9sQDwHOEclpCqt6RgQ0PDbszI=\r\n=qhip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/tokens":"15.0.0-canary.113b1a38e.0","@material/density":"15.0.0-canary.113b1a38e.0","@material/checkbox":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/focus-ring":"15.0.0-canary.113b1a38e.0","@material/typography":"15.0.0-canary.113b1a38e.0","@material/touch-target":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.113b1a38e.0_1681163711408_0.903266127718644","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/chips","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ea2191426.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2acfd0eeaf062041a4517c6034bc1b3f3569fb3d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ea2191426.0.tgz","fileCount":161,"integrity":"sha512-/jLb3Jyb0VDWSgR1tRlnYEpfx1AY3D0D0D7rBHe1PoGDm2Ux2c52iu/WgFnH+tcpa8pfgRyvOycQa9/iZ0TTeg==","signatures":[{"sig":"MEQCIBvR+zsEoQBnf3RdE0YhN3kGeTZz8Eu0PNlFllhqSbILAiAgR0XtFEMuAnfLRXRfGsbXPPzCmoqFhNFAqg7WySKoLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdenACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Rg//SB22/IK/2xOllXuMqv78ruaotOB34w7BRu9HT6bNuCfuP1VC\r\nwmWkbrHILyIa+BtMgFUSDnnPUf8YA2p6AjYJC+Tf8i+aDQL4SRpFZQJhsP9V\r\nIHAurQ/fc1DY6WA+uXI3v/B7VP4GgVzPdUsLRGZiA64aHu59pK7aDDqWLKIn\r\n+F2dOJWKxkOsGT07AxB0W+ivhZ6cuKJS6Xq1Ib2Rad8EYdpR88KiHcenrARS\r\nyzZMKo5VAX07M8jFYPtb8END8ySNxoOJAfD/6AxIOs3fdXHTIuHnFQgiG2xq\r\nlcHLu+89CpJMJXhsbo6F7RV5gNGrDN1Y35iGvN8hzHUDjnEg7CAB7RE8q/IY\r\n5NNXs1g/612SqL7aZFpnQzzIrr66ADnCQLzYHWHJfLHwHLQ8uEbCxIkIsY9Y\r\nNJFFxHF0SnPet73aCo2YhgvVBUq7c+mRxmGcrpKLjRae+/IJp3ggMghCJMtT\r\nK+7boXx73MbHEZmcWfL7ksop0GD2mkRgpKoDlWJUzhN5Y5OLuKSwLc8GsK10\r\npamQupdp1RmgotFV4vISHsOekLfcDJpQ0d0V2grkan2SpraDKKVfRkg59nbL\r\ngVQVDDtPzUfrFr0SHKNZWwaEMAnNvolnUWB8i+Xp+KIbUTjnruvskcH0TSfv\r\n8hCuz9KKJ8tg5NF0iK1eTwSaZlux0cqpJ0M=\r\n=FXJr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/tokens":"15.0.0-canary.ea2191426.0","@material/density":"15.0.0-canary.ea2191426.0","@material/checkbox":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/focus-ring":"15.0.0-canary.ea2191426.0","@material/typography":"15.0.0-canary.ea2191426.0","@material/touch-target":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ea2191426.0_1681250215247_0.4370612167425507","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/chips","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c26b168b63b79ed0677a83e9573bff4d04cd61d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.5a5c38538.0.tgz","fileCount":161,"integrity":"sha512-jJ4sa5T31TvOCpOeV9g6GbV6fycbVcXSxB1G/rUYplkS3VBD5OLBxcRwEN9GlAmh9LsPxeJQPs6ZyLF6qKsL6g==","signatures":[{"sig":"MEUCIQD+nc0AKDPjaVQfkfgVNZ1KiO00+zgdMufcuhFDdyAFXwIgVK0xUwyScqUQFsqyIE/RmE5fbovk9UF3yPwXsrDzlCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDdg/+MSk/cvGg8FxyZWQR4Fp0wT5m02ZEyybpcIuD3Oq2Pi/dlSJ4\r\neXNiyVPXHrvm8XxwrQuN5BmgWCCy783Mzi1vqsOlLjuerL0J9A21htMtYZtY\r\nSuZNaa9gYivBQ8BWVeAWqcwNcBLxVW4Vgn0XcIJzrGQZhTZbGz+VFTvSM4ld\r\n0W5cy9E26wzHW4lhxBHGeaLW+lnOpVazKjCTouF2DwduuMzewbdXsk6J+8oa\r\nY9E0iq7BGveZFggavGHHTD3ulmNhpFJj8Enr/syRt6BeZP0WB/B1VzvE76KD\r\nSSDCpGO/iw6b0nspVQs6fiTtVvGPSIiOZStdr6HfK/Tcsfore5ixIz19HPHu\r\nEoNKyWrbowpzE8/E6TGY8gYsRU7Q9+AVVUMcnipcSN2C3vX2mPuLmi0BTNwJ\r\njvlTcTsTjIVA7LNW7lIhAutnwpwe37vmHllat1MTwS5MGfq1OEgV7K10Hkum\r\nSVXmAZk8iRAl1SxBhP/4wtFiYlZepR0EHTOr30/U6q5XrVwponDpEiKFlUHg\r\npPoHOTb6qI9nI1HcxVw7CIghXhQXelJ1mWuSCrpeaPAA9oAr2YFmA9478/zP\r\nVcz2fuPZHYKCSiyyzWkNJsF8kaoNHny2hg0d5q/xoi/IlN6LFT6GQj3K2q8M\r\n9JIhyZ5dVA+ijnO8VG4O8m+vg2FM54TXeyg=\r\n=99z8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/tokens":"15.0.0-canary.5a5c38538.0","@material/density":"15.0.0-canary.5a5c38538.0","@material/checkbox":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/focus-ring":"15.0.0-canary.5a5c38538.0","@material/typography":"15.0.0-canary.5a5c38538.0","@material/touch-target":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.5a5c38538.0_1681252302887_0.7572955486276718","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/chips","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"146933e663982925584921718395e441d848f492","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":161,"integrity":"sha512-oZHXAp2yKxvC44/4Il/1so3IJBN6Tdz9FG/sjLmb7hr3hwYSsi7otAruTnTUlSAnxVq+llSNqqlqqV/lreNSiw==","signatures":[{"sig":"MEYCIQDnxccXcT1sCgHo8qp6rlcAnVlMt+/05Ux0NNp4q/2s6wIhAIaOsCg/ec38ACsm7TNJQxFZpIRoZ3DKSS7QqaQowMD+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeffACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs6Q/+KCc23ICUamWL68w8pBK+Gl5CYJVDpaqf8kGfeS1KOibquh0l\r\naMqLTVb+ErAGdMN/67CeaKNilLu8bSRdGg/kiEa2OUUqtd9dY+B0dhhHnKJE\r\nctPhLW7dxNX2ByyMt5eAaSas7Bez187gu8wGOgUwxPeMukasCdfMumDtqJss\r\ncRed1z9hJVFq7NmTPoaW6AiYJwmJxn1BC1mFdzdoduDgRo8zjTgXt2IH97Wy\r\n9xCOf0stZPznr+RS+kST8YzWRbZtr3awk3vDQ1kHpkXFzNtMeGqCnhNoEvtu\r\ncFMzDqDT/qpHqQbsXpd+WHR7VoCKxE9Wam3nCUC0ZNu4SgG4CpWjjIjFsNIt\r\n8ZgJsJaiVzwObKz4Ibnpx1yFPKyyGBGXTvAs5NC1Xu/e4+yDvLW9R2KAoNc3\r\ndipLAQXzLKBDBmla/zN5zPcVPHZ0yfYnUFl/5giXgaijPskbyi7pIPCrAHQB\r\nJfPvjxsMeaSwFyUq0+KAxjsrNX/W2exI+Jxnb+WStsEtJuyxhShyM6UEZ23E\r\nFXZFGeQuR888Eb+WsuBzgkjwoGQKHFk09v72ZWG8SX/3hKOrFfYfQaF15IDH\r\nNMF/xDD7LZ6msHaTEMbRK77DCwpV6pbkE5XL34NjG9Um0dxG+HVIzCJvTIte\r\n4r5f9TlGU4n8rQ2tPooJOeYUJzhVYPBwy64=\r\n=7J4B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/tokens":"15.0.0-canary.e4b5ea7eb.0","@material/density":"15.0.0-canary.e4b5ea7eb.0","@material/checkbox":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/focus-ring":"15.0.0-canary.e4b5ea7eb.0","@material/typography":"15.0.0-canary.e4b5ea7eb.0","@material/touch-target":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e4b5ea7eb.0_1681254367343_0.09346800538396538","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/chips","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c469fea11036aea4f554deef6ced102da71c0e14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a094dd9c1.0.tgz","fileCount":161,"integrity":"sha512-tFuMTfyBP/o3zLZfSd4FPcB44/xXfzG1zU/N8px1ciMkrwMa+IB19fjCouFwKwBQSYAkmC8UrUN5RXHu9Jc0WA==","signatures":[{"sig":"MEYCIQCZJT/aHIX7ugJCJl5kbtb5t0ytrHOv9O7KAp1LbwSbcgIhAIO1ltyyTz3PHGPe7Vua5TCbGzC8egY1Ok/T9J4PlWYi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdcpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopPg/9Gh9+3GMGbahcQMBu/FZBVV10RoLyJJnz5pELZiGAlb1xZaZS\r\nxZl8e85eWJgGY1Q7tcI53Uw0PJXq/J8MpeYEr7lXB76CzkI6xtTjthB8L4WO\r\n6stJ61jaFOCOojamO7Qa6BatsV2jyCFNmpsy8w3hWurZHlnkvqENPPzMw0DX\r\ntmPD74+FLOKFu8BAM4BhdILuH45StrCn+V0KPR+HUj6mvL+vJvAmqa966SXm\r\nq2QHVnCm1zqoF6NSS6DrQvVH6spnsie/Cr6Er75+ca0c5RGNRCI7vviiVpUI\r\nKKEjqllbXwWDD2fq/sS6JhGqIWORXYXL+HxWKPEX2nqYAQf7VQGQ2RdYjh5i\r\nW1KBANdoOW4VpKMY4fL669bfsMDen9Rd4HMq8GwxaSe9IOOoyApJyDL4xU9F\r\nBJ+fvAqxQSbPIzZPmZvhsWpQTHrV9M+J6LzwIGXsF9nzfHxwJubB5iWx79hN\r\nqwq0h0JQP9TuK81nb9wZkNY2vj0SMbnx3jWDo5C3nA6dZvdJ0zGweoFOL9LU\r\nxtGPELs2mtG1NLIYM/B1o1IbQvn/j5LE238QEJBqxElgTA8BCi5CoblPAgc1\r\niNu8uiPhrzMEmLRHl7Y8eLDvACZD7740O8P/VR6CARPjfMmxTXcjd75CL306\r\n3a+VzrgxN6s+VJ8X9G9KQMmUS6B0WosVwUY=\r\n=LT3P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/tokens":"15.0.0-canary.a094dd9c1.0","@material/density":"15.0.0-canary.a094dd9c1.0","@material/checkbox":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/focus-ring":"15.0.0-canary.a094dd9c1.0","@material/typography":"15.0.0-canary.a094dd9c1.0","@material/touch-target":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a094dd9c1.0_1681512233504_0.4454962980998871","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/chips","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f771b091c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7778775ed07e185a905419ac5cc6c38add3d7d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f771b091c.0.tgz","fileCount":161,"integrity":"sha512-hYWVqpNDb4hm20KcVPmVUrJJcRSEOaXsyxNWLBUBjLGBewJJBtpfKr6G33p1lmsbFEyiFUEFyA545f3a4470Cw==","signatures":[{"sig":"MEYCIQCqxfm8TpACDlGAVloT4idqgpuTASASn8nOErJmBqlX9gIhAJMND8dRuDadhHLoYqAtYuD7UIg4opUVY8Z0opxNyggJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWhLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyTQ/+JohOnhTpU2Ym0zOsackqMje1Oo6BYM60PAS+60U2xclcLoqR\r\nSuxygOz4e4IukfUTYJwM4FU1veMYHXLGloMlmLvxCr1p/P+T9fFDCDGxAKba\r\n5+VZyDj1QxcPsPJyv/nCgazZq19HEZPE+rH8N9yuRMvLUcRZ430lT7XtH+f0\r\nwRzYBqPLYRB1nJnn+EwaxAV3B56hiB7tH9Ub8T0EwLHYIUQt9qJ5awwu1/0P\r\nd4o+M9CcZb8HWoRFvOBVz+clo7q3nubdQ0uhc+TkJGQFOIo+1Iomvi2q8b7x\r\nUxkqeKBxAKGwn/mu8yP81j3B8dD+uXJ1LLp5BBChrapiYmalWvetbWwv2LCj\r\n7+9kHmYgc2Nki1khKKz0AxSTIL0vGhn+1FWV2IDTV9ozk5W646bFyn5Ootx/\r\nKD395zQtx15EYzhpTAebx+WaKRW4AdexRN9cdYxmD8Ok1AJcevRYg3czT2Bq\r\nNp0wdidqdDFW08CaAWsrHnnXY/yyq38CnVeBxnhkrSWdTjPNJc9rurBx7ST1\r\n3BH+SdV9MdqkcJHaYep4OVJEpLN+FX7TScYQgDVUUtt0JEgwQoOLXdL2PzYk\r\nNWiV+tcGndo4/gEXpIBmjIgQgfR9bY4OTnGElQOhr9F+1MhI60Msw9CxlELA\r\ndnd9R5p9K132ZRII178WsVdG9WqRwYM27Jk=\r\n=krcm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/tokens":"15.0.0-canary.f771b091c.0","@material/density":"15.0.0-canary.f771b091c.0","@material/checkbox":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/focus-ring":"15.0.0-canary.f771b091c.0","@material/typography":"15.0.0-canary.f771b091c.0","@material/touch-target":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f771b091c.0_1681745995354_0.3183469927264082","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/chips","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe4e17b6d0a24c24fbc7aa587910e3f8804df95d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.79b1b612b.0.tgz","fileCount":161,"integrity":"sha512-u/l6hkjXT8yLsMpzCN/wKPb9unL4xPN8X3IcN2waQmvLUNxmkj9H0Pv+rtbYDe60ghkVikmVilZ72QriYn62QA==","signatures":[{"sig":"MEUCIDtUL0i+NaEOYxxShAnicRVAWXPRIXPecsmYw5+NssotAiEA34c18knDeIW3QmHxe8CBl1NTV47j052bZFEXyxJ7XVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHwjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpalBAAhIc45z5I4l7UaXIgowKpTz0kQESpot8iOUkALW1QHVtC894x\r\nZV158YO+AN8iJwDuEetNWKdkSg/tu99Y705RRR1TQhGIEwQIfcL8wTLMv8It\r\nc2T91FIvf3y1ZzzOWkHL8AvAhkb6H0rn1M3JYQU9hGt9ey+D+CdFs56m6tok\r\n8QKUTOkFKpjIzTVWrluG2dQW4gUT6GfXml81HAbKeXFgRh5tjjxZ8R5dZusp\r\nLaGvIB5a/Wye+OK9dTnuDEzbK4uYNHhYSCucMTIyt4sE8NJBzYc7erJAbRds\r\nyf/57shliF3SZANe9a8IXLrYaCQqdTQvXuneD5f/1s/z30WZV6mCtIFVLq61\r\nLupsxorQpd1JjTt6cWJV9iAy6yvbhlKD4DUkzWrO4KsQjsVQ1JaeSh5igGYW\r\nk6oAr3eWY2PB3HWI/TwUIKJNxl33q/qA2eJF6bWS9s233JN0+KVfd81ztec8\r\nFK51OsHAX1+4//MJLHhQhtvEyVC3Bg5N/aLZfV0AvzntgGFDz3jA6UXKwdXY\r\nNzbD4JCrIDIMtZ7fNIzHq6Ekb6BYvftN5cdkJkJcrIAYfdQ55WRCZ97qGEaZ\r\nP2qIYarTiDKLBxWdgVP1jL75qxrwrCi4+v0am7LtbeLobIcREteP0rwM5FVG\r\n4dQ0w8LOa4G/LqtTZf+uOf6a03k9ZEcvINE=\r\n=5YtN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/tokens":"15.0.0-canary.79b1b612b.0","@material/density":"15.0.0-canary.79b1b612b.0","@material/checkbox":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/focus-ring":"15.0.0-canary.79b1b612b.0","@material/typography":"15.0.0-canary.79b1b612b.0","@material/touch-target":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.79b1b612b.0_1681947683554_0.5665105388062661","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/chips","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"575ae26d6dd0e35e489986a46e08b398855b2a33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6f50071e5.0.tgz","fileCount":161,"integrity":"sha512-Bx53wcuWJBo6aAAfqrUqYkbxG5umYJKh4R9r/fvop6Bqk/w/WL2j1H9P55j4MPW0YlpCdy6Tg/APLsG4bMJaAg==","signatures":[{"sig":"MEUCIQCr3J2+Wm2kHOC9Q833Y0w5iLsE0sGl+BBpz7nsxr5tKQIgBUbuMkWMJZVFi4p/HiOOcSUW12tlBtXij8fwOVqffvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwhxAAkKjBzGZ9C5HYEEAPf13s9yH7QG9ct01F0HvcLLLaJ99ODNHv\r\nskuAngpQ/L74ygf7PDvfNqC7nLuzTvcZzdwZ1t/dQ8QgrzgeDMxdzA3NaIv0\r\nKQe2A97QyQe/C3piPH0tzIgZBqDsnOWfie3GBp9KZTbjDUOkonwK7FnIwJqf\r\n2sgCdGoc4304oOSrELDzn6E/YACMYtFbvOUzLqfsomY/HqTzrWxXc0ppW/Ct\r\n3PgK/smrOW4sW/k08DPoJjOwTjQQFJLs2Sx48/QEV5llrN7P0aPivcY7lrIa\r\nd0rEHdSI/N0od5F2altjeCjfkVatk1QHPqHNK6/uy0Za5mjNOOY11ACmqLqm\r\nYmEEy+37skVmlPYmqHnz3sDFdKfjK6YzeTduKbHMFAXdIrlLqGNnW7At3Dz1\r\nkbB1bqBtuPl4mN7JWlzuOf671aNXyHjd87BusamcWL4REXPVRqE45Nip3ZB1\r\nKYXZIP3GkKhwCEV3ZV+BDErI3t9YVnMvsuTuFPv6rg212hC1VmtWKIvIdsu9\r\nzpltOEAhdAYpUhKJ2smaAlda7ADowbZjJiXutQM1FhiEJB2F2LTrOnOPna7a\r\nzYQ39fiyo3RtKsq7/zymUx9iXxdD9i6by+zCUGis1XghjC1JNLa22X0eAvmw\r\nxPZAEy6Hwv/WNQjjOnpjuA1sqFycaWBOofM=\r\n=RBNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/tokens":"15.0.0-canary.6f50071e5.0","@material/density":"15.0.0-canary.6f50071e5.0","@material/checkbox":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/focus-ring":"15.0.0-canary.6f50071e5.0","@material/typography":"15.0.0-canary.6f50071e5.0","@material/touch-target":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6f50071e5.0_1682013736577_0.09930498174001601","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/chips","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ef754381c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18ae84e7000751e2c1f99e531cbf3bf5836a67a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ef754381c.0.tgz","fileCount":161,"integrity":"sha512-aGHyOVBpMjgAKXGZ0g9QVvk1qC5Y6P1TH0INWPOxogGMvft4IqqzVVW6gD9OHNpu5r2uIFcoVijRzdq88rcNEg==","signatures":[{"sig":"MEYCIQDNKdR0rEAYc8Q4a9Nh4nbj79bxolEEfbbH8AO1vbS1CAIhALpBOPKktP/7KrSjvmMV2T5Bg3AIzFC26atJlNE7t2+5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuwFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr72A//Q45mWrVzwu1+j4kRRifNz0IZ5lgXb176KvqFG6/xfJq0JegW\r\ngJm8SDXNbvAZvbeHLWJxXLpF9Lv5SVLbbUlkxCT3QfiDdwphrnNxDnUoacam\r\nd/dblvzXLNkd2266c/ZuB8gp1o9p/ESepu4wKgCbnupp7IGIZrq7iXzc7btZ\r\n2PckIHV0tJYzdRWTKIvppesE34qvbl9HC5kOyqCCPPiwA/3v/JdEwFqO+zVc\r\nnx7Obz7x5xhR1xzsNMxytEgY70JvHGFBLP7wbHmU0ZP6qJW2KMlArhxwhDIJ\r\nDiSaSGmr28iuY13y6xQNzEwZ3mZNbrGFv9XumGAkIqQgeJkaN3UWjNqm5Aer\r\nepCqdjCehCJnjgrktL4mNQVgrEFQUjX2JJl69/AhUUKK2FaY7KWxqfP7aI+l\r\n70Bl13xq4208IsYsSmJQmchSuq8svAheOL29j5Y+sLRRmA8KFVZB15GMuQDg\r\nvyEh1gTWlDPyGi5hJxhLbzIQ4ATD3q/c5auOpnK8z7xrZwrfurNi6J3wsQnt\r\nlR78iusjqo3nJtQjxeMZxJCfY/qg2VpoZRQ/cejQG89wobqy1zSyJIk3S7Ha\r\nfVfLTTfKOmqLv1Hh6Ng9TBsczWXtE6pu7qrXf8CdNCna0iX1ns6xc9ttTEc8\r\nNOUdu3YNTWtsFkv2NYlRM6l16b4JjV7Owfc=\r\n=4hpu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/tokens":"15.0.0-canary.ef754381c.0","@material/density":"15.0.0-canary.ef754381c.0","@material/checkbox":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/focus-ring":"15.0.0-canary.ef754381c.0","@material/typography":"15.0.0-canary.ef754381c.0","@material/touch-target":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ef754381c.0_1682369541157_0.8991067476367522","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/chips","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cd8c15f015b8eff12e0cdc05018f1ee3b01e479","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.69ebf61ea.0.tgz","fileCount":161,"integrity":"sha512-azu9HyTIbtQzyyYflGtaEA2ByRDNFkrB2LCEs3dcwzfr/QUBID7xS5DnIbsdNkyyjCcwu4UElUe9Xs7xeIHitA==","signatures":[{"sig":"MEUCIHL5DSX31eGpFx1r9boIsSQZskvyRAzAO5xrs/b4XuaAAiEAlbxuUpmXTtU7hg2pbXGVOBesiqxB+jtPlisGYoDqv7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq93ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeKBAAjebNy66O8XzmIGlM/UTAUsSLiLbZcgolYriH8XxzlAaa/SyB\r\n5Vjl/b38cVebxkVeykTjDRm6VEAukeQFG8V2A/CECGUIKZ8k7yvjarQfdOHl\r\nTbnO5hTJEO+lez+giKkmccfoKigClt8V8vzPY+nu+J2JJ29Bqvdmf437df8W\r\nrW0OBxgUWxC8eRWTRHbSxky1Y/L+sznS0EYcrtHH4xoGpS8FEf6zlyltj62h\r\n5A0Kpl4GfZ2JsqHOh4mkKj2tUyutFnSqdLkpeAaMG1XZtBeIOYPxMxkGlww9\r\n+9yazYg8ObrgFxboDFGU6a/YjyN1I/KS85qQYH1dYB1WNo/cHPzjD7ZGjpNk\r\nLMf071QExVdPc+/clYOIBZUicKW8nzq4irgS/nCUQe8+JuAb4rFBimCp3jnI\r\nhcjsDi+JfNKfJo+2E6tH5wrd8kmnhE+kNd3TcKffAPaO1vRh+QPaTApsYaiw\r\n62Y+2Tb8wwE+H69QnDf9B5XBHM0HH9rljw8WYZGXiOoQyBnYRzeY0bgq9c7U\r\nefTHQNWMR7LDNzRN3+t7QU4oTY4PZMsCL/K3kA5NH+vfPuArbxOuOHqy0dJh\r\nmm5FJzsP842u0ukjxt78ND7krmammZFLnm7MO1lnTzFn9VoVFVZznJMPa2U3\r\nJYfc+RiPglS5G1CAdUYVAA8zJZGvz3874AI=\r\n=SgPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/tokens":"15.0.0-canary.69ebf61ea.0","@material/density":"15.0.0-canary.69ebf61ea.0","@material/checkbox":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/focus-ring":"15.0.0-canary.69ebf61ea.0","@material/typography":"15.0.0-canary.69ebf61ea.0","@material/touch-target":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.69ebf61ea.0_1682616183227_0.07944219365433147","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/chips","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b90be86de.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ce73167cd09cb899dfbe74b23c77d32a9600fc9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b90be86de.0.tgz","fileCount":161,"integrity":"sha512-wh51WSeojsxA+64nqJAE1D+PKCF63E8kqEVdz5JtbWUPPX+50cFDicQ1Dp2nHXwsWTDWvYzHXCS2cki/ieCouQ==","signatures":[{"sig":"MEUCIA4upGLQ7GZClS2+l/Elp1yNaNzJYFMtuu2FV597JtzFAiEAsBU4h/0bXeojDLnsGdLyQrFkRX+mxd2vxrc4kg/Yr54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGNoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjERAAlCAaTTqdxSuT4uEM/SiaJ8lr0DnuCWnrzGdjzGWSGZQEBoc8\r\nu7ks/9E0DryJ45UF3pcBFgc0m8aRODOqz9QPyxfV1p9YyaV4Bag2Y9wkfvpf\r\na13PAJ8u/xHLiRo3DDJ+PnjF5uZSikNnaNjcNsEHHvlKtX0H/yRSKGfEMORk\r\nLsKenfnCQ85sM79NakXDIJT6wq6kR7YpT5izxq3MhfZmSfAgpFe6iYS4Px51\r\nc6P6DRMNvpkpY/5I9SrRsaGpvHJop88ctjFIGhmCS5y+prZG8+yrxvdsxfDq\r\ntrFjFQmoiLV/ND2qoqfE7QGHlQwqOlKdMbIU+8xR5BVDKT4yF/X1E7jpHDIi\r\n4T6nS7t6pD7dr/BQJqowoIU4pzye6RPKzXtqVfETnwJrj1ewRhoMUrOSyT3Y\r\ncyKX8VGCWmNiK66orPRABRbrPNpfDL2BkZSyIuZPXmIkLea4QENOdEy+4jWP\r\nygLPqb1ERWD2kWIeLLLh60nLSxIPJAPCNgyLIOOFARAsQhoUOXSYUGZgPtnU\r\nfO7SIoJi2dhj5aJnlAIlxFI01Yaju5tvwl/kvHgAaeCpUM7zGJn+bncar+pL\r\n8YRbSZcFr0A0YedMAkihgxA5L4j9IhvweIU3rNuJxewhzXjKHDjA7gz6p2Fa\r\n62lz4LWLxlRpRDaarZmV4lCgbBHCm/Rh+Go=\r\n=Oh/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/tokens":"15.0.0-canary.b90be86de.0","@material/density":"15.0.0-canary.b90be86de.0","@material/checkbox":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/focus-ring":"15.0.0-canary.b90be86de.0","@material/typography":"15.0.0-canary.b90be86de.0","@material/touch-target":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b90be86de.0_1682727784538_0.11823630021475173","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/chips","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8fb2cd09f026bf930cd7fb6c8b80e753ffcb295","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.51f9c0c28.0.tgz","fileCount":161,"integrity":"sha512-a3lGEXw/Y1+KqMuvakzcb9rCis5R+eLQ7uHSrC0WjGgX1oU9gWpM0/p05/rTknHbIji5sOHr4SxC48cRCBCSSA==","signatures":[{"sig":"MEQCIFr99Nyf5CQq0iIN6Kxw1LZjSc+6tSoupif+P9c+xfXbAiBHibdzuuTGXR7hawTA75Pu0aIrkN/3JEmS7swHzhs7kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGWwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWhg//fYqooow3SBL1mpQH1wo2hjdYO2PuT6rBXjKNZJ3kZq/MQXFA\r\nWMDWw/xnbJdr4yZ5/36VGLLVB5u/xSgGNTqxUJZGANzojn56R3yHGSMGhN3a\r\nuW1SoLsvOal9T8/S34pX1AYm/TdBQqqduNHY0tUKBlspo8oISLiId/CNMWmN\r\ndmOjAKisr//i+NDWOMTkeiPPJMGCA9V3GEn8+/wB7FHqQDAzKyqqPRCfnaHP\r\nZh17qZhLmr/w4riUYXNzsWXHEx41V6WFkAys9a+6Qf9WIhm+3++HM6R7xzYy\r\nWOydqyxmOJ0oWQ03C+Eis8nLiqIwVP6IaQh3yGC/5m5M/J2bWaTAFyj9fpfF\r\nHS0zIydwpBW1/X0Bp6Fu1AwGc03eVGHrE2nwc2TDjJF9d63RUWTKb2fx3Z70\r\n2xNmVQg+fxzNfcKQDDSdRGHyx5vpopbUHV2WTznOzdGyAtzaFXJlXUBvF7SU\r\nfkVaQaY17OkBVgUOFRjeatTgdr+j5vDIuaa/U7R9PKWw1/UJYiBVoQTy4CRZ\r\nsZx/HzGE1GcM6N5hgy/sX5OprhSPqWw1Qg+Otv1Y8sjJPrwqHiMEKa3wm38F\r\nw55Xyi0ZBctSo/j9jzCq9R3YIhsRX5Yq19l+pH1F8T4IYHol3/SYU9Cx248q\r\nvBPMwa2vTYygbOJfo9JIPk4rv0cIXHZftmU=\r\n=BLRM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/tokens":"15.0.0-canary.51f9c0c28.0","@material/density":"15.0.0-canary.51f9c0c28.0","@material/checkbox":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/focus-ring":"15.0.0-canary.51f9c0c28.0","@material/typography":"15.0.0-canary.51f9c0c28.0","@material/touch-target":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.51f9c0c28.0_1682728368638_0.40024758041681774","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/chips","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4e840d685.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"622bcc19b55e486e28171937785374bfb6988951","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4e840d685.0.tgz","fileCount":161,"integrity":"sha512-WdBqhqHkWO9+yD9qM4pF4R1X0P8r56QR52nf3Ks2w/JFMfQhQz8Rp/WJjEHT8mVN3bq+37mRMvFw8fPWVEp22A==","signatures":[{"sig":"MEUCIDbNAPOv1Jxfcz8afot5k3HoaEVLvzjsUIQ8M2KIYLXZAiEAmyjEMKwKeXZY7/bgvPvFQgXCgl8IXjqwZsN/ZEBDR+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950016},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/tokens":"15.0.0-canary.4e840d685.0","@material/density":"15.0.0-canary.4e840d685.0","@material/checkbox":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/focus-ring":"15.0.0-canary.4e840d685.0","@material/typography":"15.0.0-canary.4e840d685.0","@material/touch-target":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4e840d685.0_1683041711937_0.3335989291269086","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/chips","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04bdc91f1c55f6d877b4c2fea8c7a042ee2cbf52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.10b8563e4.0.tgz","fileCount":161,"integrity":"sha512-auAWmdXGWpGDGNtmmAPgrRn/37z8E1cRFFJElSwQyxKkvcIPhNY33ntx8C2sNKLyW7sFbm9xAHXe/P+EeewWjg==","signatures":[{"sig":"MEUCIFstinU+2tcMucIv7ydCW2XsPrOpQrb8cE33vTKaPFnUAiEAjBxwYpdhWlYDo3IMEdfHA24cmPftahkEiD3RDcoWIKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUaARACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAwA//d6+W/9KLi320jG/o41OXn6l/mO436qKeSov9pSdodruHd57d\r\nlnflPe5DLUNrHdPAN5wLwyb77sokJGnHK3JRpwXrojoK+yXHlUshtXrf4L7C\r\n5WSeUMIwDV5GX6ib++/eDY9eYm5xtbG4oB9PnRWGbeCy6++OqFppkWW0/zyY\r\nfkmOcmx1xaXgB0dS1XVbHN1x/v7XR/bX1TEvZufik+J2mTfTm0i7WxUmLypV\r\nubU0GzgblZTz03TkyJrQSclT+tg6MF7eehIlKFA/fkP/5IgKlWkpUvNBuWu3\r\nmNM0H81FVt6JtKFa2rxPGJ6+WEnSIO+tpmvf9SgZBg6uYOf3pUnZqGoVhr4f\r\nxskS9xIbB/IdguAZJ6QVGojfkrZREAQRVA3VbbxxulegUefqfhW7ZT/lczDI\r\nqwRSQqt3FsvFyKDUA9lmJg2yzeOa73V+l0zyIJ6O3cuyCNtna/t8Z5u5QWAJ\r\noq3rl3luI7EF4WiUIMxTwCrqIY639kQO/nQSiTqeqWT1r8gwoTLo+xNgwhvI\r\neyd9GPnaOw+FN8rgIaJN4MUH6SQH585Ki56zCdhzt3NDzsZvOXJGvY9NGF32\r\nhUcbF4ZzEBAmmAs88Ch/TdYtxQBlxSn1ClOXkaeuWtoMzIS5qxddak4touEF\r\nI/GWjDoi6qz3EO9XRgOlj5t97y+zvefQcak=\r\n=+2rf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/tokens":"15.0.0-canary.10b8563e4.0","@material/density":"15.0.0-canary.10b8563e4.0","@material/checkbox":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/focus-ring":"15.0.0-canary.10b8563e4.0","@material/typography":"15.0.0-canary.10b8563e4.0","@material/touch-target":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.10b8563e4.0_1683070993679_0.9679726210460358","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/chips","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cc2fbd174ce079fef1c0e013658eb09cc43c667","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.736b7fda4.0.tgz","fileCount":161,"integrity":"sha512-CN82/o90OpDQcJyQYIFgmiQzxj3v4Tz7xXR2sF0bnC/OkpQo9uaXGc79P+sInxbiXadgFfxDNToUVtd8SCNUQQ==","signatures":[{"sig":"MEUCIQCKYQJdN+d8kEmg+4XhnHMkA4a9PCaW0iJtgB+qc6ux4AIgB9q0XMVCLj3rBfuyLSy9wGSC94ypdE8MtLzjVW+GZ9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnmFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpsQ/+N+YZPOe8WKHFQuz8MfFwHkyk2x+C2eWHNoSUSpr4wWOa9T4v\r\no6Xtz5wOjZOigDEWValanW6BAGxixrPCJuls0bVzzAZRavqU1SpkxUcIxXHD\r\nVgDrb75dPvWpiYEedkOEm+pXKhJHQAP4qAm5E6CPyEjWtrF58KGQipFV4MUG\r\nvx8miLOxKoqYRfB8T/5a3o7Ai1RhMylLxP+rTlxaZx7W6HAF/+OfCnaXNJyn\r\nwZzlLAmIi0Qfb13Lo0a4+hd4GdBS6ITK1EZ6BKrAvNKL8gkfBHDYjfEWWSK+\r\nF419p4c7X9924SgfH145qNss2wj9qpNcBF2g33OKu0jEqlHjm6Dvp6GXyVZP\r\n3MM89Mdote1Odag07RDEmcmQVroFvjXvB128Fq/aUm/JpgmykqHkB8qwJXHm\r\n6bxhTGTLY/01BXOqZHSmjnOggtAKc8hB12p6VNJmRSLq3ksUVUJeOrbdu/qZ\r\n8iPna9tSrqqquBl2HqdufqxFnlF8XiJdX5knLNnW1IS74eEW8tIN02SE2j41\r\nTpjlkkGAd0pqy2Elah5jLbKodkjoR3OwpRNCe+qPEXy3tV1QLQAtexyyNaRU\r\n6G8joUdv5jKowu3Os25edYetBstG3837pzHtu2SM8D6Gh1Vx6GNSbxwhn9cp\r\nr2b4EwGxTu99A3xaxrLrvuj4UOil1TkoZHk=\r\n=V5j1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/tokens":"15.0.0-canary.736b7fda4.0","@material/density":"15.0.0-canary.736b7fda4.0","@material/checkbox":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/focus-ring":"15.0.0-canary.736b7fda4.0","@material/typography":"15.0.0-canary.736b7fda4.0","@material/touch-target":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.736b7fda4.0_1683126661266_0.19801260373809804","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/chips","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f86040fc281fd40d36ad260c635ae5646982899","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0e533c5a1.0.tgz","fileCount":161,"integrity":"sha512-41IoLQul8YKYeEBfN7vjPd7VhiBaeBM7C8KaYbx4OUXP1lbG4tCIqIWoSR1qoUgc286LyxUG1qSWMzpBnlm1hA==","signatures":[{"sig":"MEQCIFRhVAIJWg7rbhQgbUTIGkQzBcwycSDhYKw5pg7vJidjAiBe8DtVuqqSzptoIMDPPPBU0iMo8rDZ38qsT8laPv4AIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/tokens":"15.0.0-canary.0e533c5a1.0","@material/density":"15.0.0-canary.0e533c5a1.0","@material/checkbox":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/focus-ring":"15.0.0-canary.0e533c5a1.0","@material/typography":"15.0.0-canary.0e533c5a1.0","@material/touch-target":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0e533c5a1.0_1683305887572_0.3374402271025747","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/chips","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d2701ececeef61056beb5d188366518caf78b10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.5f01c15a2.0.tgz","fileCount":161,"integrity":"sha512-Ld0I0GvBnQPSpu/lzgvkdoDLoIagHRPa3Rdpv6K0h3Bzepc1A/Z/TJnlXQiV7LCemRgEcZxsLEtT54zoBqnzcg==","signatures":[{"sig":"MEQCIFn52VEkqY1N9Dze6F0zJGSv84C6yMQUv7TtKDUj8m2AAiAp/6qWrOFA1K60OlDO5gePz2oluVEx66wVFC8wd+cdBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/tokens":"15.0.0-canary.5f01c15a2.0","@material/density":"15.0.0-canary.5f01c15a2.0","@material/checkbox":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/focus-ring":"15.0.0-canary.5f01c15a2.0","@material/typography":"15.0.0-canary.5f01c15a2.0","@material/touch-target":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.5f01c15a2.0_1683307666618_0.5526510825021986","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/chips","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"477cf768e19fb391e39234cfd37241fa118006c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.3b5b55e31.0.tgz","fileCount":161,"integrity":"sha512-1s4sK9iunD7lFDCd4jxQiDoY8mOlMywY3AeymsbRrzG6rObLv0AGsX5moyxhpsh/IwSSQFdW4xrtCESu+dRZbg==","signatures":[{"sig":"MEYCIQDHIrrHq0j3tBgL3Vy9PcgOkEOSbWNOgsaUldmhdYN3bAIhAKm7I7AN7ubP9Gxmi9aYp7VRIy0Tk1SK/G5YhmhqxXna","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/tokens":"15.0.0-canary.3b5b55e31.0","@material/density":"15.0.0-canary.3b5b55e31.0","@material/checkbox":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/focus-ring":"15.0.0-canary.3b5b55e31.0","@material/typography":"15.0.0-canary.3b5b55e31.0","@material/touch-target":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.3b5b55e31.0_1683312043885_0.6629061707796085","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/chips","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d0788120f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93d714aae2791435ec873a550c3b6410c226b314","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d0788120f.0.tgz","fileCount":161,"integrity":"sha512-2Q7oc6YZ0OsHpUs/71YEHD4cS3QgsbwEsn/ipBphHq49jY0ZrG2/+AkyoB4aqt0NNVSHJMXfL69zDUC6QEVDAQ==","signatures":[{"sig":"MEUCIQCGFMWsn7B7w7GBbBJzpLDwgXuIN0OxOvUwYuRlkx00hgIgTQzKFZT3UUiow+k+Yo/8+m+Ui4MGBDF3FuuyufrIWsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/tokens":"15.0.0-canary.d0788120f.0","@material/density":"15.0.0-canary.d0788120f.0","@material/checkbox":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/focus-ring":"15.0.0-canary.d0788120f.0","@material/typography":"15.0.0-canary.d0788120f.0","@material/touch-target":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d0788120f.0_1683620680254_0.4979209729704037","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/chips","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18454833c2658aecb61e9321dfdc3b689d9e1eff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f52358dd0.0.tgz","fileCount":161,"integrity":"sha512-DvT0GAop63JsoD+50AFrfTJFLX6nCCsHprVmcDQ/WIZoo4K32/mVwIcpKuEBHA/zyOcS3+65R8CFBMvVMJDWyw==","signatures":[{"sig":"MEUCIQC7lepXSaiwt01xXIDH4g63YJyDJD/rjKnOUFRCkH+IjwIgN0TTnckZFb+USA8R61iIOjmyhw+QzjnKrPKtCOedFDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/tokens":"15.0.0-canary.f52358dd0.0","@material/density":"15.0.0-canary.f52358dd0.0","@material/checkbox":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/focus-ring":"15.0.0-canary.f52358dd0.0","@material/typography":"15.0.0-canary.f52358dd0.0","@material/touch-target":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f52358dd0.0_1683901914159_0.6848994047417938","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/chips","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21e4e421630003fc2b90fdfc22ccd4b31b751aa2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.576d3d2c8.0.tgz","fileCount":161,"integrity":"sha512-IvKmOpk8FHPzJXD19uHkPjmquQP6oerNh1QL2FdVm5+6dLt43CMVlCe8qzGorQofw3xWeY304aGL9eGEwuz51A==","signatures":[{"sig":"MEYCIQCdcJdytliHRmAcohAaDiB8AGHhftTgR7EAMAFqrqhtMQIhAJ4sx5cMucqZ37WSWNITl/uYw6cPzFOy429Ui8gPh5/Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/tokens":"15.0.0-canary.576d3d2c8.0","@material/density":"15.0.0-canary.576d3d2c8.0","@material/checkbox":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/focus-ring":"15.0.0-canary.576d3d2c8.0","@material/typography":"15.0.0-canary.576d3d2c8.0","@material/touch-target":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.576d3d2c8.0_1684202486066_0.8393065151009687","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/chips","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f5e58ae23a6591cff85fab55a0548160b7d406b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.19bb36a46.0.tgz","fileCount":161,"integrity":"sha512-GiPc1gImCd/OSBsywnoxzLz19pgvLIXvX+SR4aIZsNdh7HJt4iCZVrjwclppS/6C1OhNzfrlkxekc5yyDHZEsw==","signatures":[{"sig":"MEQCIDXZeoT2PxM7o+vx6KI2qJKKx5nZ2JpB8nSYdxDAogx/AiBE5Osgzct1CcmyougOgvo/1b2PIao2nEJ9Tzvq4JI6sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/tokens":"15.0.0-canary.19bb36a46.0","@material/density":"15.0.0-canary.19bb36a46.0","@material/checkbox":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/focus-ring":"15.0.0-canary.19bb36a46.0","@material/typography":"15.0.0-canary.19bb36a46.0","@material/touch-target":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.19bb36a46.0_1684266926851_0.41541400829262876","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/chips","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c49d6103336df0188d45f6f87741510b8635e12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":161,"integrity":"sha512-VfR37bB7eyIFmdWcl4f7kgpbRv6sZpWTFrknhtztAWp259wZRCltZ1MLh87dedgRcPaQ9XacQwAdPedzl2ZEhQ==","signatures":[{"sig":"MEYCIQD20DNGRhnlmdR/WrTDOeKqV/TBOeL99hEk+ztPpvv0HgIhALJxFHu9TE5jMOjGctj9fzk4MM0QK8IMvbe1eFKYtbMv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/tokens":"15.0.0-canary.aa5ac7fe5.0","@material/density":"15.0.0-canary.aa5ac7fe5.0","@material/checkbox":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/focus-ring":"15.0.0-canary.aa5ac7fe5.0","@material/typography":"15.0.0-canary.aa5ac7fe5.0","@material/touch-target":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.aa5ac7fe5.0_1684776442179_0.9315408238233192","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/chips","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d23511970f199b7c324aaffe111e4fa89e7bb26","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.90291f2e2.0.tgz","fileCount":161,"integrity":"sha512-TMtlzuadWP/YMRYg8mpqmaD9M9GzRL5ulHHgYO5F4kaZmI3L+3zvaPvUme/x5qwPkIJUO9S21NxxGAsp9X+ZJQ==","signatures":[{"sig":"MEQCIH0epizI6pzJieNwjj+P1V5/tlVUVJlKNvDZDK4YXRHgAiBcSOSrk1OK2IbWL6a1TYgYQh55juw+OqFO0t2g4b5LOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/tokens":"15.0.0-canary.90291f2e2.0","@material/density":"15.0.0-canary.90291f2e2.0","@material/checkbox":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/focus-ring":"15.0.0-canary.90291f2e2.0","@material/typography":"15.0.0-canary.90291f2e2.0","@material/touch-target":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.90291f2e2.0_1684863862227_0.20111318782191168","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/chips","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.446734f27.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"605d8bf69c7a0754a5a4cbf3b3e457e62493fbaf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.446734f27.0.tgz","fileCount":161,"integrity":"sha512-odfiZ+2aPniYxp2SPnBVW7bVmn5TThmRIOzgz9YDtzzMgCc7YCcmrURxQKnVE+ww+hRgwU7hKPbJmlzPV7/J5g==","signatures":[{"sig":"MEUCIQCbZwzaz37wq6lLE22LlyPYz5uHloazTv2jiSZay709bgIgZvP0Ni5UPTv1ZmaK6Bjgie6kTHJOzfq2nmfAQ2A4Wwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/tokens":"15.0.0-canary.446734f27.0","@material/density":"15.0.0-canary.446734f27.0","@material/checkbox":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/focus-ring":"15.0.0-canary.446734f27.0","@material/typography":"15.0.0-canary.446734f27.0","@material/touch-target":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.446734f27.0_1685483377144_0.6645503512706366","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/chips","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.19de312d8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"818aaf1d997198e0114a5e891122f87cb021f172","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.19de312d8.0.tgz","fileCount":161,"integrity":"sha512-n+XRgFMWVyBu1JQnV+mHri/V1TMD2+Dfrpbq/hMCZw+hVEgQ11olWVEJ10fgb712CoCSdIra3XhmUvgVO2wy1A==","signatures":[{"sig":"MEYCIQDW929N5w3UE/GxlfOqbUyWNkWjqSQRQ4hhStrE6EUt4gIhAJyOIFw9OHB1ZK9Rms0axw15xJJWsB7j2ZdoifVTIoic","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950007},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/tokens":"15.0.0-canary.19de312d8.0","@material/density":"15.0.0-canary.19de312d8.0","@material/checkbox":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/focus-ring":"15.0.0-canary.19de312d8.0","@material/typography":"15.0.0-canary.19de312d8.0","@material/touch-target":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.19de312d8.0_1686071995898_0.47903266524886856","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/chips","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6081d829b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d83caf734ddbdc219c0b2496f5ddb64fa1e1139","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6081d829b.0.tgz","fileCount":161,"integrity":"sha512-7OphvxyZcvcI7jkzvCxXDOH6Wxd0/8MhacQrNn22zWvCK5KbHgqaTAncgmyaUM82jkLEgmGtfY8Sif2hYUqnRQ==","signatures":[{"sig":"MEUCID2eP0AjPNWkuJaPW3ROdxDDTVagXiIVmmRAyKNUHDdeAiEAisQhsQRKIvTDEBDwfiNzKw0yhoN6m1+FkSFXPKfhQSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/tokens":"15.0.0-canary.6081d829b.0","@material/density":"15.0.0-canary.6081d829b.0","@material/checkbox":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/focus-ring":"15.0.0-canary.6081d829b.0","@material/typography":"15.0.0-canary.6081d829b.0","@material/touch-target":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6081d829b.0_1686100528686_0.41000179733353526","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/chips","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71aca9ed4de1a7f359a640d364b4db52841b8591","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b26c34a68.0.tgz","fileCount":161,"integrity":"sha512-c++XPBlVWh+y1/zfX1RvQ9TxTVGQDRw1sJ1VfGuMrnWbobwZdTkyuIzW4mTvlVWqRaveo5A+sdJwOUTqk/sXYA==","signatures":[{"sig":"MEYCIQDR3DjYCELVggeoo2nhiGmBLHXIq2imSakvS36vzgq8MwIhAIuaqRwX3qD7n3kVkiK1hSx9miNvi8VeYoKzEk8i+PE+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/tokens":"15.0.0-canary.b26c34a68.0","@material/density":"15.0.0-canary.b26c34a68.0","@material/checkbox":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/focus-ring":"15.0.0-canary.b26c34a68.0","@material/typography":"15.0.0-canary.b26c34a68.0","@material/touch-target":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b26c34a68.0_1686169197897_0.29214877745253887","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/chips","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4fe911371.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0861f1eaedfdae5b7829e276dab000e44a2a467d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4fe911371.0.tgz","fileCount":161,"integrity":"sha512-zA/hDP0tTIlouWpn5eA8W09OaxT6yW0EvGnnUULPu3JSUf2bWFuMezHprKPo7gPD5sBCKwA50FDAVxjfYt8KLg==","signatures":[{"sig":"MEQCIA7HMutOtR7b8epZNdTJKs9MLZ4s37cY5SN2Xb3mhKmTAiAv1kRIHCjxx1CeAVuvulYE3PYIeoAZo8PGM7QVCSXNHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/tokens":"15.0.0-canary.4fe911371.0","@material/density":"15.0.0-canary.4fe911371.0","@material/checkbox":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/focus-ring":"15.0.0-canary.4fe911371.0","@material/typography":"15.0.0-canary.4fe911371.0","@material/touch-target":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4fe911371.0_1686179252859_0.7972102464696655","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/chips","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"052777b8ddc3cf31c21b96d63564c12631379c02","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a9ff9866f.0.tgz","fileCount":161,"integrity":"sha512-0tSdTf11IDCgXSQtnJBujKSPus3T6k2tYwG6vo+xgShUMVMj6c2hyMWOiM+rJNLViHPvAwnaWl7oYOaZUNTLig==","signatures":[{"sig":"MEUCIAwzVjkeMNgWQ4ejfQEpns9efXdDfyJfynb02lrxbkJAAiEA3loaz3n3+MzKMpfchpTAluzQW2fQtb/gxEtw8WsDYyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/tokens":"15.0.0-canary.a9ff9866f.0","@material/density":"15.0.0-canary.a9ff9866f.0","@material/checkbox":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/focus-ring":"15.0.0-canary.a9ff9866f.0","@material/typography":"15.0.0-canary.a9ff9866f.0","@material/touch-target":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a9ff9866f.0_1686656382449_0.08360277046100295","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/chips","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b994146f6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"987a8d69748670d0bcdaba4c3d4272d6dc4d772d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b994146f6.0.tgz","fileCount":161,"integrity":"sha512-3yJPj7x+eKLA4LMKG7aTWI+itAnKRVGOcniuR6aiXVy0OKr5asNuWNeZc9J0/VErjjxF3tdybDzDSPo01qPy9w==","signatures":[{"sig":"MEYCIQD5TigkwCJhTMCd7orA1a8jbpkEgGOzvHpCzsWQ3WmmKgIhAOaJp3aRveblsuDVVlkMrrm10QGz6SoKhpxWbb6IYY1F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/tokens":"15.0.0-canary.b994146f6.0","@material/density":"15.0.0-canary.b994146f6.0","@material/checkbox":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/focus-ring":"15.0.0-canary.b994146f6.0","@material/typography":"15.0.0-canary.b994146f6.0","@material/touch-target":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b994146f6.0_1686776715853_0.5022822180440247","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/chips","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bf3efa0ae2ad554793e4b90d0ef0c8cc4c66f20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":161,"integrity":"sha512-QJCFKTUwlB4xRVE444f7wSnqR8Hzoz3yQGKAYmH0OZjuqbFlcgm0f/kC+ULT+luIbX+pSr0byl9AHH78HIJTEA==","signatures":[{"sig":"MEUCIQCl6u8t7Q+9ZmhGfLuaMjZBbHt5NQKUkg68o0dxt9NeNwIgEL4/83jeHB/ryRyoNdlJ0jV64XoJF+TIUSn8PzdoZ3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/tokens":"15.0.0-canary.1fb4b1a06.0","@material/density":"15.0.0-canary.1fb4b1a06.0","@material/checkbox":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/focus-ring":"15.0.0-canary.1fb4b1a06.0","@material/typography":"15.0.0-canary.1fb4b1a06.0","@material/touch-target":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1fb4b1a06.0_1687892327721_0.05212247271644288","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/chips","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e68feefd56b1ec2afb614cda4230983e2adcb767","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c64a2776e.0.tgz","fileCount":161,"integrity":"sha512-vEeZwAHHqujQlh7klo2MMHOIKHqGCuhvELxCKsjHt2ja2byB+AjYSBTjbCdpk0tvYbKXySfC/B1YyKY3NDm8kA==","signatures":[{"sig":"MEUCIHnJH0N4t8+1hPX0bp9nu8yPdmOyq4/kyD7g+i7rodDqAiEA+gqTsjJLg8EVuSBcrDAei36W/GYGiQv11GRqZHO7UqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/tokens":"15.0.0-canary.c64a2776e.0","@material/density":"15.0.0-canary.c64a2776e.0","@material/checkbox":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/focus-ring":"15.0.0-canary.c64a2776e.0","@material/typography":"15.0.0-canary.c64a2776e.0","@material/touch-target":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c64a2776e.0_1687897091899_0.8276089922560856","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/chips","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bee96f4fe1bb51d4b8c55cd364a5fe5dab04964","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":161,"integrity":"sha512-2qUXcqQ9B0IbZMlvxfOqwERKnUmIbnCg1+AZhh/04CWRW99jcvGHZSl97YvJXLGSfmJd+2XPXGm1tGLkif+GYg==","signatures":[{"sig":"MEYCIQCRXyh3Y+UYgL4bKEFEpDoRTdv9SfnxFGBMSeCsU5RmZwIhAK6xyEbgrzIWPOoskfbmwGNjhHADx1bXaaXJiDpCmgtR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/tokens":"15.0.0-canary.b05d9eb7c.0","@material/density":"15.0.0-canary.b05d9eb7c.0","@material/checkbox":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/focus-ring":"15.0.0-canary.b05d9eb7c.0","@material/typography":"15.0.0-canary.b05d9eb7c.0","@material/touch-target":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.b05d9eb7c.0_1688055914962_0.9679189251188651","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/chips","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"007bc5f4333f3f64554d064eab0dea5a9a67b4bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2a9697dc5.0.tgz","fileCount":161,"integrity":"sha512-aO034aq96GlPdBYcnUhRsEYiXwJ1axeLpBMW+UUaznErf/wNIomcyAFT6vuXJkyjMOL4QAUB8fwKHEWCtPf4sw==","signatures":[{"sig":"MEQCIHxNrUjQ3Hlb/+lSszRywDbv6FKDou0gc/L6YqOc6AYTAiBdC8CxyXXrpzjqWoOg9sbF3HkFyjqfc3Gfp0zrfZqDsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/tokens":"15.0.0-canary.2a9697dc5.0","@material/density":"15.0.0-canary.2a9697dc5.0","@material/checkbox":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/focus-ring":"15.0.0-canary.2a9697dc5.0","@material/typography":"15.0.0-canary.2a9697dc5.0","@material/touch-target":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2a9697dc5.0_1688163319885_0.5804964942356552","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/chips","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21dbf4524e3fd29ff63a49962a062b117cff5b82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0c52adeab.0.tgz","fileCount":161,"integrity":"sha512-rZrgmQaFld8pnYmhoNXc0CxrEOQS3APKpCgH5++pfNtkYyTmHCb+UceT0x3MJnVhiAsH4TuH+FQCVfKnZghw5w==","signatures":[{"sig":"MEYCIQDU7nx487s3tV6024MnNTkl/N8Ma6B9w+QWjXT6QOnanQIhAKkBlKMIiYo/4+dcy+vhzIajINdVvkV3Gvs9OozoF7NQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/tokens":"15.0.0-canary.0c52adeab.0","@material/density":"15.0.0-canary.0c52adeab.0","@material/checkbox":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/focus-ring":"15.0.0-canary.0c52adeab.0","@material/typography":"15.0.0-canary.0c52adeab.0","@material/touch-target":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0c52adeab.0_1688574442604_0.8523536249314294","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/chips","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.83355c322.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c216555152d38ddccff10ae7b67eae0988e522e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.83355c322.0.tgz","fileCount":161,"integrity":"sha512-tOhCAgxbG4N1eLnEPPuIMtawp8qDI62J+uHwAmt3dGE7Um9dGBpVHTTHhddmbAS1JeNFXEKCbzh81m/FuBdOrw==","signatures":[{"sig":"MEQCIB8gIM4tBIVFpdl3RU9mEgFNFlrulEwN8gDIJog2xRk5AiB5UkJdX739RzIu+N+GMwUj+FFczHGDvmIq5QZG7+CVlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/tokens":"15.0.0-canary.83355c322.0","@material/density":"15.0.0-canary.83355c322.0","@material/checkbox":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/focus-ring":"15.0.0-canary.83355c322.0","@material/typography":"15.0.0-canary.83355c322.0","@material/touch-target":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.83355c322.0_1689001631884_0.9424024815690422","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/chips","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a77ee7bf8ea9146156996c5632496ebca27520e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":161,"integrity":"sha512-fqHKvE5bSWK0bXVkf57MWxZtytGqYBZvvHIOs4JI9HPHEhaJy4CpSw562BEtbm3yFxxALoQknvPW2KYzvADnmA==","signatures":[{"sig":"MEQCICKbsbwPSVfMFtXyU9SVdKLPh7mvzCLLUHEkWoaRQYi5AiBx0Xs9LMNVlZce3qq9CneaC1SN5bL0qsfNI+4WHXnCRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/tokens":"15.0.0-canary.bc9ae6c9c.0","@material/density":"15.0.0-canary.bc9ae6c9c.0","@material/checkbox":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/focus-ring":"15.0.0-canary.bc9ae6c9c.0","@material/typography":"15.0.0-canary.bc9ae6c9c.0","@material/touch-target":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.bc9ae6c9c.0_1691097782328_0.7763311621306896","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/chips","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56ec412388bfe6236ea97c89b6a87fe6a39ee8a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.3c44cd956.0.tgz","fileCount":161,"integrity":"sha512-TXteLaQB4u2PIVmGCWNjCCnKySYGFEr6j4YqjKer5e7XXpU93c+KnnHtDhRGpVw0EecO/DDxpGuvWlY7OCdosg==","signatures":[{"sig":"MEUCIQCQT+hHp2lZak0Ejzee7nKx4r3uNubEPjc5NpHc4GYmjAIga6tG0YvFIQ46pVcb21PrXA3F2NLFZDEJLu01o3cpFJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/tokens":"15.0.0-canary.3c44cd956.0","@material/density":"15.0.0-canary.3c44cd956.0","@material/checkbox":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/focus-ring":"15.0.0-canary.3c44cd956.0","@material/typography":"15.0.0-canary.3c44cd956.0","@material/touch-target":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.3c44cd956.0_1691430598232_0.023965065544267805","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/chips","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.02702296e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6a6557a2896e3b83e0a946110595adc4e1e8d15","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.02702296e.0.tgz","fileCount":161,"integrity":"sha512-OexQjYmHmnOwAhvWyWhlygXw726KLd8OnCxW96nrt0wan39PBoACIBE5B9y225dJYloYu9p56MR6q5ME6365eQ==","signatures":[{"sig":"MEYCIQD8ok7hj8sScecysQsh4dtepakBvFw0f/WhCHl3eR/GFgIhANghbImJenwpcN5FGwPiiePn29dZTDDX4Dlx+oaD0AQa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/tokens":"15.0.0-canary.02702296e.0","@material/density":"15.0.0-canary.02702296e.0","@material/checkbox":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/focus-ring":"15.0.0-canary.02702296e.0","@material/typography":"15.0.0-canary.02702296e.0","@material/touch-target":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.02702296e.0_1692965202373_0.2616650335012618","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/chips","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.872b65832.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b02e1588f2a4d7fa447a9d938f76c85864e0874b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.872b65832.0.tgz","fileCount":161,"integrity":"sha512-XV3NzwCZG30mvAFj4Cy5N/XKAfFLmsO8ESFHdnKN7TmnpFH3I37kg5a+wXTQnAxpSee/W/CPuVHJnpI9qPaKFQ==","signatures":[{"sig":"MEQCIC7naNSP8Rfd36S6wvRLBEzz53QCDgEJP5IdRBPc5nPYAiALo2QecZcWk2Kk1/YWWTXVpPFWo2L0CakOzv1fZn1ZQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/tokens":"15.0.0-canary.872b65832.0","@material/density":"15.0.0-canary.872b65832.0","@material/checkbox":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/focus-ring":"15.0.0-canary.872b65832.0","@material/typography":"15.0.0-canary.872b65832.0","@material/touch-target":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.872b65832.0_1693397706897_0.12976796912437316","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/chips","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"494ff935cbdf4c075c41d4da4ae1fc51f8604148","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.89b2e4122.0.tgz","fileCount":161,"integrity":"sha512-dOJDUex0ZMTkpgLKYqCM3sFmZANd5yZBNG4Q2wLj36fqkRGO5/L21QwlZReeErLWOvFsdDbmEFc3srQJCg3jlQ==","signatures":[{"sig":"MEQCIDFC7pMu8b83teQBlwmlfWx7xocd5fmclWw2w0KyPFhEAiAJks8YJ7hEvhetGyIeas2b/y7Ep4/Omj5C8EYYVUuF+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/tokens":"15.0.0-canary.89b2e4122.0","@material/density":"15.0.0-canary.89b2e4122.0","@material/checkbox":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/focus-ring":"15.0.0-canary.89b2e4122.0","@material/typography":"15.0.0-canary.89b2e4122.0","@material/touch-target":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.89b2e4122.0_1693498104815_0.39935595825623005","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/chips","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d9f9cef1097f7509b8cb023cc9e7af5b07cb3e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7a3942e7a.0.tgz","fileCount":161,"integrity":"sha512-KcB8P0R2IwGrSfuGytHNjCNtNTcsDQPGWGJEkbw7ImP0pmwMvfMfKDetsfjD7rIxpZ4DN+58EXFAIEJWD2bQAA==","signatures":[{"sig":"MEQCIG8ilDy8J+EuykjPY5Jz6zpsSqMtgNNwJSSdiHHe88T9AiB46/59kNMlxlWO/TiA0isD6+nxoZftsN9GzimalzxMyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/tokens":"15.0.0-canary.7a3942e7a.0","@material/density":"15.0.0-canary.7a3942e7a.0","@material/checkbox":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/focus-ring":"15.0.0-canary.7a3942e7a.0","@material/typography":"15.0.0-canary.7a3942e7a.0","@material/touch-target":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7a3942e7a.0_1693507274376_0.6925995555517854","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/chips","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.54feb3020.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b1aeb1e8d7f29d3304029a04ffe7d3694025139","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.54feb3020.0.tgz","fileCount":161,"integrity":"sha512-CORCmKD6BO+zhIkmps4pvCTqLAUOUP9qFFdgD31c4F+4i3XOVQSxVV5Uvx6MbYqhj8CRc6ejNm+q7g/1mu5XoA==","signatures":[{"sig":"MEQCIENl2yZhOrc3mmarYf5T0deYWUeDDb4h6d2zriED9fdUAiAihbSCE4J9AosmgytHL+d+kV6/qtcIwC3Z2qckcfQqrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/tokens":"15.0.0-canary.54feb3020.0","@material/density":"15.0.0-canary.54feb3020.0","@material/checkbox":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/focus-ring":"15.0.0-canary.54feb3020.0","@material/typography":"15.0.0-canary.54feb3020.0","@material/touch-target":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.54feb3020.0_1694466410896_0.039252408501023295","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/chips","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b717efa3aa3c19fef63ce83c61009065cf7b1e4f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":161,"integrity":"sha512-0ImVswRDuebKVOJlsofWo4a7XWGsmjNJ50tOo6VbIOMMecvZc9OAIrPjAlr7fkzibWyWbe2L8KMd5KXx4roghA==","signatures":[{"sig":"MEUCIBDHW41Sq2dTtuFmTQRbqyJsJhdxmihRc/qZqyHGDSt9AiEA+wzbAQ9JwFPxFmG7qSN0P+z3JxXSBh18LFQcEO9rAT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/tokens":"15.0.0-canary.6cda3ce8d.0","@material/density":"15.0.0-canary.6cda3ce8d.0","@material/checkbox":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/focus-ring":"15.0.0-canary.6cda3ce8d.0","@material/typography":"15.0.0-canary.6cda3ce8d.0","@material/touch-target":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.6cda3ce8d.0_1694483209049_0.6352328285766675","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/chips","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.205b20b36.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b72239aedbcf8715a6374a912cb42cce61a2fd3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.205b20b36.0.tgz","fileCount":161,"integrity":"sha512-l65cW6hqDunSDziO2fy3ZmpcnH7nnJXvpP9c2UrgvYupaSNTsFx+K+eSvWK4ZTpQbEMDAiTmF6z+5pMtn0wpcg==","signatures":[{"sig":"MEYCIQC/KqUad2rxM8k+VjJ8m6OADYdX2e7AfWNAb5qWAm3AMQIhAJrdKVPInmBzds6aKW9uiVyUTZA8otbq0wVK2Uwuyigg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/tokens":"15.0.0-canary.205b20b36.0","@material/density":"15.0.0-canary.205b20b36.0","@material/checkbox":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/focus-ring":"15.0.0-canary.205b20b36.0","@material/typography":"15.0.0-canary.205b20b36.0","@material/touch-target":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.205b20b36.0_1694625569061_0.2983852698597904","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/chips","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.22bf82024.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a220f2a03ba9f842a9fee0495b24615398b9561a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.22bf82024.0.tgz","fileCount":161,"integrity":"sha512-SmN9IN50tJ7JbQqofiqr/AcC+CloVzXCe34IsNL6UyuFxxR5mMDHdpXdju1vjnhwbYh3ZtSEaE8KVQ9iDSKD0w==","signatures":[{"sig":"MEUCIQCg1rzJpteRUJt+Mvpx5Tc4fFZwPBA5gSEf9wYeIG7BlgIgMu/oKSdyHuGuVU+s3dA7chVfmHB2UQMe6RZquqMNSMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950529},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/tokens":"15.0.0-canary.22bf82024.0","@material/density":"15.0.0-canary.22bf82024.0","@material/checkbox":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/focus-ring":"15.0.0-canary.22bf82024.0","@material/typography":"15.0.0-canary.22bf82024.0","@material/touch-target":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.22bf82024.0_1695028404788_0.4128788182258263","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/chips","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a246a4439.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d73b4c7b5326ee6a160db01b84ad2a893b1cb53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a246a4439.0.tgz","fileCount":161,"integrity":"sha512-TiV9WJ5taEHPGWPhXbxJvUJhLzThg+VpK7aAlvL4RurtmJ7pURuEdRS4Z6o0OEqi3wKQ4z/+K44kZUn/+9HALg==","signatures":[{"sig":"MEUCIQD1U6FNxXN+RUjDHvyb0k5FAZnEctrvhVuXnh96ELlF9AIgVjSn3bTE0LXK/s/Q7trdqVoBVWuGPzy+7oNRtXebDZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1951235},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/tokens":"15.0.0-canary.a246a4439.0","@material/density":"15.0.0-canary.a246a4439.0","@material/checkbox":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/focus-ring":"15.0.0-canary.a246a4439.0","@material/typography":"15.0.0-canary.a246a4439.0","@material/touch-target":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a246a4439.0_1695059260806_0.7714793016791086","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/chips","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d153db62b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cff01a3c735eec9109abb473e8e908fd45d1c448","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d153db62b.0.tgz","fileCount":161,"integrity":"sha512-PYsC1X4wQZr36KXa/DqUdvOMu5yoMeA6igyqoI45CR02ADMlIF+v/fY9gQu86+uNUaPNo2dBZ+JynVpXECHXAw==","signatures":[{"sig":"MEYCIQD7ZjOyT9eLPZaMBE3TrO0ELoVZcRz+0MHeKwcUcuD2TgIhAI76NQ/dEArBGdsTv7CySI9Y/DNkdUMBw6P1mAdmbcPR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1951235},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/tokens":"15.0.0-canary.d153db62b.0","@material/density":"15.0.0-canary.d153db62b.0","@material/checkbox":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/focus-ring":"15.0.0-canary.d153db62b.0","@material/typography":"15.0.0-canary.d153db62b.0","@material/touch-target":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d153db62b.0_1695150999140_0.33933879514331466","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/chips","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b563d90f3176b9dd3344ee170bbd78a6c98fc78","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2528c1c3b.0.tgz","fileCount":161,"integrity":"sha512-Jgz01vInOSLqImyAtYsplD2U0/1xFt9oTG99mz7fTFLN47zt8n7b+yt3yf/ZOzDoc7pBk62gvSc4EvRX2NSb/A==","signatures":[{"sig":"MEQCIF9GBEJ+dGjyZ3aTl+uwr6gOmWXRq0oNzf5oju6pdr39AiBxeQ2NDxVQFHpaRSUDCBOMSZAOVE++JVS2kUtQ+Uk0Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1951235},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/tokens":"15.0.0-canary.2528c1c3b.0","@material/density":"15.0.0-canary.2528c1c3b.0","@material/checkbox":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/focus-ring":"15.0.0-canary.2528c1c3b.0","@material/typography":"15.0.0-canary.2528c1c3b.0","@material/touch-target":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2528c1c3b.0_1695233298345_0.38376538759094614","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/chips","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8afe87c802661bd2e8a2f27a3258290e224e3ffd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.1728a6dcf.0.tgz","fileCount":161,"integrity":"sha512-nKEOhKIOVU2KgY4Tb5lRQ4+qYQPz/M2CtoCuriUecXPo5rAQ2taoDCXkQlOV/jJBN25fRycp16EeZMQm93FDOg==","signatures":[{"sig":"MEUCIQDjWNqZsBShcu8jfVphMpjxnjRPlnfWoSKNSTAun9sPhAIgc/LzcJAMXs1Bn3pQ5Z2Il94Gxh7CuAln6y0p2iKppuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952636},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/tokens":"15.0.0-canary.1728a6dcf.0","@material/density":"15.0.0-canary.1728a6dcf.0","@material/checkbox":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/focus-ring":"15.0.0-canary.1728a6dcf.0","@material/typography":"15.0.0-canary.1728a6dcf.0","@material/touch-target":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.1728a6dcf.0_1695691479093_0.15807879274600856","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/chips","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3af1182f77a05a55475eb8167a5d63f2e735ae5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.ebb636f3d.0.tgz","fileCount":161,"integrity":"sha512-NuJRfyvRiyGVKQKA/sq8akXRKZFoHkp/rTJUTQnd8J2z6noLWfNCyMlBXG5gzJ+i9f6FZ2/0S3XCd7k5www6fQ==","signatures":[{"sig":"MEQCIEH2SjDeuAnyd/uKPgqbsrOc7+zXTdeCoj31zwRk5kAPAiARPIXchx5GdfsvqJEMgamowoE2XzZGNla4QpgVSUA/Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952636},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/tokens":"15.0.0-canary.ebb636f3d.0","@material/density":"15.0.0-canary.ebb636f3d.0","@material/checkbox":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/focus-ring":"15.0.0-canary.ebb636f3d.0","@material/typography":"15.0.0-canary.ebb636f3d.0","@material/touch-target":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.ebb636f3d.0_1696016746740_0.1238810325218005","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/chips","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64c8c894cae40b8f7c85292f02f63e6ec594e483","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":161,"integrity":"sha512-UE+Gf/nO/VIuPCXca/wMY0ftmmtUt+IJBgGBthJJG9/MOD/IcWFB2AH4kG+0k5sgu6yP8SPG3ahSq2Ufkm7oqw==","signatures":[{"sig":"MEUCIA3GFS0YKJTSF5eafX9t6KCvENaz/dxq0qKIILX50cPeAiEA945AF4SkKbCtrTUjnHcOPtj2S7O5fHaPY3QzMbB5wpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952636},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/tokens":"15.0.0-canary.c0d21ecc9.0","@material/density":"15.0.0-canary.c0d21ecc9.0","@material/checkbox":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/focus-ring":"15.0.0-canary.c0d21ecc9.0","@material/typography":"15.0.0-canary.c0d21ecc9.0","@material/touch-target":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c0d21ecc9.0_1696880291695_0.886610295940967","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/chips","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.127a44b28.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6883188484a0296fef90db2230b45a14c9ce8728","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.127a44b28.0.tgz","fileCount":161,"integrity":"sha512-E1jvuW3i8c3b8PRYpkYtQz0DstXgV07ap1GEqOsCp3nsfIIKyfn9JSXVJhZa5u1YH/20S1cOgUN4G0un3aY0/w==","signatures":[{"sig":"MEUCIQCWje0dnVv4Z6fUiyTyskjml+gkZL4su+yuPmk7/aVOCAIgHcnlbxkGIgN8dU2XHCfSdTQSBus9Hamj+dcBGJCV54s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/tokens":"15.0.0-canary.127a44b28.0","@material/density":"15.0.0-canary.127a44b28.0","@material/checkbox":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/focus-ring":"15.0.0-canary.127a44b28.0","@material/typography":"15.0.0-canary.127a44b28.0","@material/touch-target":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.127a44b28.0_1697140924371_0.19797811850341107","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/chips","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.0ad128337.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"699da353827f63da4bedd6e2b74ac1a5ca75e089","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.0ad128337.0.tgz","fileCount":161,"integrity":"sha512-4I/dmrtuwv9QfOuw935VWv8vN44UfPdbkCF+SjfI7Xq4MX/oqm7y00agQevp/xVWmReeiqXPHbRoo+2KPM63Qw==","signatures":[{"sig":"MEUCIFVpEeVrm3TMoLCxyFKKS02JajbGFlyBNP4RBlU+nrzWAiEA9kuxPJ3FYABDgB+X0qTLF3Im9IW/oEGnhzwIUx906N4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/tokens":"15.0.0-canary.0ad128337.0","@material/density":"15.0.0-canary.0ad128337.0","@material/checkbox":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/focus-ring":"15.0.0-canary.0ad128337.0","@material/typography":"15.0.0-canary.0ad128337.0","@material/touch-target":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.0ad128337.0_1697741621746_0.5535208058206638","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/chips","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.9cec94097.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd2b96b8abcdd2774ff7e00d5b823df918f52c3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.9cec94097.0.tgz","fileCount":161,"integrity":"sha512-eBNnlvdzd7gmZF84dZjf4HoNnrPYIfJPGrpia89YtindxMRMC8y46elV7YQJ2SAinrpGaf5CnV0NbXCaKOMmYg==","signatures":[{"sig":"MEUCIGBok7L7A+QMISK7Q1vTzaL5A1ctpQgROoD+9ud2hRrPAiEAv8zK+1kurJmY4WSWb0/YVn4VhYp6rai2xRHhIWLu51M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/tokens":"15.0.0-canary.9cec94097.0","@material/density":"15.0.0-canary.9cec94097.0","@material/checkbox":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/focus-ring":"15.0.0-canary.9cec94097.0","@material/typography":"15.0.0-canary.9cec94097.0","@material/touch-target":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.9cec94097.0_1697757050327_0.3542144458375993","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/chips","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90baaeaeb002a289770df3eba4d79af09a246c10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":161,"integrity":"sha512-qUf7ardNcacKhQ6/tHGiW0gijis23gVr3F+edO1aQUEcfyabqwFFWhdsmwx9sqaB65/tZtJDQY8mZ8gxiZkGtg==","signatures":[{"sig":"MEUCIDPqjyrEmYmXnj/Mir4/2HTunFvmn6wAFcyhOdCUO1MUAiEAvRYpn81t7wQul4G1Ir8UeCXOU2im2pCTcrPAjmb8bwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/tokens":"15.0.0-canary.c51a0bbcc.0","@material/density":"15.0.0-canary.c51a0bbcc.0","@material/checkbox":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/focus-ring":"15.0.0-canary.c51a0bbcc.0","@material/typography":"15.0.0-canary.c51a0bbcc.0","@material/touch-target":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c51a0bbcc.0_1700081955662_0.3110079989402217","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/chips","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04d8799ea6767217c30b01b2b8b9309205bd36e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.d76666ad4.0.tgz","fileCount":161,"integrity":"sha512-Xo2vveh/f2H2bGEzG6HYMjgvqcq9YNM3Iku4QoZ89LLhS4ZtSZN8U+J9FY/wu7McSBXw4S2KVSwNm0E1SVztoA==","signatures":[{"sig":"MEQCIFUT7qXIjDNsZy196G2uYFwqlb8CUfvC00tMDgNWqx4NAiABF9fWnixTX4uidNeoZ/4GjAIjIBIJT0OCC1+RYqlGCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/tokens":"15.0.0-canary.d76666ad4.0","@material/density":"15.0.0-canary.d76666ad4.0","@material/checkbox":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/focus-ring":"15.0.0-canary.d76666ad4.0","@material/typography":"15.0.0-canary.d76666ad4.0","@material/touch-target":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.d76666ad4.0_1701123220437_0.5107798245911674","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/chips","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a26be61d6572fff11bbff58f1230bec6c7d1fa7d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.8656bf0e0.0.tgz","fileCount":161,"integrity":"sha512-z8Xm4IJIa1UpO+71xS1DDSGK7nKRaH7JPTJF8h0qR1I3UPoygqBz9MctxltTpT2LtMA7q7mZ2t34UmQ7Wzet4g==","signatures":[{"sig":"MEUCIQCNRKlf6sfxgNznvgxPvCdSmyeT5yqf3UcGCqBBHY7AGgIgIEjMrQEkCFoyiYqzWvIvu5anVfjhyhk6748QpFafE/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/tokens":"15.0.0-canary.8656bf0e0.0","@material/density":"15.0.0-canary.8656bf0e0.0","@material/checkbox":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/focus-ring":"15.0.0-canary.8656bf0e0.0","@material/typography":"15.0.0-canary.8656bf0e0.0","@material/touch-target":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.8656bf0e0.0_1702415947374_0.5547113631629155","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/chips","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5f44ba72100188e49075fc701d187ef3e75ba82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.7f224ddd4.0.tgz","fileCount":161,"integrity":"sha512-AYAivV3GSk/T/nRIpH27sOHFPaSMrE3L0WYbnb5Wa93FgY8a0fbsFYtSH2QmtwnzXveg+B1zGTt7/xIIcynKdQ==","signatures":[{"sig":"MEQCIFlrXVvQ5IZkrs631ZlaJD9Um8mIYF14HciZ7aQIcboiAiA2aZki7DM9vZCJZxD5yD+BZ2TILSxgwVeesmA70ez6Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/tokens":"15.0.0-canary.7f224ddd4.0","@material/density":"15.0.0-canary.7f224ddd4.0","@material/checkbox":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/focus-ring":"15.0.0-canary.7f224ddd4.0","@material/typography":"15.0.0-canary.7f224ddd4.0","@material/touch-target":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.7f224ddd4.0_1703743784968_0.2914553215291842","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/chips","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af10f3b689a2574e40bddd59d95d75941371af77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":161,"integrity":"sha512-Itxt4QdKijiyLTERTCatJAjAiDeLcegvd6eldptWwpnj8jEnTwaLlL1KCCEMx04cdvi71lFWDWgx/Mm5ruguMQ==","signatures":[{"sig":"MEYCIQCNHstUuypKM7lRpnSCb/g9F5MvmLNle8dHymq7AI1O5AIhAMFUUggsHKK1FqmKIb40Z53UCOH3LVR9SAg90XKgX6pZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/tokens":"15.0.0-canary.a0b8a90c0.0","@material/density":"15.0.0-canary.a0b8a90c0.0","@material/checkbox":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/focus-ring":"15.0.0-canary.a0b8a90c0.0","@material/typography":"15.0.0-canary.a0b8a90c0.0","@material/touch-target":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.a0b8a90c0.0_1707333599140_0.17057184219904364","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/chips","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb086bfd1a11747783dc8226828fd69c035719d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.e50b478eb.0.tgz","fileCount":161,"integrity":"sha512-9U65dEr7OCnrp5cXmzbV3vhGpzJzd93/wLVeeQe5wDdm5qJD3GqbHLSae4IY2x/Jj6cBZQ27n5NFJJnvhazU+Q==","signatures":[{"sig":"MEUCIH/Ty/xochvhgcDuSzFl5MiB6W7u67a3Kf2PnFXFu9zTAiEA40PG2WyBR7m9o0UIXCY0gIQKq218PqvPNY0uig5Ma2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/tokens":"15.0.0-canary.e50b478eb.0","@material/density":"15.0.0-canary.e50b478eb.0","@material/checkbox":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/focus-ring":"15.0.0-canary.e50b478eb.0","@material/typography":"15.0.0-canary.e50b478eb.0","@material/touch-target":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.e50b478eb.0_1707415721919_0.38372150479453326","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/chips","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c0d90feb9e826b6f8e05498dbef1a060718eb59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.c43b3438b.0.tgz","fileCount":161,"integrity":"sha512-C9oykOSwvY5t5QqskNCATxhlzDjXlfpIB7Z6JQnkhIeIJ8nuF45rOvJrB4PAkfsIDGiGv8ZBlXEbwYhVsRloTg==","signatures":[{"sig":"MEQCIBI4MppmcLCgRlRJ9qfcuiCOc4y1qNvl8Z6NLi4t9/kZAiAmXICaR5XL2FQmj9X7RHLS+8gF3LGMagDO3/IAj2FmyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/tokens":"15.0.0-canary.c43b3438b.0","@material/density":"15.0.0-canary.c43b3438b.0","@material/checkbox":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/focus-ring":"15.0.0-canary.c43b3438b.0","@material/typography":"15.0.0-canary.c43b3438b.0","@material/touch-target":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.c43b3438b.0_1708719492278_0.34846148567727897","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/chips","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.819498d8c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ada92d089ab21580fa677017836d4f3ef02b755","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.819498d8c.0.tgz","fileCount":161,"integrity":"sha512-c2r54ZDcieQfXn95XZUYBfwIlvdxrO8F+JgA2nidHtgEanTJRMZvXRKE6c1r4CEaDJQzvd5v1FYwgVjH0YjV5w==","signatures":[{"sig":"MEUCIBTeP7Sq/Q0dPRkApiWCsC2bTZl9Q3En7uQxYj1EWiETAiEA71qDaeL51uAHP/sCLf6dleXhNgp+rqC+KCaDxloytcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/tokens":"15.0.0-canary.819498d8c.0","@material/density":"15.0.0-canary.819498d8c.0","@material/checkbox":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/focus-ring":"15.0.0-canary.819498d8c.0","@material/typography":"15.0.0-canary.819498d8c.0","@material/touch-target":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.819498d8c.0_1710515731152_0.43269219753682564","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/chips","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.453a6248a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f8c2f510f0f3c695dcf8caad9bc6722d0358fc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.453a6248a.0.tgz","fileCount":161,"integrity":"sha512-24dajJp8DheuSTCUz9edBykPcKLXKc0fwI8PtLHegqDa4x1s5EoI+tU56xC/G/9LLHogc4TiKQTs3d6e+cEMoA==","signatures":[{"sig":"MEUCIHGusZLAahlEwANDfmY84FWFbTg3uonPV74e9rBAVRZQAiEAz/+rHQuNaaTmCfjHCtT6H4P4l21bAygdR7yONNY6Gks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/tokens":"15.0.0-canary.453a6248a.0","@material/density":"15.0.0-canary.453a6248a.0","@material/checkbox":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/focus-ring":"15.0.0-canary.453a6248a.0","@material/typography":"15.0.0-canary.453a6248a.0","@material/touch-target":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.453a6248a.0_1711386854147_0.024951120241702984","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/chips","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd569f82759315c27e052d14fb90a5f2b631d339","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.68edc03c6.0.tgz","fileCount":161,"integrity":"sha512-Q0wsRunRWqdx+h3MpdUPhqEFIxDcJOX86C4EEqM81LWA7RehrEvi+XCz9AAvTYvciLpB/iIgY1s8pEUUVoghzA==","signatures":[{"sig":"MEUCIQC6GsanpH9g+525avgVh9hmDMkw3FXU/0uB2k+I3trarQIgcTljSuzwbjuPfz/P9zH35OlLIoQDSIri5zAV5OlfnPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/tokens":"15.0.0-canary.68edc03c6.0","@material/density":"15.0.0-canary.68edc03c6.0","@material/checkbox":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/focus-ring":"15.0.0-canary.68edc03c6.0","@material/typography":"15.0.0-canary.68edc03c6.0","@material/touch-target":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.68edc03c6.0_1712603226603_0.6665327673657893","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/chips","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d2d47038ea19ecad278cc369ccaf46b2c09f6cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.5bebc0064.0.tgz","fileCount":161,"integrity":"sha512-gbcvza3gNTKpAyngmzlJB+c3Ui3ZG/U3eiteRjg7MNH4fQ3AS9qW7bpMkb5E9lHicKWzRepnlpBc/hoqefSOQg==","signatures":[{"sig":"MEYCIQD36V4la/lo+s5Sq37zsZAjQo5zGwc6KDx6hx/G/OIT3QIhAKEFuVGs+jlzBlAXJjVGJFCa1Fvdv5YOHTJLBnREBlaZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/tokens":"15.0.0-canary.5bebc0064.0","@material/density":"15.0.0-canary.5bebc0064.0","@material/checkbox":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/focus-ring":"15.0.0-canary.5bebc0064.0","@material/typography":"15.0.0-canary.5bebc0064.0","@material/touch-target":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.5bebc0064.0_1712871707129_0.2597126078062644","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/chips","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.311f29a60.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b047579dc70246a3bbbb3fb371051e4483d0dbe5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.311f29a60.0.tgz","fileCount":161,"integrity":"sha512-JscJg3EVohN8ZIn4Ioum2mz7i5MjIugALHa2cdZ7zcRr2pSUqKkI92yH4kQWCGqshpZXx2auv3lz3zTVBPEAbw==","signatures":[{"sig":"MEUCIQD7aGyDJ7wE95kN5JF6YV2DXg8p7Hp2vqV+I+jwM1iCDwIgbLOVuEzhFNz/FdI0JWaCm72KOuhC/di3DI1BHXdFuPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/tokens":"15.0.0-canary.311f29a60.0","@material/density":"15.0.0-canary.311f29a60.0","@material/checkbox":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/focus-ring":"15.0.0-canary.311f29a60.0","@material/typography":"15.0.0-canary.311f29a60.0","@material/touch-target":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.311f29a60.0_1713895261652_0.025515196994881917","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/chips","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.65c10a622.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4306a37cfe9c28297d78de444575e98b34dadc0c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.65c10a622.0.tgz","fileCount":161,"integrity":"sha512-2x7Ip5nbw4o9Ts0C0Zhm3tkeEwGPp/gziFNUiGYY+/FxLSGZbZpOq7PmJMpeEn6CaTKMWK7wNlkH/FfqmG+62g==","signatures":[{"sig":"MEUCIQCeGiP3SDwc79w3JOOSW2N94Q3TMjnBD0pO+wxS2Ye0LAIgD5+mGL4qcULozLA43NRRYBgYg9TUKOtxYKTNbH9RHrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/tokens":"15.0.0-canary.65c10a622.0","@material/density":"15.0.0-canary.65c10a622.0","@material/checkbox":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/focus-ring":"15.0.0-canary.65c10a622.0","@material/typography":"15.0.0-canary.65c10a622.0","@material/touch-target":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.65c10a622.0_1714070976066_0.6065178956618416","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/chips","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e81f70e85e48566d2a0a1caec5a5ec7486899b2f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":161,"integrity":"sha512-XXfgtI7tyKsC/dRgg3o1Ioh3rZophah4xd7CefQsrZNyo5uf6/UT4L01Yc453zIoArW9G/6gQFecK2eRnTtxtA==","signatures":[{"sig":"MEYCIQDwbaEtlmgIVek3CvX3soz/Cx+RW2l0pi8i+xozU3Ki3wIhAMR/laH3im5H4PqdxD/GZ2ZwvDRiZt3hgVxTzWHuRZwB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/tokens":"15.0.0-canary.4b35cb7d0.0","@material/density":"15.0.0-canary.4b35cb7d0.0","@material/checkbox":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/focus-ring":"15.0.0-canary.4b35cb7d0.0","@material/typography":"15.0.0-canary.4b35cb7d0.0","@material/touch-target":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.4b35cb7d0.0_1714651420474_0.7486832092591897","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/chips","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba9bce3f12959cd6c48ceeb72fee89d599b7d893","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.f80ac92b0.0.tgz","fileCount":161,"integrity":"sha512-9St0z+gHVAoBAuKRDZhHol+xcke69L+zJpshHOujql/1mEudA+WFp1Nev3y258QKybmIEZ4q4w27eXLqre/fDg==","signatures":[{"sig":"MEUCIA88/wMOZ8yq40JJWnNujWyN7ivBmbeo0b9hpYLHEffeAiEA9F2+U8cyEep/Bpf4UFA1xCiEDXvXLs8GRFoWA1FNjBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/tokens":"15.0.0-canary.f80ac92b0.0","@material/density":"15.0.0-canary.f80ac92b0.0","@material/checkbox":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/focus-ring":"15.0.0-canary.f80ac92b0.0","@material/typography":"15.0.0-canary.f80ac92b0.0","@material/touch-target":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.f80ac92b0.0_1714652028210_0.9958502358183254","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/chips","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c02b69a3606da7b7d8a209105493874d90833c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.2f5b899bc.0.tgz","fileCount":161,"integrity":"sha512-A83kgK06q8JEwSzw8kgvXr80PfjAKbEhNSfCSs6QaTEuolWJ5HWBvm6DpUzcIYUFWNXiSsu14ImjXBblUbL7lQ==","signatures":[{"sig":"MEQCIGqJO1xAcpQ+I9y1tII3M0qjc0RxJJp+GaJ1s1kAND1eAiAfPHQnVqhvXcGybVh6qcNduVP1cFfLx4x2ncO+YZi7Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/tokens":"15.0.0-canary.2f5b899bc.0","@material/density":"15.0.0-canary.2f5b899bc.0","@material/checkbox":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/focus-ring":"15.0.0-canary.2f5b899bc.0","@material/typography":"15.0.0-canary.2f5b899bc.0","@material/touch-target":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.2f5b899bc.0_1716213426050_0.2092468317673386","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/chips","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","chips"],"license":"MIT","_id":"@material/chips@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66fd9a68072a967141b366b9c3f0255645dd975d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.cfec83c74.0.tgz","fileCount":161,"integrity":"sha512-2ByEawo3M66piTpM22VZGjGarvmxFRNQ8nj1Bq1bVrojKS+PF08DYJYZ7TELEtX5IVfxzgLzUTG3gnzq3eBZUA==","signatures":[{"sig":"MEUCIQCfyzxHIcdPk6x/ZKdpGM/x74dUuuyR1nFxjo/HS+967gIgQuMIFL30EXiLbDayAnJw0eyLFV1eK8QReCrWcMq32Oc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1955283},"main":"dist/mdc.chips.js","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/tokens":"15.0.0-canary.cfec83c74.0","@material/density":"15.0.0-canary.cfec83c74.0","@material/checkbox":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/focus-ring":"15.0.0-canary.cfec83c74.0","@material/typography":"15.0.0-canary.cfec83c74.0","@material/touch-target":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_15.0.0-canary.cfec83c74.0_1716231451166_0.3458844148804068","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/chips","description":"The Material Components for the Web chips component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","main":"dist/mdc.chips.js","module":"index.js","sideEffects":false,"keywords":["material components","material design","chips"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-chips"},"publishConfig":{"access":"public"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/checkbox":"15.0.0-canary.423edc3dc.0","@material/density":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/focus-ring":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/tokens":"15.0.0-canary.423edc3dc.0","@material/touch-target":"15.0.0-canary.423edc3dc.0","@material/typography":"15.0.0-canary.423edc3dc.0","safevalues":"^0.3.4","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","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**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within 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","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/chips@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-oy7pXBqXGJeaJfsS2Ry070TOYrksuixjOieK/oJ4Nj9v7ZkYBDBKpyibchKx3bMayK/yuUYj78i2sUZgFnuZSQ==","shasum":"3ae64b2f4b816928f415839bc9e5803337d08986","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/chips/-/chips-15.0.0-canary.423edc3dc.0.tgz","fileCount":161,"unpackedSize":1955283,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEa/tqJEWJP7BoDaNzJ6tw+s776c6uuTdrJbGUW99wpOAiEA38aYZazo0bytkLWKL+UGKQpy4WfHX69TRlzlOzCp/Y4="}]},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chips_15.0.0-canary.423edc3dc.0_1719425544618_0.7072561695258566"},"_hasShrinkwrap":false}},"name":"@material/chips","time":{"created":"2018-02-05T22:02:48.025Z","modified":"2024-06-26T18:12:25.425Z","0.30.0":"2018-02-05T22:02:48.025Z","0.31.0":"2018-02-20T18:23:00.313Z","0.32.0":"2018-03-05T22:08:42.409Z","0.33.0":"2018-03-19T16:39:59.464Z","0.34.0":"2018-04-02T21:51:52.301Z","0.34.1":"2018-04-03T23:39:45.428Z","0.35.0":"2018-04-23T22:40:06.864Z","0.35.1":"2018-05-03T20:51:38.975Z","0.36.0-0":"2018-05-29T15:24:35.308Z","0.36.0":"2018-06-04T15:38:57.998Z","0.36.1":"2018-06-18T15:40:18.076Z","0.37.0":"2018-07-02T22:14:51.356Z","0.37.1":"2018-07-16T21:21:28.840Z","0.38.0":"2018-07-30T17:08:00.903Z","0.38.1":"2018-08-13T20:39:40.918Z","0.39.0-0":"2018-08-16T15:15:57.157Z","0.39.0":"2018-08-27T17:41:21.306Z","0.39.1":"2018-08-31T21:37:10.328Z","0.39.2":"2018-09-11T16:55:46.769Z","0.39.3":"2018-09-11T17:19:41.579Z","0.40.0":"2018-09-24T20:02:41.004Z","0.40.1":"2018-10-08T21:14:38.788Z","0.41.0":"2018-10-29T20:22:44.320Z","0.42.0":"2018-12-04T22:55:21.884Z","0.43.0":"2019-01-07T19:49:52.050Z","0.44.0":"2019-02-04T18:24:54.461Z","0.44.1":"2019-02-19T23:03:28.078Z","1.0.0-0":"2019-02-28T00:00:05.181Z","1.0.0-1":"2019-03-04T23:33:51.076Z","1.0.0":"2019-03-06T21:08:41.293Z","1.0.1":"2019-03-11T22:07:55.567Z","1.1.0":"2019-03-26T19:26:25.165Z","1.1.1":"2019-04-08T20:13:56.119Z","2.0.0":"2019-04-29T17:40:27.499Z","2.1.0":"2019-05-06T15:33:49.725Z","2.1.1":"2019-05-10T17:25:40.310Z","3.0.0-0":"2019-05-13T21:49:38.211Z","2.2.0":"2019-05-13T22:17:12.767Z","2.3.0":"2019-05-28T21:24:14.279Z","3.0.0-alpha.0":"2019-06-12T04:07:11.472Z","3.0.0-alpha.1":"2019-06-12T19:02:29.406Z","3.0.0":"2019-06-25T22:28:13.456Z","3.1.0-alpha.0":"2019-07-16T13:29:26.502Z","3.1.0":"2019-07-22T22:02:55.693Z","4.0.0-alpha.0":"2019-08-07T21:09:52.697Z","4.0.0-canary.0":"2019-09-05T04:38:10.957Z","4.0.0-canary.1":"2019-09-09T20:21:02.586Z","3.2.0":"2019-09-12T21:53:53.441Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:50.502Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:38.753Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:26.988Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:12.727Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:31.706Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:55.229Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:53.848Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:05:06.628Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:12.155Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:46.910Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:22.952Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:38.782Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:35.503Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:26.767Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:24.430Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:09.254Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:45.887Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:02:03.037Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:29.740Z","4.0.0":"2019-11-02T18:12:02.755Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:15.831Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:17.792Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:13.190Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:46.556Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:48.228Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:53.856Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:18.166Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:21.267Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:24.150Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:47.371Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:22.660Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:07.722Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:58.326Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:26.695Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:12.773Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:35.296Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:44.209Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:20.293Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:08:06.163Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:43.367Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:35.713Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:21:00.613Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:38.606Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:16.896Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:41.866Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:35.481Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:24.726Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:17:02.059Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:52.122Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:53.801Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:50.763Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:37.201Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:47.176Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:34:08.506Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:10.542Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:35.617Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:59.475Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:46.226Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:21:03.147Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:49.221Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:44.584Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:44.633Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:15:05.441Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:44.648Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:46.800Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:41.034Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:42.220Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:23.520Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:43.051Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:14.777Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:14.934Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:52.045Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:42.548Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:54.024Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:11:00.387Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:23:05.025Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:36.339Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:54.890Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:07.912Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:28.715Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:16.557Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:11:03.776Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:40:06.682Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:51.834Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:40.075Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:12.797Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:42.950Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:55.601Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:27.603Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:46.634Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:35.439Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:31.932Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:42:11.000Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:54.478Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:30.874Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:56.432Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:13.406Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:56.312Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:17:06.653Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:43.201Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:54.821Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:37.504Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:27.646Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:52.252Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:54.405Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:53.783Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:59.889Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:28.676Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:50.446Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:26.338Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:33:04.805Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:19.977Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:55.861Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:58.391Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:35.562Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:30.302Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:42.846Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:57.245Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:46.755Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:49:04.972Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:18:07.501Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:43.952Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:40.737Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:57.997Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:21.634Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:56.019Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:18:01.585Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:23.523Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:48.530Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:28.432Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:41.804Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:19.113Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:36.537Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:58.513Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:47:01.305Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:38.796Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:17.901Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:23.001Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:27.167Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:49.815Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:10:04.011Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:19.559Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:56:01.160Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:46.266Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:15.258Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:49.978Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:36.937Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:33:11.831Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:47.573Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:55.623Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:30:00.360Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:44:00.701Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:33.649Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:27.329Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:25.094Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:17:20.548Z","5.0.0-canary.45985457b.0":"2020-01-29T23:34:29.338Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:38:00.868Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:49.799Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:53.129Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:40.955Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:58.761Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:15.888Z","5.0.0-canary.535398572.0":"2020-02-03T18:13:06.342Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:32.612Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:36.434Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:04:54.779Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:59.332Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:29.541Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:49.540Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:56:06.553Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T23:00:02.286Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:27.504Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:55.068Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:12:11.624Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:44:02.689Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:49.793Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:50:02.807Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:52:15.009Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:35.444Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:49.672Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:19.665Z","5.0.0":"2020-02-14T00:09:30.323Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:48.817Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:44:16.971Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:23:07.189Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:40.754Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:32.809Z","6.0.0-canary.949562303.0":"2020-02-21T20:38:23.046Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:35.331Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:01:16.202Z","5.1.0":"2020-02-25T21:38:41.208Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:39:18.965Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:33.090Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:04:19.700Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:43.879Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:11:10.356Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:26:39.834Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:40.053Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:32.691Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:51.139Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:47:43.072Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:22:49.928Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:03:15.478Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:42.893Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:59:11.656Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:57.300Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:52.324Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:26:09.424Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:41.170Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:58.806Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:30.961Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:43.817Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:29.044Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:35:27.420Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:23.678Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:54:00.412Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:43.258Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:48.213Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:44:09.087Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:48.072Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:54.939Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:30.314Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:57:02.298Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:20:04.606Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:52.812Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:36.588Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:10:06.785Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:36.227Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:41.915Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:25:16.460Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:37:19.376Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:42:19.664Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:33:04.639Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:31.020Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:54.169Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:23:43.258Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:47:05.879Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:45.524Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:53:19.676Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:42.072Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:36.757Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:57.389Z","6.0.0-canary.c02642273.0":"2020-04-15T16:18:05.555Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:53.424Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:20.327Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:27:27.276Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:48.991Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:55:08.939Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:43.226Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:32.217Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:59.178Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:32.617Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:22:06.560Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:37.425Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:59:04.640Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:43.549Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:59.185Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:35.418Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:19:09.873Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:45.863Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:59.695Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:47.259Z","6.0.0":"2020-04-23T17:27:21.380Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:22.749Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:49.136Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:39.693Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:27.450Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:33.012Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:58.846Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:07:58.784Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:18:04.234Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:42.785Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:30:18.888Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:29.962Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:33:35.989Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:43:09.240Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:28.461Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:23:21.568Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:28.286Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:48:10.556Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:45.039Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:57.917Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:44.571Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:57.084Z","7.0.0-canary.09f591967.0":"2020-05-05T21:05:08.372Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:10:14.075Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:31.478Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:46.289Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:19:22.660Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:50:06.015Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:39:04.878Z","7.0.0-canary.119e21426.0":"2020-05-08T20:23:18.000Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:08:09.089Z","7.0.0-canary.e84444387.0":"2020-05-08T21:32:12.287Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:52.631Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:30:04.332Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:33:20.365Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:57.015Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:43.585Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:57.593Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:48:03.172Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:27.447Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:52:07.644Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:54:17.641Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:48.622Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:40.483Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:24.843Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:10:03.736Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:53.042Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:37:36.770Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:51:14.419Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:25.112Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:27.652Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:46.734Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:46.849Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:15:34.122Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:49.737Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:46.789Z","7.0.0-canary.740860e78.0":"2020-05-21T17:27:18.231Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:29:25.076Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:49.995Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:25.568Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:44.573Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:44.743Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:46.038Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:36.997Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:38.631Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:29:21.369Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:41.872Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:37.038Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:47:13.120Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:46:03.975Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:08:12.117Z","7.0.0-canary.01de07011.0":"2020-05-26T19:53:13.245Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:57.780Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:14:19.454Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:28.919Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T19:00:10.238Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:23.140Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:29.036Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:44.421Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:57.729Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:37:44.518Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:53.334Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:56:02.859Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:56.356Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:51.309Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:41.851Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:41:19.409Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:26:10.223Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:59.679Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:44.468Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:26.568Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:45.739Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:03:22.001Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:24:11.691Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:55.268Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:47:26.778Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:51.966Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:58:43.653Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:49.409Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:13:20.885Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:15:05.134Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:15:14.905Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:05:20.024Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:45:01.466Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:42:45.945Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:57:54.461Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:44.100Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:27:00.500Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:17:12.471Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:09.147Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:05.081Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:09:07.808Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:24.467Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:50:02.231Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:50.582Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:23.538Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:05:02.660Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:50.566Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:49.165Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:28.401Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:43.558Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:11:28.840Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:39.624Z","7.0.0-canary.10b505785.0":"2020-06-19T20:22:07.308Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:20.507Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:33.849Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:26.195Z","7.0.0-canary.4e360ae94.0":"2020-06-19T21:00:07.897Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:16.208Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:44.882Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:55.577Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:31:11.735Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:49.165Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:47.170Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:26.740Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:03.061Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:17:44.572Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:56.909Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:51.640Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:58:08.043Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:30:04.197Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:29:00.822Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:34:44.395Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:40:25.451Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:44.588Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:04.202Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:30.589Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:29.407Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:23.606Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:01:10.351Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:41.082Z","7.0.0":"2020-06-23T19:11:40.764Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:34.768Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:37.255Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:22.447Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:21.858Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:57:06.100Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:42.310Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:19.991Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:12.729Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:00.332Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:26.511Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:13.970Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:41.281Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:03.512Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:16:03.394Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:09.424Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:52:44.034Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:06:20.655Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:15:15.708Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:47:53.054Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:43.338Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:55.688Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:39.036Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:42:12.884Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:49:04.691Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:43.123Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:56.152Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:58.531Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:43.450Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:37:04.844Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:29.612Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:04.868Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:53.994Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:14.451Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:08:00.585Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:44.479Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:58.751Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:02.160Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:28.980Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:32.025Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:57.319Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:50.622Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:26.763Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:48.352Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:08.630Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:39.710Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:40.390Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:24:09.533Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:32.573Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:59.360Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:53:27.405Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:10.295Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:47:34.682Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:55.432Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:18.805Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:34.000Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:30.353Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:30.812Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:36.925Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:14.255Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:40.616Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:52.059Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:07:23.877Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:18.485Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:56.812Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:40.922Z","8.0.0-canary.81dc33377.0":"2020-07-27T16:00:08.172Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:33:08.457Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:05.524Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:43.269Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:59:00.899Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:59:18.735Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:57.204Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:55.439Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:40:09.288Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:53:06.721Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:52.018Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:37:17.257Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:50:05.288Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:21:18.052Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:53.956Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:20.330Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:15:52.956Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:03.610Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:01.915Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:11:04.162Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:16:10.533Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:28.362Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:50.383Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:19.931Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:47:05.544Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:00:35.750Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:38.647Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:21:15.882Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:23.535Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:00:40.692Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:51:17.628Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:50.995Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:45.810Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:54:17.540Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:00.315Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:55:46.974Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:17.045Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:49:22.781Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:25:05.883Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:48.519Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:55:00.343Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:20:31.072Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:14.866Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:30.542Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:35.643Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:40.096Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:01.954Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:15.819Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:21:53.531Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:09.122Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:33.839Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:24.832Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:02:30.141Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:09:06.143Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:05:05.064Z","8.0.0-canary.760873445.0":"2020-08-12T21:44:07.434Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:54:08.743Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:17.204Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:35.114Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:17.356Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:36.589Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:50:30.717Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:18:23.690Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:59.797Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:17:04.207Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:30:26.409Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:21.938Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:00.055Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:14.196Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:47.835Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:44.150Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:32.914Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:48.566Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:55.705Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:33:57.229Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:40.628Z","8.0.0-canary.546277d32.0":"2020-08-20T16:44:46.955Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:00:59.056Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:03.899Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:16:05.018Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:34.866Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:22.772Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:37.270Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:43.676Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:38.463Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:15.927Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:44.269Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:42.212Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:17.908Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:17.886Z","8.0.0-canary.911014711.0":"2020-08-27T16:09:05.405Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:56:15.308Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:57:13.381Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:57:43.305Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:44.362Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:55.670Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:09.012Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:50:49.398Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:12.976Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:11:14.071Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:01:08.673Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:39.629Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:23.068Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:50.574Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:46.685Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:26:25.218Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:44:12.926Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:29.175Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:49.671Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:47.397Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:15:10.954Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:17.881Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:33:20.753Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:36:23.401Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:52:00.099Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:25:39.422Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:53.627Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:11:11.504Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:29.441Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:42.559Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:47:31.571Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:47.622Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:45.583Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:19.412Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:23.387Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:09:16.908Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:39.503Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:32:51.780Z","8.0.0-canary.596e98424.0":"2020-10-28T16:04:19.544Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:54.616Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:46:13.417Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:13:55.894Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:56.748Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:01:09.328Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:33:47.381Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:20.073Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:06:02.528Z","8.0.0":"2020-11-02T23:00:18.836Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:00:47.147Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:11.367Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:46.702Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:13.589Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:59.889Z","9.0.0-canary.419e03572.0":"2020-11-04T01:34:07.783Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:54.233Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:21.511Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:15.281Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:42.655Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:45:24.146Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:21:29.123Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:51:11.109Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:46:51.735Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:18.046Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:26:08.796Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:28:40.799Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:59:11.730Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:44:35.197Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:55.031Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:27:08.710Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:24.953Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:58.844Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:06.099Z","9.0.0-canary.a41527604.0":"2020-11-19T20:02:19.199Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:56:58.722Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:48:10.012Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:09:36.642Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:16:44.227Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:44.638Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:35:27.503Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:27.058Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:21.955Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:00:39.505Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:57:56.317Z","9.0.0-canary.977585650.0":"2020-12-02T14:43:30.995Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:38.438Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:36.134Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:17:29.981Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:32.345Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:30:50.518Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:42:34.721Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:59:43.606Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:02:36.703Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:46:20.702Z","9.0.0-canary.832668d33.0":"2020-12-04T18:07:02.187Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:30:00.515Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:43:06.489Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:35.040Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:40.208Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:14:26.020Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:29:20.885Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:26.267Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:46:25.411Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:06:29.543Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:43.433Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:50:31.054Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:09:01.570Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:46:24.270Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:29:04.732Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:10.980Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:00.524Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:02:52.558Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:18.085Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:08:32.370Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:36.166Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:06:16.215Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:35.819Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:30.877Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:57.890Z","9.0.0":"2020-12-29T19:46:42.483Z","10.0.0-canary.776c18681.0":"2020-12-30T00:41:07.717Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:12:31.565Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:47:25.043Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:05:19.169Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:39.767Z","10.0.0-canary.365c69360.0":"2021-01-05T17:49:20.799Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:01:46.271Z","10.0.0-canary.766981c15.0":"2021-01-05T22:41:21.666Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:58.889Z","10.0.0-canary.968735356.0":"2021-01-06T15:51:35.329Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:53.360Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:27:41.997Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:16.395Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:20:52.615Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:52:38.407Z","10.0.0-canary.089de519c.0":"2021-01-08T22:21:36.633Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:57.411Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:25:28.005Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:13:27.008Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:58.682Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:08:09.617Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:17.640Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:35:08.188Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:14.750Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:54:31.567Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:20:30.853Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:43.565Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:41.290Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:10:17.680Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:05:31.758Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:57:06.171Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:46.940Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:09.698Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:36:29.804Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:24:46.144Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:52.400Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:38.397Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:53.304Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:34:34.728Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:46:49.352Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:04:53.986Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:56.895Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:20:53.623Z","10.0.0-canary.994873795.0":"2021-01-27T14:52:15.015Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:03:04.334Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:33:09.288Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:04:54.357Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:04:14.905Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:15:22.825Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:08.826Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:50:00.449Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:44:18.333Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:11.426Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:34:43.310Z","10.0.0-canary.05f249666.0":"2021-02-04T17:50:57.380Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:58.933Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:35:34.027Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:01:17.275Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:24.903Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:18:14.903Z","10.0.0":"2021-02-05T16:19:41.307Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:42:48.455Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:32:20.044Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:05:31.329Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:04:53.666Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:35:20.228Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:18:08.492Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:01:44.983Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:42:00.677Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:53:23.554Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:18:14.931Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:07:36.929Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:42:32.567Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:31:34.744Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:00:04.181Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:32:03.169Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:12:54.845Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:16:56.872Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:10:36.447Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:47.775Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:14.636Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:45:28.120Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:36:09.500Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:06:13.294Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:38:54.120Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:24:07.185Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:43:06.580Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:11.091Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:37:42.634Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:48.479Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:37:16.338Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:46:26.604Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:01:22.424Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:50:39.066Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:46:53.386Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:31:15.374Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:14:49.099Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:33:38.256Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:34:57.004Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:36:12.916Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:51:16.588Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:16:16.184Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:48:53.793Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:39.543Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:37:45.294Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:08:06.628Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:39:58.903Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:54:17.630Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:21:40.169Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:32:41.708Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:48.818Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:46.243Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:02:04.040Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:40:38.635Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:34.468Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:46:20.672Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:40:28.642Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:44:44.930Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:28:06.577Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:57.723Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:54.785Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:25:31.874Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:50:51.709Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:03:21.321Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:51.631Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:37:24.762Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:02:02.272Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:09:22.399Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:33:45.037Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:41:30.557Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:46.143Z","11.0.0-canary.73a227194.0":"2021-03-12T00:24:38.305Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:04:07.530Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:35:38.106Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:20:38.890Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:48:23.079Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:57.715Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:40:07.331Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:57.016Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:02:14.958Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:56.026Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:21:04.819Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:18:13.759Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:45:07.953Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:18:49.708Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:39:07.833Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:51:48.565Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:14.112Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:13:36.664Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:34:20.939Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:44:38.170Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:05:38.928Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:12.206Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:08:22.293Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:03:22.622Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:55:21.488Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:05:06.373Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:30:07.704Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:54.522Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:33:17.880Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:57:50.967Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:59.345Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:28.863Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:17.192Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:13.931Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:12:36.814Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:55.696Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:16.938Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:01:20.466Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:47.262Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:24:36.462Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:06:02.951Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:01:29.008Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:43:06.814Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:45:44.794Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:20.178Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:58:17.030Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:36:51.429Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:10.642Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:50.925Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:12:05.000Z","11.0.0-canary.24255c408.0":"2021-04-09T20:13:23.865Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:04.105Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:16:06.552Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:59.631Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:31.155Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:38.498Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:32:20.871Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:42.800Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:55:10.325Z","11.0.0":"2021-04-15T22:58:54.418Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:45:36.030Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:47:18.757Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:49.658Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:19.124Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:09:07.592Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:58:08.245Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:23.855Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:55.344Z","12.0.0-canary.cad489689.0":"2021-04-22T16:50:32.880Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:00.899Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:46.265Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:40.189Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:58.935Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:25.915Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:20:24.707Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:09.179Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:00.593Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:58:16.336Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:41.433Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:24.411Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:13:58.420Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:48:29.076Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:12.353Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:23.008Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:47.670Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:34.113Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:18:38.554Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:24:20.140Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:03:02.842Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:38:18.714Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:52.587Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:09.371Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:23:10.895Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:23.776Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:57.060Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:42:43.753Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:53.037Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:55:39.816Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:01:30.190Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:03.022Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:23.396Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:31:03.699Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:34:30.666Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:14.156Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:42.435Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:04:09.266Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:39.565Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:22:52.132Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:56.359Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:51.488Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:01:09.666Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:41:40.309Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:17.131Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:38.931Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:40.328Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:30:01.355Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:44:50.873Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:43:47.077Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:19:53.289Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:24:06.900Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:17.048Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:57:28.348Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:09:33.271Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:25:53.781Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:12.118Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:59:03.191Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:54.883Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:07.998Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:20:24.599Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:21.796Z","12.0.0-canary.33a954852.0":"2021-05-13T15:08:18.564Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:31:37.571Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:09:06.987Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:14:17.235Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:15.145Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:28.571Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:45.585Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:55.945Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:24.825Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:52:07.376Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:13.684Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:06:25.942Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:02.210Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:36:00.893Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:05:30.283Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:10.044Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:01.463Z","12.0.0-canary.464a00286.0":"2021-06-03T14:46:47.512Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:48.473Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:53.125Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:14:42.798Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:40.816Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:58.710Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:48.792Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:25.875Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:06:50.124Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:07:51.976Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:36:52.426Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:19.480Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:26.174Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:22.786Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:44.148Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:40.646Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:34.178Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:31:12.458Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:09.583Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:38.993Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:52:24.549Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:54.860Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:03.295Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:50.486Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:25:06.917Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:17.070Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:41:09.099Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:37:37.630Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:38.414Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:11.202Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:59.618Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:15:30.428Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:07.993Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:25.535Z","12.0.0-canary.796811db7.0":"2021-07-01T00:04:27.550Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:10.437Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:47.746Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:00:38.741Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:50.861Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:04:17.890Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:14.570Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:06.587Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:59.204Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:58.206Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:10:05.281Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:52.758Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:31.507Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:11.298Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:23:03.136Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:43.738Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:08:46.107Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:31.197Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:56.397Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:13.218Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:35.824Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:44.519Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:15:03.055Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:14.991Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:42:39.456Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:09:32.535Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:26.669Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:04.344Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:10.127Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:35.662Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:50:31.606Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:02.106Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:22.705Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:22.911Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:48.138Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:56:23.562Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:31.150Z","12.0.0":"2021-07-27T19:50:33.813Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:52:08.464Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:48.117Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:27:03.762Z","13.0.0-canary.28656298a.0":"2021-07-29T18:14:09.043Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:24.193Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:13.920Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:00.313Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:57.140Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:15:00.053Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:00:24.855Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:06.095Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:56.036Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:45.258Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:33.960Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:29.745Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:08:37.872Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:56.720Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:14.166Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:41.654Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:41:33.041Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:45.216Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:25.396Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:56:26.148Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:46:29.286Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:49:08.611Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:46.080Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:22:30.569Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:21.726Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:23.078Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:24:29.197Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:52.428Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:18.012Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:49:30.554Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:55.257Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:48.732Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:28.567Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:56.056Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:27:48.801Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:29:20.265Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:17.442Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:33.554Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:38.382Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:48.313Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:21.728Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:26.216Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:33.589Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:38:53.926Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:07:10.552Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:09:40.516Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:00.153Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:28.779Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:35.285Z","13.0.0-canary.611db508e.0":"2021-09-02T03:15:52.667Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:38:57.202Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:45:56.997Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:54.008Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:41.020Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:33:13.093Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:39.409Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:28.642Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:44.859Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:35:02.072Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:43.751Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:37:10.938Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:44.047Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:55.457Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:57.192Z","13.0.0-canary.864798678.0":"2021-09-09T18:38:24.670Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:23:23.598Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:05:10.114Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:48.188Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:49.932Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:51.589Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:37.355Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:50.633Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:53.345Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:20.593Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:58.082Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:34.782Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:41.700Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:13:01.050Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:53.160Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:29.260Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:57.141Z","13.0.0":"2021-09-24T19:46:54.092Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:36.979Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:12:01.552Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:18.868Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:44:03.299Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:55.615Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:20.791Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:33.551Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:57.588Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:23:10.621Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:40.719Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:49.791Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:46.626Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:30.775Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:53.021Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:32.857Z","14.0.0-canary.a986df922.0":"2021-10-29T21:36:02.208Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:54.717Z","14.0.0-canary.468392606.0":"2021-11-11T19:41:11.899Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:49.026Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:48.718Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:32.610Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:36.042Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:28.888Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:47.220Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:51.313Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:21.615Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:51:22.668Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:18:29.243Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:51.018Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:38.937Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:48.605Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:26:24.202Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:46.650Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:33.889Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:06:00.261Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:49.685Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:45.008Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:54.247Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:52:08.420Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:31.975Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:44.443Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:53.883Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:08:08.496Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:56.875Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:39.054Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:44.755Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:41:22.335Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:30.280Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:11:11.711Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:51.150Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:28.968Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:43.950Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:49.640Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:49.575Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:30.214Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:51:07.221Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:53.611Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:42.875Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:54:18.028Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:19:03.174Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:53.226Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:54.522Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:33:29.176Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:41.828Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:38.258Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:53.980Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:51:17.161Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:24:20.454Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:42.045Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:48:13.762Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:55:10.899Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:45.937Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:08:04.551Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:59.587Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:30.358Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:34.322Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:05:20.311Z","14.0.0-canary.868793776.0":"2022-02-22T19:37:31.733Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:18.833Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:24.325Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:33.389Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:59.686Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:30.350Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:45.785Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:48.438Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:51:12.122Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:44.304Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:19:00.870Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:28.061Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:24.399Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:53:18.072Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:45:15.031Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:55.702Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:42.063Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:41:09.839Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:44.013Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:36:08.786Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:27.446Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:34:07.108Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:27.335Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:23.427Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:32.389Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:55.298Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:56.265Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:31.492Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:03:07.976Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:32.933Z","14.0.0":"2022-04-28T16:57:13.137Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:58:14.561Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:53.647Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:45.663Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:57:13.906Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:31.904Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:26:15.849Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:34.532Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:40.482Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:30.472Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:28:13.038Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:42.315Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:02:13.618Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:54.431Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:59.140Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:23:02.434Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:59:04.314Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:26.434Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:36.944Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:47.569Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:59.598Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:29.917Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:40.218Z","15.0.0-canary.764de225d.0":"2022-06-29T16:28:10.485Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:29.983Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:56:05.626Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:37.970Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:52:12.257Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:32:08.015Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:52.270Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:34.261Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:48.405Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:27.287Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:38:14.358Z","15.0.0-canary.88db01990.0":"2022-07-12T11:41:16.616Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:30:03.315Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:36:06.877Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:26.760Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:19.572Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:32.871Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:22.195Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:23.763Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:06:20.797Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:25:26.627Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:53.897Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:15.588Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:55.345Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:23:00.859Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:22.657Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:16.449Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:26.665Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:54.554Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:58.361Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:44.066Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:56.788Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:22:03.815Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:53.800Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:44:04.767Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:58.125Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:47:06.166Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:28.076Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:59.174Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:46:30.357Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:22:09.574Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:27.315Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:56.970Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:51.644Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:20:09.641Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:05:04.137Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:04:09.424Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:21.303Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:59.055Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:51.315Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:39.684Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:37:13.382Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:38.581Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:49:09.286Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:09:23.159Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:57:34.633Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:47.426Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:46:00.141Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:20.234Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:58:29.493Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:12.352Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:50.928Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:08:16.038Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:56.422Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:32:20.774Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:54.552Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:10.854Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:19:21.036Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:20:38.998Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:52.742Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:16:00.038Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:52:00.171Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:38:55.734Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:56:34.453Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:07:05.450Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:09:03.843Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:39:34.352Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:50:24.265Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:03:39.634Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:59:52.528Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:22:32.981Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:43:02.735Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:52:30.337Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:15:12.742Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:52:50.002Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:19:24.555Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:57:34.853Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:23:57.196Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:58:19.765Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:41:42.512Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:43:36.899Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:24:40.945Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:44:03.753Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:14:38.884Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:18:23.635Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:38:25.657Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:13:08.641Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:59.213Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:07:02.891Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:20:23.457Z","15.0.0-canary.fc539db34.0":"2022-10-24T19:00:26.559Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:46:18.323Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:31:55.250Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:16:39.363Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:33:45.453Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:50:48.349Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:57:42.582Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:38:08.012Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:12:01.584Z","15.0.0-canary.909b48215.0":"2022-11-03T04:09:13.712Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:20:29.234Z","15.0.0-canary.da95e2a05.0":"2022-11-04T17:00:22.218Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:58:21.744Z","15.0.0-canary.215506426.0":"2022-11-05T01:07:18.996Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:05:22.526Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:25:49.871Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:14:40.019Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:29:10.645Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:57:49.332Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:19:21.362Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:36:49.600Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:54:32.635Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:04:10.437Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:07:27.373Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:37:09.674Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:37:53.743Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:13:07.972Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:46:31.161Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:59:54.905Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:28:22.235Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:29:45.755Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:03:29.880Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:31:30.856Z","15.0.0-canary.b01136063.0":"2022-11-16T00:17:14.989Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:14:40.789Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:16:58.705Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:19:06.139Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:57:19.749Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:01:24.288Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:06:42.852Z","15.0.0-canary.40b18d043.0":"2022-11-16T23:00:07.952Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:10:16.670Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:01:31.955Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:02:36.303Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:56:19.716Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:06:02.143Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:22:28.111Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:17:43.392Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:02:26.041Z","15.0.0-canary.d58410453.0":"2022-11-18T19:26:32.894Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:46:32.096Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:55:21.232Z","15.0.0-canary.96f472604.0":"2022-11-21T12:54:13.567Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:03:54.232Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:55:29.328Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:02:11.188Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:32:19.692Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:17:57.609Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:40:50.472Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:58:12.958Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:17:20.888Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:15:08.538Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:48:48.912Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:13:07.220Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:35:09.405Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:50:17.151Z","15.0.0-canary.65c411674.0":"2022-11-29T17:40:07.729Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:15:41.597Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:09:17.777Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:30:44.504Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:55:51.359Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:25:41.937Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:03:02.070Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:02:29.822Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:08:26.019Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:28:07.119Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:44:16.333Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:27:00.971Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:53:20.315Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:04:40.168Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:42:50.155Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:45:56.696Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:32:17.638Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:47:40.702Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:03:48.342Z","15.0.0-canary.817002c29.0":"2022-12-13T21:55:38.921Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:30:25.474Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:20:24.222Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:46:23.473Z","15.0.0-canary.34767110.0":"2022-12-14T17:19:55.782Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:27:07.519Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:10:06.626Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:28:40.443Z","15.0.0-canary.604264203.0":"2022-12-21T21:42:15.932Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:26:43.280Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:13:45.805Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:06:41.989Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:05:29.559Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:53:09.742Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:03:45.420Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:42:27.759Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:07:28.812Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:49:11.915Z","15.0.0-canary.af490a848.0":"2023-01-03T15:59:30.074Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:40:24.013Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:14:40.904Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:33:52.786Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:19:20.324Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:38:46.795Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:37:16.979Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:04:21.730Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:10:56.206Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:23:14.968Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:17:32.758Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:44:38.347Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:25:29.745Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:29:43.727Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:13:11.880Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:20:06.406Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:19:23.343Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:13:50.398Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:55:46.437Z","15.0.0-canary.202823f54.0":"2023-01-11T21:37:16.822Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:57:24.024Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:37:55.555Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:26:07.636Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:51:15.446Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:40:43.898Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:31:19.117Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:36:15.815Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:28:24.583Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:45:01.457Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:31:37.054Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:45:45.104Z","15.0.0-canary.15b221540.0":"2023-02-01T17:54:08.316Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:59:59.974Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:35:51.393Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:39:57.670Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:10:31.831Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:16:02.833Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:25:26.607Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:11:06.598Z","15.0.0-canary.de38de758.0":"2023-02-09T15:43:56.782Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:04:36.306Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:51:18.314Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:59:38.556Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:35:39.913Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:21:15.895Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:43:02.501Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:37:19.726Z","15.0.0-canary.f32339937.0":"2023-03-06T15:17:14.734Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:28:56.906Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:43:19.485Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:44:22.984Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:27:49.116Z","15.0.0-canary.274610c77.0":"2023-03-09T15:00:20.145Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:54:07.688Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:19:50.974Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:46:27.470Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:48:45.362Z","15.0.0-canary.de5224633.0":"2023-03-09T23:57:14.314Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:09:22.679Z","15.0.0-canary.23073a303.0":"2023-03-10T14:16:30.414Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:48:55.890Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:49:29.268Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:26:24.659Z","15.0.0-canary.82554d770.0":"2023-03-11T01:38:39.646Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:40:28.577Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:45:41.106Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:49:06.054Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:04:25.350Z","15.0.0-canary.112715df5.0":"2023-03-13T18:40:45.069Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:33:04.683Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:40:38.045Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:44:52.443Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:54:09.586Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:17:53.181Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:48:48.985Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:18:22.704Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:21:37.374Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:25:31.284Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:28:16.488Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:28:54.671Z","15.0.0-canary.87809c710.0":"2023-03-14T18:44:54.692Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:49:13.836Z","15.0.0-canary.419b23cc6.0":"2023-03-14T19:00:17.234Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:14:57.908Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:12:45.013Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:43:03.176Z","15.0.0-canary.39e473690.0":"2023-03-21T17:52:58.930Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:59:57.174Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:51:37.931Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:36:17.147Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:50:27.024Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:42:30.908Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:09:15.886Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:55:11.664Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:56:55.542Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:31:43.181Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:06:07.640Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:43:53.771Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:39:55.696Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:41:23.862Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:02:16.733Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:52:21.375Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:23:03.513Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:23:04.913Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:32:48.924Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:35:12.181Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:43:13.948Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:11:01.503Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:58:07.862Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:27:46.897Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:40:44.113Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:24:40.534Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:31:54.450Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:01:26.337Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:55:27.108Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:27:22.418Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:44:22.660Z","15.0.0-canary.446734f27.0":"2023-05-30T21:49:37.370Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:19:56.133Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:15:28.929Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:19:58.316Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:07:33.106Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:39:42.628Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:05:16.156Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:58:48.026Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:18:12.078Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:25:15.273Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:15:20.155Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:27:23.068Z","15.0.0-canary.83355c322.0":"2023-07-10T15:07:12.137Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:23:02.541Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:49:58.489Z","15.0.0-canary.02702296e.0":"2023-08-25T12:06:42.673Z","15.0.0-canary.872b65832.0":"2023-08-30T12:15:07.222Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:08:25.120Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:41:14.755Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:06:51.314Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:46:49.380Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:19:29.411Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:13:25.031Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:47:41.149Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:16:39.537Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:08:18.715Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:24:39.366Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:45:46.996Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:38:12.041Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:02:04.780Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:53:42.170Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:10:50.623Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:59:15.944Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:40.774Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:19:07.709Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:45.327Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:59.397Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:42.170Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:18:12.562Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:31.383Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:14:14.380Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:07:06.893Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:41:47.446Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:01:01.968Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:36.299Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:40.682Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:48.450Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:57:06.329Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:57:31.397Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:24.930Z"},"readmeFilename":"","homepage":"https://github.com/material-components/material-components-web#readme"}